Composant de connexion dans microsoft Graph Shared Computer Toolkit

Un composant de connexion est un bouton et un contrôle volant pour faciliter l’authentification Plateforme d'identités Microsoft utilisateur. Il fournit deux états :

  • Lorsque l’utilisateur n’est pas signé, le contrôle est un bouton simple pour lancer le processus de signature.
  • Lorsque l’utilisateur est signé, le contrôle affiche le nom d’utilisateur, l’image de profil et le courrier électronique actuellement signés. Lorsque vous cliquez sur ce bouton, un volant s’ouvre avec une commande de se signer.

Exemple

L’exemple suivant montre le mgt-login composant avec un utilisateur signé.

Ouvrir cet exemple dans mgt.dev

Utilisation du contrôle sans fournisseur d’authentification

Le composant fonctionne avec un fournisseur et Microsoft Graph out of the box. Toutefois, si vous souhaitez fournir votre propre logique et authentification, userDetails vous pouvez utiliser la propriété pour définir les détails de l’utilisateur.

Attribut Propriété Description
user-details userDetails Définissez l’objet utilisateur qui sera affiché sur le contrôle.

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'
}

Le userDetails paramètre à null définir passe à l’état de signature.

Utilisez les événements loginInitiated et les logoutInitiated événements pour gérer la signature et la sortie.

Propriétés personnalisées CSS

Le mgt-login composant définit les propriétés personnalisées CSS suivantes.

mgt-login {
  --font-size: 14px;
  --font-weight: 600;
  --weith: '100%';
  --height: '100%';
  --margin: 0;
  --padding: 12px 20px;
  --button-color: #201f1e;
  --button-color--hover: var(--theme-primary-color);
  --button-background-color: transparent;
  --button-background-color--hover: #edebe9;
  --popup-background-color: white;
  --popup-command-font-size: 12px;
  --popup-color: #201f1e;
}

Pour en savoir plus, consultez les 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é. Aucun Non Non Oui
loginFailed L’utilisateur a annulé le processus de connexion ou n’a pas pu se connecter Aucun Non Non Oui
logoutInitiated L’utilisateur a commencé à se déconnecter Aucun Oui Non Oui
logoutCompleted L’utilisateur s’est signé Aucun Non Non Oui

Pour plus d’informations sur la gestion des événements, voir les é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, <template> data-type incluez un élément à l’intérieur d’un composant et définissez la valeur sur l’une des valeurs répertoriées dans le tableau suivant.

Type de données Contexte de données Description
signed-in-button-content personDetails: person object, personImage: person image string Modèle utilisé pour restituer le contenu dans le bouton lorsque l’utilisateur est signé.
signed-out-button-content null Modèle utilisé pour restituer le contenu dans le bouton lorsque l’utilisateur n’est pas signé.
flyout-commands handleSignOut: sign out function Modèle utilisé pour restituer les commandes dans le volant
flyout-person-details personDetails: person object, personImage: person image string Modèle utilisé pour restituer les détails de la personne dans le volant.

Autorisations de Microsoft Graph

Ce composant utilise les API et autorisations microsoft Graph suivantes :

Configuration Autorisation API
Valeur par défaut. User.Read /users/me/

Lorsque vous utilisez la valeur par signed-in-button-content défaut et flyout-person-details les modèles, ce composant utilise le composant Person pour afficher l’utilisateur et hérite de toutes les autorisations.

Authentification

Le contrôle de connexion utilise le fournisseur d’authentification global décrit dans la documentation d’authentification.

Cache

Ce composant utilise le composant Person pour afficher l’utilisateur et hérite de toute la configuration de cache de celui-ci.

Étendre pour plus de contrôle

Dans le cas de scénarios plus complexes ou d’une expérience UX véritablement personnalisée, protected render* ce composant expose plusieurs méthodes de substitution dans les extensions de composant.

Méthode Description
renderButton Restituer le chrome du bouton.
renderButtonContent Restituer le contenu du bouton.
renderSignedInButtonContent Restituer le contenu du bouton lorsque l’utilisateur est signé.
renderSignedOutButtonContent Restituer le contenu du bouton lorsque l’utilisateur n’est pas signé.
renderFlyout Restituer le chrome du volant.
renderFlyoutContent Restituer le contenu du volant.
renderFlyoutPersonDetails Restituer les détails de la personne du volant.
renderFlyoutCommands Restituer les commandes de volant.

Apportez votre propre volant

Il est possible d’utiliser votre propre composant de volant à la place du composant intégré, renderFlyout() en remplacement de la méthode et en fournissant le nouveau flyout.

Dans ce cas, protected assurez-vous que le composant de connexion continue de fonctionner comme prévu en remplaçant les méthodes d’affichage de volant pour mettre à jour la visibilité de votre autre volant.

Méthode Description
hideFlyout Fait disparaître le volant.
showFlyout Affiche le volant.
toggleFlyout Fait bascule l’état du volant.