0

I am working on a small mobile app just to learn mobile app programming. i use ionic 2 and firebase. i created a recaptcha container for user authentification. On my pc when i start my app in the browser, the recaptcha component is displayed correctly. But when i build the apk file and i install the app on my phone, the recaptcha component is not displayed. What could be the reason of that ?

here is the code of the login page that is supposed to display the recaptcha component :

<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>

and the code for the Login.ts is below

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);
    });

}

}

Thanks.

the smart life
  • 305
  • 8
  • 26
  • firebase.auth.RecaptchaVerifier doesn't work in a non http/https environment. You may be getting an error due to that. Check this post for more details: https://stackoverflow.com/questions/44081040/ionic2-authentication-firebase – bojeil Jun 14 '17 at 05:06

1 Answers1

0

Unfortunately, phone authentication using Firebase JS library will not work in a Cordova/Ionic environment...check this answer for more details.

ihoudjedje
  • 95
  • 9