Краткое руководство. Вход и получение маркера доступа в React SPA с помощью потока кода проверки подлинности

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

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

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

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

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

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

• Подписка Azure. Создать подписку Azure бесплатно
• Node.js
• Visual Studio Code или любой другой редактор кода.

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

Для этих примеров кода требуется URI перенаправления http://localhost:3000/.

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

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

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

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

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

Примечание.

Enter_the_Supported_Account_Info_Here

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

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

Шаг 4. Запуск проекта

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

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

   npm install
   npm start
   

2. Перейдите в http://localhost:3000/.

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

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

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

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

msal.js

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

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

npm install @azure/msal-browser @azure/msal-react

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

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

Руководство по входу в одностраничные приложения React (SPA)