Как выполнить проверку подлинности телефона с помощью Fire SD с помощью веб-SDK?

Question

Я пытаюсь включить проверку подлинности телефона с помощью firebase для проверки номера телефона пользователя в угловом приложении.

Сначала я использовал firbase веб-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;
    }

}

знак-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>

знак-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.
    });
}

Как бы то ни было Вопрос, почему в ConfirmResult не было метода confirm, как задокументировано?Все еще открыт.