firebase signInWithPhoneNumber recaptcha 客户端已被删除 0

Question

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

\n\n

我的 html 模板如下所示：

\n\n

<div class="flex center space-items-sides-m m-t-m" dir="ltr">\n    <p-dropdown panelStyleClass="phone-select" [options]="countries" [(ngModel)]="phoneNumber.country" [style]="{\'width\':\'130px\'}" optionLabel="name" [filter]="true" appendTo="body">\n      <ng-template let-item pTemplate="selectedItem">\n        +{{item.value.callingCode}}\n      </ng-template>\n    </p-dropdown>\n    <input type="text" pInputText id="phone" [(ngModel)]="phoneNumber.phone" pKeyFilter="pint">\n  </div>\n  <div class="m-t-l" id="recaptcha-container"></div>\n  <button (click)="sendLoginCode()" class="m-t-l" pButton label="\xd7\xa9\xd7\x9c\xd7\x97 \xd7\xa7\xd7\x95\xd7\x93 \xd7\x90\xd7\x99\xd7\x9e\xd7\x95\xd7\xaa" [disabled]="!phoneNumber.isValid || !isRecaptchaValid()"></button>\n

\n\n

我的组件如下所示：

\n\n

 ngOnInit() {\n    this.windowRef = window;\n    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(\'recaptcha-container\');\n    this.windowRef.recaptchaVerifier.render().then((widgetId) => {\n      this.windowRef.recaptchaWidgetId = widgetId;\n    });\n  }\n\n  isRecaptchaValid() {\n    return (grecaptcha.getResponse(this.windowRef.recaptchaWidgetId).length > 0);\n  }\n\n  sendLoginCode() {\n    this.store.dispatch(new fromStore.SetLoading(true));\n    this.firebaseFunctionsService.getFunction(`userExistence/${this.phoneNumber.e164}`).subscribe(data => {\n      if (data && data.exists) {\n        const appVerifier = this.windowRef.recaptchaVerifier;\n        const num = this.phoneNumber.e164;\n        firebase.auth().signInWithPhoneNumber(num, appVerifier).then(result => {\n          this.windowRef.confirmationResult = result;\n          this.store.dispatch(new fromStore.SetLoading(false));\n        }).catch(error => {\n          this.messageService.add({\n            summary: \'\xd7\x94\xd7\x94\xd7\x95\xd7\x93\xd7\xa2\xd7\x94 \xd7\x9c\xd7\x90 \xd7\xa0\xd7\xa9\xd7\x9c\xd7\x97\xd7\x94\',\n            detail: error.toString(),\n            severity: \'error\'\n          });\n          grecaptcha.reset(this.windowRef.recaptchaWidgetId);\n          this.store.dispatch(new fromStore.SetLoading(false));\n        });\n      } else {\n        this.messageService.add({\n          summary: \'\xd7\x9e\xd7\xa9\xd7\xaa\xd7\x9e\xd7\xa9 \xd7\x96\xd7\x94 \xd7\x9c\xd7\x90 \xd7\xa7\xd7\x99\xd7\x99\xd7\x9d \xd7\x91\xd7\x9e\xd7\xa2\xd7\xa8\xd7\x9b\xd7\xaa\',\n          detail: \'\xd7\x90\xd7\xa0\xd7\x90 \xd7\xa4\xd7\xa0\xd7\x94 \xd7\x9c\xd7\x9e\xd7\xa0\xd7\x94\xd7\x9c \xd7\x94\xd7\x9e\xd7\xa2\xd7\xa8\xd7\x9b\xd7\xaa \xd7\xa2\xd7\x9c \xd7\x9e\xd7\xa0\xd7\xaa \xd7\x9c\xd7\x94\xd7\x95\xd7\xa1\xd7\x99\xd7\xa3 \xd7\x9c\xd7\x9a \xd7\x9e\xd7\xa9\xd7\xaa\xd7\x9e\xd7\xa9\',\n          severity: \'warn\'\n        });\n        this.store.dispatch(new fromStore.SetLoading(false));\n      }\n    }, serverError => {\n      this.messageService.add({\n        summary: \'\xd7\x94\xd7\x94\xd7\x95\xd7\x93\xd7\xa2\xd7\x94 \xd7\x9c\xd7\x90 \xd7\xa0\xd7\xa9\xd7\x9c\xd7\x97\xd7\x94\',\n        detail: serverError.message.toString(),\n        severity: \'error\'\n      });\n      this.store.dispatch(new fromStore.SetLoading(false));\n    });\n

\n\n

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

\n\n

我是重新验证码的新手，不太理解它。我做错了什么？我在 firebase 文档中工作https://firebase.google.com/docs/auth/web/phone-auth \n但他们没有解释出现错误时该怎么做。

\n\n

我正在使用 Angular 6 和 Firebase 5.0.3 和 AngularFire2 5.0.0-rc.9

\n\n

请帮忙

\n

Answer 1

好的，错误是因为 recaptcha 容器被删除，我在 sendLoginCode() 上将加载设置为 true，并且加载将从 dom 中删除整个登录组件。