如何使用网络 SDK 执行基于火力的电话身份验证

Question

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

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

后来，我搬到了@angularfire但仍然相同的结果。

以下是我尝试做事的方式：

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

注册组件.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>

注册.组件.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.
    });
}

但是问题为什么ConfirmResult没有记录confirm方法？仍然开放。