Angular Firebase signInWithPhoneNumber
|
我是网站上的新手,所以如果我犯了错误,请纠正我(我会解决)并原谅我.
我也是使用Angular 4环境的新手. 使用表单获取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组件……没问题.我会尽一切努力来解决我的问题.
您可能不应该使用此angular2-recaptcha并使用Firebase重新验证验证程序.您需要这样做的原因是Firebase Auth将为您配置reCAPTCHA站点密钥并呈现该reCAPTCHA.让它工作的方式取决于你是使用可见还是不可见的reCAPTCHA.
顺便说一句,我推荐这个仓库中的快速启动应用程序以获取完整示例： https://github.com/firebase/quickstart-js/tree/master/auth 为了让你前进,让我们采取一个可见的reCAPTCHA. < 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位数代码后,您可以致电 有关更多详细信息,请查看官方文档：https://firebase.google.com/docs/auth/web/phone-auth （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |