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

От /

Okta Sign-In Widget

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

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

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

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

git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample
cd okta-react-widget-sample

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

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

npm install @okta/okta-signin-widget@2.3.0 --save

Это добавит код Okta Sign-In Widget в вашу папку node_modules. Мы будем использовать версию 2.3.0 этого виджета.

Okta

Затем добавьте стили для виджета из Okta CDN в ваш файл index.html. Добавьте эти строки внутрь тега <head>:

<link
 href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-sign-in.min.css"
   type="text/css"
   rel="stylesheet"/>

<!-- Theme file: Customize or replace this file if you want to override our default styles -->
 <link
   href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-theme.css"
   type="text/css"
   rel="stylesheet"/>

Компонент LoginPage

Для начала создайте папку под названием auth в директории ./src/components. Затем создайте файл под названием LoginPage.js, куда направится компонент LoginPage.

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

import React from 'react';

export default class LoginPage extends React.Component{
 render(){
   return(
     <div>Login Page</div>
   );
  }
}

Этот маленький компонент делает не много, но по крайней мере теперь вы сможете добавить LoginPage в вашу маршрутизацию. Итак, вы импортируете компонент в верхнюю часть своего файла ./src/app.js:

import LoginPage from './components/auth/LoginPage';

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

<Route path="/login" component={LoginPage}/>

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

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

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

Измените редирект URI на http://localhost:3000, затем кликните «Готово». Будет создано приложение со следующими настройками:

Настрйоки приложения

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

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

ДОбавление виджета

Скопируйте Client ID, сгенерированный на странице настроек вашего приложения и вставьте его вместо {clientId}. Убедитесь, что вы заменили {oktaOrgUrl} на вашу организацию URL в Okta, которую вы можете найти вернувшись на главную страницу с приборной панелью в консоли разработчика. Обычно она выглядит как: https://dev-12345.oktapreview.com.

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

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

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

Вывод виджета

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

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

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

Проверка статуса пользователя

Возможно, вы заметили странный кусочек кода в методе showLogin. Эту первую строчку: Backbone.history.stop(). Виджет сам по себе использует Backbone.js для навигации между своими собственными экранами (логин, забыт пароль и т. д.), и когда он отображается, стартует Backbone.history. Поскольку вы только что поместили его в функцию showLogin, виджет визуализируется повторно при вызове функции. Так что указание Backbone остановить историю является всего лишь маленькой уловкой, потому что он перезапустится при визуализации виджета.

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

Давайте заканчивать. Убедитесь, что вы привязали контекст класса this к каждому из ваших методов. Добавьте метод logout и измените ваш метод render, чтобы решить, что именно визуализировать, в зависимости от того, залогинен уже пользователь или нет.

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

Конечный вид кода

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

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

Добавьте ссылку для входа в верхнюю панель навигации, отредактировав ./src/components/common/Navigation.js и добавив новую ссылку под существующей ссылкой для контактов:

<li><Link to="login">Login</Link></li>

Проверяем

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

npm install

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

OktaReact

Если у вас возникли какие-нибудь проблемы с приложением, попробуйте удалить директорию node_modules и файл package-lock.json, а затем перезапустить команду npm install. Это должно исправить любые проблемы с управлением зависимыми пакетами.

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

React + Okta

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

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

***
Подписывайтесь на наш канал в Telegram!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]

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

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх