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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

Выйдите через всплывающее окно

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

После выхода можно настроить postLogoutRedirectUri для перенаправления пользователя на определенный URI. Указанный URI должен быть зарегистрирован как URI перенаправления при регистрации вашего приложения. Вы также можете настроить 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>
    </>
  );
}

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

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

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

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

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

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

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

Получение токена для приложения.

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-05-13

Поделиться через

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

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

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

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

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

Выйдите через всплывающее окно

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

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

Обратная связь

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