Question

我正在开发ionic app(v-4)，我的应用程序需要使用他们的电话号码来验证用户，因此我在我的应用程序中实现了firebase。以下是我执行的步骤：

通过在Firebase中提供firebase和android package name在SHA - 1 key中注册Android应用。
下载了google-services.json文件并将其添加到应用程序的root文件夹中。
为authentication中的电话firebase启用。
然后安装了必需的插件：

npm install firebase @ angular / fire --save

离子式Cordova插件添加cordova-plugin-firebase-authentication

npm install @ ionic-native / firebase-authentication

然后将所需的配置添加到environment.ts文件中，如下所示：

firebase: {
apiKey: 'AIz..........',
authDomain: '............',
databaseURL: '...........',
projectId: '...........',
storageBucket: '.........',
messagingSenderId: '..........'
}

在imports文件中添加了所需的providers和app.module.ts：

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';

 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';

 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { FirebaseAuthentication } from '@ionic-native/firebase-authentication/ngx';
 import { AngularFireModule } from '@angular/fire';
 import { environment } from '../environments/environment';
 @NgModule({
   declarations: [AppComponent],
   imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase, 'app-name'),
   ],
providers: [
  StatusBar,
  SplashScreen,
  FirebaseAuthentication,
  {provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
 ],
 bootstrap: [AppComponent]
})

导出类AppModule {}

然后在login page中，我像这样生成并验证OTP：

HTML

<ion-content padding>
  <ion-item>
    <ion-label position="floating">Phone</ion-label>
    <ion-input type="text" [(ngModel)]="phone"></ion-input>
  </ion-item>
  <ion-button expand="full" (click)="send()">Send</ion-button>
  <ion-item>
      <ion-label position="floating">Enter OTP</ion-label>
      <ion-input type="text" [(ngModel)]="code"></ion-input>
    </ion-item>
  <ion-button expand="full" (click)="verify()">Verify</ion-button>
</ion-content>

TS

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {
  NavController,
  AlertController,
  LoadingController,
  Platform
} from '@ionic/angular';
import { FirebaseAuthentication } from '@ionic-native/firebase-authentication/ngx';
import * as firebase from 'firebase';


@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  verificationId: any;
  code = '';
  phone: number;

  constructor(public navCtrl: NavController) { }

  ngOnInit() {}

  send() {
    const tell = '+91' + this.phone;
    (window as any).FirebasePlugin.verifyPhoneNumber(tell, 60, (credential) => {
      console.log(credential);
      this.verificationId = credential.verificationId;
    }, (error) => {
      console.error(error);
      alert(error);
     });
  }

  verify() {
    const signInCredential = firebase.auth.PhoneAuthProvider.credential(this.verificationId, this.code);
    firebase.auth().signInWithCredential(signInCredential).then((info) => {
      console.log(info);
      this.navCtrl.navigateRoot('/home');
    }, (error) => {
      console.log(error);
    });
    }
}

现在，一切都适用于android设备（最高版本9），但无法为9或更高版本的设备9生成OTP。

更正我，如果code/plugins有任何问题。如果需要，我将POST所需文件。

无法为版本大于9的Android设备生成OTP

0 个答案: