Вход в одностраничное приложение и выход из него - Microsoft identity platform

Статья
05/09/2024

Прежде чем можно будет получить маркеры для доступа к API в приложении, необходим контекст пользователя, прошедшего проверку подлинности. Для проверки подлинности пользователя можно использовать всплывающее окно и (или) метод входа в перенаправление.

Если у приложения есть доступ к прошедшему проверку контекста пользователя или маркера идентификатора, можно пропустить шаг входа и напрямую получить маркеры. Дополнительные сведения см. в статье "Единый вход" с указанием пользователя.

Выбор между всплывающим окном и перенаправлением

Выбор всплывающего окна или перенаправления зависит от потока приложения.

Используйте всплывающее окно, если вы не хотите, чтобы пользователи отойти от главной страницы приложения во время проверки подлинности. Так как перенаправление проверки подлинности происходит во всплывающем окне, состояние основного приложения сохраняется.
Используйте перенаправление, если у пользователей есть ограничения браузера или политики, в которых всплывающие окна отключены. Например, существуют известные проблемы с всплывающих окон в Интернете Обозреватель.

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/router и добавьте MsalGuard его в определение маршрута.

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

Чтобы включить всплывающее окно, задайте конфигурацию interactionTypeInteractionType.Popup в файле MsalGuardConfiguration. Вы также можете передать область, для которых требуется согласие.

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

Чтобы вызвать интерфейс входа, если пользователь еще не вошел в систему, используйте функцию MsalAuthenticationTemplate из @azure/msal-react. Оболочка MSAL React защищает определенные компоненты путем их упаковки в 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>
  );
}

Чтобы вызвать определенный интерфейс входа на основе взаимодействия с пользователем (например, кнопки select), используйте AuthenticatedTemplate функцию и (или) UnauthenticatedTemplate из @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);

Чтобы включить взаимодействие с перенаправлением, задайте interactionType конфигурацию InteractionType.Redirect в поле MsalGuardConfiguration, а затем загрузчик MsalRedirectComponent для обработки перенаправлений.

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

Чтобы вызвать интерфейс входа, если пользователь не вошел в систему, используйте функцию MsalAuthenticationTemplate из @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>
    </>
  );
}

Поведение выхода в браузерах

Чтобы обеспечить безопасный выход из одного или нескольких приложений, рекомендуется использовать следующие методы:

На общих устройствах пользователи должны использовать частный или инкогнито-режим браузера и закрыть все окна браузера, прежде чем они отойти от устройства.
На устройствах, которые не являются общими, пользователи должны использовать экран блокировки операционной системы для блокировки или выхода из всего сеанса операционной системы на устройстве. Корпорация Майкрософт использует свою страницу выхода для напоминания пользователям об этих рекомендациях по конфиденциальности и безопасности.

Дополнительные сведения см . в рекомендациях майкрософт по конфиденциальности интернета.

Если пользователь не выйдите из системы с помощью рекомендаций, ниже приведены другие методы для включения функций выхода:

Выход внешнего канала Подключение Microsoft OpenID для федеративного выхода. Этот параметр можно использовать, если приложение предоставляет общий доступ к состоянию входа с новым приложением, но управляет собственными токенами сеансов или файлами cookie. Существуют некоторые ограничения для этой реализации, в которой содержимое блокируется, например если браузеры блокируют сторонние файлы cookie.
Всплывающее окно и /или перенаправлениедля выхода локального приложения. Всплывающие и перенаправленные методы заканчивают сеанс пользователя в конечной точке и для локального приложения. Но эти методы могут не сразу очистить сеанс для других федеративных приложений, если взаимодействие с интерфейсным каналом заблокировано.

Выход из всплывающего окна

MSAL.js версии 2 и выше предоставляет logoutPopup метод, который очищает кэш в хранилище браузеров и открывает всплывающее окно на странице выхода Microsoft Entra. После выхода перенаправление по умолчанию выполняется на начальную страницу входа, а всплывающее окно закрывается.

После выхода можно настроить postLogoutRedirectUri перенаправление пользователя в определенный универсальный код ресурса (URI). Указанный URI должен быть зарегистрирован как URI перенаправления при регистрации вашего приложения. Вы также можете настроить logoutPopup перенаправление главного окна на другую страницу, например домашнюю страницу или страницу входа, передав mainWindowRedirectUri в рамках запроса.

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

Выход с перенаправлением

MSAL.js предоставляет logout метод версии 1 и logoutRedirect метод версии 2, который очищает кэш в хранилище браузеров и перенаправляется на страницу выхода Microsoft Entra. После выхода перенаправление по умолчанию перейдет на начальную страницу входа.

Так как напоминание Майкрософт о рекомендациях по конфиденциальности Интернета о использовании частного браузера и экрана блокировки не отображается в этом методе, вам может потребоваться описать рекомендации и напомнить пользователям о закрытии всех окон браузера.

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

Следующие шаги

Перейдите к следующей статье в этом сценарии, Получение токена для приложения.

Одностраничные приложения: вход и выход

Выбор между всплывающим окном и перенаправлением

Вход с помощью всплывающего окна

Вход с помощью перенаправления

Поведение выхода в браузерах

Выход из всплывающего окна

Выход с перенаправлением

Следующие шаги

Дополнительные ресурсы