приложение react с авторизацией

Использование JWT в приложении React + Redux для авторизации

Как работает Auth с Redux и JWT?

Основная идея заключается в том, что вы сохраните информацию о текущем пользователе в хранилище Redux для быстрого доступа через ваше приложение. Вы также сохраните JWT (JSON Web Token), связанный с пользователем, в localStorage, чтобы его вход в систему мог сохраняться между сеансами, если они явно не выходят из системы.

В этом руководстве предполагается, что у вас настроены три следующих маршрута API:

POST to /users
POST to /login
GET to /profile

Эти три маршрута обрабатывают три основные части аутентификации — когда пользователь создает учетную запись, когда пользователь входит в эту учетную запись и когда вошедший в систему пользователь повторно посещает ваше веб-приложение. Я пойду в этом порядке, хотя последняя часть (обработка, когда пользователь повторно просматривает ваше приложение) — это то, где сияет полезность JWT.

Когда новый пользователь посещает ваше приложение, вы можете попросить его зарегистрировать учетную запись. По сути, вы будете выполнять стандартный запрос POST; Вам не нужно делать что-то необычное, чтобы запустить это.

При правильной настройке ваш бэкэнд создаст пользовательский экземпляр, запросит пароль с помощью BCrypt, а затем вернет объект с ключом пользователя и ключом jwt. Этот объект является важной частью Auth. Вы увидите это позже в этом руководстве, но мы по существу возьмем объект пользователя и сохраним его в вашем хранилище Redux, затем возьмем токен, связанный с пользователем, и сохраним его в localStorage.

Шаги для регистрации новых пользователей и автоматического входа в них следующие.

Новая форма пользователя

В вашем приложении React вам понадобится форма, которая после отправки будет запускать выборку в вашем файле actions.js. Вы будете использовать Thunk Redux здесь, поэтому убедитесь, что он установлен.

Создайте контролируемый компонент, который является формой для создания нового пользователя. Как пример, это может выглядеть так:

Функцию с fetch request
В вашем файле actions.js он будет выглядеть примерно так:

Обратите внимание на две отдельные функции: userPostFetch и loginUser. Функция userPostFetch отправляет информацию о пользователе в ваш бэкэнд для проверки. В случае успеха он ожидает ответа от объекта JSON, который выглядит следующим образом:

В userPostFetch это то, что мы назвали «data» во втором «then» утверждении.

Сохраните токен в localStorage

С кодом, который мы написали в нашей функции userPostFetch, localStorage.setItem («token», data.jwt) сохранит токен («aaaaaaa.bbbbbbbb.ccccccc») в localStorage нашего пользователя. Это будет использовано позже, когда мы сохраняем логин пользователя между сессиями.

Чтобы убедиться, что токен был успешно сохранен, запустите localStorage.token или localStorage.getItem («token») в своей консоли.

Сохранити объект пользователя в вашем хранилище(store) Redux.

Что касается объекта пользователя, мы видим здесь, что dispatch (loginUser (data.user)) выполняется. Предположительно, ваш reducer возьмет объект пользователя () и сохранит его в вашем хранилище Redux. Это позволит любому компоненту в вашем приложении React узнать, кто является текущим пользователем.

В качестве примера вот мой reducer:

Здесь пользовательский объект (action.payload) сохраняется в состояние под ключом currentUser. Если у вас установлен Redux DevTools, вы можете проверить его после успешного создания вашего пользователя. Вы должны увидеть объект пользователя.

Примечание. Вы знаете, как иногда после создания учетной записи на веб-сайте он запрашивает ручной вход сразу после этого? Вы также можете использовать это для своего веб-сайта — вам не нужно автоматически регистрировать пользователей после создания их учетных записей.
Если вы решили сделать это, просто ничего не делайте с пользовательским объектом и токеном JWT. Фактически, вы можете отредактировать логику из своего бэкэнда так, чтобы он только возвращал сообщения о состоянии.

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

2. Пользователь входит в систему (POST to / login)

Вход в систему пользователя очень похож на процесс регистрации, за исключением того, что вы отправляете только учетные данные для входа в серверную часть. Бэкэнд будет обрабатывать проверку пользователя, а затем отправлять обратно тот же объект от регистрации — объект с ключом пользователя и ключом jwt. Еще раз, вы сохраните пользовательский объект в хранилище Redux и сохраните токен в localStorage.

Если у вас есть компонент, предназначенный для входа в систему, он будет похож на ваш компонент регистрации с одним существенным отличием — он будет импортировать другую функцию из файла actions.js. Это может выглядеть примерно так:

Мы еще не написали функцию userLoginFetch, но, опять же, ее внешний вид похож на fetch, которая обрабатывает регистрацию. Увидеть ниже:

Обратите внимание, что мы повторно используем действие loginUser для сохранения нашего пользовательского объекта в нашем состоянии.

Удивительно, но это для входа в систему! Когда объект пользователя сохраняется в состоянии, а его токен сохраняется в localStorage, вы можете считать, что ваш пользователь вошел в систему.

Теперь давайте выполним третью и последнюю часть: сохранение логина вашего пользователя между сессиями.

3. Пересмотр пользователя (GET to / profile)

Смысл сохранения токена в localStorage — сохранить логин. Когда ваш пользователь повторно посещает ваш сайт, вы хотите, чтобы они чувствовали, что они продолжают свою сессию до этого.

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

Для этого вам нужно будет запускать выборку (GET to / profile) при каждом доступе к вашему приложению, если у пользователя есть токен, сохраненный в его localStorage. Выполнение этой логики в componentDidMount в вашем компоненте приложения является хорошим выбором, поскольку оно обязательно будет работать при обращении к вашему приложению.

Мы импортируем функцию из actions.js с именем getProfileFetch, которая запускается сразу после монтирования компонента App.

GetProfileFetch будет выполнять стандартный запрос GET, за исключением заголовка авторизации с токеном, который вы обрабатываете в файле actions.js Ваш бэкэнд должен быть настроен на получение токена, его декодирование и возвращение связанного с ним пользовательского объекта. Затем вы сохраняете это в магазине Redux как обычно. У вас уже есть токен, сохраненный в localStorage, поэтому вам не нужно беспокоиться об этом.

Функция будет выглядеть примерно так:

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

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

И вот он у вас — у вас есть действующее разрешение!

Когда вы тестируете свое приложение, вы заметите, что в настоящее время единственный способ выйти из системы — это очистить токен JWT в вашем localStorage, введя localStorage.removeItem («token») в консоль и нажав кнопку «Обновить», чтобы очистить хранилище Redux. Мы должны создать кнопку для ваших клиентов, чтобы выйти из системы.

Где-то в вашем приложении вам понадобится кнопка выхода из системы, которая сделает вышеописанное. Хотя я бы не поместил это случайным образом в файл App.js, для примера приведу пример кнопки выхода из системы в App.js.

Вы должны заметить несколько новых вещей: во-первых, импортируется новое действие, называемое logoutUser, которое мы вскоре напишем. Теперь у нас также есть mapStateToProps, используемый для того, чтобы компонент App мог получить реквизит с именем currentUser.

Примечание. Поскольку у меня есть несколько reducers, я должен был получить доступ к текущему пользователю моего магазина Redux, введя state.reducer.currentUser в mapStateToProps. Если у вас есть только один reducer, вам, скорее всего, нужно будет написать только state.currentUser.

Теперь есть также троичный оператор, который проверяет, имеет ли свойство currentUser, полученное из хранилища Redux, ключ имени пользователя (например, если объект currentUser пуст или нет). Если это так, он отображает кнопку «Выйти», которая при нажатии вызывает logoutUser. Это также удалит токен из localStorage.

logoutUser будет простым действием:

Это действие сделает в reducer следующее, заменив currentUser пустым объектом:

И вот оно! Вы должны увидеть, что кнопка появляется и исчезает, когда вы входите и выходите из системы.

Источник

Как за 15 минут построить на React приложение с аутентификацией пользователя

Хочешь проверить свои знания по фронтенду?

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

React быстро стал одним из наиболее популярных фронтенд-фреймворков. Согласно JAXenter, по популярности он уступает только старому доброму HTML5. Так что неудивительно, что его изучает так много разработчиков, а работодатели о нем спрашивают.

В этом руководстве вы начнете с очень простого приложения на React с парой страниц, некой встроенной маршрутизацией и добавлением аутентификации с использованием Sign-In Widget от Okta. Sign-In Widget это встраиваемый виджет Javascript, позволяющий разработчикам использовать безопасную, масштабируемую архитектуру Okta изнутри React-приложений с минимумом усилий. Начнем!

Обзаведитесь простым seed-проектом React

Начните с клонирования простого seed-проекта React.

Добавьте Okta Sign-In Widget

Установите Okta Sign-In Widget используя npm.

Компонент LoginPage

Начните с самого основного из компонентов:

а затем добавляете путь в корне (у которого путь это “/”)

Добавляем приложение OpenID Connect в Okta

Чтобы использовать Okta в качестве вашего OpenID Connect провайдера для аутентификации вам нужно установить приложение в консоли разработчика Okta.

Если у вас нет аккаунта разработчика в Okta, создайте его! Когда вы залогинитесь, кликните «Приложения» («Applications») в верхнем меню, затем кликните «Добавить приложение» («Add Application»). Выберите SPA в качестве платформы и кликните «Дальше».

Теперь, когда у вас есть созданное в Okta приложение, вы можете установить виджет для общения с вашим новым приложением!

Добавляем виджет к вашему компоненту

Вы импортировали функцию OktaSignIn из Okta Sign-In Widget npm модуля, установленного ранее. Далее, в конструкторе компонента вы инициализировали экземпляр OktaSignIn с конфигурацией для приложения. Таким образом код приложения сможет обращаться к Okta, а Okta узнает, что это – созданное только что вами приложение.

Выводим виджет для логина

Далее вы создаете код чтобы, собственно, визуализировать Sign-In Widget на странице. Вам нужно изменить ваш метод рендеринга чтобы создать элемент HTML, в который вы сможете визуализировать этот виджет. Обязательно получите ссылку на элемент, который будет отображаться. Затем добавьте функцию componentDidMount чтобы не допустить попыток визуализации виджета до появления на странице элемента HTML.

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

Проверяем, залогинен ли пользователь

Итоговый React-компонент LoginPage

Итак, финальная версия LoginPage.js должна выглядеть так:

Добавьте ссылку «Login»

React подключен к обработке пути /login и отображает Okta Sign-In Widget для предложения пользователю войти в систему.

Проверяем

Теперь установите пакеты npm :

Теперь при запуске приложения (с помощью npm start) вы увидите что-то вроде этого:

Если все работает, поздравляем! Если нет, пожалуйста, опубликуйте вопрос с тегом okta на Stack Overflow.

React + Okta

Вы можете найти полную версию приложения, созданного в этой статье, на GitHub.

Создание аутентификации в приложении — нелегкая задача. Еще менее интересно повторять это каждый раз для каждого созданного приложения. Okta выполняет за вас тяжелую часть работы и делает этот процесс гораздо более приятным для разработчика. Зарегистрируйтесь, создайте себе бесплатный аккаунт разработчика и попробуйте Okta!

***
Подписывайтесь на наш канал в Telegram!

Источник

Как сделать регистрацию и вход на React.js

В этой статье мы разберём как делается на React.js форма регистрации, и немного поговорим как сделать вход, думаю всем кто разрабатывает на React, это будет интересно.

Также стоит сказать, что по сути это продолжение предыдущих двух статей по разработки на Express.js, и если вы на нём разрабатываете, то вам точно они будут интересны.

Создание формы регистрации на React.js:

Первым делом разберём как сделать регистрацию, но стоит сказать, мы тут будем использовать принцип RestAPI, то есть у нас отдельно работает клиент и сервер, поэтому для отправки запросов нам нужно использовать AJAX запросы, а для это мы будем использовать библиотеку Axios.js.

Для того чтобы скачать эту библиотеку, нужно использовать команду NPM, вот что мы прописываем в терминал:

Ещё нам пригодиться библиотека для валидации формы, для этого мы будем использовать библиотеку validator.js, для скачивание так же используем NPM, вот что пишем в терминал:

В начале рассмотрим что мы в него подключили:

Когда мы всё подключили, создаём наш функциональный компонент, который тут же экспортируем, вот что пишем:

Теперь напишем пару функций для работы с регистрацией:

В начале мы создаём состояние, для регистрации, конкретно мы используем имя пользователя, его Email и два пароля, первый основной, а второй для повтора, вы же конечно может ещё какие либо параметры добавить, зависимо от ваших нужд.

Последние что осталось, это рендер самой формы, вот что, вот как строиться рендер:

Источник

Создание приложения для блога на React, часть 1: вход пользователя в систему

В этой серии учебников вы увидите, как начать работу с созданием приложения для ведения блога с помощью React. На протяжении всей этой серии учебников вы будете сосредоточены на том, как использовать React для разработки пользовательского интерфейса для вашего приложения. Для серверной части приложения мы будем использовать Node.js

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

Начинаем

Вы будете использовать фреймворк express для обслуживания вашего приложения. Установите express, используя следующую команду:

Назначьте номер порта, который приложение будет прослушивать. Добавьте следующий код для создания сервера:

Сохраните указанные выше изменения и запустите сервер, используя следующую команду:

Создание окна входа в систему

Вы создадите представление с помощью JSX. Если вы не знакомы с JSX, я бы рекомендовал прочитать вводный учебник по React и JSX.

Сохраните указанные выше изменения и перезапустите сервер. В своем браузере откройте http://localhost:7777/index.html, и вы должны будите увидеть экран входа.

Реализация входа пользователя

Чтобы реализовать процесс входа в систему, вам необходимо обработать введенный текст и событие onChange а затем сохранить значения текстового поля в переменной состояния. Когда пользователь нажимает кнопку, вы будете использовать переменные состояния для чтения значений текстового поля адреса электронной почты и пароля. Итак, добавим событие onChange в текстовые поля:

Определите события onChange в компоненте Signin :

Привяжите указанные выше события и переменные состояния в методе конструктора компонента:

Добавьте событие OnClick в кнопку SignIn.

Сохраните указанные выше изменения и перезапустите сервер. В своем браузере откройте http://localhost:7777/index.html. Введите адрес электронной почты и пароль и нажмите кнопку «Sign In», и вы сможете увидеть, как всплывают письма и пароль.

Передача данных из React в Node

Внутри метода signin в файле main.jsx добавьте следующую строку кода, чтобы сделать пост запрос.

Вы будете использовать модуль body-parser для анализа запроса, отправленного с клиентской стороны React. Установите модуль body-parser в проект.

Внутри метода signin вы можете разобрать запрос, как показано здесь:

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

Как только параметры были проанализированы, они проверяются на ожидаемые учетные данные. Если true, передается сообщение об успешном завершении, иначе возвращается сообщение об ошибке.

Сохраните указанные выше изменения и перезапустите сервер Node.js. Введите действительное имя пользователя и пароль и нажмите метод входа. На основе учетных данных он вернет сообщение об успешном завершении или сбое, которое будет отображаться в консоли браузера.

Создание представления регистрации пользователя

Определите различные маршруты и маршрут по умолчанию, как показано ниже:

Включите ссылку на компонент входа в компонент регистрации и наоборот. Вот метод render компонента Signin со ссылкой для регистрации:

Сохраните указанные выше изменения и перезапустите сервер Node.js. В своем браузере откройте http://localhost:7777/index.html, и вы сможете увидеть экран входа с ссылкой на регистрацию. Нажмите на ссылку регистрации, и вы должны перейти на экран регистрации.

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

Подведем итоги

В этой части серии учебников вы создали и внедрили экран входа в систему. Вы также видели, как использовать react-router для реализации маршрутизации в React. В следующей части этого урока вы увидите, как реализовать раздел «Sign Up» и «Add Post».

Исходный код этого учебника доступен в GitHub.

Сообщите нам свои мысли и предложения в комментариях ниже.

Источник

Учебник по входу пользователей и вызову API Microsoft Graph из одностраничного приложения React с помощью потока кода авторизации

В этом учебнике показано, как создать одностраничное приложение (SPA) React, которое поддерживает вход пользователей и вызовы Microsoft Graph с использованием потока кода авторизации с PKCE. Создаваемое одностраничное приложение использует библиотеку проверки подлинности Майкрософт (MSAL) для React.

В этом руководстве:

MSAL React поддерживает поток кода авторизации в браузере вместо потока неявного предоставления разрешения. MSAL React НЕ поддерживает неявный поток.

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

Принципы работы приложения из учебника

Приложение, созданное с помощью этого учебника, позволяет одностраничному приложению React отправлять запросы API Microsoft Graph, принимая маркеры безопасности от платформы удостоверений Майкрософт. В нем используется библиотека проверки подлинности Майкрософт (MSAL) для React, программа-оболочка для библиотеки MSAL.js версии 2. MSAL React позволяет приложениям React 16 и более поздних версий выполнять проверку подлинности корпоративных пользователей с помощью Azure Active Directory (Azure AD), пользователей учетных записей Майкрософт и пользователей социальных сетей, таких как Facebook, Google, LinkedIn и т. п. Библиотека также позволяет приложениям получать доступ к облачным службам Майкрософт или Microsoft Graph.

В этом сценарии после входа в систему маркер доступа запрашивается и добавляется в HTTP-запросы в заголовок авторизации. Получение маркера и его обновление выполняет библиотека проверки подлинности React (MSAL React).

Библиотеки

В этом учебнике используются следующие библиотеки:

Получение готового примера кода

Предпочитаете вместо этого загрузить готовый пример проекта для этого учебника? Чтобы запустить проект на локальном веб-сервере, например Node.js, клонируйте репозиторий ms-identity-javascript-react-spa:

git clone https://github.com/Azure-Samples/ms-identity-javascript-react-spa

Затем перейдите к настройке примера кода перед его выполнением.

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

Создание проекта

После установки Node.js откройте окно терминала и запустите выполнение следующих команд:

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

Окно браузера с приложением должно открыться автоматически. Если это не так, откройте браузер и перейдите по адресу http://localhost:3000. При каждом сохранении файла с обновленным кодом страница будет перезагружаться для отражения изменений.

Регистрация приложения

Выполните действия, описанные в статье Одностраничное приложение: регистрация приложения, чтобы создать регистрацию приложения для своего одностраничного приложения с помощью портала Azure.

Настройка одностраничного приложения JavaScript

В папке src создайте файл с именем authConfig.js, который будет содержать параметры конфигурации для проверки подлинности, а затем добавьте в него следующий код:

Подробные сведения о доступных настраиваемых параметрах см. в статье Initialize client applications using MSAL.js (Инициализация клиентских приложений с помощью MSAL.js).

Откройте файл src/index.js и добавьте следующие инструкции import:

Выполнение входа пользователей

Создайте папку в папке src с именем components и создайте в этой папке файл с именем SignInButton.jsx. Добавьте код из одного из следующих разделов, чтобы инициировать вход с помощью всплывающего окна или перенаправления на полный фрейм.

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

Добавьте следующий код в файл src/components/SignInButton.jsx, чтобы создать компонент «Кнопка», при нажатии которой будет вызываться всплывающее окно входа.

Вход с использованием перенаправлений

Добавьте следующий код в src/components/SignInButton.jsx, чтобы создать компонент «Кнопка», при нажатии которой будет выполняться перенаправление для входа.

Добавление кнопки входа

Создайте в папке components другой файл с именем PageLayout.jsx и добавьте следующий код, чтобы создать компонент панели навигации, который будет содержать только что созданную кнопку входа.

Теперь откройте src/App.js и замените существующее содержимое следующим кодом.

Теперь у вашего приложения есть кнопка входа, которая отображается только для пользователей, не прошедших проверку подлинности.

Когда пользователь выбирает Sign in using Popup (Вход с помощью всплывающего окна) или Sign in using Redirect (Вход с помощью перенаправления) в первый раз, обработчик onClick вызывает loginPopup (или loginRedirect ) для входа пользователя. Метод loginPopup открывает всплывающее окно с конечной точкой платформы удостоверений Майкрософт, чтобы запросить и проверить учетные данные пользователя. После успешного входа msal.js инициирует поток кода авторизации.

На этом этапе код авторизации, защищенный с помощью PKCE, отправляется в конечную точку маркеров, защищенную с помощью CORS, и обменивается на маркеры. Приложение получает маркер идентификатора, маркер доступа и маркер обновления, msal.js их обрабатывает, а информация из этих маркеров кэшируется.

Выход пользователей

В папке src/components создайте файл с именем SignOutButton.jsx. Добавьте код из одного из следующих разделов, чтобы инициировать выход с помощью всплывающего окна или перенаправления на полный фрейм.

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

Добавьте следующий код в файл src/components/SignOutButton.jsx, чтобы создать компонент «Кнопка», при нажатии которой будет вызываться всплывающее окно выхода.

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

Добавьте следующий код в src/components/SignOutButton.jsx, чтобы создать компонент «Кнопка», при нажатии которой будет выполняться перенаправление для выхода.

