Aplikacja jednostronicowa: logowanie i wylogowywanie

Aby uzyskać tokeny umożliwiające dostęp do interfejsów API w aplikacji, musisz mieć uwierzytelniony kontekst użytkownika. Aby uwierzytelnić użytkownika, możesz użyć okna podręcznego i/lub metody logowania przekierowania.

Jeśli aplikacja ma dostęp do uwierzytelnionego kontekstu użytkownika lub tokenu identyfikatora, możesz pominąć krok logowania i uzyskać tokeny bezpośrednio. Aby uzyskać szczegółowe informacje, zobacz Logowanie jednokrotne (SSO) z wskazówką dla użytkownika.

Wybieranie między okienkiem wyskakującym lub przekierowywaniem

Wybór między wyskakującym lub przekierowywanym środowiskiem zależy od przepływu aplikacji.

• Jeśli nie chcesz, aby użytkownicy odeszli od strony głównej aplikacji podczas uwierzytelniania, użyj okna podręcznego. Ponieważ przekierowanie uwierzytelniania odbywa się w oknie podręcznym, stan głównej aplikacji jest zachowywany.

• Użyj przekierowania, jeśli użytkownicy mają ograniczenia przeglądarki lub zasady, w których okna podręczne są wyłączone. Istnieją na przykład znane problemy z oknami podręcznymi w programie Internet Explorer.

Zaloguj się przy użyciu okna podręcznego

JavaScript (MSAL.js v2)

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

Angular (MSAL.js v2)

Aby wywołać środowisko logowania dla określonej trasy, zaimportuj @angular/router i dodaj MsalGuard do definicji 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 {}

Aby włączyć środowisko okna podręcznego, ustaw konfigurację interactionType na InteractionType.Popup w pliku MsalGuardConfiguration. Możesz również przekazać zakresy, które wymagają zgody.

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

React

Aby wywołać środowisko logowania, gdy użytkownik nie jest jeszcze zalogowany, użyj MsalAuthenticationTemplate funkcji z witryny @azure/msal-react. Otoka MSAL React chroni określone składniki, opakowując je w składniku MsalAuthenticationTemplate .

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

Aby wywołać określone środowisko logowania na podstawie interakcji użytkownika (na przykład wybierz przycisk), użyj AuthenticatedTemplate funkcji i/lub 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>
    </>
  );
}

Logowanie przy użyciu przekierowania

JavaScript (MSAL.js v2)

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

Angular (MSAL.js v2)

Aby włączyć środowisko przekierowania, ustaw interactionType konfigurację na InteractionType.Redirect w MsalGuardConfigurationpliku , a następnie bootstrap MsalRedirectComponent do obsługi przekierowań.

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

React

Aby wywołać środowisko logowania, gdy użytkownik nie jest zalogowany, użyj MsalAuthenticationTemplate funkcji z witryny @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>
  );
}

Aby wywołać określone środowisko logowania na podstawie interakcji użytkownika (na przykład wybierz przycisk), użyj AuthenticatedTemplate funkcji i/lub UnauthenticatedTemplate z .@azure/msal-react

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

Zachowanie wylogowywanie się w przeglądarkach

Aby zapewnić bezpieczne wylogowanie z co najmniej jednej aplikacji, zalecane są następujące metody:

• Na urządzeniach udostępnionych użytkownicy powinni używać trybu prywatnego/incognito przeglądarki i zamykać wszystkie okna przeglądarki przed odejściem od urządzenia.

• Na urządzeniach, które nie są udostępniane, użytkownicy powinni używać ekranu blokady systemu operacyjnego, aby zablokować lub wylogować się z całej sesji systemu operacyjnego na urządzeniu. Firma Microsoft używa swojej strony wylogowywanie, aby przypomnieć użytkownikom o tych najlepszych rozwiązaniach dotyczących prywatności i zabezpieczeń.

Aby uzyskać więcej informacji, zobacz Najlepsze rozwiązania firmy Microsoft dotyczące prywatności w Internecie.

Jeśli użytkownik zdecyduje się nie wylogować się przy użyciu zaleceń, są to inne metody włączania funkcji wylogowywanie:

• Wylogowywanie kanału frontonu w programie OpenID Connect firmy Microsoft w celu wylogowania federacyjnego. Tej opcji można użyć, gdy aplikacja udostępnia stan logowania nowej aplikacji, ale zarządza własnymi tokenami sesji/plikami cookie. W tej implementacji obowiązują pewne ograniczenia, w przypadku których zawartość jest blokowana, na przykład gdy przeglądarki blokują pliki cookie innych firm.

• Okno podręczne i/lub wylogowywanie przekierowania dla aplikacji lokalnej. Metody wyskakujące i przekierowania kończą sesję użytkownika w punkcie końcowym i dla aplikacji lokalnej. Jednak te metody mogą nie od razu wyczyścić sesji dla innych aplikacji federacyjnych, jeśli komunikacja z kanałem frontonu jest zablokowana.

Wyloguj się przy użyciu okna podręcznego

MSAL.js w wersji 2 i nowszej udostępnia metodę, która czyści pamięć podręczną logoutPopup w magazynie przeglądarki i otwiera okno podręczne na stronie wylogowywanie firmy Microsoft. Po wylogowaniu domyślne przekierowanie do strony startowej logowania i wyskakujące okienko jest zamykane.

W przypadku środowiska po wylogowaniu można ustawić wartość postLogoutRedirectUri , aby przekierować użytkownika do określonego identyfikatora URI. Ten identyfikator URI powinien być zarejestrowany jako identyfikator URI przekierowania w rejestracji aplikacji. Możesz również skonfigurować logoutPopup przekierowanie okna głównego do innej strony, takiej jak strona główna lub strona logowania, przekazując mainWindowRedirectUri jako część żądania.

JavaScript (MSAL.js v2)

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

Angular (MSAL.js v2)

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

React

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

Wyloguj się przy użyciu przekierowania

MSAL.js udostępnia metodę w wersji 1 i metodę logoutRedirect w wersji 2, która czyści pamięć podręczną logout w magazynie przeglądarki i przekierowuje do strony wylogowania firmy Microsoft Entra. Po wylogowaniu nastąpi domyślne przekierowanie na stronę początkową logowania.

W przypadku środowiska po wylogowaniu można ustawić wartość postLogoutRedirectUri , aby przekierować użytkownika do określonego identyfikatora URI. Ten identyfikator URI powinien być zarejestrowany jako identyfikator URI przekierowania w rejestracji aplikacji.

Ponieważ przypomnienie firmy Microsoft o najlepszych rozwiązaniach dotyczących ochrony prywatności w Internecie dotyczących korzystania z przeglądarki prywatnej i ekranu blokady nie jest wyświetlane w tej metodzie, warto opisać najlepsze rozwiązania i przypomnieć użytkownikom, aby zamknęli wszystkie okna przeglądarki.

JavaScript (MSAL.js v2)

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

Angular (MSAL.js v2)

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

React

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

Następne kroki

Przejdź do następnego artykułu w tym scenariuszu Uzyskiwanie tokenu dla aplikacji.