Аутентификация сложна! В настоящее время для создания простой функции входа или выхода из системы требуется значительный объем стандартного кода. А теперь картинка, мы хотим добавить аутентификацию с помощью Google или Facebook? Более шаблонный, правда?

Что, если бы я сказал вам, что в React вы можете сделать это, просто обернув свой код поставщиком контекста и используя настраиваемый хук реакции?

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

Настраивать

Панель управления Auth0

Итак, первое, что вам нужно, это учетная запись Auth0. Вы можете бесплатно зарегистрироваться на странице https://auth0.com/signup.

После настройки учетной записи на панели настроек приложения создайте новое приложение типа одностраничное веб-приложение.

Теперь, когда у вас есть приложение, вам нужно сначала получить некоторые данные и выполнить некоторые настройки. Вот что вам нужно сделать:

  • Скопируйте значение вашего домена (мы будем использовать его на следующем шаге)
  • Скопируйте значение своего идентификатора клиента (мы будем использовать его на следующем шаге)

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

Теперь мы все настроили на дашборде, следующее, что вам понадобится, это приложение.

Приложение React

В этом проекте вы должны сначала сделать две вещи:

1. Установите auth0-response SDK.

2. Добавьте ранее скопированный домен и идентификатор клиента в файл .env.

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

Auth0Provider

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

  • параметры domain и clientId, которые мы можем получить благодаря нашей настройке в файле .env
  • redirectUri, который является URL по умолчанию, где Auth0 перенаправляет браузер с результатами аутентификации. В приведенном выше фрагменте мы используем свойство origin из объекта location для получения URL-адреса текущей страницы.

Обернув наше приложение Auth0Provider, теперь мы можем начать использовать ловушку useAuth0.

useAuth0

useAuth0 - это настраиваемый обработчик React, входящий в состав Auth0 React SDK. Этот хук предоставляет вам несколько помощников и функций, которые вы можете использовать для абстрагирования всей логики аутентификации и часто огромного шаблонного кода из вашего кода. В следующих разделах я представлю вам некоторые методы аутентификации для входа в систему (loginWithRedirect) и выхода из системы (logout), а также некоторые состояния аутентификации для получения состояния аутентификации (isAuthenticated) и даты аутентифицированного пользователя (user).

Авторизоваться

Чтобы добавить возможность входа в свое приложение, вы можете использовать метод loginWithRedirect.

Здесь мы показываем наш LoginButton компонент. В этом компоненте мы деструктурируем метод loginWithRedirect из ловушки useAuth0 и назначаем его вызов событию кнопки onClick. После нажатия кнопки вы будете перенаправлены на страницу Универсальный вход Auth0, где пользователь может либо войти в систему, либо зарегистрироваться.

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

Выйти

Чтобы добавить возможность выхода из приложения, вы можете использовать метод logout

Здесь мы показываем наш LogoutButton компонент. В этом компоненте мы деструктурируем метод logout из ловушки useAuth0 и назначаем его вызов событию кнопки onClick. Этот метод получает параметр returnTo, где благодаря свойству origin из объекта location мы указываем URL-адрес, по которому Auth0 перенаправит браузер после процесс выхода.

Состояние аутентификации: аутентифицировано и Пользователь

Как упоминалось выше, помимо функций, к которым вы получаете доступ благодаря ловушке useAuth0, вы также можете получить доступ к некоторым свойствам состояния аутентификации, таким как isAuthenticated и user

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

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

Бонус: добавление новой социальной аутентификации на портале Auth0

Шаг 1

На панели настроек приложения перейдите на вкладку социальные связи, чтобы увидеть все текущие настроенные социальные связи, которые у вас есть. Щелкните по кнопке Create Connection. (Щелкните здесь, чтобы пропустить этот и предыдущий шаг).

Шаг 2

Выберите одного провайдера. В этом примере я выберу GitHub (Щелкните здесь, чтобы пропустить этот и предыдущие шаги).

Шаг 3

Прокрутите вниз и нажмите кнопку «Создать».

Шаг 4

Теперь вы можете переключить этого поставщика для своего приложения.

Шаг 5

Попробуйте снова войти в свое приложение.

TL; DR

На всякий случай, если вам нужно краткое изложение всего, вот оно:

  1. Создайте учетную запись Auth0 на странице https://auth0.com/signup
  2. Получите домен и идентификатор клиента из своего приложения на странице https://manage.auth0.com/#/applications и добавьте их в свое приложение .env
  3. Настройте разрешенные URL-адреса обратного вызова, в этом случае добавьте http://localhost:3000
  4. Настройте URL-адреса разрешенного выхода, в этом случае добавьте http://localhost:3000
  5. Настройте Разрешенное Интернет-происхождение, в этом случае добавьте http://localhost:3000
  6. Установите Auth0 React SDK
  7. Оберните свой основной компонент Auth0Provider и добавьте к нему параметры домена, идентификатора клиента и redirectUri.
  8. С помощью ловушки useAuth0 деструктурируйте метод входа в систему (loginWithRedirect или loginWithPopup) и создайте компонент входа в систему.
  9. С помощью хука useAuth0 деструктурируйте метод выхода из системы и создайте компонент выхода из системы.
  10. С помощью ловушки useAuth0 деструктурируйте переменную isAuthenticated и свойства пользователя для доступа к состоянию аутентификации внутри компонента.

Что дальше?

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

Надеюсь, всем понравилось, и следите за обновлениями!

Первоначально опубликовано на https://www.danieljcafonso.com.