Question

我正在尝试集成Firebase电话身份验证以在角度应用程序中验证用户的电话号码。

起初，我为此使用firbase Web SDK，用户可以接收验证短信。但是对firebase.auth.signInWithPhoneNumber(phoneNumber, recaptchaVerifier)的调用似乎无法解决firebase.auth.ConfirmationResult的问题，因为结果中缺少confirm方法，但是有一个名为a的函数，即使调用a也可以没有解决任何事情，在以后的执行阶段会失败。

后来，我移至@angular\fire，但结果仍然相同。

这是我尝试做的事情：

recaptcha.directive.ts

import { Directive, OnInit, Output, EventEmitter, OnDestroy, ElementRef } from '@angular/core';

import { IdGenerater } from 'src/app/shared/directives/id-genrater.service';
import { auth } from 'firebase';

@Directive({
    selector: 'app-recaptcha',
    exportAs: 'recaptcha'
})
export class RecaptchaDirective implements OnInit, OnDestroy {
    constructor(private el: ElementRef<HTMLElement>, private idGenrater: IdGenerater) {

    }
    recaptchaInstanse: auth.RecaptchaVerifier;
    @Output()
    verifed = new EventEmitter<string>();
    ngOnInit() {
        if (!this.el.nativeElement.id) {
            // this line just generates a unique Id for our element 
            this.el.nativeElement.id = this.idGenrater.genrateId();
        }
        this.recaptchaInstanse = new auth.RecaptchaVerifier(this.el.nativeElement.id);
        this.recaptchaInstanse.render();
    }
    verify() {
        this.recaptchaInstanse.verify().then(a => this.verifed.emit());
    }
    ngOnDestroy() {
        this.verifed.complete();
        this.recaptchaInstanse.clear();
        this.recaptchaInstanse = undefined;
    }

}

sign-up.component.html

<div [formGroup]="form">
        <!-- other form items -->
        <div class="form-group">
            <label [attr.for]="mNumber.id">Mobile Number</label>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">+91</span>
                </div>
                <input class="form-control" maxlength="10" formControlName="phNumber" autoId #mNumber="autoId"
                    placeholder="Mobile Number">
            </div>
        </div>
        <!-- other form items -->
        <app-recaptcha #recaptcha="recaptcha"></app-recaptcha>
        <button type="button" (click)="onSignUp(recaptcha.recaptchaInstanse)" class="btn btn-primary">Submit</button>
    </div>

sign-up.component.ts

import { Component, OnInit, EventEmitter, Output, AfterViewInit } from '@angular/core';
import { AuthanticationService } from '../../authantication.service';
import { ToastrService } from 'ngx-toastr';
import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
import { Router } from '@angular/router';
import { DataShareService } from 'src/app/services/data-share.service';
import { AngularFireAuth } from '@angular/fire/auth';



@Component({
    selector: 'app-sign-up',
    templateUrl: './sign-up.component.html'
})
export class SignUpComponent implements OnInit {
    @Output()
    signedUp = new EventEmitter();
    constructor(
        private authanticationService: AuthanticationService,
        private toater: ToastrService,
        private fb: FormBuilder,
        private router: Router,
        private dataShareService: DataShareService,
        private angularFireAuth: AngularFireAuth
    ) {
    }
    form: FormGroup;
    ngOnInit() {
        this.form = this.fb.group({
            // other form controls
            phNumber: ['', [Validators.required, Validators.maxLength(10), Validators.minLength(10)]]
        });
        }
    onSignUp(recaptcha: firebase.auth.RecaptchaVerifier) {
         if (!this.form.valid) {
             return;
         }
        /* 
        firebase.auth().signInWithPhoneNumber(
            '+91' + this.form.value.phNumber, recaptcha
        ).then(a => console.log(a)); 
        // OR
        */
        this.angularFireAuth.auth.signInWithPhoneNumber(
            '+91' + this.form.value.phNumber, recaptcha
        ).then(a => console.log(a) /* expected a object with `confirm` method and `verificationId` property  */  );

    }
}

我希望使用confirm方法和verificationId属性记录一个对象，但这是结果。

jl
 a: ƒ ()
  arguments: (...)
  caller: (...)
  length: 1
  name: "bound "
  __proto__: ƒ ()
  [[TargetFunction]]: ƒ (a)
  [[BoundThis]]: sm
  [[BoundArgs]]: Array(0)
 verificationId: "AM5PThD7wJGY4Pyd67BViGZ06qC_kGWo640Gt72nUXWOluFW94FXuGrvwxPBlNc9ZjTDTeu8SNJqntzA8X7Wk38CCE4Osz-efKuh3AeRQLEoyRPazJ-rRc-XBL6C5gH7noZ7ae0Tsb7j"
 __proto__: Object

我是否错过了某些东西，或者这是Firebase Web SDK中的错误？

Answer 1

我能够使用firebase.auth().signInWithCredential功能执行电话验证。


onSignUp(recaptcha: firebase.auth.RecaptchaVerifier, wizard: WizardDirective) {
    if (!this.form.valid) {
       return;
    }
    this.angularFireAuth.auth.signInWithPhoneNumber(
        '+91' + this.form.value.phNumber, recaptcha
    ).then(a => this.verificationId  = a.verifictionId);
    });
}

onVerify(){
    const credential = firebase.auth.PhoneAuthProvider.credential(this.verifictionId, this.form.value.otp);
    firebase.auth().signInWithCredential(credential).then(a => {
    // after successful verification.
    });
}

如何质疑为什么confirm中没有ConfirmResult方法？仍然打开。

如何使用Web SDK执行基于Fire的电话身份验证？

1 个答案: