Angular调用firebase的signInWithPhoneNumber报RecaptchaVerifier未定义错误

问题解决步骤 #

• 第一步：补充导入firebase auth依赖，仅导入firebase/app是不足以使用auth相关方法的，需要额外导入auth子模块：

import 'firebase/auth';

• 第二步：确认firebase已经完成初始化，你需要在调用任何firebase相关方法前，执行初始化逻辑，可放在ngOnInit最开头补充判断：

if (!firebase.apps.length) {
  firebase.initializeApp(environment.firebaseConfig);
}

• 第三步：检查模板文件中是否存在id为recaptcha-container的DOM节点，该节点是recaptcha人机验证的渲染容器，必须存在才能初始化成功。
• 第四步：确认你使用的firebase版本为8.x系列，你当前使用的是v8的命名空间式API，如果安装的是v9及以上版本的firebase，API写法不兼容会直接报错，要么降级到v8版本，要么改为v9的模块化调用方式。

修正后的完整代码示例 #

import firebase from 'firebase/app';
import 'firebase/auth'; // 新增导入auth模块
import { environment } from 'src/environments/environment';

export class TabPage implements OnInit{
  code: string = '+91';
  spin: boolean = false;
  otpSent:boolean = false;

  recaptchaverifier;
  confirmationResult: firebase.auth.ConfirmationResult;
  phoneNumber: string;

  ngOnInit(){
    // 新增firebase初始化判断
    if (!firebase.apps.length) {
      firebase.initializeApp(environment.firebaseConfig);
    }
    this.recaptchaverifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
    this.sendOTP();
  }

  sendOTP(){
    var phNo = this.code+'******';

    this.spin = true;
    firebase.auth().signInWithPhoneNumber(phNo,this.recaptchaverifier).then(result=>{
      this.phoneNumber = phNo;
      this.otpSent = true;
      this.confirmationResult = result;
      this.spin = false;
      console.log(result);
    }).catch(err=>{
      this.spin = false;
      alert(err);
    });
  }
}

内容的提问来源于stack exchange，提问作者chethu