Anmelden und Abmelden bei einer Single-Page-Webanwendung - Microsoft identity platform

Artikel
05/13/2024

Bevor Sie die Token für den Zugriff auf APIs in Ihrer Anwendung abrufen können, benötigen Sie einen authentifizierten Benutzerkontext. Um eine Benutzerin oder einen Benutzer zu authentifizieren, können Sie ein Popupfenster und/oder eine Umleitungsanmeldungsmethode verwenden.

Wenn Ihre Anwendung Zugriff auf einen authentifizierten Benutzerkontext oder das ID-Token hat, können Sie den Anmeldeschritt überspringen und Token direkt abrufen. Ausführliche Informationen finden Sie unter Single Sign-On (SSO) mit Benutzerhinweisen.

Auswählen zwischen einem Popupfenster oder einer Umleitung

Die Entscheidung für ein Popupfenster oder eine Umleitung hängt von Ihrem Anwendungsfluss ab.

Verwenden Sie ein Popupfenster, wenn Sie nicht möchten, dass Benutzerinnen und Benutzer während der Authentifizierung Ihre Hauptanwendungsseite verlassen. Da die Authentifizierungsumleitung in einem Popupfenster erfolgt, wird der Status der Hauptanwendung beibehalten.
Verwenden Sie eine Umleitung, wenn für Benutzerinnen und Benutzer Browsereinschränkungen oder Richtlinien gelten, bei denen Popupfenster deaktiviert sind. Es gibt beispielsweise bekannte Probleme bei Popupfenstern im Internet Explorer.

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

myMsal
  .loginPopup(loginRequest)
  .then(function (loginResponse) {
    accountId = loginResponse.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  })
  .catch(function (error) {
    //login failure
    console.log(error);
  });

Um eine Anmeldeoberfläche für eine bestimmte Route aufzurufen, importieren Sie @angular/router und fügen Sie sie MsalGuard der Routendefinition hinzu.

// In app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ProfileComponent } from "./profile/profile.component";
import { MsalGuard } from "@azure/msal-angular";
import { HomeComponent } from "./home/home.component";

const routes: Routes = [
  {
    path: "profile",
    component: ProfileComponent,
    canActivate: [MsalGuard],
  },
  {
    path: "",
    component: HomeComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Um die Methode mit Popupfenster zu aktivieren, legen Sie die interactionType-Konfiguration auf InteractionType.Popup in der MsalGuardConfiguration fest. Sie können auch die Bereiche übergeben, die eine Einwilligung erfordern.

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalModule } from "@azure/msal-angular";

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "your_app_id",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Popup, // MsalGuard Configuration
        authRequest: {
          scopes: ["User.Read"],
        },
      },
      null
    ),
  ],
})
export class AppModule {}

Um eine Anmeldeumgebung aufzurufen, wenn eine Benutzerin oder ein Benutzer noch nicht angemeldet ist, verwenden Sie die MsalAuthenticationTemplate Funktion von @azure/msal-react. Mit dem MSAL React-Wrapper können Sie bestimmte Komponenten schützen, indem Sie diese mit der Komponente MsalAuthenticationTemplate umschließen.

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Popup}>
      <p>This will only render if a user is not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

Verwenden Sie zum Aufrufen einer bestimmten Anmeldeumgebung basierend auf der Benutzerinteraktion (z. B. Schaltflächenauswahl) die Funktion AuthenticatedTemplate und/oder UnauthenticatedTemplate aus @azure/msal-react.

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginPopup();
}

// SignInButton Component returns a button that invokes a popup sign in when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

function handleResponse(response) {
  if (response !== null) {
    accountId = response.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  } else {
    // In case multiple accounts exist, you can select
    const currentAccounts = myMsal.getAllAccounts();

    if (currentAccounts.length === 0) {
      // no accounts signed-in, attempt to sign a user in
      myMsal.loginRedirect(loginRequest);
    } else if (currentAccounts.length > 1) {
      // Add choose account code here
    } else if (currentAccounts.length === 1) {
      accountId = currentAccounts[0].homeAccountId;
    }
  }
}

myMsal.handleRedirectPromise().then(handleResponse);

Um eine Umleitungsumgebung zu aktivieren, legen Sie die interactionType-Konfiguration auf InteractionType.Redirect in der MsalGuardConfiguration fest und dann bootstrappen Sie MsalRedirectComponent, um Umleitungen zu verarbeiten.

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalModule, MsalRedirectComponent } from "@azure/msal-angular";

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Redirect, // Msal Guard Configuration
        authRequest: {
          scopes: ["user.read"],
        },
      },
      null
    ),
  ],
  bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}

Um eine Anmeldeumgebung aufzurufen, wenn eine Benutzerin oder ein Benutzer nicht angemeldet ist, verwenden Sie die MsalAuthenticationTemplate Funktion von @azure/msal-react.

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
      <p>This will only render if a user is not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginRedirect();
}

