SSO à authentification unique angulaire
Authentification unique angulaire JWT (SSO) La solution de miniOrange fournit un accès sécurisé par authentification unique à l'application Angular à l'aide d'un ensemble unique d'informations de connexion. Cela se fait à l'aide de jetons JSON Web Token (JWT) et peut être facilement intégré à Angular construit dans n'importe quel framework ou langage. Vous pouvez activer la connexion sociale pour que vos utilisateurs obtiennent un accès sécurisé aux applications en utilisant l'un de leurs fournisseurs sociaux existants tels que Facebook, Twitter, Google ou LinkedIn.
Avec miniOrange Angular SSO, vous obtenez :
- Expérience de connexion utilisateur transparente.
- Personnalisations infinies de vos formulaires et pages de connexion.
- Intégration simplifiée des clients ou des utilisateurs.
Suivez le guide étape par étape ci-dessous pour l'authentification unique angulaire (SSO) :
1. Configurer Angular dans miniOrange :
- Connectez-vous à la console d'administration miniOrange.
- Allez dans Apps et cliquez sur Ajouter une application .
- In Choisissez l'application, Sélectionner JWT à partir de la liste déroulante du type d’application.
- À l'étape suivante, recherchez Angulaire application de la liste. Si votre candidature n'est pas trouvée, recherchez Application JWT et vous pouvez configurer votre application.
-
Vous pouvez configurer les détails suivants dans l'application :
| Nom du profil |
Entrer le Nom du profil (c'est-à-dire le nom de cette application) |
| URL de redirection |
Entrer le URL de redirection (c'est-à-dire le point de terminaison où vous souhaitez envoyer/publier votre jeton JWT). Vous pouvez ajouter plusieurs URL de redirection en les séparant par un « ; ». Par exemple : abc.com;xyz.com
|
| identité du client |
Le identité du client est affiché dans le champ ci-dessous. Cliquez sur l'icône du presse-papiers pour le copier. |
| Secret client |
Secret client est masqué par défaut. Cliquez sur l'icône en forme d'œil pour l'afficher et utilisez l'icône du presse-papiers pour le copier. Ce paramètre est utilisé dans l'algorithme de signature HS256 pour générer la signature.
|
| Description (facultatif) |
Ajoutez une description si nécessaire.
|
- Cliquez à nouveau Enregistrer.
- Vous allez être redirigé vers Politiques .
- Cliquez sur le Attribuer un groupe bouton. Un nouveau Configurer l'affectation de groupe La fenêtre modale s'ouvrira.
- Groupe d'affectation : Sélectionnez les groupes que vous souhaitez associer à l'application. Vous pouvez sélectionner jusqu'à 20 groupes à la fois.
- Si vous devez créer un nouveau groupe, cliquez sur Ajouter un nouveau groupe .
- Saisissez le nom du groupe et cliquez sur Créer un groupe.
- Cliquez sur Suivant.
- Attribuer des politiques : Ajoutez les politiques requises aux groupes sélectionnés. Saisissez les informations suivantes :
- Premier facteur : Sélectionnez la méthode de connexion dans le menu déroulant.
- Si vous sélectionnez Mot de passe comme méthode de connexion, vous pouvez activer Authentification à deux facteurs (MFA) et Authentification adaptative, si besoin.
- Si vous sélectionnez Sans mot de passe comme méthode de connexion, vous pouvez activer Authentification à deux facteurs (MFA) si besoin.
- Si vous sélectionnez Lien magique Les options suivantes apparaissent comme méthode de connexion :
- Autoriser la connexion depuis d'autres adresses IP : Une fois activée, cette option permet aux utilisateurs d'ouvrir le lien magique depuis une adresse IP différente de celle à partir de laquelle la demande a été effectuée.
- Autoriser la connexion depuis d'autres appareils : Une fois activée, cette option permet aux utilisateurs d'ouvrir le Magic Link sur un appareil différent de celui utilisé pour le demander.
- Cliquez sur EnregistrerDes politiques seront élaborées pour tous les groupes sélectionnés.
- Vous verrez la politique répertoriée une fois qu'elle aura été ajoutée avec succès.
- Cliquez sur Avancé languette.
- Saisissez les informations suivantes si nécessaire :
| Jeton d'accès |
Saisissez le jeton d'accès qui sera envoyé à votre URL de redirection après la connexion d'un utilisateur. Ce jeton permet à votre application de savoir que l'utilisateur est autorisé à accéder à certaines fonctionnalités. |
| Expiration du jeton d'identification (en minutes) |
Définissez la durée de validité (en minutes) du jeton d'identification. Passé ce délai, l'utilisateur devra se reconnecter pour obtenir un nouveau jeton. |
| Sujet |
Choisissez les informations, comme l'adresse e-mail de l'utilisateur, qui seront utilisées pour l'identifier dans le jeton. Cela permet à votre application de savoir quel utilisateur est connecté. |
| Algorithme de signature |
Sélectionnez votre algorithme de signature dans la liste déroulante. |
| L'URL de déconnexion de votre application |
Saisissez l'adresse Web vers laquelle les utilisateurs doivent être envoyés après leur déconnexion. |
| Activer l'identité partagée |
Cette fonctionnalité vous permet de contrôler si une application spécifique est accessible ou non à un utilisateur partagé. |
- Algorithmes de signature pour JWT
RSA-SHA256
- Asymétrique, utilise un ensemble de clés privées et publiques pour générer et valider la signature incluse dans le jeton JWT.
- La clé privée est utilisée pour générer la signature côté IDP.
- La clé publique est utilisée pour vérifier la signature côté SP.
- Nous fournissons la clé publique pour cela.
HS256
- Symétrique, utilise la même clé secrète pour générer et valider la signature
- La clé secrète dans ce cas est configurable depuis la page de configuration de l'application.
-
Basculer vers Options de connexion languette.
| Fournisseur d'identité principal |
Sélectionnez la source d'identification par défaut dans la liste déroulante de l'application. Si cette option n'est pas sélectionnée, les utilisateurs verront l'écran de connexion par défaut et pourront choisir leur propre fournisseur d'identité. [Choisissez miniOrange dans ce cas.]
|
| Forcer l'authentification |
Si vous activez cette option, les utilisateurs devront se connecter à chaque fois, même si leur session existe déjà. |
| Activer le mappage des utilisateurs |
Activez cette option si vous souhaitez que l'application indique quel utilisateur est connecté lorsqu'elle répond. |
| Afficher sur le tableau de bord de l'utilisateur final |
Activez cette option si vous souhaitez afficher cette application dans le tableau de bord de l'utilisateur final. |
- Accédez à Endpoints et copiez les détails suivants :
-
URL d'authentification unique :
- Cette URL est utilisée pour lancer l'authentification de l'utilisateur afin d'obtenir le jeton JWT.
- Prenez redirect_uri comme l'un des paramètres de requête.
- Après une authentification réussie du côté de l'IDP, une session utilisateur active est créée dans l'IDP et l'utilisateur est redirigé vers redirect_uri avec le jeton JWT.
-
-
URL de déconnexion unique :
- Cette URL est utilisée pour déconnecter l'utilisateur de l'IDP en supprimant la session utilisateur active.
- Prenez redirect_uri comme l'un des paramètres de requête.
- Après avoir supprimé la session utilisateur active, l'IDP redirige l'utilisateur vers redirect_uri.
-
URL de réponse pour la déconnexion initiée par l'IdP :
- Cette URL est utilisée pour lancer la déconnexion au cas où la connexion de l'utilisateur JWT aurait été initiée par IDP [Utilisateur connecté au tableau de bord
d'abord, puis initialisé la connexion à l'application à partir du tableau de bord.]
- Après avoir déconnecté l'utilisateur de l'IDP, l'utilisateur est redirigé vers la page de connexion du tableau de bord IDP.
2. Configurer SSO dans Angular
- Sélectionnez un composant qui sera chargé de vérifier le jeton JWT, de préférence le composant de connexion.
- Importer le JWTBuilder classe du connecteur jwt. Depuis le chemin vers lequel il a été déplacé à l’étape 1 des prérequis.
import { JWTBuilder } from './path/to/jwt-connector';
- Vous pouvez ajouter un bouton sur votre écran de connexion pour rediriger vers l'URL SSO. Vous pouvez obtenir cette URL SSO à partir de l’étape 1 de Configurer votre application dans miniOrange.
<button> onClick={sso}>Single Sign On</button>
function sso() {
window.location.href = window.location.href = ‘
’; //
example:https://login.xecurify.com/moas/broker/login/jwt/277898?client_id=AbIVW8A
MNTBzg2o7&redirect_uri=http://localhost:3000/login;
}
- En cliquant sur le Bouton SSO l'utilisateur sera redirigé vers le portail miniOrange pour authentification.
- Le jeton JWT est ensuite renvoyé à votre application vers l'URL de redirection que vous avez définie lors de l'ajout de votre application dans miniOrange. Dans les étapes suivantes, nous allons vérifier ce jeton et récupérer les détails de l'utilisateur.
- Vous devez ajouter le certificat x509 que vous pouvez obtenir à l'étape 1 'configurer votre application dans miniOrange'.
- Maintenant, si le jeton est vérifié, la charge utile composée des détails de l'utilisateur peut être enregistrée dans le stockage local ou sérialisée dans une classe d'utilisateur et l'utilisateur désormais vérifié peut être redirigé vers l'écran d'accueil de votre application.
3. Tester la configuration SSO
Testez la connexion SSO à votre compte Angular avec miniOrange IdP :
Références externes
