Anmeldekomponente im Microsoft Graph-Toolkit - Microsoft Graph

Artikel
11/07/2024

Eine Anmeldekomponente ist ein Schaltflächen- und Flyout-Steuerelement, um Microsoft Identity Platform Authentifizierung zu erleichtern. Es bietet zwei Zustände:

Wenn der Benutzer nicht angemeldet ist, ist das Steuerelement eine einfache Schaltfläche zum Initiieren des Anmeldevorgangs.
Wenn der Benutzer angemeldet ist, zeigt das Steuerelement den aktuell angemeldeten Benutzernamen, das Profilbild und die E-Mail-Adresse an. Wenn Sie darauf klicken, wird ein Flyout mit einem Befehl zum Abmelden geöffnet.

Sie können auch die Anmeldung mit mehreren Konten zulassen. Dadurch werden alle angemeldeten Konten aufgelistet, und Sie haben die Möglichkeit, sich mit anderen neuen Konten anzumelden.

Beispiel

Das folgende Beispiel zeigt die mgt-login Komponente mit einem angemeldeten Benutzer.

HTML
React

Öffnen Sie dieses Beispiel in mgt.dev.

Verwenden des Steuerelements ohne Authentifizierungsanbieter

Die Komponente funktioniert mit einem Anbieter und Microsoft Graph sofort einsatzbereit. Wenn Sie jedoch Ihre eigene Logik und Authentifizierung bereitstellen möchten, können Sie die userDetails -Eigenschaft verwenden, um die Details des angemeldeten Benutzers festzulegen.

Attribut	Eigenschaft	Beschreibung
login-view	Loginview	Bestimmt das Ansichtsformat, das auf den angemeldeten Benutzer angewendet werden soll. Optionen sind "full", "compact", "avatar", standardmäßig "full".
show-presence	showPresence	Bestimmt, ob die Anwesenheitsanzeige für den aktuellen Benutzer im `mgt-person` Steuerelement mit einem authentifizierten Benutzer angezeigt wird. Der Standardwert ist `false`.
Benutzerdetails	userDetails	Ermöglicht das Festlegen der Benutzerobjektdetails, die von der Komponente angezeigt werden.

Im folgenden Beispiel werden die Personendetails festgelegt.

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

Die Einstellung userDetails auf null wechselt in den Status "Abgemeldet".

Benutzerdefinierte CSS-Eigenschaften

Die mgt-login Komponente definiert die folgenden benutzerdefinierten CSS-Eigenschaften.

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

Weitere Informationen finden Sie unter Formatieren von Komponenten.

Ereignisse

Die folgenden Ereignisse werden vom -Steuerelement ausgelöst.

Ereignis	Wann wird es ausgegeben?	Benutzerdefinierte Daten	Abbrechbare	Blasen	Funktioniert mit benutzerdefinierter Vorlage
`loginInitiated`	Der Benutzer hat auf die Anmeldeschaltfläche geklickt, um den Anmeldevorgang zu starten.	Keinen	Ja	Nein	Ja
`loginCompleted`	Der Anmeldevorgang war erfolgreich, und der Benutzer ist jetzt angemeldet.	Keine	Nein	Nein	Ja
`loginFailed`	Der Benutzer hat den Anmeldevorgang abgebrochen oder konnte sich nicht anmelden.	Keine	Nein	Nein	Ja
`logoutInitiated`	Der Benutzer hat mit der Abmeldung begonnen.	Keinen	Ja	Nein	Ja
`logoutCompleted`	Der Benutzer hat sich abgemeldet.	Keine	Nein	Nein	Ja

Verwenden Sie die loginInitiated Ereignisse und logoutInitiated , um das An- und Abmelden zu behandeln.

Weitere Informationen zum Behandeln von Ereignissen finden Sie unter Ereignisse.

Vorlagen

Die mgt-login Komponente unterstützt mehrere Vorlagen , mit denen Sie bestimmte Teile der Komponente ersetzen können. Um eine Vorlage anzugeben, schließen Sie ein <template> Element innerhalb einer Komponente ein, und legen Sie den data-type Wert auf einen der in der folgenden Tabelle aufgeführten Werte fest.

Datentyp	Datenkontext	Beschreibung
Inhalt der Schaltfläche "angemeldet"	`personDetails`: person object, `personImage`: person image string	Die Vorlage, die zum Rendern des Inhalts in der Schaltfläche verwendet wird, wenn der Benutzer angemeldet ist.
Inhalt der Schaltfläche "abgemeldet"	null	Die Vorlage, die zum Rendern des Inhalts in der Schaltfläche verwendet wird, wenn der Benutzer nicht angemeldet ist.
flyout-commands	`handleSignOut`: Abmeldefunktion	Die Vorlage, die zum Rendern der Befehle im Flyout verwendet wird
flyout-person-details	`personDetails`: person object, personImage: person image string	Die Vorlage, die zum Rendern der Personendetails im Flyout verwendet wird.

Microsoft Graph-Berechtigungen

Diese Komponente verwendet die folgenden Microsoft Graph-APIs. Für jede api-Anforderung ist eine der aufgeführten Berechtigungen erforderlich.

Konfiguration	Berechtigung	API
Standard	User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/users/me/
Standard	User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/users/me//photo/$value

Unterkomponenten

Die mgt-login Komponente besteht aus einem oder mehreren Unterkomponenten, die möglicherweise andere Als die zuvor aufgeführten Berechtigungen erfordern. Weitere Informationen finden Sie in der Dokumentation zu den einzelnen Unterkomponenten: mgt-person.

Authentifizierung

Das Anmeldesteuerelement verwendet den in der Authentifizierungsdokumentation beschriebenen globalen Authentifizierungsanbieter.

Cache

Diese Komponente verwendet die Person-Komponente , um den Benutzer anzuzeigen, und erbt die gesamte Cachekonfiguration von ihr.

Erweitern für mehr Kontrolle

Für komplexere Szenarien oder eine wirklich benutzerdefinierte Benutzeroberfläche macht diese Komponente mehrere protected render* Methoden zum Überschreiben in Komponentenerweiterungen verfügbar.

Methode	Beschreibung
renderButton	Rendert das Schaltflächenchrom.
renderButtonContent	Rendert den Schaltflächeninhalt.
renderSignedInButtonContent	Rendern Sie den Inhalt der Schaltfläche, wenn der Benutzer angemeldet ist.
renderSignedOutButtonContent	Rendern Sie den Inhalt der Schaltfläche, wenn der Benutzer nicht angemeldet ist.
renderFlyout	Rendert das Flyout-Chrom.
renderFlyoutContent	Rendert den Flyoutinhalt.
renderFlyoutPersonDetails	Rendern Sie die Details der Flyoutperson.
renderFlyoutCommands	Rendern Sie die Flyoutbefehle.

Es ist möglich, Ihre eigene Flyoutkomponente anstelle der integrierten Komponente zu verwenden, indem Sie die renderFlyout() -Methode überschreiben und das neue Flyout bereitstellen.

Stellen Sie in diesem Fall sicher, dass die Anmeldekomponente weiterhin wie erwartet funktioniert, indem Sie die protected Flyoutanzeigemethoden überschreiben, um die Sichtbarkeit Ihres alternativen Flyouts zu aktualisieren.

Methode	Beschreibung
hideFlyout	Schließt das Flyout.
showFlyout	Zeigt das Flyout an.
toggleFlyout	Schaltet den Zustand des Flyouts um.

Lokalisierung

Das -Steuerelement macht die folgenden Variablen verfügbar, die lokalisiert werden können. Weitere Informationen finden Sie unter Lokalisieren von Komponenten.

Zeichenfolgenname	Standardwert
signInLinkSubtitle	`Sign In`
signOutLinkSubtitle	`Sign Out`
signInWithADifferentAccount	`Sign in with a different account`

Freigeben über