angular - firebase signInWithPhoneNumber recaptcha 客户端已被删除 0

Question

嗨，我正在尝试在不使用 firebaseui 的情况下使用电话号码对用户进行身份验证。

我的 html 模板如下所示：

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

我的组件看起来像这样：

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

因此函数 isRecaptchaValid() 完美运行，并且当用户单击“我不是机器人”时，提交按钮启用，但是当用户单击提交按钮时，函数 firebase.auth().signInWithPhoneNumber 直接使用即使在我执行 grecaptcha.reset(this.windowRef.recaptchaWidgetId) 并尝试再次提交之后，错误“recaptcha 客户端已被删除 0”我直接进入错误“recaptcha 客户端已被删除 1”等等。

我是recaptcha的新手，不太了解它..我做错了什么？我从firebase文档https://firebase.google.com/docs/auth/web/phone-auth工作， 但他们没有解释出现错误时该怎么做..

我正在使用 angular 6 和 firebase 5.0.3 和 angularfire2 5.0.0-rc.9

请帮忙

标签： angulartypescriptfirebasefirebase-authenticationrecaptcha

Answer 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));
    });