5
Tôi gặp lỗi ở góc 4 khi tôi cố gắng xác thực điện thoại.thùng chứa reCAPTCHA không tìm thấy hoặc đã chứa các phần tử bên trong
tôi đã nhận lỗi này trong giao diện điều khiển
reCAPTCHA container được hoặc không tìm thấy hoặc đã chứa các yếu tố bên trong!
Tôi không thấy vùng chứa reCAPTCHA trong web của mình và không thể nhấn vào nó.
đăng nhập-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?'));
}
}
mã html
<div *ngIf="!auth.currentUser; else alreadyLoggedIn">
<h3>Social Login</h3>
<button (click)="signInWithGoogle()" class="button btn-social btn-google">
<i class="fa fa-google-plus fa-lg"></i> Connect Google
</button>
<button (click)="signInWithGithub()" class="button btn-social btn-github">
<i class="fa fa-github fa-lg"></i> Connect GitHub
</button>
<button (click)="signInWithFacebook()" class="button btn-social btn-facebook">
<i class="fa fa-facebook fa-lg"></i> Connect Facebook
</button>
<button (click)="signInWithTwitter()" class="button btn-social btn-twitter">
<i class="fa fa-twitter fa-lg"></i> Connect Twitter
</button>
<hr>
<h3>Anonymous Login</h3>
<button (click)="signInAnonymously()" class="button button-info">
<i class="fa fa-user-secret fa-lg"></i> Connect Anonymously
</button>
<hr>
<h1>Sign In with Your Phone Number</h1>
<label for="phone">Phone Number</label><br>
<input type="text" [(ngModel)]="phoneNumber.country" class="input" placeholder="1" maxlength="2">
<input type="text" [(ngModel)]="phoneNumber.area" class="input" placeholder="949" maxlength="3">
<input type="text" [(ngModel)]="phoneNumber.prefix" class="input" placeholder="555" maxlength="4">
<div id="recaptcha-container"></div>
<button (click)="sendLoginCode()">SMS Text Login Code</button>
<div *ngIf="windowRef.confirmationResult">
<hr>
<label for="code">Enter your Verification Code Here</label><br>
<input type="text" name="code" [(ngModel)]="verificationCode">
<button (click)="verifyLoginCode()">Verify</button>
</div>
</div>
<ng-template #alreadyLoggedIn>
<p class="text-success">
Already logged in!
</p>
</ng-template>
auth-dịch vụ
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
}
}
Xem nếu chủ đề này giúp. https: // stackoverflow.com/questions/44081040/ionic2-authentication-firebase – JGFMK