Composant de connexion dans le Kit de ressources Microsoft Graph
Un composant De connexion est un contrôle de bouton et de menu volant pour faciliter l’authentification Plateforme d'identités Microsoft. Il fournit deux états :
- Lorsque l’utilisateur n’est pas connecté, le contrôle est un simple bouton pour lancer le processus de connexion.
- Lorsque l’utilisateur est connecté, le contrôle affiche le nom d’utilisateur connecté, l’image de profil et l’e-mail actuels. Lorsque vous cliquez dessus, un menu volant est ouvert avec une commande pour vous déconnecter.
Vous pouvez également autoriser la connexion avec plusieurs comptes. Cela répertorie tous vos comptes connectés et vous donne la possibilité de vous connecter avec d’autres nouveaux comptes.
Exemple
L’exemple suivant montre le mgt-login composant avec un utilisateur connecté.
Utilisation du contrôle sans fournisseur d’authentification
Le composant fonctionne avec un fournisseur et Microsoft Graph prête à l’emploi. Toutefois, si vous souhaitez fournir votre propre logique et votre propre authentification, vous pouvez utiliser la userDetails propriété pour définir les détails de l’utilisateur connecté.
| Attribut | Propriété | Description |
|---|---|---|
| login-view | Loginview | Détermine le style d’affichage à appliquer à l’utilisateur connecté. Les options sont « full », « compact », « avatar » et la valeur par défaut est « full » |
| show-presence | showPresence | Détermine si l’indicateur de présence de l’utilisateur actuel sur le mgt-person contrôle est affiché avec un utilisateur authentifié. La valeur par défaut est false. |
| détails de l’utilisateur | userDetails | Permet de définir les détails de l’objet utilisateur que le composant affichera. |
L’exemple suivant définit les détails de la personne.
let loginControl = document.getElementById("myLoginControl");
loginControl.userDetails = {
displayName: "Nikola Metulev",
mail: "nikola@contoso.com",
personImage: "url to the image",
};
Le paramètre userDetails sur null passe à l’état déconnecté.
Propriétés personnalisées CSS
Le mgt-login composant définit les propriétés personnalisées CSS suivantes.
<mgt-login class="login"></mgt-login>
.login {
--login-signed-out-button-background: red;
--login-signed-out-button-hover-background: orange;
--login-signed-out-button-text-color: purple;
--login-signed-in-background: red;
--login-signed-in-hover-background: green;
--login-button-padding: 5px;
--login-popup-background-color: blue;
--login-popup-text-color: brown;
--login-popup-command-button-background-color: orange;
--login-popup-padding: 8px;
--login-add-account-button-text-color: yellow;
--login-add-account-button-background-color: red;
--login-add-account-button-hover-background-color: purple;
--login-command-button-background-color: orange;
--login-command-button-hover-background-color: purple;
--login-command-button-text-color: black;
--login-person-avatar-size: 60px;
/** person component tokens **/
--person-line1-text-color: whitesmoke;
--person-line2-text-color: white;
--person-background-color: blue;
}
Pour en savoir plus, consultez composants de style.
Événements
Les événements suivants sont déclenchés à partir du contrôle .
| Événement | Quand est-il émis | Données personnalisées | Annulable | Bulles | Fonctionne avec un modèle personnalisé |
|---|---|---|---|---|---|
loginInitiated |
L’utilisateur a cliqué sur le bouton de connexion pour démarrer le processus de connexion | Aucun | Oui | Non | Oui |
loginCompleted |
Le processus de connexion a réussi et l’utilisateur est maintenant connecté | Aucune | Non | Non | Oui |
loginFailed |
L’utilisateur a annulé le processus de connexion ou n’a pas pu se connecter | Aucune | Non | Non | Oui |
logoutInitiated |
L’utilisateur a commencé à se déconnecter | Aucun | Oui | Non | Oui |
logoutCompleted |
L’utilisateur s’est déconnecté | Aucune | Non | Non | Oui |
Utilisez les loginInitiated événements et logoutInitiated pour gérer la connexion.
Pour plus d’informations sur la gestion des événements, consultez événements.
Modèles
Le mgt-login composant prend en charge plusieurs modèles qui vous permettent de remplacer certaines parties du composant. Pour spécifier un modèle, incluez un <template> élément à l’intérieur d’un composant et définissez la data-type valeur sur l’une des valeurs répertoriées dans le tableau suivant.
| Type de données | Contexte de données | Description |
|---|---|---|
| sign-in-button-content |
personDetails: objet person, personImage: chaîne d’image de personne |
Modèle utilisé pour afficher le contenu dans le bouton lorsque l’utilisateur est connecté. |
| out-out-button-content | null | Modèle utilisé pour afficher le contenu dans le bouton lorsque l’utilisateur n’est pas connecté. |
| flyout-commands |
handleSignOut: déconnexion de la fonction |
Modèle utilisé pour afficher les commandes dans le menu volant |
| flyout-person-details |
personDetails: objet person, personImage : chaîne d’image de personne |
Modèle utilisé pour afficher les détails de la personne dans le menu volant. |
Autorisations de Microsoft Graph
Ce composant utilise les API Microsoft Graph suivantes. Pour chacune des demandes d’API, l’une des autorisations répertoriées est requise.
| Configuration | Autorisation | API |
|---|---|---|
| Valeur par défaut. | User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All | /users/me/ |
| Valeur par défaut. | User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /users/me//photo/$value |
Sous-composants
Le mgt-login composant se compose d’un ou plusieurs sous-composants qui peuvent nécessiter d’autres autorisations que celles répertoriées précédemment. Pour plus d’informations, consultez la documentation de chaque sous-composant : mgt-person.
Authentification
Le contrôle de connexion utilise le fournisseur d’authentification global décrit dans la documentation sur l’authentification.
Cache
Ce composant utilise le composant Person pour afficher l’utilisateur et hérite de toute la configuration du cache de celui-ci.
Étendre pour plus de contrôle
Pour les scénarios plus complexes ou une expérience utilisateur vraiment personnalisée, ce composant expose plusieurs protected render* méthodes de remplacement dans les extensions de composant.
| Méthode | Description |
|---|---|
| renderButton | Affiche le chrome du bouton. |
| renderButtonContent | Restitue le contenu du bouton. |
| renderSignedInButtonContent | Affiche le contenu du bouton lorsque l’utilisateur est connecté. |
| renderSignedOutButtonContent | Affichez le contenu du bouton lorsque l’utilisateur n’est pas connecté. |
| renderFlyout | Affiche le chrome du menu volant. |
| renderFlyoutContent | Affiche le contenu du menu volant. |
| renderFlyoutPersonDetails | Affiche les détails de la personne volante. |
| renderFlyoutCommands | Affiche les commandes de menu volant. |
Apportez votre propre menu volant
Il est possible d’utiliser votre propre composant de menu volant à la place du composant intégré, en remplaçant la renderFlyout() méthode et en fournissant le nouveau menu volant.
Dans ce cas, assurez-vous que le composant de connexion continue de fonctionner comme prévu en remplaçant les protected méthodes d’affichage du menu volant pour mettre à jour la visibilité de votre autre menu volant.
| Méthode | Description |
|---|---|
| hideFlyout | Ignore le menu volant. |
| showFlyout | Affiche le menu volant. |
| toggleFlyout | Active l’état du menu volant. |
Localisation
Le contrôle expose les variables suivantes qui peuvent être localisées. Pour plus d’informations, consultez Localisation des composants.
| Nom de la chaîne | Valeur par défaut |
|---|---|
| signInLinkSubtitle | Sign In |
| signOutLinkSubtitle | Sign Out |
| signInWithADifferentAccount | Sign in with a different account |