【问题标题】:Ionic Capacitor Firebase Phone Number Authentication Problems离子电容器 Firebase 电话号码身份验证问题
【发布时间】:2021-06-08 22:09:31
【问题描述】:

对于任何尝试使用 ionic 通过 Firebase 电话号码进行身份验证的人,这篇文章适合您。

我花了数周时间尝试为我自己的应用解决这个问题,并开始使用电子邮件,因为解决电话号码问题花费了太多时间,但我发布这篇文章是为了避免你将时间浪费在红色上鲱鱼。

问题:

电话号码只能在附加到 url 时使用,因此如果您通过网站制作 ionic 应用程序,则可以通过 firebase 进行电话号码身份验证,但是,如果您尝试在移动设备上执行此操作,则不会工作,因为 firebase 需要附加一个 url,当然移动应用程序中没有 url (firebase)。

选项 1:插件

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

我尝试实现了一些其他插件,但没有取得多大成功。值得注意的是 (capacitor-firebase-auth plugin)。它声称电话身份验证适用于 ios 和 android,但是,执行此操作的实际方法似乎非常复杂,并且使用我无法遵循的 .p8 代码遵循不同的路径(confusion)。而且这个插件有一些主要的limitations

选项 2:应用内浏览器

由于选项一现在看起来不太可行,第二个选项是将代码放在网站上进行电话号码验证,然后在您的应用中打开浏览器进行验证。我花了很多时间试图让这种方法无效。理论上似乎可行,但在实践中,它是一团糟。这种方法的最大问题是您想要的是能够在您的移动应用程序上运行signInWithPhoneNumber(phoneNumber, appVerifier),因为这样您的应用程序就会像对待任何其他用户一样对待通过电话号码登录的用户,这使得一般身份验证更加容易在您的应用程序的下游。但是,为了做到这一点,您需要经过验证的appVerifier,它属于firebase.auth.RecaptchaVerifier 类。 firebase.auth.RecaptchaVerifier 应该运行.render() 来启动recaptcha provlem,然后运行.verify() 来验证用户执行recaptcha (documentation) 后给出的令牌。我尝试在网站上运行.render(),然后在移动应用程序上运行.verify(),在两者之间传递令牌。我不确定为什么这不起作用,这可能只是我的设置有问题,但是在尝试了这个方法一个多星期后,我放弃了尝试让它工作。我通过的令牌只是没有确认。我不知道这两个函数在后台是如何工作的,firebase.auth.RecaptchaVerifier 的每个唯一实例可能有一些识别系统使这个方法无效,我真的不知道。

如果您想尝试这种方法,我建议使用the cordova plugin(它与电容器项目兼容)而不是 iframe 或 capacitor browser plugin 用于网站的应用内浏览器,因为它更容易使用,并且有更好的功能在应用程序和网站之间传递数据。

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

我还没有尝试过这种方法,但是,理论上,您可以进入您的 android studio 和 Xcode 项目,按照 firebase 手机身份验证的 firebase 指令实际编写 swift 和 java 代码 (android tutorial) (ios tutorial )。这可能会起作用,但我不确定您将如何通知您的 ionic 项目在身份验证时遵循 swift 和 java 文件。


请告诉我是否有任何对您有用的方法或任何解决我遇到的障碍的方法,这是我迄今为止尝试过的!

【问题讨论】:

    标签: android ios firebase firebase-authentication capacitor


    【解决方案1】:

    我是 OP。在做更多的工作之后,我终于让电话身份验证系统使用电容器-火力基础-身份验证 (https://github.com/baumblatt/capacitor-firebase-auth) 工作。我还创建了一个 git repo,展示了我的代码示例以及如何使用它:https://github.com/Darrow8/capacitor-phone-test

    在我之前的尝试中,我遇到了让cfaSignInPhone 工作的问题,但经过更多调整后,它工作了。另一个主要问题是让firebase.auth().signInWithCredential 工作。事实证明,我必须将上述 capacitor-firebase-auth 库与 @angular/fire https://www.npmjs.com/package/@angular/fire 结合起来。

    【讨论】:

      【解决方案2】:

      您可以简单地使用与电容器兼容的 cordova-plugin-firebase-authentication,它对我有用。

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

      【讨论】:

      • 对我来说,这不适用于电话号码身份验证。它返回: {error: "cordova_not_available"} 因为它需要cordova。 (对于上下文,这是在调用 verifyPhoneNumber() 函数时)
      • 我认为这个库确实有效,但仅适用于科尔多瓦,因为我无法让它适用于电容器,请参阅我的新帖子
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-01-23
      • 1970-01-01
      • 2020-01-28
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多