离子电容 Firebase 手机号验证问题

4

如果您正在尝试使用Ionic通过Firebase电话号码进行身份验证,那么本文是为您准备的。

我花了数周时间为我的应用程序解决此问题,并开始使用电子邮件,因为解决电话号码问题需要太多时间,但我写这篇文章是为了让您不要在错误方向上浪费时间。

问题:

电话号码只能在连接到URL时使用,因此,如果您正在通过网站制作Ionic应用程序,则可以通过Firebase进行电话号码身份验证。但是,如果您正在尝试在移动设备上进行身份验证,则无法正常工作,因为Firebase需要连接url,而移动应用程序中当然没有url(firebase)。

选项1:插件

所以,最简单的选择是寻找第三方插件来实现电话号码身份验证。我相信有一个Cordova插件可以做到这一点(cordova-plugin-firebase-authentication),但是该库与Capacitor不兼容(兼容插件)。

我尝试了一些其他插件,但没有取得太大的成功。值得注意的是,(capacitor-firebase-auth插件)声称电话身份验证适用于iOS和Android,然而,实际的方法似乎非常复杂,并且使用.p8代码遵循不同的路径,我无法完成这个步骤 (混淆)。并且此插件有一些重要的限制

选项2:应用内浏览器

由于第一种选项目前似乎不太可行,第二种选项是将代码放在网站上进行电话号码认证,然后在您的应用程序中打开浏览器进行身份验证。我花了很多时间尝试使这种方法工作,但未能成功。理论上看来可能是可行的,但实际上却很混乱。这种方法最大的问题是,您想要能够在手机应用程序上运行 signInWithPhoneNumber(phoneNumber, appVerifier) ,因为这样您的应用程序会将通过电话号码登录的用户视为任何其他用户,并且它会大大简化应用程序中下游的一般身份验证。但是,为了做到这一点,您需要一个经过验证的 appVerifier,它属于 firebase.auth.RecaptchaVerifier 类。 firebase.auth.RecaptchaVerifier 应该运行 .render() 来启动 reCAPTCHA 问题,然后运行 .verify() 来验证用户在完成 reCAPTCHA 后给出的令牌 (文档)。我尝试在网站上运行 .render() 然后在移动应用程序上运行 .verify() ,并在两者之间传递令牌。我不确定为什么这样不起作用,可能只是我的设置有问题,但是在此方法上尝试一个多星期后,我放弃了尝试使其工作。我传递的令牌没有被确认。我不知道这两个函数在幕后是如何工作的,可能存在针对每个唯一实例的 firebase.auth.RecaptchaVerifier 的某些识别系统,这使得该方法无效,我真的不知道。

如果您想尝试这种方法,我建议使用 cordova 插件 ( 它在 Capacitor 项目中也兼容) 而不是使用 iframe 或 capacitor 浏览器插件 来在应用程序内部打开浏览器,因为它更易于使用,且在应用程序和网站之间传递数据的功能更好。

选项3:在 IOS 和 Android 上手动实现

我还没有尝试过这种方法,但理论上来说,您可以进入Android Studio 和 Xcode 项目中,根据 firebase 手机认证的指示编写 Swift 和 Java 代码 (Android 教程) (iOS 教程)。这可能会起作用,但我不确定在身份验证时如何通知您的 Ionic 项目去使用 Swift 和 Java 文件。


如果您有任何已成功的方法或者解决我遇到的问题的解决方案,请告诉我!这是我迄今为止尝试过的所有方法!

2个回答

3
我是OP。在进行更多的工作后,我终于使用capacitor-firebase-auth (https://github.com/baumblatt/capacitor-firebase-auth)让电话认证系统正常工作了。我还创建了一个git repo,展示了我的代码示例以及如何使用它: https://github.com/Darrow8/capacitor-phone-test 在之前的尝试中,我遇到了一些问题,无法让正常工作,但经过进一步调整,它终于成功了。另一个主要问题是让正常工作。事实证明,我必须将上述库与<@angular/fire>结合起来使用:https://www.npmjs.com/package/@angular/fire

0

对我而言,这在手机号认证上无法工作。它返回:{error:“cordova_not_available”},因为它需要使用cordova。(为了上下文,这是在调用verifyPhoneNumber()函数时发生的。) - Darrow Hartman
我认为这个库确实可以工作,但只适用于 Cordova,因为我无法让它在 Capacitor 上工作,请参阅我的新帖子。 - Darrow Hartman

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接