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>

这非常有效，重新显示在我的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

...

问题是我不知道如何创建＆＃34; appVerifier＆＃34;，所以我可以在方法中插入它：

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重新验证验证程序。您需要这样做的原因是Firebase Auth将为您配置reCAPTCHA站点密钥并呈现该reCAPTCHA。让它工作的方式取决于你是使用可见还是不可见的reCAPTCHA。顺便说一下，我推荐这个仓库中的快速启动应用程序以获取完整示例：https://github.com/firebase/quickstart-js/tree/master/auth

为了让你前进，让我们采取一个可见的reCAPTCHA。您需要在HTML中提供一个空div：

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

接下来，使用该div初始化重新验证验证程序。

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
      // ...
    });

获得confirmationResult后，您可以通过调用recaptchaVerifier.clear()安全地清除reCAPTCHA。

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

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

Angular Firebase signInWithPhoneNumber

1 个答案: