Přihlášení k jednostránkové aplikaci a odhlášení - Microsoft identity platform

Článek
05/09/2024

Než budete moct získat tokeny pro přístup k rozhraním API ve vaší aplikaci, potřebujete ověřený kontext uživatele. K ověření uživatele můžete použít automaticky otevírané okno nebo metodu přihlášení přesměrovávání .

Pokud má vaše aplikace přístup k ověřenému kontextu uživatele nebo tokenu ID, můžete přeskočit krok přihlášení a získat tokeny přímo. Podrobnosti najdete v tématu Jednotné přihlašování (SSO) s nápovědou uživatele.

Volba mezi automaticky otevíraných oken nebo přesměrováním

Volba mezi automaticky otevíraných oken nebo prostředím přesměrování závisí na toku aplikace.

Pokud nechcete, aby se uživatelé během ověřování přesouvají od hlavní stránky aplikace, použijte automaticky otevírané okno. Vzhledem k tomu, že přesměrování ověřování probíhá v automaticky otevíraném okně, zachová se stav hlavní aplikace.
Přesměrování použijte, pokud mají uživatelé omezení prohlížeče nebo zásady, ve kterých jsou automaticky otevíraná okna zakázaná. Existují například známé problémy s automaticky otevíranými okny v Internet Exploreru.

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

Pokud chcete vyvolat přihlašovací prostředí pro konkrétní trasu, importujte @angular/router a přidejte MsalGuard do definice trasy.

// 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 {}

Pokud chcete povolit automaticky otevírané okno, nastavte interactionType konfiguraci na InteractionType.Popup hodnotu v okně MsalGuardConfiguration. Můžete také předat obory, které vyžadují souhlas.

// 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 {}

Pokud chcete vyvolat přihlašovací prostředí, když uživatel ještě není přihlášený, použijte MsalAuthenticationTemplate funkci z @azure/msal-react. Obálka MSAL React chrání konkrétní komponenty tím, že je zabalí do MsalAuthenticationTemplate komponenty.

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

Pokud chcete vyvolat konkrétní přihlašovací prostředí na základě interakce uživatele (například tlačítko vybrat), použijte AuthenticatedTemplate funkci a/nebo UnauthenticatedTemplate z @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);

Pokud chcete povolit prostředí přesměrování, nastavte interactionType konfiguraci na InteractionType.Redirect hodnotu v MsalGuardConfigurationsouboru a potom zaváděcí nástroj MsalRedirectComponent pro zpracování přesměrování.

// 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 {}

Pokud chcete vyvolat přihlašovací prostředí, když uživatel není přihlášený, použijte MsalAuthenticationTemplate funkci z @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>
    </>
  );
}

Odhlášení chování v prohlížečích

Pokud chcete zajistit zabezpečené odhlášení z jedné nebo více aplikací, doporučujeme následující metody:

Na sdílených zařízeních by uživatelé měli používat soukromý nebo anonymní režim prohlížeče a zavřít všechna okna prohlížeče před tím, než odstoupí od zařízení.
Na zařízeních, která nejsou sdílená, by uživatelé měli k uzamčení nebo odhlášení z celé relace operačního systému na zařízení použít zamykací obrazovku operačního systému. Společnost Microsoft používá stránku odhlášení, aby uživatelům připomněla tyto osvědčené postupy ochrany osobních údajů a zabezpečení.

Další informace najdete v osvědčených postupech microsoftu v oblasti ochrany osobních údajů v internetu.

Pokud se uživatel rozhodne, že se nechce odhlásit pomocí doporučení, jsou následujícími způsoby povolení funkce odhlášení:

Odhlašování z frontového kanálu od Microsoftu od Microsoftu pro federované odhlášení. Tuto možnost můžete použít, když aplikace sdílí stav přihlášení s novou aplikací, ale spravuje vlastní tokeny relací/soubory cookie. V této implementaci platí určitá omezení, kdy je obsah blokovaný, například když prohlížeče blokují soubory cookie třetích stran.
Automaticky otevírané okno nebo Přesměrování pro odhlášení z místní aplikace Automaticky otevírané okno a metody přesměrování ukončí relaci uživatele na koncovém bodu a pro místní aplikaci. Tyto metody ale nemusí okamžitě vymazat relaci pro jiné federované aplikace, pokud je zablokovaná komunikace front-channel.

Odhlášení pomocí automaticky otevíraných oken

MSAL.js verze 2 a vyšší poskytuje metodu logoutPopup , která vymaže mezipaměť v úložišti prohlížeče a otevře automaticky otevírané okno na stránce odhlašování Microsoft Entra. Po odhlášení se výchozí přesměrování na přihlašovací úvodní stránku a automaticky otevírané okno se zavře.

Pro prostředí po odhlášení můžete nastavit postLogoutRedirectUri přesměrování uživatele na konkrétní identifikátor URI. Tento identifikátor URI by měl být zaregistrovaný jako identifikátor URI přesměrování v registraci vaší aplikace. Můžete také nakonfigurovat logoutPopup přesměrování hlavního okna na jinou stránku, například domovskou stránku nebo přihlašovací stránku předáním mainWindowRedirectUri v rámci požadavku.

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

Odhlášení pomocí přesměrování

MSAL.js poskytuje metodu logout v1 a metodu logoutRedirect v2, která vymaže mezipaměť v úložišti prohlížeče a přesměruje ji na stránku odhlášení Microsoft Entra. Po odhlášení se výchozí přesměrování na úvodní stránku přihlášení.

Vzhledem k tomu, že se v této metodě nezobrazuje připomenutí osvědčených postupů pro ochranu osobních údajů v internetu pro používání privátního prohlížeče a zamykací obrazovky, můžete chtít popsat osvědčené postupy a připomenout uživatelům, aby zavřeli všechna okna prohlížeče.

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

Další kroky

Přejděte k dalšímu článku v tomto scénáři a získání tokenu pro aplikaci.

Sdílet prostřednictvím

Volba mezi automaticky otevíraných oken nebo přesměrováním

Odhlášení chování v prohlížečích

Odhlášení pomocí automaticky otevíraných oken

Odhlášení pomocí přesměrování

Další kroky

Váš názor

Další materiály

Sdílet prostřednictvím

Jednostránka aplikace: přihlášení a odhlášení

Volba mezi automaticky otevíraných oken nebo přesměrováním

Přihlášení pomocí automaticky otevíraných oken

Přihlášení pomocí přesměrování

Odhlášení chování v prohlížečích

Odhlášení pomocí automaticky otevíraných oken

Odhlášení pomocí přesměrování

Další kroky

Váš názor

Další materiály