angular - firebase signInWithPhoneNumber recaptcha-klienten har raderats 0

Hej, jag försöker autentisera användare med telefonnummer utan att använda firebaseui.

min HTML-mall ser ut så här:

<div class="flex center space-items-sides-m m-t-m" dir="ltr">
    <p-dropdown panelStyleClass="phone-select" [options]="countries" [(ngModel)]="phoneNumber.country" [style]="{'width':'130px'}" optionLabel="name" [filter]="true" appendTo="body">
      <ng-template let-item pTemplate="selectedItem">
        +{{item.value.callingCode}}
      </ng-template>
    </p-dropdown>
    <input type="text" pInputText id="phone" [(ngModel)]="phoneNumber.phone" pKeyFilter="pint">
  </div>
  <div class="m-t-l" id="recaptcha-container"></div>
  <button (click)="sendLoginCode()" class="m-t-l" pButton label="שלח קוד אימות" [disabled]="!phoneNumber.isValid || !isRecaptchaValid()"></button>

och min komponent ser ut så här:

 ngOnInit() {
    this.windowRef = window;
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
    this.windowRef.recaptchaVerifier.render().then((widgetId) => {
      this.windowRef.recaptchaWidgetId = widgetId;
    });
  }

  isRecaptchaValid() {
    return (grecaptcha.getResponse(this.windowRef.recaptchaWidgetId).length > 0);
  }

  sendLoginCode() {
    this.store.dispatch(new fromStore.SetLoading(true));
    this.firebaseFunctionsService.getFunction(`userExistence/${this.phoneNumber.e164}`).subscribe(data => {
      if (data && data.exists) {
        const appVerifier = this.windowRef.recaptchaVerifier;
        const num = this.phoneNumber.e164;
        firebase.auth().signInWithPhoneNumber(num, appVerifier).then(result => {
          this.windowRef.confirmationResult = result;
          this.store.dispatch(new fromStore.SetLoading(false));
        }).catch(error => {
          this.messageService.add({
            summary: 'ההודעה לא נשלחה',
            detail: error.toString(),
            severity: 'error'
          });
          grecaptcha.reset(this.windowRef.recaptchaWidgetId);
          this.store.dispatch(new fromStore.SetLoading(false));
        });
      } else {
        this.messageService.add({
          summary: 'משתמש זה לא קיים במערכת',
          detail: 'אנא פנה למנהל המערכת על מנת להוסיף לך משתמש',
          severity: 'warn'
        });
        this.store.dispatch(new fromStore.SetLoading(false));
      }
    }, serverError => {
      this.messageService.add({
        summary: 'ההודעה לא נשלחה',
        detail: serverError.message.toString(),
        severity: 'error'
      });
      this.store.dispatch(new fromStore.SetLoading(false));
    });

så funktionen isRecaptchaValid() fungerar perfekt och skicka-knappen blir aktiverad när användaren klickar på "Jag är inte en robot", men när användaren klickar på skicka-knappen går funktionen firebase.auth().signInWithPhoneNumber direkt till catch med felet "recaptcha client has been deleted 0" även efter att jag gör grecaptcha.reset(this.windowRef.recaptchaWidgetId) och försöker skicka igen går jag direkt till catch med felet "recaptcha client has been deleted 1" och så vidare..

Jag är ny på reCAPTCHA och förstår det inte så mycket.. vad gör jag fel? Jag arbetade utifrån Firebase-dokumentationen https://firebase.google.com/docs/auth/web/phone-auth men de förklarar inte där vad man ska göra när det uppstår fel..

Jag använder Angular 6 med Firebase 5.0.3 och AngularFire2 5.0.0-rc.9

var snäll och hjälp

Svar #1

    ngOnInit() {
   this.windowRef = window;
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
      'size': 'invisible',
      'callback': response => {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
      },
      'expired-callback': () => {
        // Reset reCAPTCHA?
      }
    });
  }

  isRecaptchaValid() {
    return (grecaptcha.getResponse(this.windowRef.recaptchaWidgetId).length > 0);
  }

  sendLoginCode() {
    this.store.dispatch(new fromStore.SetLoading(true));
    this.firebaseFunctionsService.getFunction(`userExistence/${this.phoneNumber.e164}`).subscribe(data => {
      if (data && data.exists) {
        const appVerifier = this.windowRef.recaptchaVerifier;
        const num = this.phoneNumber.e164;
        firebase.auth().signInWithPhoneNumber(num, appVerifier).then(result => {
          this.windowRef.confirmationResult = result;
          this.store.dispatch(new fromStore.SetLoading(false));
        }).catch(error => {
          this.messageService.add({
            summary: 'ההודעה לא נשלחה',
            detail: error.toString(),
            severity: 'error'
          });
          grecaptcha.reset(this.windowRef.recaptchaWidgetId);
          this.store.dispatch(new fromStore.SetLoading(false));
        });
      } else {
        this.messageService.add({
          summary: 'משתמש זה לא קיים במערכת',
          detail: 'אנא פנה למנהל המערכת על מנת להוסיף לך משתמש',
          severity: 'warn'
        });
        this.store.dispatch(new fromStore.SetLoading(false));
      }
    }, serverError => {
      this.messageService.add({
        summary: 'ההודעה לא נשלחה',
        detail: serverError.message.toString(),
        severity: 'error'
      });
      this.store.dispatch(new fromStore.SetLoading(false));
    });

Svar #2

Okej, så felet berodde på att recaptcha-behållaren raderades, jag satte loading till true på sendLoginCode() och loading skulle ta bort hela login-komponenten från DOM...

Relaterade artiklar