Firebase 电话身份验证（使用离子）中出现“找不到主机名匹配”错误

Question

我正在尝试将“firebase 电话身份验证”与 ionic 结合起来。

但是，卡在一个问题上。

我不断收到 “未找到主机名匹配” 来自

的错误

.catch(function (error) { 
  console.log("error! : " +  error); 
});"

login.ts（如下）

import { Component } from '@angular/core';
import { IonicPage, NavController, AlertController } from 'ionic-angular';

import firebase from 'firebase';

@IonicPage()
@Component({
   selector: 'page-login',
   templateUrl: 'login.html',
})

export class LoginPage {
  public recaptchaVerifier:firebase.auth.RecaptchaVerifier;
  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {}

  ionViewDidLoad() {
    this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-
    container');
  }

  signIn(phoneNumber: number){
    const appVerifier = this.recaptchaVerifier;
    const phoneNumberString = "+" + phoneNumber;

    firebase.auth().signInWithPhoneNumber(phoneNumberString, appVerifier)
      .then( confirmationResult => {

        let prompt = this.alertCtrl.create({
        title: 'Enter the Confirmation code',
        inputs: [{ name: 'confirmationCode', placeholder: 'Confirmation Code' }],
        buttons: [
          { text: 'Cancel',
            handler: data => { console.log('Cancel clicked'); }
          },
          { text: 'Send',
            handler: data => {
               confirmationResult.confirm(data.confirmationCode)
                 .then(function (result) {

                 }).catch(function (error) {

                 });
            }
          }
        ]
     });
     prompt.present();
   })
   .catch(function (error) {
      console.log("error! : " +  error);           //   <------------The place that informs this error.
   });
 }
}

reCAPTCHA 解决后不久发生此错误

为什么会出现这种情况？

--初始化 Firebase

--login.html

Answer 1

当您在没有

ssl

认证的域中托管应用程序时，可能会出现此错误。然后您必须在 firebase 控制台中将您的域列入白名单。

转到

Firebase Console -> Authentication -> sign-in-method -> Authorized Domains

并添加您的域名。

默认情况下

localhost

和任何

https://

域均已列入白名单。

添加您当前用于测试此应用程序的任何子域。

Answer 2

发生此错误的原因是，当 Google 在 Number 上发送 otp 时，它会与您的网站 url 匹配，并且您的 firebase 身份验证 url 是您的域或网站地址匹配，然后它会向您发送 otp，否则会发生错误。

要解决该错误，请转到 firebase 控制台。

1. 转到 firebase 控制台。

2. 单击“身份验证”。

3. 点击登录方法。

4. 向下滚动并检查授权域。

5. 添加您实施电话身份验证的站点地址。

Answer 3

您应该关注这里：

注意：域名需要同时添加：https://www.exam.com 和 exam.com

要解决该错误，请转到 firebase 控制台。

1. 转到 firebase 控制台。

2. 单击“身份验证”。

3. 单击“登录方法”。

4. 向下滚动并选中授权域。

5. 添加您实施电话身份验证的站点地址。

Answer 4

对于新的 firebase 仪表板

转到 Firebase > 选择您的项目 > 身份验证 > 设置，然后在 domain 下您将找到 Authorise Domains。

输入您要添加的域名并保存

Answer 5

转到 Firebase > 选择您的项目 > 身份验证 > 登录方法 > 向下滚动 -> 在“授权域”部分下添加您的域。

按照照片说明进行操作：

Answer 6

您可以在此链接中找到答案： https://stackoverflow.com/a/44091221/6120430
不幸的是，使用 Firebase JS 库的电话身份验证在 Cordova/Ionic 中不起作用...

Answer 7

在 Firebase 控制台中添加域名 => 身份验证 => 设置 => 授权域 => 添加域：有关更多详细信息，请参阅屏幕截图。