Руководство по загрузке приложения React Native с Auth0
Я написал несколько статей об использовании Auth0 и о том, насколько я большой поклонник. В этой статье я хочу продемонстрировать, как настроить Auth0 с помощью мобильного приложения React Native.
Теперь, если вы не знакомы с React Native, он дает вам возможность создавать собственные мобильные приложения с помощью React. Преимущество использования React Native заключается в том, что вам не нужно поддерживать отдельные базы кода для приложений iOS и Android. Вы создаете его с помощью React Native и можете работать на нескольких платформах.
Другое важное преимущество состоит в том, что если у вас уже есть опыт, вам не нужно изучать что-то совершенно новое. Это не то же самое, но концепции примерно одинаковы, поэтому вы сможете быстро это понять.
Стартап, в котором я работаю, уже некоторое время использует вместе React Native и Auth0, и я надеюсь, что некоторые уроки, которые я усвоил, принесут вам пользу, если вы пойдете по тому же пути.
Как я уже упоминал выше, я написал несколько других статей об использовании Auth0, и я дам ссылки на них ниже. Обязательно ознакомьтесь с ними, если вам интересно.
Необязательно, чтобы вы уже читали предыдущую статью, но вам нужно будет настроить существующую учетную запись Auth0 или создать ее, прежде чем следовать демонстрации в этой статье.
Создайте новое приложение в Auth0
Перед тем, как перейти к приложению, нам сначала нужно будет настроить новое приложение в нашем администраторе Auth0. Вам нужно перейти в раздел «Приложения» и нажать кнопку «Создать приложение» в правом верхнем углу.
Появится диалоговое окно с запросом информации о нашем новом приложении. Введите имя, чтобы идентифицировать новое приложение, и выберите вариант «Собственное» в списке типов приложений.
Обратите внимание: если вы перейдете на вкладку «Настройки» для вновь созданного приложения, вы увидите домен и идентификатор клиента, к которым вам нужно будет вернуться позже, когда мы перейдем к настройке приложения.
Создайте новое приложение React Native
Обратите внимание: пока я выполняю шаги по установке React Native и созданию нового приложения, я делаю это на Mac. Если вы используете другую операционную систему, могут возникнуть другие проблемы, так что имейте это в виду. Также, если вы работаете на Mac, перед установкой React Native убедитесь, что у вас установлен XCode.
Во-первых, нам нужно установить React Native CLI. Затем, как только мы настроим эту настройку, мы сможем создать наше новое приложение. Выполните следующие команды в терминале.
npm install -g react-native npx react-native init Auth0ExampleApp
У нас есть еще немного настроек, чтобы добавить Auth0 SDK в наше приложение. Выполните следующие команды в каталоге проекта. React Native использует yarn в качестве диспетчера пакетов, поэтому убедитесь, что он у вас установлен.
// Install yarn if you don't have it npm install -g yarn yarn add react-native-auth0
Нам также нужно будет немного настроить модули iOS и Android. Также перед настройкой нам нужно запустить команду для установки зависимостей в папке ios в проекте.
cd ios pod install
Настроить Android
Для настройки Android нам нужно будет открыть android/app/src/main/AndroidManifest.xml в вашем редакторе и обновить его до следующего.
В результате мы добавили новый фильтр намерений для обработки перенаправления на логин Auth0.
Настроить iOS
Нам нужно будет открыть ios/PROJECT NAME/AppDelegate.m и заменить содержимое следующим кодом.
Нам также нужно будет добавить новую пару ключ / значение в ios/PROJECT NAME/Info.plist
Настройка URL-адресов обратного вызова и выхода из системы Auth0
Нам нужно будет вернуться в админку Auth0, чтобы настроить пару URL-адресов. После того, как пользователь войдет в систему, используя экран входа в систему Auth0, Auth0 выполнит обратный вызов в приложение и то же самое при выходе из системы.
URL-адреса соответствуют следующему соглашению:
Android
{YOUR_APP_PACKAGE_NAME}://dev-gkawf0h0.us.auth0.com/android/{YOUR_APP_PACKAGE_NAME}/callback
iOS
{PRODUCT_BUNDLE_IDENTIFIER}://dev-gkawf0h0.us.auth0.com/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback
Вам нужно будет заменить {YOUR_APP_PACKAGE_NAME} и {PRODUCT_BUNDLE_IDENTIFIER} на имя пакета вашего приложения. Например, для проекта, который я создал, имя пакета com.auth0exampleapp. Кроме того, замените домен своим собственным доменом приложения Auth0. Я добавил свой собственный в пример, чтобы продемонстрировать, как создавать эти URL-адреса.
Вы откроете настройки своего приложения Auth0 и добавите эти значения, разделенные запятыми, для «Разрешенные URL-адреса обратного вызова» и «Разрешенные URL-адреса для выхода», как я сделал на снимке экрана ниже.
Это должно завершить настройку, и теперь мы готовы увидеть, как Auth0 работает в нашем приложении.
Добавить Auth0 в приложение
Теперь мы прошли настройку, и мы готовы погрузиться в код.
Чтобы запустить приложение в iOS, откройте /ios/PROJECT NAME/PROJECT NAME.xcworkspace в Xcode, а затем соберите и запустите либо в симуляторе, либо на своем устройстве.
Чтобы запустить версию Android, откройте папку /android в Android Studio, а затем создайте и запустите на виртуальном устройстве или на своем собственном устройстве.
Теперь мы внесем изменения в App.js. Давайте удалим практически все, что существует в настоящее время, и обновим код, чтобы он выглядел следующим образом.
Простой экран, у нас просто есть кнопка входа в систему, которая перенаправляет на вход Auth0 на печатной машине. При успешном входе в систему мы получаем обратно токен доступа пользователя для текущего сеанса.
Мы сделали это! Наши пользователи перенаправляются к нашему клиенту Auth0 для входа в систему или регистрации новой учетной записи.
Давайте сделаем еще одно обновление в нашем файле App.js, чтобы дать им возможность выйти из системы после получения токена доступа. И мы также добавим вторую кнопку для запроса профиля пользователя у Auth0, когда у нас будет токен доступа.
Это все, что нам нужно для добавления новых функций. См. Снимок экрана ниже, чтобы увидеть полную демонстрацию.
Дополнительные параметры мобильного входа для Auth0
Эта настройка дает нам базовую настройку входа / выхода. Auth0 также предлагает дополнительные методы, позволяющие вашим пользователям войти в систему. У них есть возможность без пароля для отправки пользователю ссылки электронной почты или отправки пароля через SMS. Оба являются отличными вариантами для мобильных приложений.
На этом завершается статья о добавлении входа Auth0 в приложение React Native. Я надеюсь, что это руководство будет полезно, если вы пытаетесь установить это соединение в приложении. Спасибо за внимание!
Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube в Decoded!
