Fermer

mai 23, 2019

Construire des applications angulaires avec authentification exploitant Sitefinity


Dans la deuxième partie de notre didacticiel, découvrez comment configurer l'authentification pour une application angulaire utilisant les services Sitefinity CMS OData à l'aide du SDK OData facile à utiliser de Sitefinity.

Vous connaissez probablement déjà notre précédent article de blog. à propos de créer une application angulaire à l’aide des fonctionnalités sans tête de CMS Sitefinity . Si tel est le cas, vous savez maintenant comment utiliser le SDK Sitefinity OData pour les opérations de lecture, pour utiliser les données de Sitefinity et les afficher dans une application Angular.

Dans cet article de blog, nous allons montrer comment créer une authentification pour votre application Angular, en utilisant les fonctionnalités d'authentification Sitefinity. Vous apprendrez également à effectuer des opérations d'écriture via le SDK en créant des commentaires, des témoignages et en téléchargeant des images. Vous utiliserez le QuantumHeadlessAngularApp que vous avez créé précédemment. Vous pouvez également utiliser une version prête de cette application, située dans le rapport GitHub .

Voici un aperçu de ce que vous devez faire pour créer une authentification pour votre application.

Définir les autorisations du service OData

Une fois que vous avez créé un site Web Sitefinity, vous pouvez accéder à tous les types de contenu via le service Default situé sous Administration -> WebServices . Pour accéder à la page de référence de l'API pour le service, cliquez sur le lien Utiliser dans votre application à droite. Bien entendu, selon votre scénario, vous pouvez utiliser votre propre service personnalisé, différent de celui par défaut.

Par défaut, les services Web Sitefinity OData sont sécurisés et leurs autorisations d'accès sont définies sur Administrateurs uniquement. Les autres options de permission disponibles sont Everyone et Authenticated . Comme on peut s'y attendre, l'option Authenticated fournit des autorisations de lecture et d'écriture uniquement aux utilisateurs authentifiés. D'autre part, l'option Everyone fournit des autorisations de lecture à tout le monde et des autorisations d'écriture uniquement aux utilisateurs authentifiés.

Étant donné que votre application doit être visible par tous, mais que les commentaires et les témoignages ne doivent être créés que par les utilisateurs de Sitefinity, vous devez passer à l'option Everyone de votre service OData.

Configurer l'authentification

Par défaut, Sitefinity CMS utilise une identification basée sur les revendications. Dans ce scénario, l'identité des utilisateurs est authentifiée par le service de jeton de sécurité (STS). Le STS émet un jeton contenant les revendications de l'utilisateur sur son identité. Lorsque vous demandez une ressource protégée à Sitefinity via HTTP, vous devez obtenir un jeton d'authentification et le transmettre en tant qu'en-tête d'autorisation. Puisque vous utilisez le SDK OData, vous devez transmettre le jeton d’authentification à une propriété d’authentification désignée de l’instance SDK Sitefinity.

En suivant les instructions de la documentation vous utilisez la bibliothèque oidc-client pour gérer le contexte de sécurité global de l'application. Cela inclut la connexion, la déconnexion, l'émission d'un jeton d'authentification à partir du STS et la fourniture d'informations d'identité sur l'utilisateur actuel. Les applications ont généralement plusieurs fournisseurs, mais dans cet exemple, vous ne travaillerez qu'avec Sitefinity STS en tant que fournisseur d'identité.

Allons-y!

Conditions préalables

  1. Vous savez comment créer une application angulaire dans Sitefinity.
    Pour plus de détails, voir la première partie de ce tutoriel .
  2. Vous avez téléchargé l'application Angular depuis GitHub (branche edit ).
  3. Vous pouvez éventuellement vous familiariser avec comment sécuriser des applications angulaires .

Configuration initiale

Ajoutez le oidc-client en tant que dépendance npm et installez-le avec:

 npm install oidc-client --save

Configuration de l'authentification

L’authentification de votre application consiste essentiellement en:

  • Protection d’authentification
    Responsable de l’interception des demandes d’itinéraire et de la vérification de l’identité de l’utilisateur
  • Fournisseur d’authentification
    Fournit plusieurs méthodes d’authentification à partir du . ] oidc-client
  • Service d'authentification
    Initialise le fournisseur et gère le processus d'authentification

Commençons par l'implémentation du fournisseur. La bibliothèque oidc-client fournit une classe UserManager avec une API pour la connexion, la déconnexion, la gestion des revendications utilisateur renvoyées par le fournisseur OIDC et la gestion des jetons d'accès. La classe UserManager fournit également une instance de l'objet User . L'objet User encapsule les informations côté client concernant un utilisateur connecté.

Pour utiliser ces classes, vous devez créer votre propre fournisseur oidc avec une propriété de gestionnaire de type UserManager . Les méthodes de fournisseur appellent celles de l'API UserManager . Pour configurer le UserManager vous devez d'abord configurer la classe avec un objet paramètres en tant que paramètre. L'objet settings a les propriétés suivantes:

  • Authority
    L'URL du fournisseur OIDC / OAuth2, qui dans Sitefinity est Sitefinity / Authenticate / OpenID.
  • client_id
    Identificateur d'application client tel qu'enregistré auprès du fournisseur OIDC / OAuth2. Dans ce cas, vous utiliserez "sitefinity", qui est le client prêt à l'emploi permettant d'interagir avec Sitefinity STS via le flux de clients implicite.
  • response_type
    La réponse que vous souhaitez obtenir du fournisseur, que vous souhaitez dans ce cas recevoir comme jeton.
  • Portée
    La demande portée du fournisseur. Vous devez pouvoir accéder au profil utilisateur.
  • AutomaticSilentRenew
    Valeur booléenne indiquant si un renouvellement automatique du jeton est nécessaire. Au cours du processus d’authentification, un cookie et un jeton d’authentification sont envoyés au client. Généralement, le jeton expire avant le cookie, ce qui nécessite le renouvellement du jeton avec une autre demande adressée au STS. Cela peut arriver pendant l'utilisation du système. Pour éviter toute perte de données pour l'utilisateur, la demande de jeton suivante peut être exécutée en mode silencieux, vous devez donc définir cette propriété sur true pour indiquer que vous souhaitez renouveler le jeton en mode silencieux.
  • post_logout_redirect_uri
    OIDC / OAuth2 post -logout URI de redirection. C’est là que vous voulez rediriger les utilisateurs après la déconnexion, ce qui est dans ce cas la route de déconnexion-redirect-composant.co. .
  • redirect_uri
    L’URI de redirection de votre L’application client doit recevoir une réponse du fournisseur OIDC / OAuth2. L'URI de redirection est l'endroit où vous voulez que vos utilisateurs aillent après la connexion, qui dans ce cas est la route du log-in-redirect.component.ts .
  • silent_redirect_uri
    The URL de la page contenant le code qui gère le renouvellement en mode silencieux. Ceci est une page HTML (silent-renew.html).

Il existe deux façons de connecter des utilisateurs: via une redirection vers la page de connexion du serveur d'identité ou en mode silencieux.

  1. La première authentification de l'utilisateur est réalisée avec une redirection vers la page de connexion, où l'utilisateur est invité à entrer ses informations d'identification. Par conséquent, un jeton d'authentification est émis via la méthode signatureRedirect de la classe UserManager . Vous transmettez l'URL actuelle à la propriété signinRedirect pour vous assurer que l'utilisateur revient à la même page après s'être connecté.
        

     private   authenticateWithRedirects  ( returnUrl :   string ) :  observée (19459044) < >  ] {
      const  signIn  =   ce .  manager .  signinRedirect  ( { de données
     
     Le meilleur outil 2023 pour ta croissance Instagram ! 
     
     
       
     
    Source link