Краткое руководство. Вход пользователей в одностраничное приложение (SPA) и вызов API Microsoft Graph с помощью React

  • Статья

В этом кратком руководстве используется пример одностраничного приложения React (SPA) для отображения способа входа пользователей с помощью потока кода авторизации с помощью ключа проверки подлинности для Exchange кода (PKCE). В примере используется библиотека проверки подлинности Майкрософт для JavaScript для обработки проверки подлинности.

Необходимые компоненты

Регистрация идентификаторов приложения и записей

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

  1. Войдите в центр администрирования Microsoft Entra.

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

  3. Перейдите к приложениям> удостоверений>Регистрация приложений выберите "Создать регистрацию".

  4. Введите имя приложения, например identity-client-spa.

  5. Для параметра Поддерживаемые типы учетных записей выберите Учетные записи только в этом каталоге организации. Для получения сведений о различных типах учетных записей выберите параметр "Справка ".

  6. Выберите Зарегистрировать.

    Снимок экрана: ввод имени и выбор типа учетной записи в Центре администрирования Microsoft Entra.

  7. Панель обзора приложения отображается при завершении регистрации. Запишите идентификатор каталога (клиента) и идентификатор приложения (клиента), которые будут использоваться в исходном коде приложения.

    Снимок экрана: значения идентификатора на странице обзора в Центре администрирования Microsoft Entra.

    Примечание.

    Поддерживаемые типы учетных записей можно изменить, ссылаясь на изменение учетных записей, поддерживаемых приложением.

Добавление URI перенаправления платформы

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

  1. В разделе Управление выберите Проверка подлинности.
  2. На странице конфигураций платформы выберите "Добавить платформу" и выберите параметр SPA.
  3. Введите http://localhost:3000URI перенаправления.
  4. Нажмите кнопку "Настроить", чтобы сохранить изменения.

Клонирование или скачивание примера приложения

Чтобы получить пример приложения, можно клонировать его из GitHub или скачать его в виде файла .zip .

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

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

  • Скачайте файл .zip. Извлеките его в путь к файлу, где длина имени меньше 260 символов.

Настройка проекта

  1. В интегрированной среде разработки откройте папку проекта ms-identity-docs-code-javascript /react-spa, содержащую пример.

  2. Откройте src/authConfig.js и обновите следующие значения с помощью сведений, записанных ранее в Центре администрирования.

    /*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from "@azure/msal-browser";

/**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */

export const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {	
        loggerOptions: {	
            loggerCallback: (level, message, containsPii) => {	
                if (containsPii) {		
                    return;		
                }		
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }	
            }	
        }	
    }
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
};
    • clientId — идентификатор приложения, который также называется клиентом. Замените текст в кавычках значением идентификатора приложения (клиента), записанного ранее.
    • authority — центр — это URL-адрес, указывающий каталог, из который MSAL может запрашивать маркеры. Замените Enter_the_Tenant_Info_Here значением идентификатора каталога (клиента), записанного ранее.
    • redirectUri— URI перенаправления приложения. При необходимости замените текст в кавычках URI перенаправления, записанный ранее.

Запуск приложения и вход

Запустите проект на веб-сервере с помощью Node.js:

  1. Чтобы запустить сервер, выполните в каталоге проекта следующую команду.

    npm install
npm start

  2. Скопируйте URL-адрес, отображаемый https в терминале, например, https://localhost:3000и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.

  3. Выполните действия и введите необходимые сведения для входа с помощью учетной записи Майкрософт. Вы будете запрашивать адрес электронной почты, чтобы один раз секретный код можно отправить вам. Введите код при появлении запроса.

  4. Приложение запрашивает разрешение на обслуживание доступа к данным, к ним предоставлен доступ, а также для входа и чтения профиля. Выберите Принять. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.

    Снимок экрана: приложение JavaScript с результатами вызова API.

Выход из приложения

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

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

Связанный контент