Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Auth0 упрощает процесс установления личности пользователя в вашем веб-приложении. Он предоставляет безопасные и настраиваемые функции аутентификации и авторизации через свой API. Используйте его, и вам не придется беспокоиться о создании собственной системы аутентификации с нуля.

Интеграция с Auth0 упрощает включение надежной аутентификации в ваше приложение React и гарантирует безопасный доступ к вашему приложению.

Следующие шаги объясняют, что необходимо для интеграции Auth0 в приложение React.

Что такое Auth0?

Auth0 — это веб-служба, предоставляющая безопасный API для обработки аутентификация и авторизация пользователей в ваших приложениях.

Он предоставляет настраиваемую систему аутентификации, которую вы можете легко интегрировать в свое приложение React. Как только вы подключите Auth0 к своему приложению, оно будет обрабатывать остальную часть рабочей нагрузки аутентификации.

instagram viewer

Как работает Auth0?

Auth0 предоставляет функцию универсального входа, которая реализует поток проверки подлинности. Каждый раз, когда пользователь хочет войти в систему, API перенаправляет его на страницу входа Auth0, он проходит проверку подлинности, а данные об успешной проверке подлинности отправляются в ваше приложение.

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

Преимущество использования этого типа аутентификации заключается в том, что вам не нужно знать такие протоколы, как OAuth 2.0 или OpenID Connect, которые обычно используются для создания безопасной аутентификации. системы.

Создайте новый проект в консоли разработчика Auth0

Для начала вам необходимо зарегистрироваться на Auth0 счет. После регистрации перейдите в свою панель управления и нажмите Создать приложение для настройки параметров проекта аутентификации.

Auth0 предоставляет различные конфигурации аутентификации в зависимости от типа приложения, которое вы создаете. Для этого руководства введите имя вашего приложения, выберите Одностраничные веб-приложения, затем нажмите на Сохранять.

Далее выберите Реагировать из списка технологий, поддерживаемых Auth0.

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

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

Установите следующие свойства:

  • Разрешенные URL-адреса обратного вызова. URL-адрес, который сервер Auth0 будет вызывать после аутентификации пользователя.
  • Разрешенные URL-адреса выхода. URL-адрес, на который Auth0 перенаправит пользователя при выходе из системы.
  • Разрешенные веб-источники. Разрешенный URL-адрес, с которого может поступать запрос на авторизацию.

Для локальной разработки вы можете использовать http://localhost: 3000 URL. Однако, как только вы отправите свой код в производство, вам нужно будет указать URL-адреса вашего домена.

Когда вы закончите заполнять URL-адреса, нажмите Сохранить изменения внизу страницы настроек.

Установите предпочитаемых поставщиков социальных сетей

На левой панели меню панели инструментов приложения Auth0 нажмите Аутентификация, затем выберите Социальные сети. Далее нажмите на Создать соединение на странице настроек социальных связей.

Наконец, выберите и добавьте предпочитаемого поставщика социальных сетей.

Настройте Auth0 в своем приложении React

Интегрируйте службу аутентификации Auth0 в свое приложение React, создав компоненты входа и успеха.

1. Создайте приложение React и настройте файл ENV

Создать React-приложение, затем откройте папку проекта в редакторе кода. Затем в корневом каталоге папки вашего проекта создайте файл ENV для хранения переменных среды: вашего доменного имени и идентификатора клиента. Войдите в свою учетную запись Auth0, в панели управления приложения скопируйте имя домена и идентификатор клиента и сохраните их в файле ENV следующим образом:

REACT_APP_AUTH0_DOMAIN= ваше доменное имя 
REACT_APP_AUTH0_CLIENT_ID= идентификатор вашего клиента

2. Установите необходимые пакеты

Запустите эту команду на своем терминале, чтобы установить необходимые зависимости:

npm установить @auth0/auth0-реагировать

3. Оберните свой компонент приложения с помощью провайдера Auth0

Провайдер Auth0 использует React Context. Это позволяет вам получить доступ ко всем его свойствам из компонента приложения. Поставщик Auth0 принимает три параметра: домен клиента, идентификатор клиента и URI перенаправления.

Откройте файл index.js, удалите код React шаблона и добавьте следующий код:

Импортировать Реагировать от«реагировать»;
Импортировать РеактДОМ от'реакция-дом/клиент';
Импортировать Приложение от'./Приложение';
Импортировать{Auth0Provider} от'@auth0/auth0-реагировать';
константа корень = ReactDOM.createRoot(документ.getElementById('корень'));
корень.рендер(
 домен = {process.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {окно.location.origin}
 >

 </Auth0Provider>, document.getElementById('root')
);

4. Создайте компонент страницы входа

Создайте новую папку в каталоге /src вашего приложения React и назовите ее pages. Внутри этой папки создайте два файла: Login.js и Success.js.

Откройте файл login.js и добавьте приведенный ниже код. Компонент страницы входа будет отображать кнопку входа.

Импортировать Реагировать от«реагировать»
Импортировать {использоватьAuth0} от'@auth0/auth0-реагировать';
константа Логин = () => {
константа {loginWithRedirect, isAuthenticated} = useAuth0();


возвращаться (проверено || (
экспортпо умолчанию Авторизоваться

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

5. Создайте компонент страницы успеха

Этот компонент будет отображать две основные функции: профиль аутентифицированного пользователя и кнопку выхода.

В файл Success.js добавьте следующий код:

Импортировать Реагировать от«реагировать»
Импортировать {использоватьAuth0} от'@auth0/auth0-реагировать'
константа Успех = () => {
константа {пользователь, выход, isAuthenticated} = useAuth0(); 


возвращаться (проверено && ( 




Профиль пользователя</h1> 
{имя пользователя}
{имя_пользователя}</h2> 





{user.email}</p> 


экспортпо умолчанию Успех

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

Хук UseAuth0 также предоставляет свойство isAuthenticated, которое позволяет вам отображать компоненты условно. Если пользователь аутентифицирован, код отобразит данные его профиля и отобразит компонент кнопки выхода.

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

Стоит ли попробовать службу аутентификации Auth0?

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