ඇතුළත් කිරීම මෙම ලිපිය තුළ, අපි නවතම අනුවාදය භාවිතා WEB යෙදුම නිර්මාණය කරනු ඇත සහ ඇතුළත් කිරීම CAPTCHA අභියෝග බෝට්ටු ආරක්ෂා කිරීම සඳහා. Angular AWS WAF (Web Application Firewall) ඇන්ගල් AWS WAF (Web Application Firewall) - අන්තර්ජාල යෙදුම් ගිවිසුම කොන්දේසි ආරම්භ කිරීමට පෙර, ඔබට Angular යෙදුම නිර්මාණය කිරීම සහ AWS WAF CAPTCHA සමඟ ඒකාබද්ධ කිරීම සඳහා පහත සඳහන් මෙවලම් ස්ථාපනය කිරීම සහ සැකසීම අවශ්ය වේ. 
 
 
 
 
 Node.js සහ npm: Node.js යනු Google හි V8 යන්ත්රය මත පදනම්ව ඇති JavaScript කේත Runtime මෘදුකාංගයකි. npm යනු Node.js (Node.js Package Manager) සඳහා පැකේජ කළමනාකරණයකි. Angular CLI: Angular CLI යනු Angular සඳහා Command-Line උපකරණයක් වන අතර එය Angular යෙදුමේ මූලික ව්යුහය නිර්මාණය කිරීම සඳහා භාවිතා කරනු ඇත. IDE (උදාහරණයක් ලෙස, Visual Studio Code හෝ WebStorm): IDE (Integrated Development Environment) යනු යෙදුම් සංවර්ධනය සඳහා උපකාර කිරීම සඳහා ග්රැෆික් පරිගණකයක් සහිත මෙවලමක් වන අතර එය Angular යෙදුම සංවර්ධනය කිරීම සඳහා භාවිතා කරනු ඇත. AWS ගිණුම: Amazon Web Services යනු ගූගල් පරිගණක සේවා වේදිකාවක් වන අතර එය AWS WAF CAPTCHA අභියෝගය ඇතුළත් කිරීම සඳහා භාවිතා කරනු ඇත. Node.js සහ NPM CLI දර්ශන Visual Studio කේතය WEB කුණාටුව AWS ගිණුම ආරම්භ කිරීම AWS WAF හි ගිණුම නිර්මාණය කිරීම සහ සැකසීම. (Web Application Firewall) ඔබගේ WEB යෙදුම් සහ APIs ආරක්ෂා කිරීම සඳහා නිර්මාණය කරන ලද ආරක්ෂක සේවා සාමාන්ය අන්තර්ජාල දුර්වලතා හා බෝතල් වල ප්රයෝජනවලට හානි කළ හැකි, ආරක්ෂාව හානි කළ හැකි හෝ ප්රමාණවත් සම්පත් භාවිත කළ හැකිය. AWS WAF AWS WAF AWS ගිණුමට පිවිසෙන්න. click කරන්න link එක . 1. , https://aws.amazon.com/waf/ ලියාපදිංචි වන්න Console https://aws.amazon.com/waf/     සටහන : 
 
 ඔබට Amazon ගිණුමක් නොමැති නම්, Amazon Cognito භාවිතා කරන Authentication post වල පියවර 1 සහ 9 අනුගමනය කරන්න.Create and configure the account on Amazon Cognito. Amazon Cognito භාවිතයෙන් Angular යෙදුමකට ඔප්පු කිරීම Amazon Cognito භාවිතයෙන් Angular යෙදුමකට ඔප්පු කිරීම දැන් අපි ක්ෂේත් රයේ පුරවන්නම් field එක පුරවන්න field එක පුරවන්න Button මත ක්ලික් කරන්න . 2. ගිණුම ID හෝ Alias පාවිච්චි කරන්නෙ මුරපදය සංඥා     ඊළඟට අපි Type කරමු සොයන ක්ෂේත් රයේ සහ ක්ලික් කරන්න Option . 3. WAF WAF සහ Shield     ඊට පස්සේ අපි menu එක click කරමු. . 4. යෙදුම ඇතුළත් කිරීම     menu එකේ click කරාම අපි TAB මත ක්ලික් කරමු . 5. යෙදුම ඇතුළත් කිරීම CAPTCHA ඇතුළත් කිරීම     දැන් අපි විකල්පය මත ක්ලික් කරමු Click on බොත්තම JavaScript ගොනුවෙහි URL කේතය copy කිරීමට, මෙම URL කේතය Angular යෙදුම තුළ සකස් කරනු ඇත, හා බොත්තම මත ක්ලික් කරන්න . 6. CloudFront JavaScript තැපැල් සබැඳි JavaScript Tag API Key නිර්මාණය කිරීම     ඊළඟට අපි විකල්පය මත ක්ලික් කරමු field එක පුරවන්න ඔබේ වෙබ් අඩවියේ ආකෘතිය සමඟ, හා බොත්තම මත ක්ලික් කරන්න . 7. CloudFront එක Domain එක API Key නිර්මාණය කිරීම     ඉන්පසු, අපි API යතුරක් පිටපත් කිරීම සඳහා අයිකනය මත ක්ලික් කරනු ඇත, මොකද මෙම API යතුර Angular යෙදුම තුළ සකස් කරනු ඇත. 8.     සූදානම්! API Key නිර්මාණය කර ඇත. 9. Angular Application එක හදන්න. HTML, CSS, සහ TypeScript (JavaScript) භාවිතා කිරීම සඳහා WEB, ජංගම සහ ඩෙස්ක්ටොප් යෙදුම් ගොඩනඟා ගැනීම සඳහා සංවර්ධන පද්ධතිය වේ. ඇන්ගල් ඇන්ගල් අපි Angular base structure භාවිතා කරන Application නිර්මාණය කරමු. AI සැකසුම් ගොනු අවලංගු කර ඇති මෙවලමක්, සැපයුම්කරු පැත්තේ rendering (SSR) අවලංගු කර ඇති අතර, මාර්ගය ගොනුව අවලංගු කර ඇති අතර, SCSS ස්ටයිල් ආකෘතිය. 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. Angular Application වලට Bootstrap CSS Framework එකතු කිරීම Angular Application වලට Bootstrap CSS Framework එකතු කිරීම Angular Application වලට Bootstrap CSS Framework එකතු කිරීම 
 
 ඊළඟට, අපි පහත දැක්වෙන නියෝගයෙන් පරිසර වෙනස්කම් සඳහා සැකසුම් ගොනු නිර්මාණය කරනු ඇත. 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 හි නිර්මාණය කරන API යතුර සමඟ සහ පහල තියෙන ෆයිල් එක. 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',
    },
  },
 වෙනස්කම් සංසන්දනය කිරීමෙන් පසු, අපි එහි අන්තර්ගතය ඉවත් කරනු ඇත. පන්තියේ සිට ෆයිල් එක හදන්න සහ ක්රම සහ ක්රියාත්මක කිරීම ක් රමය The එය ක් රියාත්මක කරන පන්තිය පහල තියෙන ක් රමය. 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>
 
 
 ඊළඟට අපි පහත සඳහන් Command එකෙන් Application එක ක් රියාත්මක කරන්නෙමු. 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 එකට යන්නම්. අයදුම්පත වැඩ කරනවද කියලා බලන්න. 8. http://localhost:4200/             සූදානම්! Angular යෙදුම නිර්මාණය වී AWS WAF CAPTCHA අභියෝගය සමඟ ඒකාබද්ධ වී ඇත. 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 එක වැඩ කරන domain එක සැකසුවා. අපි Angular යෙදුම නිර්මාණය කර captcha කේතය එකතු කර ඇත. AWS WAF CAPTCHA අභියෝගය භාවිතා කිරීමෙන් Bot Protection සමඟ වෙබ් යෙදුම් නිර්මාණය කිරීමට ඔබට මෙම ලිපිය භාවිතා කළ හැකිය. කියවීම ගැන ස්තුතියි, මම බලාපොරොත්තු වෙනවා ඔබ ලිපිය රසවිඳින්න! This tutorial was posted in මගේ ප් රංශයේ blog බ්ලොග් මම නව ලිපි ප්රකාශ කරන විට සෑම විටම යාවත්කාලීන වීමට, මා අනුගමනය කරන්න සහ . ට්විටර් Linkedin එක ට්විටර් Linkedin එක

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

The #crypto-api Writing Contest by CoinGecko and HackerNoon: Results Announcement 🎉

Streamlining the API Lifecycle: Interview with Startups of The Year 2024 Nominee, Ambassador

Meet the HackerNoon Top Writers - Wes Huber's Journey In Tech

Publish Your Next Technology Press Release with HackerNoon

The #crypto-api Writing Contest by CoinGecko and HackerNoon: Results Announcement 🎉

Streamlining the API Lifecycle: Interview with Startups of The Year 2024 Nominee, Ambassador

Meet the HackerNoon Top Writers - Wes Huber's Journey In Tech

Publish Your Next Technology Press Release with HackerNoon

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps