使用带有 react-native 的 Firebase 电话号码身份验证答案

【问题标题】：Using Firebase Phone number Auth with react-native使用带有 react-native 的 Firebase 电话号码身份验证
【发布时间】：2017-10-17 20:08:52
【问题描述】：

有了新发布的 Firebase 电话号码 Auth，我想知道是否可以在 react native 中使用 firebase JS SDK 来使用它。如果有怎么办？

【问题讨论】：

您不能使用 JS SDK，而是围绕本机 (iOS/Android/etc) SDK 构建包装器。

标签： firebase react-native firebase-authentication

【解决方案1】：

不幸的是，电话身份验证不适用于 react-native。目前，您可以执行以下操作：先决条件，用于 Web 的 Firebase Phone 身份验证取决于应用验证程序接口： https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier

您可以为使用 reCAPTCHA 令牌解析的 verify() 方法提供自己的实现。以下是你可以做到的：

用户在您的应用中发起电话号码登录。
您需要打开 chrome 自定义选项卡或 SFSafariViewController 并重定向到您拥有的列入白名单的网站。然后渲染一个 firebase.auth.RecaptchaVerifier 实例。您要求用户解决 reCAPTCHA。您还可以使用不可见的 reCAPTCHA，它可能不需要向用户提出任何挑战。
然后，您可以使用 FDL（Firebase 动态链接）将 reCAPTCHA 响应令牌传回您的应用。这保证只有您的应用可以打开它。
然后，您将提供您自己的 ApplicationVerifier 接口实现，该接口在 verify() 上返回一个使用 reCAPTCHA 令牌解析的承诺。您现在可以在您的 react 原生应用中成功调用 signInWithPhoneNumber。

这需要一些工作，但这是可能的。随时在 Firebase Google Group 论坛中提出专门的 react native 支持请求。

【讨论】：

感谢您的完整流程，我可以确认这是有效的，但用户体验不够好...如果页面仅包含 reCAPTCHA 小部件，则挑战自第一次出现以来经常出现用户交互只需点击 reCAPTCHA

【解决方案2】：

我们（react-native-firebase 团队）目前实际上正在为此工作，请参阅此问题：https://github.com/invertase/react-native-firebase/issues/119

编辑：现在可以在 v3.0.0 及更高版本中使用 :)

【讨论】：

看到这个作品真的很兴奋！你认为你能估计一下这个功能什么时候发布吗？

【解决方案3】：

你可以查看这个在 react-native 中使用 firebase phone auth 的例子

react-native-firebase-phone-auth

【讨论】：

【解决方案4】：

为了获得更好的用户体验，请参阅此 repo https://github.com/boudlal/react-native-firebase-phone-auth，我建议进行一些更改，以便用户不必完成任何挑战或点击我不是机器人

在 Captcha.html 文件中将大小更改为不可见，以便在后台生成令牌

    var captcha = new firebase.auth.RecaptchaVerifier("captcha", {
          size: "normal",
          callback: function (token) {
            callback(token);
          },
          "expired-callback": function () {
            callback("");
          },
        });

需要将 Captcha.html 部署到服务器并通过 url 调用 react-native-webview
样式和删除不需要的文本也可以让 webview 变得透明

style={{backgroundColor:'transparent'}}

在项目和Captcha.html中复制你的firebase项目对应的firebase配置

【讨论】：