Я просто хочу начать с того, что у меня практически нет опыта работы с React или React Native, поэтому, вероятно, есть вещи, которые я делаю, которые можно улучшить, но я хотел научиться и должен с чего-то начать.
Я решил начать с создания рабочего процесса OAuth в React Native. Я собираюсь пройти через это с точки зрения пользователя Mac OSX и для iOS.
Начиная
Если лучше начать работу, чем следовать руководству по началу работы, я сначала следил за потоком Expo, так как это был тот, который отображается по умолчанию. Но вскоре я узнал, что с OAuth вам нужно установить некоторые собственные зависимости для потока Auth.
Чтобы создать приложение, сначала достаточно просто установить cli npm install -g react-native-cli, а затем создать свой проект react-native init MyAwesomeAuthApp.
Добавление аутентификации
Установка
Для Auth я собираюсь использовать пакет React Native App Auth, который позволяет поставщикам OAuth 2.0 и OpenID Connect.
Установите и скомпонуйте собственный пакет, выполнив следующие действия:
npm i react-native-app-auth react-native link react-native-app-auth
Часть link - это то, что добавляет собственные зависимости к сборкам ios и andriod. Я решил использовать шаг Carthage для добавления зависимостей, поскольку у меня были некоторые проблемы с модулями Cocoa, которые не работали правильно, чтобы установить зависимость. Для начала перейдите в папку iOS и создайте Cartfile со следующим содержимым:
github "openid/AppAuth-iOS" "master"
Вам нужно будет установить carthage, что вы можете сделать с brew install carthage. После того, как вы установили и создали Cartfile, вы можете запустить carthage update — platform iOS для установки пакетов.
Как только это будет завершено, вам нужно будет скопировать AppAuth.framework, который находится в ios/Carthage/Build/iOS, и добавить его в Frameworks в Xcode. Наконец, настройте фазу Copy Files в Build Phases, выберите Frameworks в качестве пункта назначения и добавьте AppAuth.framework и обязательно отметьте опцию Code Sign on Copy.
Настройка Xcode
Теперь нам нужно открыть проект ios в Xcode, чтобы завершить настройку. Если вы запустите open MyAuthApp.xcodeproj, из папки ios должно открыться Xcode.
Как только проект будет открыт, разверните папку с названием проекта, в моем случае MyAuthApp вы должны увидеть файл с именем AppDelegate.h, вы можете заменить его содержимое следующим образом:
Это устанавливает AuthorisationFlowManager, и вам нужно будет обновить AppDelegate.m, чтобы позволить методу openUrl подавать авторизацию в приложение. Перед вызовом @end файла AppDelegate.m добавьте следующее:
На этом настройка и установка Auth завершены, теперь вы можете запустить react-native run-ios и увидеть работающее приложение в симуляторе. Это может занять некоторое время и подтвердит, что установка завершена, если все пойдет хорошо. Мы еще не добавили аутентификацию в фактическое приложение React, так что это просто для того, чтобы уточнить, что все работает.
Добавление аутентификации
Поток OAuth
Мы установили пакет и настроили все, теперь нам нужно добавить Auth в приложение React. Мы собираемся пока упростить это и просто добавим кнопку, которая будет запускать аутентификацию.
В приведенном выше фрагменте я обновил сгенерированный App.js файл, который react-native создается по умолчанию. Я удалил часть исходного текста и добавил кнопку входа. Я импортировал пакет аутентификации и создал _authorize метод, который откроет страницу входа в систему выбранных поставщиков аутентификации.
В приведенном выше примере я выбрал Google. Вам нужно будет настроить учетные данные OAuth и добавить их к clientId и redirectUrl. После этого вы сможете перезагрузить приложение и нажать кнопку login, чтобы перейти на экран входа в Google! Ага!!
Спасибо за прочтение. Я не эксперт по React, поэтому, если у вас есть что-то, что я сделал не так или что можно улучшить, я буду признателен за любые комментарии или сообщения!
