அறிமுகம் இந்த பதிவில், we will create a WEB application using the latest version of மேலும் integrate the CAPTCHA இன் விளைவுகளை பாதுகாக்க Angular AWS WAF (Web Application Firewall) ஐப் பயன்படுத்துவது Angular AWS WAF (Web Application Firewall) ஐப் பயன்படுத்துவது முன்மொழிந்து நாம் தொடங்குவதற்கு முன்பாக, நீங்கள் Angular பயன்பாட்டை உருவாக்க மற்றும் AWS WAF captcha ஐ ஒருங்கிணைக்க கீழே உள்ள கருவிகளை நிறுவ மற்றும் அமைக்க வேண்டும். 
 
 
 
 
 Node.js மற்றும் npm: Node.js Google V8 இயந்திரம் அடிப்படையில் ஒரு JavaScript code runtime மென்பொருள் ஆகும். npm Node.js (Node.js Package Manager) ஒரு தொகுப்பு மேலாளர் ஆகும். Angular CLI: Angular CLI is a command-line utility tool for Angular, and it will be used to create the base structure of the Angular application. Angular CLI is a command-line utility tool for Angular, and it will be used to create the base structure of the Angular application. IDE (Example, Visual Studio Code or WebStorm): ஒரு IDE (Integrated Development Environment) பயன்பாடுகள் வடிவமைக்க உதவும் ஒரு கிராபிக் அண்ட்ராய்டு ஒரு கருவி, மற்றும் அது Angular பயன்பாடுகள் வடிவமைக்க பயன்படுத்தப்படும். AWS கணக்கு: Amazon Web Services ஒரு cloud computing service platform ஆகும், இது AWS WAF CAPTCHA Challenge ஐ ஒருங்கிணைக்க பயன்படுத்தப்படும். Node.js மற்றும் NPM கிளிக் Angular Visual Studio குறியீடு WEB மழை AWS கணக்கு முதலீடு AWS WAF இல் கணக்கை உருவாக்கவும் மற்றும் அமைக்கவும். (Web Application Firewall) ஒரு பாதுகாப்பு சேவை உங்கள் WEB பயன்பாடுகள் மற்றும் APIs பாதுகாக்க வடிவமைக்கப்பட்டுள்ளது பொதுவான ஆன்லைன் விழிப்புணர்வுகள் மற்றும் பிளாஸ்டிக் விளைவுகளைப் பாதிக்க முடியும், பாதுகாப்பு இழக்க, அல்லது அதிக அளவு உபயோகப்படுத்த முடியும். AWS WAF இல் AWS WAF இல் AWS கணக்கை அணுகலாம்.Access the site Click on link இல் . 1. , https://aws.amazon.com/waf/ ஆங்கிலத்தில் console https://aws.amazon.com/waf/     குறிச்சொல் : 
 
 நீங்கள் ஒரு Amazon கணக்கு இல்லாவிட்டால், அலுவலகத்தில் ஒரு Angular பயன்பாட்டிற்கு Amazon Cognito பயன்படுத்தி சான்றிதழ்களில் 1 முதல் 9 வரை பின்பற்றுங்கள். Amazon Cognito பயன்படுத்தி ஒரு Angular பயன்பாட்டிற்கு சான்றிதழ் Amazon Cognito பயன்படுத்தி ஒரு Angular பயன்பாட்டிற்கு சான்றிதழ் இப்போது, நாங்கள் பூமியில் நிறைவேறும் பூமியில் நிறைந்த பூமியில் நிறைந்த கிளிக் செய்யவும் button . 2. கணக்கு ID அல்லது Alias உபயோகமான குறியீடு , அடையாளம்     அடுத்து, நாம் Type தேடல் அட்டவணையில், click on the option . 3. WAP WAF & SHIELD படங்கள்     பின்னர் menu click செய்யவும். . 4. Integration பயன்பாடு     Menu இல் கிளிக் செய்தால் , we will click on the tab இல் கிளிக் செய்யவும் . 5. Integration பயன்பாடு CAPTCHA இணைப்பு     இப்போது, நாங்கள் Option ஐ கிளிக் செய்வோம் கிளிக் செய்யவும் button JavaScript கோப்பு URL குறியீடு, ஏனெனில் இந்த URL Angular பயன்பாட்டில் அமைக்கப்படும், மற்றும் கிளிக் செய்யவும் . 6. CloudFront JavaScript அட்டவணை பதிவிறக்கம் JavaScript API Key உருவாக்க     அடுத்து, Option ஐ கிளிக் செய்வோம். பூமியில் நிறைந்த உங்கள் வலைத்தளத்தின் domain, and click on the button . 7. CloudFront படப்பிடிப்பு வானிலை API Key உருவாக்க     பின்னர், நாம் API key copy செய்ய ஐபோனில் கிளிக் செய்வோம் ஏனெனில் இந்த API key Angular பயன்பாட்டில் அமைக்கப்படும். 8.     இதன் மூலம் API Key உருவாக்கப்பட்டது. 9. Angular Application உருவாக்கவும். இது HTML, CSS, மற்றும் TypeScript (JavaScript) பயன்படுத்தி WEB, மொபைல், மற்றும் desktop பயன்பாடுகளை உருவாக்குவதற்கான ஒரு உபகரணமாகும். இப்போது, Angular 21 இல் உள்ளது, மற்றும் Google திட்டத்தின் முக்கிய மேம்பாடு செயலாளர் ஆகும். Angular Angular Angular base structure ஐ பயன்படுத்தி பயன்படுத்தலாம். ஆங்கிலத்தில் இதை Single Orgasm, Multiple Orgasm என்றும் கூறுகிறார்கள். 1. @angular/cli ng new angular-aws-waf-captcha --ai-config=none --ssr=false --routing=false --style=scss
CREATE angular-aws-waf-captcha/README.md (1473 bytes)
CREATE angular-aws-waf-captcha/.editorconfig (314 bytes)
CREATE angular-aws-waf-captcha/.gitignore (604 bytes)
CREATE angular-aws-waf-captcha/angular.json (2084 bytes)
CREATE angular-aws-waf-captcha/package.json (970 bytes)
CREATE angular-aws-waf-captcha/tsconfig.json (957 bytes)
CREATE angular-aws-waf-captcha/tsconfig.app.json (429 bytes)
CREATE angular-aws-waf-captcha/tsconfig.spec.json (441 bytes)
CREATE angular-aws-waf-captcha/.vscode/extensions.json (130 bytes)
CREATE angular-aws-waf-captcha/.vscode/launch.json (470 bytes)
CREATE angular-aws-waf-captcha/.vscode/tasks.json (978 bytes)
CREATE angular-aws-waf-captcha/src/main.ts (222 bytes)
CREATE angular-aws-waf-captcha/src/index.html (306 bytes)
CREATE angular-aws-waf-captcha/src/styles.scss (80 bytes)
CREATE angular-aws-waf-captcha/src/app/app.scss (0 bytes)
CREATE angular-aws-waf-captcha/src/app/app.spec.ts (690 bytes)
CREATE angular-aws-waf-captcha/src/app/app.ts (246 bytes)
CREATE angular-aws-waf-captcha/src/app/app.html (20086 bytes)
CREATE angular-aws-waf-captcha/src/app/app.config.ts (203 bytes)
CREATE angular-aws-waf-captcha/public/favicon.ico (15086 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
 இப்போது, நாங்கள் Bootstrap CSS framework ஐ நிறுவ மற்றும் அமைத்து விடுவோம். நாங்கள் post 2 மற்றும் 3 படிகளை செய்வோம் . 2. Bootstrap CSS Framework ஒரு Angular Application ஐ சேர்க்கவும் Bootstrap CSS Framework ஒரு Angular Application ஐ சேர்க்கவும் Bootstrap CSS Framework ஒரு Angular Application ஐ சேர்க்கவும் 
 
 Next, We will create configuration files for the environment variables with the command below. ng generate environments
CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (2309 bytes)
 அப்போது நாம் மாற்றத்தை ஏற்படுத்திவிடுவோம். AWS WAF அணுகுமுறை குறியீடு மற்றும் மாற்றத்தை உள்ளடக்கிய JavaScript கோப்புகளின் URL அதேபோல், AWS WAF இல் உருவாக்கப்பட்டது. மற்றும் கீழே உள்ள கோப்புகளை 4. aws.waf.url aws.waf.apiKey src/environments/environment.ts src/environments/environment.development.ts   aws: {
    waf: {
      url: 'https://a162a8302aaa.edge.captcha-sdk.awswaf.com/a162a8302aaa/jsapi.js',
      apiKey: 'QprVjPcLgWgjYBGZoci9OMw9CFJSZZtr2gHt7McsehfL1+Hi+6Rp5y99a0p3vmdsq5Wkat06xfZSTc6dfjvR5w9COBfYhcsXvdRPAGSd9Zxfx6W2QfDsDc2IdiQImVfAl35Uw3tBYd31B3rVlT9q4pEcipVFo29NcqRjYneV7peX2Q+vvd4ttjX0QuM3d+csxtCjaHYSquk6nySEun5QTnbUsq0TE2gliQRFYgHFX9vXSWrkkAXHwWtaxr86kzIeIPoesRAC3JB7kwyK6l4sYoo6w7fTSougEwpjJHGIo8LHdjlxmmNpE2umf1z1go3Ixjm/ujc919tn2FCuGbnW4OEXVWotx3qjf+FPkFbght+ccXsXsL2eHoPgj0sHKaeK0fYpGlJnpwDp+ep64+UVm46Y7Udr7RVLjCnngBcgTRnmA20uy+agfhRnBJk6Y34OgJQJnWuoYXCoVETlFus4ATJ69dny8/6GxUUObjcU6gnfpyR5vkaqmKwSluu6i/x90o9pm1/TTFeh4iuSGylrMySzOe4PsxqMOYR9ow9hnrm7fXz+yE2GoQUJjLWpOUfcmcFmOonjslxIxwDjafWBPACec3JBWGYjAF0H+98Bg6vPly9wlxJwiz6eiMjULPfb1lM7rr6crZ1VaZ964pw21FZSrOdAMknmGSZvmKGAzeU=_1_1',
    },
  },
 மாற்றங்கள் அமைக்கப்பட்ட பின்னர், நாம் அதன் உள்ளடக்கத்தை அழித்து விடுவோம். வகுப்புகள் from the கோப்பு, Create the மற்றும் methods, மற்றும் செயல்படுத்தும் Method இல் வகுப்பறையில் அவர் செயல்படுவார் கீழே உள்ள வழிமுறை 5. App src/app/app.ts loadScript renderCaptcha ngAfterViewInit AfterViewInit loadScript export class App implements AfterViewInit {

  captchaRef = viewChild>('captcha');
  messageSuccess = model('');
  messageError = model('');

  constructor() {
  }

  ngAfterViewInit(): void {
    this.loadScript();
  }

  private loadScript(): void {
    if (document.getElementById('awsWafScript')) {
      return;
    }

    const script = document.createElement('script');
    script.id = 'awsWafScript';
    script.async = false;
    script.defer = true;
    script.src = environment.aws.waf.url;
    script.onload = () => {
      this.renderCaptcha();
    };
    document.head.appendChild(script);
  }

  private renderCaptcha(): void {
    const captchaElementRef = this.captchaRef();

    if (window.AwsWafCaptcha && captchaElementRef) {
      window.AwsWafCaptcha.renderCaptcha(captchaElementRef.nativeElement, {
        apiKey: environment.aws.waf.apiKey,
        onSuccess: (token: string) => {
          this.messageSuccess.set(`Captcha successfully validated! Token: ${token}`);
          this.messageError.set('');
        },
        onError: (error: any) => {
          this.messageError.set(`Error validating captcha: ${error}`);
          this.messageSuccess.set('');
        },
      });
    }
  }

}
 இப்போது, நாம் இடுகையை வெளியிடுவோம் File மற்றும் Add Tag with இன் கீழே உள்ள மாற்றங்கள் 6. src/app/app.html div captcha <div class="container-fluid py-3">
  <h1>Angular AWS WAF Captcha</h1>

  <div class="row mt-3">
    <div class="col-sm-12">
      <div #captcha></div>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-sm-12">
      <p class="text-center text-success">{{ messageSuccess() }}</p>
      <p class="text-center text-danger">{{ messageError() }}</p>
    </div>
  </div>
</div>
 
 
 பின்னர், கீழே உள்ள ஆவணத்தைப் பயன்படுத்துவோம். npm run start

> angular-aws-waf-captcha@1.0.0 start
> ng serve

Initial chunk files | Names         |  Raw size
styles.css          | styles        | 377.03 kB | 
main.js             | main          |   6.10 kB | 

                    | Initial total | 383.13 kB

Application bundle generation complete. [2.375 seconds] - 2026-01-17T18:13:56.184Z

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
 பின்னர் URL ஐ அணுகலாம். Application வேலை செய்கிறதா என்று பாருங்கள். 8. http://localhost:4200/             Ready!The Angular application was created and integrated with the AWS WAF CAPTCHA challenge. 9. The application repository is available at . https://github.com/rodrigokamada/angular-aws-waf-captcha https://github.com/rodrigokamada/angular-aws-waf-captcha முடிவு இந்த பதிவில் குறிப்பிட்ட விஷயங்களைக் கூறுகிறேன்: 
 
 
 நாங்கள் API key படைத்தோம் மற்றும் AWS WAF இல் captcha வேலை செய்வதற்கான டொமைன் அமைத்தோம். நாம் ஒரு Angular பயன்பாட்டை உருவாக்கியது மற்றும் captcha குறியீடு சேர்க்கப்பட்டது. இந்த பதிவை நீங்கள் AWS WAF captcha challenge ஐப் பயன்படுத்தி bot protection ஐப் பயன்படுத்துவதற்காக பயன்படுத்தலாம். பதிவை படித்ததற்கு நன்றி.நான் உங்கள் பதிவை நேசிக்கிறேன்! This tutorial was posted on என் ரஷ்யாவில் blog வலைப்பதிவு புதிய பதிவுகளை எழுதி வரும்போது என்னைப் பின்பற்றுங்கள். மற்றும் . Twitter LinkedIn Twitter இல் லிங்கன்

I am creating content to share my knowledge and help people on their technology journey.

2021 - HackerNoon Contributor of the Year - WEB-DEVELOPMENT

2022 - HackerNoon Contributor of the Year - Amazon

2022 - HackerNoon Contributor of the Year - Angular

2022 - HackerNoon Contributor of the Year - Api

2022 - HackerNoon Contributor of the Year - Authentication

2022 - HackerNoon Contributor of the Year - Aws

2022 - HackerNoon Contributor of the Year - Github

2022 - HackerNoon Contributor of the Year - Website Development

2021 - HackerNoon Contributor of the Year - WEB

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Aws

இந்த ஆடியோ கதையின் அசல் மொழியில் தயாரிக்கப்பட்டது!

மிக நீளமானது; வாசிப்பதற்கு

AWS WAF CAPTCHA ஐ ஒரு Angular Application இல் சேர்க்க எப்படி

AWS WAF CAPTCHA ஐ ஒரு Angular Application இல் சேர்க்க எப்படி

About Author

கருத்துகள்

ஹேங் டேக்குகள்

இந்த கட்டுரையில் வழங்கப்பட்டது

Related Stories

Proof of Usefulness Hackathon: Bright Data, Neo4j, Algolia, Storyblok & HackerNoon மூலம் $ 150K+ வெற்றி

How to Advertise Your Startup the Right Way

The Year in Marketing: What You Need to Read Before 2026

Meet Fastex: HackerNoon Company of the Week

Proof of Usefulness Hackathon: Bright Data, Neo4j, Algolia, Storyblok & HackerNoon மூலம் $ 150K+ வெற்றி

How to Advertise Your Startup the Right Way

The Year in Marketing: What You Need to Read Before 2026

Meet Fastex: HackerNoon Company of the Week

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps