表单登录定义

Question

im正在尝试以角度实现recaptcha2，但我不知道我将第3步放在代码https://www.npmjs.com/package/angular-google-recaptcha中的位置我创建了一个需要这个的表单，这是我放置验证码的地方：

但不显示任何内容。链接中的内容是说我需要把它放进去，但是我不知道在哪里，如果我把它放到我的登录名中。ts只显示验证码

<div class="form-group-log text-center but-form">
    <div class="g-recaptcha" data-sitekey="" data-callback="enableButtonEnviar">
    </div>
    <button type="submit" disabled="disabled" class="btn btn-outline-primary btn-block btn-w-240 " id="Btn-enviar" data-dismiss="modal">
        Entrar
    </button>
</div>

Answer 1

第3步介绍了如何使用反应式表单和模板驱动表单。

以反应形式（内部组件）

myRecaptcha = new FormControl(false);

onScriptLoad() {
   console.log('Google reCAPTCHA loaded and is ready for use!')
}

onScriptError() {
    console.log('Something went long when loading the Google reCAPTCHA')
}

在模板中：

您可以添加此代码

<recaptcha
   [formControl]="myRecaptcha"
   (scriptLoad)="onScriptLoad()"
   (scriptError)="onScriptError()"
></recaptcha>

“相同”适用于“模板驱动表单”。

Answer 2

下面的实现提供了更多详细信息，并验证了验证码响应在服务器端是否成功。

以模板驱动的形式，添加对recaptcha元素的引用。

 <recaptcha
            [(ngModel)]="myRecaptcha"
              name="myRecaptcha"
              #recaptcha
              (scriptLoad)="onScriptLoad()"
              (scriptError)="onScriptError()"></recaptcha>

现在将 验证码 的引用传递到您的表单。就我而言。如下图所示。

<form class="login-form mt-lg" role="form" (ngSubmit)="onForgot(recaptcha)" #loginForm="ngForm">

  <recaptcha
              [(ngModel)]="myRecaptcha"
              name="myRecaptcha"
              #recaptcha
              (scriptLoad)="onScriptLoad()"
              (scriptError)="onScriptError()"></recaptcha> 
</form>

在forgot.component.ts

export class ForgotComponent implements OnInit {
   onForgot(recaptcha: any) {

        console.log(recaptcha.recaptchaAPI.getResponse());

   }
}

getResponse（） 将返回令牌，如果从您的网站提交表单的方式如下，则可以对其进行验证。

POST: https://www.google.com/recaptcha/api/siteverify

form-data 
secret: YOUR-RECAPTCHA-SECRET
response: above_received_token
remoteip: (optional)

如果实际上是您的网站和用户发出的请求，则上述调用将返回状态。

{
   "success": true,
   "challenge_ts": "2018-08-15T02:47:46Z",
   "hostname": "localhost"
}

希望它很有用。

Answer 3

表单登录定义

    <form [formGroup]="loginForm"  (ngSubmit)="onSubmit(loginForm)" >

      <div class="input-group mb-3">
        <mat-form-field class="login-full-width">
        <input matInput type="text" class="form-control" formControlName="userName" placeholder="Mobile Number" (keypress)="numberOnly($event)">
      </mat-form-field>

      </div>

      <div class="input-group mb-3">
        <mat-form-field class="login-full-width">
        <input matInput type="password" class="form-control" formControlName="password" placeholder="Password">
      </mat-form-field>

      </div>

      <recaptcha formControlName="myRecaptcha" (ngModel)="myRecaptcha" (scriptLoad)="onScriptLoad()"
      (scriptError)="onScriptError()" ></recaptcha>

      <div class="row">
        <div class="col-8">
          <div class="icheck-primary">
            <input type="checkbox" id="remember">
            <label for="remember">
              Remember Me 
            </label>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-4">
          <button  mat-button type="submit" [disabled]="!loginForm.valid" class="btn btn-primary btn-block">Sign In</button>
        </div>
        <!-- /.col -->
      </div>
    </form>

Recaptcha Google角度6实施

3 个答案:

表单登录定义