// SignInButton Component returns a button that invokes a popup login when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

Abmeldeverhalten in Browsern

Um sicherzustellen, dass eine oder mehrere Apps sicher abgemeldet werden, werden die folgenden Methoden empfohlen:

Auf gemeinsam genutzten Geräten sollten Benutzerinnen und Benutzer den privaten/inkognito-Modus eines Browsers verwenden und alle Browserfenster schließen, bevor sie vom Gerät weggehen.
Auf privaten Geräten sollten Benutzerinnen und Benutzer einen Sperrbildschirm des Betriebssystems verwenden, um ihre gesamte Betriebssystemsitzung auf dem Gerät zu sperren oder sich abmelden. Microsoft verwendet seine Abmeldeseite, um Benutzerinnen und Benutzer an diese bewährten Datenschutz- und Sicherheitsmethoden zu erinnern.

Weitere Informationen finden Sie in den bewährten Methoden zum Datenschutz im Internet von Microsoft.

Wenn sich eine Benutzerin oder ein Benutzer entscheidet, sich nicht wie empfohlen abzumelden, gibt es die folgenden anderen Methoden zum Aktivieren der Abmeldefunktion:

Die Frontkanal-Abmeldung von Microsoft OpenID Connect für die Verbundanmeldung. Sie können diese Option verwenden, wenn eine App einen Anmeldestatus mit einer neuen App teilt, aber eigene Sitzungstoken/Cookies verwaltet. Es gibt einige Einschränkungen für diese Implementierung, bei der Inhalte blockiert werden, z. B. wenn Browser Cookies von Drittanbietern blockieren.
Popupfenster und/oder Umleitungfür lokale App-Abmeldung. Die Popup- und Umleitungsmethoden beenden die Sitzung der Benutzerin oder des Benutzers am Endpunkt und für die lokale App. Diese Methoden können die Sitzung für andere Verbundanwendungen jedoch möglicherweise nicht sofort löschen, wenn die Kommunikation im Frontkanal blockiert wird.

Abmelden mit einem Popupfenster

MSAL.js v2 und höher bietet eine logoutPopup-Methode, die den Cache im Browserspeicher löscht und ein Popupfenster für die Abmeldeseite von Microsoft Entra öffnet. Nach der Abmeldung wird standardmäßig eine Umleitung auf die Anmeldestartseite ausgeführt, und das Popup wird geschlossen.

Sie können postLogoutRedirectUri festlegen, sodass die Benutzerin oder der Benutzer nach der Abmeldung an einen bestimmten URI umgeleitet wird. Dieser URI sollte in Ihrer Anwendungsregistrierung als Umleitungs-URI registriert sein. Sie können logoutPopup auch so konfigurieren, dass das Hauptfenster auf eine andere Seite (z. B. auf die Startseite oder Anmeldeseite) umgeleitet wird, indem Sie mainWindowRedirectUri als Teil der Anforderung übergeben.

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", // defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
  mainWindowRedirectUri: "your_app_main_window_redirect_uri",
};

await myMsal.logoutPopup(logoutRequest);

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutPopup({
        mainWindowRedirectUri: "/"
    });
}

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    mainWindowRedirectUri: "your_app_main_window_redirect_uri",
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutPopup(logoutRequest);
}

// SignOutButton component returns a button that invokes a pop-up sign out when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

Abmelden mit einer Umleitung

MSAL.js bietet in v1 eine logout-Methode und in v2 eine logoutRedirect-Methode, die den Cache im Browserspeicher löscht und zur Abmeldeseite von Microsoft Entra umleitet. Nach der Abmeldung wird standardmäßig eine Umleitung auf die Anmeldestartseite ausgeführt.

Da die Erinnerung von Microsoft an die bewährten Methoden für den Datenschutz im Internet zur Verwendung eines privaten Browsers und Sperrbildschirms bei dieser Methode nicht angezeigt wird, sollten Sie bewährte Methoden beschreiben und Benutzerinnen und Benutzer daran erinnern, alle Browserfenster zu schließen.

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
};

myMsal.logoutRedirect(logoutRequest);

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutRedirect();
}

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutRedirect(logoutRequest);
}

// SignOutButton Component returns a button that invokes a redirect logout when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

Nächste Schritte

Fahren Sie mit dem nächsten Artikel in diesem Szenario fort: Abrufen eines Tokens für die App.

Single-Page-Webanwendung: Anmelden und Abmelden

Auswählen zwischen einem Popupfenster oder einer Umleitung

Anmelden mit einem Popupfenster

Anmelden mit einer Umleitung

Abmeldeverhalten in Browsern

Abmelden mit einem Popupfenster

Abmelden mit einer Umleitung

Nächste Schritte

Zusätzliche Ressourcen