android - 离子电容器 Firebase 电话号码身份验证问题

Question

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

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

问题：

电话号码只能在附加到 url 时使用，因此如果您通过网站制作 ionic 应用程序，则通过 firebase 的电话号码身份验证将起作用，但是，如果您尝试在移动设备上执行此操作，它将无法正常工作，因为 firebase需要附加一个网址，当然移动应用程序中没有网址（firebase）。

选项 1：插件

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

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

选项 2：应用内浏览器

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

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

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

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

---

请让我知道是否有任何对您有用的方法或任何解决我遇到的障碍的方法，这是我迄今为止尝试过的！

标签： androidiosfirebasefirebase-authenticationcapacitor

Answer 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结合起来