Добавление кнопки выхода

Обновите компонент PageLayout в src/components/PageLayout.jsx, чтобы отобразить новый компонент SignOutButton для пользователей, прошедших проверку подлинности. Код должен выглядеть следующим образом:

Условное преобразование компонентов для просмотра

Добавьте следующую инструкцию import в src/App.js:

Чтобы отобразить определенные компоненты только для пользователей, прошедших проверку подлинности, обновите функцию App в src/App.js с помощью следующего кода.

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

Получение маркера

Обновите инструкции import в файле src/App.js, чтобы они соответствовали следующему коду.

Наконец, добавьте новый компонент ProfileContent в качестве дочернего элемента AuthenticatedTemplate в компонент App файла src/App.js. Теперь ваш компонент App должен выглядеть следующим образом.

Приведенный выше код будет преобразовать кнопку для просмотра пользователями, выполнившими вход, предоставляя им тем самым возможность запрашивать маркер доступа для Microsoft Graph при нажатии этой кнопки.

После первоначального входа пользователей приложение не должно требовать от них повторно проходить проверку подлинности при каждой попытке доступа к защищенному ресурсу (то есть запрашивать маркер). Чтобы предотвратить такие запросы на повторную проверку подлинности, вызовите метод, acquireTokenSilent который сначала ищет кэшированный маркер доступа с не истекшим сроком действия, а затем при необходимости используйте маркер обновления для получения нового маркера доступа. Но иногда требуется настроить принудительное взаимодействие пользователей с платформой удостоверений Майкрософт. Пример:

При вызове acquireTokenPopup открывается всплывающее окно (или acquireTokenRedirect перенаправляет пользователей на платформу удостоверений Майкрософт). В этом окне пользователям необходимо подтвердить учетные данные, предоставить согласие на требуемый ресурс или выполнить двухфакторную проверку подлинности.

Если вы используете Internet Explorer, рекомендуется использовать методы loginRedirect и acquireTokenRedirect из-за известной проблемы со всплывающими окнами в этом браузере.

Вызов API Microsoft Graph

Создайте файл с именем graph.js в папке src и добавьте следующий код для отправки вызовов REST в API Microsoft Graph.

Затем создайте файл с именем ProfileData.jsx в src/components и добавьте следующий код.

Затем откройте файл src/App.js и добавьте приведенный ниже код в инструкции import.

Наконец, обновите ProfileContent компонент в файле src/App.js, чтобы вызвать Microsoft Graph и отобразить данные профиля после получения маркера. Теперь ваш компонент ProfileContent должен выглядеть следующим образом.

После внесения указанных выше изменений метод callMSGraph() выполняет HTTP-запрос GET к защищенному ресурсу, которому требуется маркер. Затем метод возвращает содержимое вызывающему объекту. Этот метод добавляет полученный маркер в заголовок авторизации HTTP. Для примера приложения, созданного с помощью этого учебника, защищенным ресурсом является конечная точка me из API Microsoft Graph, которая отображает сведения о профиле выполнившего вход пользователя.

Тестирование приложения

Вы завершили создание приложения и теперь готовы запустить веб-сервер и протестировать функциональность приложения.

Обслужите приложение, запустив выполнение следующей команды из корневой папки проекта.

Нажмите кнопку входа, чтобы войти.

Предоставление разрешения на доступ к приложению

При первом входе в приложение вам будет предложено предоставить ему доступ к профилю, а также выполнить вход:

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

Вызов API Graph

После входа выберите See Profile (Просмотреть профиль), чтобы просмотреть сведения о профиле пользователя, возвращенные в ответе на вызов API Microsoft Graph.

Дополнительные сведения об областях и делегированных разрешениях

Для чтения профиля пользователя API Microsoft Graph требуется область user.read. По умолчанию эта область автоматически добавляется в каждое приложение, зарегистрированное на портале Azure. Для других API Microsoft Graph, а также для пользовательских API вашего внутреннего сервера, могут потребоваться дополнительные области. Например, для отображения сообщений электронной почты пользователя API Microsoft Graph требуется область Mail.Read.

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

Справка и поддержка

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

Дальнейшие действия

Если вы хотите узнать больше о разработке одностраничных приложений JavaScript на платформе удостоверений Майкрософт, см. серию статей:

Источник