Краткое руководство. Реализация входа пользователей и получение маркера доступа в SPA JavaScript с помощью потока кода авторизации и PKCE

  • Статья

Добро пожаловать! Возможно, это не та страница, которую вы ожидали. Пока мы работаем над исправлением, воспользуйтесь этой ссылкой, чтобы перейти к нужной статье:

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

Приносим извинения за неудобства и благодарим за терпение! Мы работаем над устранением этой проблемы.

В этом кратком руководстве показано, как скачать и выполнить пример кода, который демонстрирует, как в одностраничном приложении (SPA) JavaScript реализовать вход пользователей и вызов Microsoft Graph с помощью потока кода авторизации и PKCE. В этом примере кода демонстрируется получение маркера доступа для вызова API Microsoft Graph или любого веб-API.

Иллюстрацию см. в разделе Как работает этот пример.

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

Шаг 1. Настройка приложения на портале Azure

Чтобы пример кода, приведенный в этом кратком руководстве, работал, добавьте URI перенаправленияhttp://localhost:3000/.

Внести эти изменения для меня

Already configured Приложение настроено с помощью этих атрибутов.

Шаг 2. Скачивание проекта

Запустите проект с помощью веб-сервера, используя Node.js.

Скачивание примера кода

Примечание.

Enter_the_Supported_Account_Info_Here

Шаг 3. Приложение настроено и готово к выполнению

Мы настроили проект, указав значения свойств приложения.

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

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

    npm install
npm start

  2. Переход к http://localhost:3000/.

  3. Нажмите кнопку Войти, чтобы начать процесс входа в систему, а затем вызовите API Microsoft Graph.

    После первого входа предоставьте приложению разрешение на использование данных вашего профиля для входа. После выполнения входа сведения о вашем профиле пользователя отображаются на странице.

Дополнительные сведения

Как работает этот пример

Diagram showing the authorization code flow for a single-page application.

MSAL.js

MSAL.js — это библиотека, используемая для выполнения входа пользователей и запросов маркеров, которые нужны для доступа к API, защищенному платформой удостоверений > Майкрософт. В файле примера index.html содержится ссылка на библиотеку:

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
"sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>

Если у вас установлен Node.js, последнюю версию можно скачать с помощью диспетчера пакетов npm из Node.js:

npm install @azure/msal-browser

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

Более подробное пошаговое руководство по созданию приложения для этого краткого руководства см. в следующем учебнике:

Tutorial to sign in and call MS Graph (Руководство по вызову API Microsoft Graph)