作者:倩女碧海蓝天_979 | 来源:互联网 | 2023-01-29 05:33
当我尝试进行手机验证时,我在角度4中收到错误.
我在控制台中遇到此错误
reCAPTCHA容器未找到或已包含内部元素!
我没有在网上看到reCAPTCHA容器,也无法按下它.
登录-page.ts
import { Component, OnInit } from '@angular/core';
// tslint:disable-next-line:quotemark
import { Router } from "@angular/router";
// tslint:disable-next-line:quotemark
import { AuthService } from "../../core/auth.service";
import { ReactiveFormsModule } from '@angular/forms';
import * as firebase from 'firebase';
export class PhoneNumber {
country: string;
area: string;
prefix: string;
line: string;
// format phone numbers as E.164
get e164() {
const num = this.country + this.area + this.prefix + this.line
return `+${num}`
}
}
@Component({
// tslint:disable-next-line:component-selector
selector: 'user-login',
templateUrl: './user-login.component.html',
styleUrls: ['./user-login.component.scss']
})
export class UserLoginComponent implements OnInit {
// phone auth
windowRef: any;
phOneNumber= new PhoneNumber();
verificationCode: string;
user: any;
constructor(public auth: AuthService,
private router: Router) {
}
ngOnInit() {
this.windowRef = this.auth.windowRef
this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')
this.windowRef.recaptchaVerifier.render()
}
// phone auth
sendLoginCode() {
const appVerifier = this.windowRef.recaptchaVerifier;
const num = this.phoneNumber.e164;
console.log(num);
firebase.auth().signInWithPhoneNumber(num, appVerifier)
.then(result => {
this.windowRef.cOnfirmationResult= result;
})
.catch( error => console.log(error) );
}
verifyLoginCode() {
this.windowRef.confirmationResult
.confirm(this.verificationCode)
.then( result => {
this.user = result.user;
})
.catch( error => console.log(error, 'Incorrect code entered?'));
}
}
HTML代码
Already logged in!
AUTH-服务
import { Injectable } from '@angular/core';
import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Router } from "@angular/router";
import * as firebase from 'firebase';
@Injectable()
export class AuthService {
authState: any = null;
constructor(private afAuth: AngularFireAuth,
private db: AngularFireDatabase,
private router:Router) {
this.afAuth.authState.subscribe((auth) => {
this.authState = auth
});
}
// Returns true if user is logged in
get authenticated(): boolean {
return this.authState !== null;
}
// Returns current user data
get currentUser(): any {
return this.authenticated ? this.authState : null;
}
// Returns
get currentUserObservable(): any {
return this.afAuth.authState
}
// Returns current user UID
get currentUserId(): string {
return this.authenticated ? this.authState.uid : '';
}
get windowRef(){
return window
}
}