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函数将直接转到遇到错误“验证码客户端已被删除0” 即使在我执行grecaptcha.reset（this.windowRef.recaptchaWidgetId）并尝试再次提交之后，我也直接进入了错误“ recaptcha客户端已被删除1”的陷阱，依此类推。

我是Recaptcha的新手，对它的了解不多..我做错了什么？我使用的是Firebase文档https://firebase.google.com/docs/auth/web/phone-auth 但是他们没有说明有错误时该怎么办。.

我正在将Angle 6与Firebase 5.0.3和angularfire2 5.0.0-rc.9配合使用

请帮助

Answer 1

好，所以错误是因为Recaptcha容器被删除了，我在sendLoginCode（）上将load设置为true，并且该加载会从dom中删除整个登录组件。

Answer 2

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

firebase signInWithPhoneNumber recaptcha客户端已被删除0

2 个答案: