角度アプリケーションへのGoogle Recaptcha V 3の追加
導入
Angular ウェブ、モバイル、デスクトップアプリケーションを構築するための開発プラットフォームです.現在、角度はバージョン13です、そして、Googleはプロジェクトの主な管理者です.
ng-recaptcha シンプルで構成可能なrecaptcha v 2とv 3のコンポーネントライブラリです.
必要条件
起動する前に、ツールをインストールして設定する必要があります.
始める
Google Recaptchaの上でアカウントをつくって、構成してください
1 .アカウントを作成しましょう.アクセスサイトhttps://www.google.com/recaptcha/ ボタンv 3管理コンソールをクリックします.
2 .フィールドメールまたは電話を入力し、Googleアカウントでログインの横にあるボタンをクリックし、アカウントを持っていない場合は、新しいアカウントを作成します.
ボタンをクリックします.
フィールドラベルに入力し、[オプションの要約]をクリックし、[フィールド領域]をクリックし、[チェックボックス]をクリックして、Recaptcha条件のサービスを受け入れ、ボタンをクリックします.
5 .キーをコピーするためにボタンコピーサイトキーをクリックしてください
6Lf7UL0cAAAAAIt_m-d24WG4mA1XFPHE8yVckc5S
このキーが角度アプリケーションで構成されるので、コピーされました.6 .準備!キーが生成されました.
角度アプリケーションの作成
1 .角度ベース構造を使用したアプリケーションの作成
@angular/cli
ルートファイルとSCSSスタイル形式で.ng new angular-recaptcha-v3
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE angular-recaptcha-v3/README.md (1064 bytes)
CREATE angular-recaptcha-v3/.editorconfig (274 bytes)
CREATE angular-recaptcha-v3/.gitignore (604 bytes)
CREATE angular-recaptcha-v3/angular.json (3291 bytes)
CREATE angular-recaptcha-v3/package.json (1082 bytes)
CREATE angular-recaptcha-v3/tsconfig.json (783 bytes)
CREATE angular-recaptcha-v3/.browserslistrc (703 bytes)
CREATE angular-recaptcha-v3/karma.conf.js (1437 bytes)
CREATE angular-recaptcha-v3/tsconfig.app.json (287 bytes)
CREATE angular-recaptcha-v3/tsconfig.spec.json (333 bytes)
CREATE angular-recaptcha-v3/src/favicon.ico (948 bytes)
CREATE angular-recaptcha-v3/src/index.html (304 bytes)
CREATE angular-recaptcha-v3/src/main.ts (372 bytes)
CREATE angular-recaptcha-v3/src/polyfills.ts (2820 bytes)
CREATE angular-recaptcha-v3/src/styles.scss (80 bytes)
CREATE angular-recaptcha-v3/src/test.ts (788 bytes)
CREATE angular-recaptcha-v3/src/assets/.gitkeep (0 bytes)
CREATE angular-recaptcha-v3/src/environments/environment.prod.ts (51 bytes)
CREATE angular-recaptcha-v3/src/environments/environment.ts (658 bytes)
CREATE angular-recaptcha-v3/src/app/app-routing.module.ts (245 bytes)
CREATE angular-recaptcha-v3/src/app/app.module.ts (393 bytes)
CREATE angular-recaptcha-v3/src/app/app.component.scss (0 bytes)
CREATE angular-recaptcha-v3/src/app/app.component.html (24617 bytes)
CREATE angular-recaptcha-v3/src/app/app.component.spec.ts (1115 bytes)
CREATE angular-recaptcha-v3/src/app/app.component.ts (225 bytes)
✔ Packages installed successfully.
Successfully initialized git.
2 .ブートストラップCSSフレームワークのインストールと設定.ポストのステップ2と3をしてください.3 .設定
siteKey
Google Recaptchaキーで変数src/environments/environment.ts
and src/environments/environment.prod.ts
以下のファイル.recaptcha: {
siteKey: '6Lf7UL0cAAAAAIt_m-d24WG4mA1XFPHE8yVckc5S',
},
インストールng-recaptcha
図書館.npm install ng-recaptcha
インポートFormsModule
, RecaptchaV3Module
モジュールGoogle Recaptchaキーを構成します.変更するapp.module.ts
ファイルを追加し、以下の行を追加します.import { FormsModule } from '@angular/forms';
import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
import { environment } from '../environments/environment';
imports: [
BrowserModule,
FormsModule,
RecaptchaV3Module,
AppRoutingModule,
],
providers: [
{
provide: RECAPTCHA_V3_SITE_KEY,
useValue: environment.recaptcha.siteKey,
},
],
6 .内容を削除するAppComponent
からのクラスsrc/app/app.component.ts
ファイル.インポートNgForm
コンポーネントReCaptchaV3Service
サービスと作成send
以下の方法.import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { ReCaptchaV3Service } from 'ng-recaptcha';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private recaptchaV3Service: ReCaptchaV3Service) {
}
public send(form: NgForm): void {
if (form.invalid) {
for (const control of Object.keys(form.controls)) {
form.controls[control].markAsTouched();
}
return;
}
this.recaptchaV3Service.execute('importantAction')
.subscribe((token: string) => {
console.debug(`Token [${token}] generated`);
});
}
}
7 .内容を削除するsrc/app/app.component.html
ファイル.追加するre-captcha
以下のコンポーネント.<div class="container-fluid py-3">
<h1>Angular reCAPTCHA v3</h1>
<form #form="ngForm">
<div class="row mt-3">
<div class="col-sm-12 mb-2">
<button type="button" class="btn btn-sm btn-primary" (click)="send(form)">Send</button>
</div>
</div>
</form>
</div>
8 .下のコマンドでアプリケーションを実行します.npm start
> [email protected] start
> ng serve
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.75 MB
styles.css | styles | 266.71 kB
polyfills.js | polyfills | 128.52 kB
scripts.js | scripts | 76.33 kB
main.js | main | 12.28 kB
runtime.js | runtime | 6.64 kB
| Initial Total | 3.23 MB
Build at: 2021-10-09T22:00:31.213Z - Hash: f91dc9237b57212ebd83 - Time: 12001ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
9 .準備完了!URLにアクセスするhttp://localhost:4200/
そして、アプリケーションが動作しているかどうかを確認します.アプリケーションの作業GitHub Pages and Stackblitz .アプリケーションリポジトリはhttps://github.com/rodrigokamada/angular-recaptcha-v3 .
このチュートリアルはblog ポルトガル語.
Reference
この問題について(角度アプリケーションへのGoogle Recaptcha V 3の追加), 我々は、より多くの情報をここで見つけました https://dev.to/rodrigokamada/adding-the-google-recaptcha-v3-to-an-angular-application-kgeテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol