Kontener reCAPTCHA nie został znaleziony lub zawiera już elementy wewnętrzne

Question

Otrzymuję błąd w kancie 4, gdy próbuję uwierzytelnić telefon.

mam ten błąd w konsoli

reCAPTCHA pojemnik nie zostało znalezione lub już zawiera elementy wewnętrzne!

Nie widzę kontenera reCAPTCHA w mojej sieci i nie mogę go nacisnąć.

login-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?')); 

    } 




} 

kod 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-service

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 
    } 




} 

Answer 1

Oto twoje wiarygodne źródło! https://developers.google.com/recaptcha/docs/invisible

Wygląda na to, że element div <div id="recaptcha-container"></div> nie został jeszcze dodany do modelu DOM, który jest w konstruktorze klasy.

Również Angular 2 nie wymaga bezpośredniej zmiany DOM. Powinieneś zmienić DOM z ElementRef lub ViewChild! Powodzenia!

UPDATE: Oto jak dodać go do dom. Uruchom komendę

w angular2.

To polecenie dodaje ten element do domingu!

Aktualizacja # 2: spróbuj dodać następujące:

Najpierw zainstaluj reCAPTCHA z KMP wykonując

npm install angular2-recaptcha 

Dodaj poniższe linie do SystemJS config:

System.config({ 
    map: { 
     'angular2-recaptcha': 'node_modules/angular2-recaptcha' 
    }, 
    packages: { 
     app: { 
      format: 'register', 
      defaultExtension: 'js' 
     }, 
     'angular2-recaptcha': {defaultExtension: 'js', main:'index'} 
    } 
}); 

Następnie dodać ten moduł:

... 
import { ReCaptchaModule } from 'angular2-recaptcha'; 
... 


... 
@NgModule({ 
    imports: [...,ReCaptchaModule] 
    }) 
... 

Następnie dodać do swojej html:

<re-captcha site_key="<GOOGLE_RECAPTCHA_KEY>"></re-captcha> 

Wymień GOOGLE_RECAPTCHA_KEY z Google Odśwież klucza publicznego

Answer 2

spróbować wyszukiwanie w html

<script type="text/javascript" src="angular-recaptcha.js"></script> 

<script src="https://www.google.com/recaptcha/api.js" async defer></script> 


    <div class="g-recaptcha" data-sitekey="your_site_key"></div>