Construire une application angulaire à l'aide de Sitefinity Headless, partie III

Dans la troisième partie de notre didacticiel, apprenez à configurer l'authentification par défaut pour une application angulaire qui utilise les services Sitefinity CMS OData à l'aide du SDK OData facile à utiliser de Sitefinity.

Remarque : Ceci est le troisième article de la série sur la création d'une application angulaire avec les capacités sans tête de Sitefinity. Vous pouvez vérifier partie 1 et partie 2 ici.

Dans cet article de blog, nous allons nous appuyer sur l'exemple Quantum Headless précédent et ajouter un nouveau fournisseur d'authentification à l'application. À cette fin, nous apporterons également des modifications et refactoriserons notre implémentation précédente. Mais d'abord…

Pourquoi faisons-nous cela? Depuis que Sitefinity DX 14.0 a introduit une authentification légère et facile à configurer, appelée "Par défaut". L'idée est de rendre obsolète SimpleWebToken (SWT et OpenID), qui reposent tous deux sur un fournisseur d'identité interne fourni avec Sitefinity.

Plus d'informations sur les deux modes d'authentification que nous utilisons dans l'application et dans Sitefinity : "OpenID" et "Par défaut" peut être trouvé ici.

Configuration de l'authentification dans Sitefinity

Commençons à implémenter notre nouveau fournisseur d'authentification, qui utilisera l'authentification "par défaut" dans Sitefinity. Pour commencer, nous configurons cette configuration en suivant les étapes ci-dessous :

1. Accédez à Administration -> Paramètres -> Avancé -> Sécurité.

2. Sous AccessControlAllowOriginentrez l'URL du serveur de développement de QuantumHeadlessApp (qui est par défaut http://localhost:4200) ou *.

3. Accédez à Administration -> Paramètres -> Avancé -> Authentification -> OAuthServer -> Clients autorisés.

4. Cliquez sur Créer nouveau. Pour ClientId saisissez sitefinity, laissez Secret vide.

5. Sous RedirectUrlscliquez sur le bouton Créer un nouveau. Saisissez http://localhost:4200/auth/oauth/sign-in

REMARQUE : après avoir modifié les paramètres d'authentification, vous devez redémarrer Sitefinity. Si vous travaillez avec l'un de nos bacs à sable, pour redémarrer le site, accédez à Administration -> Modules et services et désactivez le module Sécurité Web.

Mise en œuvre

Nous sommes maintenant prêts à continuer. avec l'application Angular. Assurez-vous de consulter les deux blogs précédents (Partie 1 et Partie 2) sur l'utilisation de Sitefinity Headless avec Angular. Dans ces articles, nous développons l'application, utilisons le Sitefinity JavaScript SDK pour les opérations de lecture et d'écriture et ajoutons également une authentification à l'application. Dans cet exemple, nous allons étendre le code de ce repo avec un nouveau fournisseur d'authentification qui utilise l'authentification par défaut dans Sitefinity.

Ok, jusqu'à présent, nous avons utilisé le OidcProvider . Maintenant, nous voulons en ajouter un autre et l'utiliser à la place. Appelons oauth.provider.ts. Il implémente l'interface AuthProvider comme OidcProvideret toutes les méthodes requises par celui-ci. Comme il utilise les mêmes protocoles d'authentification, nous créons un objet de paramètres avec des propriétés similaires.

Passons maintenant en revue le code du fournisseur. La méthode setToken renvoie le jeton d'authentification. Les méthodes signIn et signOut redirigent simplement vers une route spécifique dans Sitefinity responsable de l'émission du jeton et de sa désactivation.

La méthode isLoggedIn vérifie si un jeton est disponible et s'il est toujours valide.

Vous l'avez probablement déjà compris, mais nous avons besoin d'un mécanisme pour distinguer les deux fournisseurs et, selon les paramètres de Sitefinity, sélectionner le bon. Par conséquent, nous avons introduit plusieurs méthodes supplémentaires dans l'interface AuthProvider :

• getPriority renvoie un nombre, signifiant la priorité dans laquelle le fournisseur est choisi. Étant donné qu'à partir de 14.0, l'authentification par défaut est celle recommandée, nous avons défini une priorité plus élevée pour le nouveau fournisseur Oauth.
• La méthode getName est utilisée uniquement pour renvoyer un identifiant de chaîne unique pour chaque fournisseur.
• La méthode isAvailable consiste à vérifier la disponibilité de chaque fournisseur dans Sitefinity en effectuant un appel de service vers un itinéraire spécifique (différent pour chaque fournisseur) et en renvoyant un booléen.

Comment le service d'authentification choisit-il le fournisseur ?

Vous remarquerez que nous avons modifié la méthode getProvider . Ce qu'il fait maintenant, c'est trier les fournisseurs par priorité, puis il revient au fournisseur disponible, en commençant par celui qui a la priorité la plus élevée. Ensuite, nous initialisons le fournisseur choisi.

Comment le nouveau fournisseur nous connecte-t-il à Sitefinity ?

Lors de la connexion, nous sommes redirigés vers un itinéraire spécifique pour autorisation. Dans l'URL, nous spécifions le return_uriqui est le composant sur lequel nous voulons atterrir après la connexion, ainsi que la route sur laquelle nous voulons être redirigés vers – le returnUrl. Dans notre cas, le return_uri est le composant oauth-sign-in-redirect.

Après une connexion réussie, nous sommes redirigés vers ce composant. Dans celui-ci, nous obtenons les segments de l'URL, où la valeur de l'un d'eux est le jeton d'accès. Nous appelons ensuite le fournisseur d'authentification et définissons le jeton. Après cela, l'utilisateur est redirigé vers la route, spécifiée dans returnUrl.

Nous espérons que vous avez trouvé ce didacticiel, ainsi que nos deux didacticiels précédents, utiles. Nous encourageons tout développeur curieux de créer une application Angular à lire les trois (ICYMI : liens vers partie 1 et partie 2).

Si vous avez des questions, n'hésitez pas à nous contacter. une ligne dans les commentaires ci-dessous. Si vous débutez sur Sitefinity, vous pouvez en savoir plus ici ou vous lancer et commencer votre essai gratuit de 30 jours dès aujourd'hui. Nous avons également traité le sujet sans tête dans notre cours gratuit sur les fondements du développement de Sitefinityalors n'hésitez pas à le consulter.