问题描述
我是新的网站，所以如果我犯了一个错误，请纠正我（我会解决它），并原谅我。
我也是新的Angular 4环境。
Firebase有一个新的选项：signInWithPhoneNumber，我想在我的新应用程序上实现它。
这个方法需要参数：signInWithPhoneNumber（phoneNumber，appVerifier）。
获取phoneNumber很简单，使用表单，但是获取appVerifier让我疯狂。我不明白appVerifier的概念。
我安装了组件：。
这是我的代码：
//在component.html中，
（）函数（widgetId）{
window.recaptchaWidgetId = widgetId; $（$）当用户提供他们的电话号码并点击提交时，您将检查 grecaptcha。>） getResponse（window.recaptchaWidgetId）不为空。
然后您将发送SMS代码并调用：
firebase.auth（）。signInWithPhoneNumber（phoneNumber，recaptchaVerifier）
.then（function（confirmationResult）{
//发送短信。提示用户输入消息中的代码，然后用confirmationResult.confirm（代码）签署
//用户
window.confirmationRes ult = confirmationResult;
}）。catch（function（error）{
// Error; SMS not sent
// ...
}）;
获取confirmationResult时，可以通过调用 recaptchaVerifier.clear（）来安全地清除reCAPTCHA。 >
在您要求用户提供6位数的代码后，您可以调用
confirmationResult.confirm（code）来完成登录。
有关更多详细信息，请查看官方文档：
I am new on the site, so if I make a mistake, please correct me (I will fix it) and forgive me.
I am also new using Angular 4 environment.
Firebase has an new option for: signInWithPhoneNumber, and I want to implement it on my new app.
This method need the parameter: signInWithPhoneNumber(phoneNumber, appVerifier).
Getting the phoneNumber is easy, using the form, but getting the appVerifier is making me crazy. I dont understand the concept of appVerifier.
I installed the component: https://github.com/xmaestro/angular2-recaptcha/blob/master/README.md.
This is my code:
// in component.html,
<re-captcha (captchaResponse)="resolvedCorrectly($event)" site_key="my_key"></re-captcha>
This works perfectly, an the recaptcha appears in my html and executes the methods.
// 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
...
The problem is that I dont know how to create "appVerifier", so I can insert it in the method:
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
// ...
});
I tried with
appVerifier = new firebase.auth.RecaptchaVerifier("recaptcha-container"); // with a div
appVerifier = new firebase.auth.RecaptchaVerifier("re-captcha");
appVerifier = new firebase.auth.RecaptchaVerifier(ReCaptchaComponent);
But nothing works.
Please, even if you think I should use another REcaptcha-component... no problem. I will do whatever to solve my issue.
解决方案 You probably shouldn't use this angular2-recaptcha and use Firebase recaptcha verifier. The reason you need to do so is because Firebase Auth will provision the reCAPTCHA site key for you and render that reCAPTCHA. The way you get it to work depends on whether you are using a visible or invisible reCAPTCHA.BTW, I recommend the quick start apps in this repo for full examples: https://github.com/firebase/quickstart-js/tree/master/auth
To get you going, let's take a visible reCAPTCHA.You will need to provide an empty div in your HTML:
<div id="recaptcha-container"></div>
Next you initialize a recaptcha verifier using that div.var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', ...);
recaptcha-container is the ID of the div where the reCAPTCHA widget is to be rendered.
In the form where you ask for the phone number, you would render the reCAPTCHA:recaptchaVerifier.render().then(function(widgetId) { window.recaptchaWidgetId = widgetId;});
When the user provides their phone number and clicks submit, you will check grecaptcha.getResponse(window.recaptchaWidgetId) is not null.
You will then send the SMS code and call:
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 // ... });
When you get the confirmationResult, you can safely clear the reCAPTCHA by calling: recaptchaVerifier.clear().
After you ask the user to provide the 6 digit code, you callconfirmationResult.confirm(code) to complete the sign-in.
For more details, check the official docs: https://firebase.google.com/docs/auth/web/phone-auth
这篇关于角状Firebase登录在电话号码中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！