将 Firebase 电话号码身份验证与 react-native 结合使用

Question

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

Answer 1

我们(react-native-firebase团队)目前正在研究这个问题，请参阅此问题：https://github.com/invertase/react-native-firebase/issues/119

编辑：这现已上线，可在 v3.0.0 及更高版本中使用 :)

Answer 2

不幸的是，电话身份验证不能开箱即用。 目前，您可以执行以下操作： 先决条件，适用于网页版的 Firebase Phone 身份验证取决于应用验证程序界面： https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier

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

1. 用户在你的应用中启动电话号码登录。
2. 您将需要打开Chrome自定义选项卡或SFSafariViewController 并重定向到您拥有的已列入白名单的网站。然后，您可以渲染一个 firebase.auth.RecaptchaVerifier 实例。您要求用户解决 reCAPTCHA。您也可以使用不可见的 reCAPTCHA，它可能不需要向用户提出任何挑战。
3. 然后，您可以使用 FDL(Firebase 动态链接)将 reCAPTCHA 响应令牌传递回您的应用。这保证了只有你的应用可以打开它。
4. 然后，您将提供自己的应用程序验证器接口实现，该接口在 verify() 上返回一个使用 reCAPTCHA 令牌解析的承诺。现在，您可以在反应本机应用程序中成功调用登录与电话号码。

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

Answer 3

您可以查看在 react-native 中使用 firebase 电话身份验证的示例

反应-本机-火基-电话-身份验证

Answer 4

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

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

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

2. 验证码.html将需要部署到服务器，并通过 url 调用 React-native-webview
3. 设置样式并删除不需要的文本，也可以简单地使Web视图透明

style={{backgroundColor:'transparent'}}

4. 复制项目中与您的火碱项目对应的火基配置和验证码.html