Eckige Firebase signInWithPhoneNumber

Question

Ich bin neu auf der Website, also, wenn ich einen Fehler mache, bitte korrigieren Sie mich (ich werde es beheben) und verzeihen Sie mir.

Ich bin auch neu mit Angular 4-Umgebung. Firebase hat eine neue Option für: signInWithPhoneNumber, und ich möchte es auf meiner neuen App implementieren. Diese Methode benötigt den Parameter signInWithPhoneNumber (phoneNumber, appVerifier).

Das Erhalten der Telefonnummer ist einfach, mit dem Formular, aber die AppVerifier macht mich verrückt. Ich verstehe das Konzept von AppVerifier nicht.

Ich habe die Komponente installiert: https://github.com/xmaestro/angular2-recaptcha/blob/master/README.md.

Dies ist mein Code:

---

// in component.html,

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

---

Das funktioniert perfekt, eine der recaptcha in meinem html erscheint und führt die Methoden.

---

// 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 

... 

---

Das Problem ist, dass ich weiß nicht, wie "AppVerifier" zu schaffen, also kann ich es bei dem Verfahren ein:

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

ich mit

versucht

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

Aber nichts funktioniert.

Bitte, auch wenn Sie denken, ich sollte eine andere REcaptcha-Komponente verwenden ... kein Problem. Ich werde alles tun, um mein Problem zu lösen.

Answer 1

Sie sollten dieses angular2-recaptcha wahrscheinlich nicht verwenden und Firebase recaptcha verifier verwenden. Der Grund hierfür ist, dass Firebase Auth den reCAPTCHA-Site-Schlüssel für Sie bereitstellt und diesen reCAPTCHA rendert. Wie Sie es zum Laufen bringen, hängt davon ab, ob Sie einen sichtbaren oder unsichtbaren reCAPTCHA verwenden. BTW, ich empfehle die Schnellstart-Anwendungen in diesem Repo für vollständige Beispiele: https://github.com/firebase/quickstart-js/tree/master/auth

Um Sie in Fahrt zu bringen, nehmen wir einen sichtbaren reCAPTCHA. Sie müssen eine leere div in Ihrem HTML bieten:

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

Weiter Sie initialisieren ein recaptcha Verifizierer, dass die div verwenden. var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', ...);

recaptcha-container ist die ID des Div, in dem das reCAPTCHA-Widget gerendert werden soll.

In der Form, in der Sie die Telefonnummer fragen, würden Sie die reCAPTCHA machen: recaptchaVerifier.render().then(function(widgetId) { window.recaptchaWidgetId = widgetId; });

Wenn die Benutzernummer ihrem Handy bietet und Klicks einreichen, prüfen Sie grecaptcha.getResponse(window.recaptchaWidgetId) nicht null ist.

Sie dann den SMS-Code senden und rufen:

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

Wenn Sie die confirmationResult erhalten, können Sie sicher die reCAPTCHA klar durch den Aufruf: recaptchaVerifier.clear().

Nachdem Sie den Benutzer aufgefordert haben, den sechsstelligen Code einzugeben, rufen Sie confirmationResult.confirm(code), um die Anmeldung abzuschließen.

Weitere Details, überprüfen Sie die offizielle Dokumentation: https://firebase.google.com/docs/auth/web/phone-auth