Question

使用新发布的Firebase电话号码Auth，我想知道是否可以在react native中使用firebase JS SDK。如果是这样的话？

Answer 1

我们（react-native-firebase团队）目前正在努力解决此问题，请参阅此问题：https://github.com/invertase/react-native-firebase/issues/119

修改：现在已经上线，可以在v3.0.0开始使用：）

Answer 2

不幸的是，电话身份验证无法使用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令牌解析的promise。您现在可以在您的react本机应用程序中成功调用signInWithPhoneNumber。

它需要一些工作，但它是可能的。请随时在Firebase Google Group论坛中提交专门的反应原生支持请求。

Answer 3

您可以检查在react-native中使用firebase phone auth的示例

react-native-firebase-phone-auth

Answer 4

要获得更好的用户体验，请参阅此仓库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配置

使用Firebase电话号码Auth与react-native

4 个答案: