Angular Firebase signInWithPhoneNumber

Question

我是网站上的新手,所以如果我犯了错误,请纠正我(我会解决)并原谅我.

我也是使用Angular 4环境的新手.Firebase有一个新选项:signInWithPhoneNumber,我想在我的新应用程序上实现它.此方法需要参数:signInWithPhoneNumber(phoneNumber,appVerifier).

使用表单获取phoneNumber很简单,但获取appVerifier会让我发疯.我不理解appVerifier的概念.

我安装了组件:https://github.com/xmaestro/angular2-recaptcha/blob/master/README.md.

这是我的代码:

---

//在component.html中,

<re-captcha (captchaResponse)="resolvedCorrectly($event)" site_key="my_key"></re-captcha>

---

这完美地工作,recaptcha出现在我的html中并执行方法.

---

// in component.ts, 
...
@ViewChild(ReCaptchaComponent) captcha: ReCaptchaComponent;
...

resolvedCorrectly(captchaResponse: string): void {
 console.log(`Resolved captcha with response ${captchaResponse}:`);
} // Works perfectly

this.captcha.getResponse()  // Works perfectly

this.captcha.reset() // Works perfectly

...

---

问题是我不知道如何创建"appVerifier",所以我可以在方法中插入它:

firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then(
    (response) => {
    console.log("signIn user with phone: success!");
    console.log(response);
    })
.catch(
    (error) => {
      console.log("signIn user with phone: failed!");
      console.log(error);
      // Error; SMS not sent
      // ...
    });

我试过了

appVerifier = new firebase.auth.RecaptchaVerifier("recaptcha-container"); // with a div
appVerifier = new firebase.auth.RecaptchaVerifier("re-captcha");
appVerifier = new firebase.auth.RecaptchaVerifier(ReCaptchaComponent);

但没有任何作用.

请,即使您认为我应该使用另一个REcaptcha组件......没问题.我会尽一切努力来解决我的问题.

Answer 1

您可能不应该使用这个 angular2-recaptcha 并使用 Firebase recaptcha 验证器。您需要这样做的原因是 Firebase Auth 将为您提供 reCAPTCHA 站点密钥并呈现该 reCAPTCHA。它的工作方式取决于您使用的是可见还是不可见的 reCAPTCHA。顺便说一句，我推荐此存储库中的快速启动应用程序以获取完整示例： https: //github.com/firebase/quickstart-js/tree/master/auth

为了让您继续前进，让我们使用可见的 reCAPTCHA。您需要在 HTML 中提供一个空 div：

<div id="recaptcha-container"></div>

接下来，您使用该 div 初始化一个 recaptcha 验证器。

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', ...);

recaptcha-container是要呈现 reCAPTCHA 小部件的 div 的 ID。

在您询问电话号码的表单中，您将呈现 reCAPTCHA：

recaptchaVerifier.render().then(function(widgetId) {
  window.recaptchaWidgetId = widgetId;
});

当用户提供电话号码并单击提交时，您将检查grecaptcha.getResponse(window.recaptchaWidgetId)是否不为空。

然后，您将发送短信代码并致电：

firebase.auth().signInWithPhoneNumber(phoneNumber, recaptchaVerifier)
    .then(function (confirmationResult) {
      // SMS sent. Prompt user to type the code from the message, then sign the
      // user in with confirmationResult.confirm(code).
      window.confirmationResult = confirmationResult;
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

当您收到确认结果时，您可以通过调用以下方法安全地清除 reCAPTCHA：recaptchaVerifier.clear()。

在要求用户提供 6 位数代码后，您可以致电 confirmationResult.confirm(code)以完成登录。

有关更多详细信息，请查看官方文档：https://firebase.google.com/docs/auth/web/phone-auth