Composant de connexion dans la boîte à outils Microsoft GraphLogin component in the Microsoft Graph Toolkit

Un composant de connexion est un bouton et un contrôle de menu volant pour faciliter l’authentification Microsoft Identity Platform.A Login component is a button and flyout control to facilitate Microsoft identity platform authentication. Il fournit deux États :It provides two states:

  • Lorsque l’utilisateur n’est pas connecté, le contrôle est un simple bouton pour lancer le processus de connexion.When user is not signed in, the control is a simple button to initiate the sign in process.
  • Lorsque l’utilisateur est connecté, le contrôle affiche le nom d’utilisateur, l’image de profil et la messagerie électronique actuellement signés.When user is signed in, the control displays the current signed in user name, profile image, and email. Lorsque l’utilisateur clique dessus, un menu volant est ouvert avec une commande pour se déconnecter.When clicked, a flyout is opened with a command to sign out.

ExempleExample

L’exemple suivant montre le mgt-login composant avec un utilisateur connecté.The following example shows the mgt-login component with a signed-in user.

Ouvrez cet exemple dans gestion. devOpen this example in mgt.dev

Utilisation du contrôle sans fournisseur d’authentificationUsing the control without an authentication provider

Le composant fonctionne avec un fournisseur et Microsoft Graph en dehors de la zone.The component works with a provider and Microsoft Graph out of the box. 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é.However, if you want to provide your own logic and authentication, you can use the userDetails property to set the signed in user's details.

AttributAttribute PropriétéProperty DescriptionDescription
utilisateur-détailsuser-details userDetailsuserDetails Définir l’objet utilisateur qui sera affiché sur le contrôle.Set the user object that will be displayed on the control.

L’exemple suivant définit les détails de la personne.The following example sets the person details.

let loginControl = document.getElementById('myLoginControl');
loginControl.userDetails = {
    displayName: 'Nikola Metulev',
    mail: 'nikola@contoso.com',
    personImage: 'url'
}

userDetailsLe paramètre doit null accéder à l’état déconnecté.Setting userDetails to null will go to the signed out state.

Utilisez les loginInitiated logoutInitiated événements et pour gérer la connexion et la déconnexion.Use the loginInitiated and logoutInitiated events to handle signing in and out.

Propriétés personnalisées CSSCSS custom properties

Le mgt-login composant définit les propriétés personnalisées CSS suivantes.The mgt-login component defines the following CSS custom properties.

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

Pour plus d’informations, reportez-vous à la rubrique stylising Components.To learn more, see styling components.

ÉvénementsEvents

Les événements suivants sont déclenchés à partir du contrôle.The following events are fired from the control.

ÉvénementEvent DescriptionDescription
loginInitiated L’utilisateur a cliqué sur le bouton de connexion pour démarrer le processus de connexion annulé.The user clicked the sign in button to start the login process - cancelable.
loginCompleted le processus de connexion a réussi et l’utilisateur est maintenant connecté.the login process was successful and the user is now signed in.
loginFailed L’utilisateur a annulé le processus de connexion ou n’a pas pu se connecter.The user canceled the login process or was unable to sign in.
logoutInitiated L’utilisateur a commencé à se déconnecter-annulable.The user started to logout - cancelable.
logoutCompleted L’utilisateur est déconnecté.The user signed out.

ModèlesTemplates

Le mgt-login composant prend en charge plusieurs modèles qui vous permettent de remplacer certaines parties du composant.The mgt-login component supports several templates that allow you to replace certain parts of the component. Pour spécifier un modèle, incluez un <template> élément dans un composant et définissez la data-type valeur sur l’une des valeurs indiquées dans le tableau suivant.To specify a template, include a <template> element inside of a component and set the data-type value to one of the values listed in the following table.

Type de donnéesData type Contexte de donnéesData context DescriptionDescription
connexion de bouton-contenusigned-in-button-content personDetails : objet Person, personImage : chaîne d’image personpersonDetails: person object, personImage: person image string Modèle utilisé pour afficher le contenu du bouton lorsque l’utilisateur est connecté.The template used to render the content in the button when the user is signed in.
bouton de connexion-Button-contentsigned-out-button-content nullnull Modèle utilisé pour afficher le contenu du bouton lorsque l’utilisateur n’est pas connecté.The template used to render the content in the button when the user is not signed in.
commandes de menu volantflyout-commands handleSignOut : fonction de déconnexionhandleSignOut: sign out function Modèle utilisé pour afficher les commandes dans le menu volantThe template used to render the commands in the flyout
menu volant-détailsflyout-person-details personDetails : objet Person, personImage : chaîne d’image personpersonDetails: person object, personImage: person image string Modèle utilisé pour afficher les détails de la personne dans le menu volant.The template used to render the person details in the flyout.

Autorisations Microsoft GraphMicrosoft Graph permissions

Ce composant utilise le composant person pour afficher l’utilisateur et hérite de toutes les autorisations.This component uses the Person component to display the user and inherits all permissions.

AuthentificationAuthentication

Le contrôle de connexion utilise le fournisseur d’authentification global décrit dans la documentation d’authentification.The login control uses the global authentication provider described in the authentication documentation.

Prolonger le contrôleExtend for more control

Pour les scénarios plus complexes ou une expérience utilisateur véritablement personnalisée, ce composant expose plusieurs protected render* méthodes de remplacement dans les extensions de composants.For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions.

MéthodeMethod DescriptionDescription
renderButtonrenderButton Affiche le chrome du bouton.Renders the button chrome.
renderButtonContentrenderButtonContent Affiche le contenu du bouton.Renders the button content.
renderSignedInButtonContentrenderSignedInButtonContent Afficher le contenu du bouton lorsque l’utilisateur est connecté.Render the button content when the user is signed in.
renderSignedOutButtonContentrenderSignedOutButtonContent Afficher le contenu du bouton lorsque l’utilisateur n’est pas connecté.Render the button content when the user is not signed in.
renderFlyoutrenderFlyout Affiche le chrome flyout.Renders the flyout chrome.
renderFlyoutContentrenderFlyoutContent Affiche le contenu du menu volant.Renders the flyout content.
renderFlyoutPersonDetailsrenderFlyoutPersonDetails Affichez les détails de la personne mobile.Render the flyout person details.
renderFlyoutCommandsrenderFlyoutCommands Affichez les commandes de menu volant.Render the flyout commands.

Apporter votre propre menu volantBring your own flyout

Il est possible d’utiliser votre propre composant de menu volant à la place de l’élément intégré, en substituant la renderFlyout() méthode et en fournissant le nouveau menu volant.It is possible to use your own flyout component in place of the built-in one, by overriding the renderFlyout() method and providing the new flyout.

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 de menu volant afin de mettre à jour la visibilité de votre autre menu volant.In this case, ensure the login component continues to work as expected by overriding the protected flyout display methods to update the visibility of your alternative flyout.

MéthodeMethod DescriptionDescription
hideFlyouthideFlyout Ferme le menu volant.Dismisses the flyout.
showFlyoutshowFlyout Affiche le menu volant.Displays the flyout.
toggleFlyouttoggleFlyout Fait basculer l’état du menu volant.Toggles the state of the flyout.