Русский
  • react
  • react-native
  • expo
  • урок
  • auth
  • аутентификация
  • oauth
  • oidc
  • идентичность

Создание аутентификации Expo (React Native) с помощью Logto

Узнайте, как создать поток аутентификации пользователя в Expo (React Native), интегрировав Logto SDK.

Gao
Gao
Founder

Начните

Введение

  • Logto - это открытая альтернатива Auth0 для создания инфраструктур идентификации. Он поддерживает различные методы входа, включая имя пользователя, электронную почту, номер телефона и популярные социальные входы, такие как Google и GitHub.
  • Expo (React Native) является экосистемой инструментов, которые помогают создавать универсальные нативные приложения на React, работающие на Android, iOS и в вебе.

В этом руководстве мы покажем вам, как создать поток аутентификации пользователей с помощью Expo (React Native), интегрируя Logto SDK. В руководстве используется TypeScript в качестве языка программирования.

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

Перед началом убедитесь, что у вас есть следующее:

Создание приложения Logto

Чтобы начать, создайте приложение Logto с типом "Native". Следуйте этим шагам для создания приложения Logto:

  1. Войдите в Консоль Logto.
  2. В левой панели навигации нажмите на Приложения.
  3. Нажмите на Создать приложение.
  4. На открывшейся странице найдите раздел "Native" и выберите карточку "Expo (React Native)".
  5. Нажмите на Начать создание и введите имя вашего приложения.
  6. Нажмите на Создать.

Затем вы увидите интерактивное руководство, которое проведет вас через процесс интеграции Logto SDK с вашим приложением Expo (React Native). Следующее содержание может служить справочным материалом для будущего использования.

Попробуйте интерактивное руководство Logto Cloud

Интеграция с Logto SDK

Установка

Установите Logto SDK и его пира зависимость через ваш любимый менеджер пакетов:

Пакет @logto/rn является SDK для Logto. Остальные пакеты являются его пировыми зависимостями. Они не могут быть перечислены как прямые зависимости, потому что Expo CLI требует, чтобы все зависимости для нативных модулей были установлены непосредственно в корневом проекте package.json.

Инициализация Logto провайдера

Импортируйте и используйте LogtoProvider, чтобы обеспечить контекст Logto:

Реализация входа и выхода

Перейдите на страницу деталей приложений в Logto Console. Добавьте URI перенаправления для нативных приложений (например, io.logto://callback), затем нажмите «Сохранить».

  • Для iOS схема URI перенаправления по сути не важна, так как класс ASWebAuthenticationSession будет отслеживать URI перенаправления, независимо от того, зарегистрирован он или нет.

  • Для Android схема URI перенаправления должна быть указана в файле app.json Expo, например:

Теперь вернитесь в ваше приложение, вы можете использовать хук useLogto для входа и выхода:

Отображение информации о пользователе

Чтобы отобразить информацию о пользователе, вы можете использовать метод getIdTokenClaims():

Контрольная точка: Запуск приложения

Теперь вы можете запустить приложение и попробовать войти/выйти с помощью Logto:

  1. Откройте приложение в своем браузере, вы должны увидеть кнопку "Войти".
  2. Нажмите кнопку "Войти", и вы должны быть перенаправлены на страницу входа Logto.
  3. После входа вы должны быть перенаправлены обратно в приложение, и вы должны увидеть данные пользователя и кнопку "Выйти".
  4. Нажмите кнопку "Выйти", и вы должны быть перенаправлены на страницу выхода Logto, а затем обратно в приложение в состоянии без входа.

Если у вас возникнут какие-либо проблемы во время интеграции, не стесняйтесь присоединиться к нашему серверу Discord, чтобы пообщаться с сообществом и командой Logto!

Дополнительное чтение

Попробуйте Logto сегодня