Recapctha容器不会出现在使用Ionic 2制作的Android应用程序中

Question

我正在开发一个小型移动应用程序，只是为了学习移动应用程序编程。 我使用 ionic 2 和 Firebase。 我创建了一个用于用户身份验证的 recaptcha 容器。当我在浏览器中启动我的应用程序时，在我的电脑上，recaptcha 组件显示正确。但是当我构建apk文件并在手机上安装该应用程序时，不会显示recaptcha组件。可能是什么原因呢？

这是应该显示 reCAPTCHA 组件的登录页面的代码：

<ion-content padding>
<button ion-button icon-left  color="primary" block>
  <ion-icon name="logo-facebook"></ion-icon>
  Login with Facebook
</button>
<div align="center">
    <P>OU</P>
</div>
<form #f="ngForm">
    <ion-item>
      <ion-label floating>Phone Number</ion-label>
      <ion-input name="phone" type="number" [(ngModel)] ="phone" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Password: </ion-label>
      <ion-input name="pass" type="password" ngModel required></ion-input>
    </ion-item>
    <div id="recaptcha-container"></div>
    <button ion-button full (click)="signIn(phone)">Login</button>
</form>

登录名的代码如下

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import firebase from 'firebase';
export const  config = 
{
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class Login {
recapverif:firebase.auth.RecaptchaVerifier;
appVerifier:any;
constructor(public navCtrl: NavController, public navParams: NavParams) 
{
  firebase.initializeApp(config);
}
ionViewDidLoad() 
{
this.recapverif = new firebase.auth.RecaptchaVerifier("recaptcha-       
container");
this.appVerifier = this.recapverif;
}
signIn(phone:number){
  const phoneNumberString = "+33" + phone;
  firebase.auth().signInWithPhoneNumber(phoneNumberString, this.appVerifier)
    .then( confirmationResult => {
      console.log("SMS  sent");
      // user in with confirmationResult.confirm(code).
  })
    .catch(function (error) {
      console.log("SMS not sent", error);
    });
}
}

谢谢。

Answer 1

不幸的是，使用 Firebase JS 库的电话身份验证在 Cordova/Ionic 环境中不起作用......查看此答案以获取更多详细信息。