角状Firebase登录在电话号码中 [英] Angular Firebase signInWithPhoneNumber
问题描述
我是新的网站，所以如果我犯了一个错误，请纠正我（我会解决它），并原谅我。
我也是新的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并执行这些方法。
$ hr
$ b $ $ p $ //在component.ts，
...
@ViewChild（ReCaptchaComponent）captcha：ReCaptchaComponent;
...
resolvedCorrectly（captchaResponse：string）：void {
console.log（`已解决的验证码，响应$ {captchaResponse}：`）;
} //完美地工作
this.captcha.getResponse（）//完美地工作
this.captcha.reset（）//完美地工作
...
是，我不知道如何创建appVerifier，所以我可以插入它的方法：
$ $ p $ firebase.auth（） .signInWithPhoneNumber（phoneNumber，appVerifier）
.then（
（response）=> {
console.log（signIn user with phone：success！）;
console。日志（响应）;
}）
.catch（
（error）=> {
console.log（signIn user with phone：failed！）;
console.log（error）;
//错误; SMS未发送
// ...
}）;
我试过了
appVerifier = new firebase.auth.RecaptchaVerifier（recaptcha-container）; //带有div
appVerifier = new firebase.auth.RecaptchaVerifier（re-captcha）;
appVerifier = new firebase.auth.RecaptchaVerifier（ReCaptchaComponent）;
但是没有任何效果。
即使你认为我应该使用另一个REcaptcha组件...没问题。我会尽一切办法来解决我的问题。您可能不应该使用这个angular2-recaptcha并使用Firebase recaptcha验证器。您需要这样做的原因是，Firebase身份验证会为您提供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'，...）;
（）函数（widgetId）{
window.recaptchaWidgetId = widgetId; $（$）当用户提供他们的电话号码并点击提交时，您将检查 grecaptcha。>）
然后您将发送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）来完成登录。
有关更多详细信息，请查看官方文档： https://firebase.google.com/docs/auth/web/phone-auth
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 call
confirmationResult.confirm(code) to complete the sign-in.
For more details, check the official docs: https://firebase.google.com/docs/auth/web/phone-auth
这篇关于角状Firebase登录在电话号码中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
