如何使用离子4实现firebase电话身份验证

Question

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

我已经看到了一些具有Ionic 3的手机授权的旧教程，但这些教程似乎已经过时了。

firebaseui-web项目不支持Cordova应用程序的电话身份验证，但我不确定这是否意味着Firebase电话身份验证是不可能的。

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

Answer 1

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

https://firebase.google.com/docs/auth/web/phone-auth#send-a-verification-code-code-to-to-te-the-users-phone-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-partentication

将此插件添加到您的离子4项目

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

这样，我们可以不使用recaptcha验证手机。请注意，这仅适用于真实的Android设备，而不是模拟器或浏览器。功能实现

verifyPhoneNumber(phoneNumber, timeout)
cordova.plugins.firebase.auth.verifyPhoneNumber("[phone]", 30000)
.then(function(verificationId) {
        // pass verificationId to signInWithVerificationId
});

或Angularfire(带有recaptcha(

https://github.com/angular/angularfire

首先，将AngularFire Lib安装到您的项目

npm install firebase @angular/fire --save

然后将此液化导入您的班级

import * as firebase from 'firebase/app';

代码示例：

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