Блог

Для всех, кто пытается пройти аутентификацию по номеру телефона firebase с помощью ionic, этот пост для вас.

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

Проблема:

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

Вариант 1: Плагины

Таким образом, самым простым вариантом было бы поискать сторонние плагины для реализации аутентификации номера телефона. Я полагаю, что для этого есть плагин Cordova (cordova-плагин-firebase-аутентификация), однако эта библиотека несовместима с конденсатором (совместимые плагины).

Есть еще несколько плагинов, которые я пытался реализовать без особого успеха. В частности, плагин (конденсатор-firebase-auth). В нем утверждается, что авторизация телефона работает для ios и Android, однако фактический метод для этого кажется очень сложным и следует по другому пути, используя коды .p8, которые я не смог выполнить (путаница). И этот плагин имеет некоторые серьезные ограничения.

Вариант 2: Встроенные браузеры

Поскольку первый вариант сейчас кажется не очень осуществимым, второй вариант-разместить код на веб-сайте для аутентификации по номеру телефона, а затем открыть браузер в вашем приложении для аутентификации. Я потратил кучу времени, пытаясь заставить этот метод работать, но безрезультатно. Теоретически это кажется возможным, но на практике это полный бардак. Самая большая проблема с этим методом заключается в том, что вы хотите иметь возможность запускать signInWithPhoneNumber(phoneNumber, appVerifier) его в своем мобильном приложении, потому что тогда ваше приложение обрабатывает пользователей, вошедших в систему по номеру телефона, как и любого другого пользователя, и это значительно упрощает общую аутентификацию в вашем приложении. Однако для того, чтобы это сделать , вам нужен проверенный appVerifier , который относится к этому классу firebase.auth.RecaptchaVerifier . Предполагается firebase.auth.RecaptchaVerifier , что он запускается .render() для инициирования повторной проверки, а затем запускается .verify() для проверки токена, который выдается после того, как пользователь выполнит повторную проверку (документация). Я пытался бежать .render() на веб-сайте, а затем .verify() в мобильном приложении, передавая токен между ними. Я не уверен, почему это не работает, это может быть просто проблемой с моей настройкой, но после более чем недельной попытки использовать этот метод я отказался от попыток заставить его работать. Жетон, который я передаю, просто не подтверждает. Я не знаю, как эти две функции работают под капотом, возможно, существует какая-то система идентификации для каждого уникального экземпляра firebase.auth.RecaptchaVerifier , которая делает этот метод недействительным, я действительно не знаю.

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

Вариант 3: Реализация вручную на IOS и Android

Я не опробовал этот метод, однако теоретически вы могли бы перейти в свои проекты Android studio и Xcode, чтобы на самом деле написать код swift и java, следуя инструкциям firebase для аутентификации телефона firebase (учебник по android) (учебник по ios). Это, вероятно, сработало бы, но я не уверен, как бы вы уведомили свой ионный проект о том, чтобы при проверке подлинности перейти к файлам swift и java.

Пожалуйста, дайте мне знать, если есть какие-либо методы, которые сработали для вас, или какие-либо решения проблем, с которыми я столкнулся, это то, что я пробовал до сих пор!

Я-оперативник. После дополнительной работы я, наконец, заставил систему аутентификации телефона работать с помощью конденсатора-firebase-auth (https://github.com/baumblatt/capacitor-firebase-auth). Я также создал репозиторий git, в котором показан пример моего кода и как его использовать: https://github.com/Darrow8/capacitor-phone-test

В моей предыдущей попытке у меня возникли проблемы с выходом cfaSignInPhone на работу, но после дополнительной настройки это сработало. Еще одной важной проблемой было приступить firebase.auth().signInWithCredential к работе. Оказывается, мне пришлось объединить упомянутую capacitor-firebase-auth библиотеку с @angular/fire https://www.npmjs.com/package/@angular/fire

Вы можете просто использовать cordova-плагин-firebase-аутентификацию, он совместим с конденсатором, он работает для меня.

https://ionicframework.com/docs/native/firebase-authentication