Question

是否可以在移动应用程序中通过Firebase和Ionic 4使用电话身份验证？

我看过一些使用Ionic 3实现电话授权的旧教程，但是这些似乎已经过时了。

firebaseui-web项目不支持cordova apps的电话身份验证，但是我不确定这是否意味着离子应用无法进行Firebase电话身份验证。

如果您不能将Firebase的电话身份验证与Ionic 4一起使用，是否有其他电话身份验证服务可以与Ionic 4一起使用？

Answer 1

是的。您可以使用Firebase的Javascript SDK进行此操作，它将需要用户传递一个验证码，然后向电话号码发送一个您可以登录并进行身份验证的验证码，此处说明了该过程：

https://firebase.google.com/docs/auth/web/phone-auth#send-a-verification-code-to-the-users-phone

Answer 2

问题在于，firebase auth sms服务仅在应用处于生产模式（已上传到商店）时才发送消息。但是为了能够从测试模式下测试方法，它在firebase的白名单中添加了一个测试编号。

就我而言，我尝试以下方法：

sms-verification.page.ts

sendSmsVerification(phoneNumber): Promise <firebase.auth.UserCredential> {
    return new Promise((resolve, reject) => {

        firebase.auth().useDeviceLanguage();
        var verificationId;
        var code;
        const timeOutDuration = 60;
        const tell = '+54' + phoneNumber;
        this.FireBase.verifyPhoneNumber(tell, timeOutDuration).then(async (credential) => {
            // alert(credential.instantVerification);
            if (credential.verificationId) {
                console.log("Android credential: ", credential);
                verificationId = credential.verificationId;
            } else {
                console.log("iOS credential: ", credential);
                verificationId = credential;
            }
            if (credential.instantVerification) {
                code = credential.code;
                this.verifySms(verificationId, code)
                .then( resp => {
                    resolve(resp);
                })
                .catch( err => {
                    reject(err);
                });
            } else {
                let prompt = await this.alertCtrl.create({
                    backdropDismiss: false,
                    header: 'Ingrese el codigo de confirmación del SMS.',
                    inputs: [{ name: 'confirmationCode', placeholder: 'Código de confirmación' }],
                    buttons: [
                        { text: 'Cancelar',
                        handler: data => { 
                            console.log('Cancel clicked');
                            resolve(data);
                        }
                        },
                        { text: 'Verificar',
                        handler: data => {
                            code = data.confirmationCode; 
                            this.verifySms(verificationId,code)
                            .then( resp => {
                                resolve(resp);
                            })
                            .catch( err => {
                                reject(err);
                            });                            }
                        }
                    ]
                });
                prompt.present();
            }
        }).catch(error => {
            console.log('Error! Catch SMSVerificacion', error);
            reject(error);
        });
    })
}


verifySms(verificationId, code): Promise <any> {
    console.log('parametros de verifySms ', verificationId +' ', code);
    const signInCredential = firebase.auth.PhoneAuthProvider.credential(verificationId,code);
    return firebase.auth().signInAndRetrieveDataWithCredential(signInCredential);
}

Answer 3

是的，可以通过Cordova插件使用Firebase电话身份验证，

cordova-plugin-firebase-authentication

将此插件添加到您的ionic 4项目中

cordova plugin add cordova-plugin-firebase-authentication --save

通过此操作，我们无需使用reCaptcha即可验证电话。请注意，这仅适用于真实的android设备，不适用于模拟器或浏览器。功能实现

verifyPhoneNumber(phoneNumber, timeout)

cordova.plugins.firebase.auth.verifyPhoneNumber("+123456789", 30000)
.then(function(verificationId) {
        // pass verificationId to signInWithVerificationId
});

或 AngularFire（使用reCaptcha）

https://github.com/angular/angularfire

首先，将angularfire lib安装到您的项目中

npm install firebase @angular/fire --save

然后将这个lib导入您的类

import * as firebase from 'firebase/app';

代码示例：

firebase.auth().signInWithPhoneNumber(phoneNumber,recaptchaVerifier)
        .then(confirmationResult => {
          this.windowRef.confirmationResult = confirmationResult;
    })

如何使用Ionic 4实施Firebase电话身份验证？

3 个答案: