Firebase recaptcha 容器为空且没有错误答案

【问题标题】：Firebase recaptcha container empty with no errorFirebase recaptcha 容器为空且没有错误
【发布时间】：2019-12-31 01:43:16
【问题描述】：

我正在尝试将 Firebase reCaptcha 容器部署到我的 react 应用程序中，但是按照文档中的说明进行操作后，没有显示 reCaptcha，也没有引发错误。我实现的代码如下：

import React, { useState, useEffect } from 'react';
import * as firebase from "firebase/app";
import "firebase/auth";

declare global {
  interface Window { recaptchaVerifier: any; }
}

const PhoneVerification = () => {
  const firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "..."
  };
  useEffect(()=> {
    if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);

    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
      'size': 'normal',
      'callback': function(response: any) {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        // ...
        console.log('callback executed');
        console.log(response);
      },
      'expired-callback': function() {
        // Response expired. Ask user to solve reCAPTCHA again.
        // ...
        console.log('expired');
      }
    });
  })

  return (
    <div id="main">
      main
      <div id="recaptcha-container">

      </div>
    </div>

)};

export default PhoneVerification;

reCaptcha 渲染是否缺少某些内容？

鉴于没有引发错误，我对如何解决此问题非常迷茫，我们将不胜感激。

【问题讨论】：

标签： reactjs typescript firebase firebase-authentication firebaseui

【解决方案1】：

显然我需要重置 recaptchaVerifier，如图所示 in this answer

它工作的最终代码如下：

import React, { useState, useEffect } from 'react';
import * as firebase from "firebase/app";
import "firebase/auth";

declare global {
  interface Window { recaptchaVerifier: any; }
}

const PhoneVerification = () => {
  const firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "..."
  };
  useEffect(()=> {

    if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);

    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
      'size': 'normal',
      'callback': function(response: any) {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        // ...
        console.log('callback executed');
        console.log(response);
      },
      'expired-callback': function() {
        // Response expired. Ask user to solve reCAPTCHA again.
        // ...
        console.log('expired');
      }
    });
    window.recaptchaVerifier.render().then((widgetId: any) => {
      window.recaptchaVerifier.reset(widgetId);
    });
  })

  return (
    <div id="main">
      main
      <div id="recaptcha-container">

      </div>
    </div>

)};

export default PhoneVerification;

【讨论】：