reCAPTCHA容器未找到或已包含内部元素

Question

当我尝试进行手机验证时,我在角度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代码

    <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-服务

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

这是您的可靠来源！https://developers.google.com/recaptcha/docs/invisible

看起来 div <div id="recaptcha-container"></div>尚未添加到您的 DOM，它位于您的类构造函数中。

另外，Angular 2 不希望您直接更改 DOM。您应该使用 ElementRef 或 ViewChild 更改 DOM！祝你好运！

更新：以下是如何将其添加到 dom 中。运行命令

iElement.html('<div id="recaptcha-container"></div>');

在角度2中。

该命令将该元素添加到 dom 中！

更新#2：尝试添加以下内容：

首先通过执行以下操作从 npm 安装 recaptcha

npm install angular2-recaptcha

将以下内容添加到 SystemJS 配置中：

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

然后添加这个模块：

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


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

然后将其添加到您的 html 中：

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

将 GOOGLE_RECAPTCHA_KEY 替换为您的 Google reCaptcha 公钥