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


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

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

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

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

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

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

Предварительные условия

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

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

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

Шаг 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.

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

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

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

Схема, демонстрирующая поток кода авторизации для одностраничного приложения

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

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

Подробное пошаговое руководство по созданию приложения потока кода проверки подлинности с помощью React см. в следующем руководстве.