angular - firebase signInWithPhoneNumber recaptcha-klienten har blitt slettet 0

Hei, jeg prøver å autentisere brukere med telefonnumre uten å bruke firebaseui.

min HTML-mal ser slik ut:

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

og komponenten min ser slik ut:

 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å funksjonen isRecaptchaValid() fungerer perfekt, og send-knappen blir aktivert når brukeren klikker på "Jeg er ikke en robot", men når brukeren klikker på send-knappen, går funksjonen firebase.auth().signInWithPhoneNumber rett til catch med feilen "recaptcha client has been deleted 0", selv etter at jeg gjør grecaptcha.reset(this.windowRef.recaptchaWidgetId) og prøver å sende igjen går jeg rett til catch med feilen "recaptcha client has been deleted 1" og så videre..

Jeg er ny på reCAPTCHA og forstår det ikke så godt.. hva gjør jeg galt? Jeg fulgte Firebase-dokumentasjonen https://firebase.google.com/docs/auth/web/phone-auth, men de forklarer ikke der hva man skal gjøre når det oppstår feil..

Jeg bruker Angular 6 med Firebase 5.0.3 og AngularFire2 5.0.0-rc.9

vær så snill å hjelpe

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

Ok, så feilen var fordi recaptcha-beholderen ble slettet. Jeg satte loading til true i sendLoginCode(), og loading ville slette hele login-komponenten fra DOM-en.

Relaterte artikler