Anmeldekomponente im Microsoft Graph-Toolkit

  • Artikel

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.

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.

Bring Your Own Flyout

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