প্রবর্তন এই নিবন্ধে, আমরা সর্বশেষ সংস্করণ ব্যবহার করে একটি WEB অ্যাপ্লিকেশন তৈরি করব এর মধ্যে অন্তর্ভুক্ত করা CAPTCHA চ্যালেঞ্জ বট বিরুদ্ধে সুরক্ষা। আঙ্গুল ওয়েব অ্যাপ্লিকেশন ফায়ারওয়াল (Web Application Firewall) আঙ্গুল ওয়েব অ্যাপ্লিকেশন ফায়ারওয়াল (Web Application Firewall) পূর্বাভাস আমরা শুরু করার আগে, আপনি Angular অ্যাপ্লিকেশন তৈরি এবং AWS WAF CAPTCHA এর সাথে ইন্টিগ্রেশন করার জন্য নিচের সরঞ্জামগুলি ইনস্টল এবং কনফিগার করতে হবে। 
 
 
 
 
 Node.js এবং npm: Node.js গুগলের V8 ইঞ্জিনের উপর ভিত্তি করে একটি JavaScript কোড রানটাইম সফটওয়্যার। npm Node.js (Node.js প্যাকেজ ম্যানেজার) জন্য একটি প্যাকেজ ম্যানেজার। Angular CLI: Angular CLI Angular এর জন্য একটি কমান্ড লাইন ইউটিলিটি এবং এটি Angular অ্যাপ্লিকেশনের বেস কাঠামো তৈরি করতে ব্যবহার করা হবে। IDE (উদাহরণস্বরূপ, ভিসুয়াল স্টুডিও কোড বা WebStorm): একটি IDE (ইন্টিগ্রেটেড ডেভেলপমেন্ট পরিবেশ) অ্যাপ্লিকেশনের উন্নয়নে সহায়তা করার জন্য একটি গ্রাফিক ইন্টারফেসের সাথে একটি সরঞ্জাম, এবং এটি অ্যাপ্লিকেশন Angular উন্নয়নে ব্যবহৃত হবে। AWS অ্যাকাউন্ট: Amazon Web Services একটি ক্লাউড কম্পিউটিং পরিষেবা প্ল্যাটফর্ম এবং এটি AWS WAF CAPTCHA চ্যালেঞ্জকে একত্রিত করতে ব্যবহার করা হবে। Node.js এবং NPM ক্যালেন্ডার CLI Visual Studio কোড ওয়েবক্যাম AWS অ্যাকাউন্ট শুরু করা AWS WAF এ অ্যাকাউন্ট তৈরি এবং কনফিগার করুন। (ইন্টারনেট অ্যাপ্লিকেশন ফায়ারওয়াল) একটি নিরাপত্তা পরিষেবা যা আপনার ওয়েব অ্যাপ্লিকেশন এবং এপিআইগুলিকে সাধারণ ইন্টারনেট দুর্বলতা এবং বটগুলির অপব্যবহার থেকে রক্ষা করার জন্য ডিজাইন করা হয়েছে যা উপলব্ধতাকে প্রভাবিত করতে পারে, নিরাপত্তা বা অতিরিক্ত সম্পদ খরচ করতে পারে। AWS ওয়াফ AWS ওয়াফ আসুন AWS অ্যাকাউন্ট অ্যাক্সেস করুন. সাইট অ্যাক্সেস করুন লিংকটিতে ক্লিক করুন . 1. , https://aws.amazon.com/waf/ সাইন আপ করুন কনসোল https://aws.amazon.com/waf/     নোট : 
 
 আপনার যদি অ্যামাজন অ্যাকাউন্ট না থাকে তবে সেশনে Amazon Cognito ব্যবহার করে একটি Angular অ্যাপ্লিকেশনে যাচাইকরণ পোস্টের ধাপ 1 থেকে 9 অনুসরণ করুন. Create and configure the account on Amazon Cognito. একটি Angular অ্যাপ্লিকেশনের জন্য Amazon Cognito ব্যবহার করে সনাক্তকরণ একটি Angular অ্যাপ্লিকেশনের জন্য Amazon Cognito ব্যবহার করে সনাক্তকরণ এখন আমরা মাঠটি পূরণ করব। মাঠে পূরণ করুন মাঠে পূরণ করুন বাটনে ক্লিক করুন . 2. অ্যাকাউন্ট আইডি বা অ্যালিস ব্যবহারকারী নাম পাসওয়ার্ড চিহ্ন     এরপর আমরা টাইপ করবো অনুসন্ধান ক্ষেত্রে এবং অপশনটি ক্লিক করুন . 3. ওয়াফ ওয়াশিংটন & Shield     এরপর আমরা মেনুতে ক্লিক করব। . 4. অ্যাপ্লিকেশন ইন্টিগ্রেশন     মেনুতে ক্লিক করার পর আমরা ট্যাব ক্লিক করব . 5. অ্যাপ্লিকেশন ইন্টিগ্রেশন CAPTCHA ইন্টিগ্রেশন     এখন আমরা বিকল্পটি ক্লিক করব বাটনে ক্লিক করুন JavaScript ফাইলের URL কপি করতে, কারণ এই URL Angular অ্যাপ্লিকেশনে কনফিগার করা হবে, এবং বোতামটি ক্লিক করুন . 6. CloudFront JavaScript ট্যাগ কপি JavaScript ট্যাগ অ্যাপ্লিকেশন API Key     এরপর আমরা বিকল্পটি ক্লিক করব। মাঠে পূরণ করুন আপনার ওয়েবসাইটের ডোমেইনের সাথে, এবং বোতামটি ক্লিক করুন . 7. CloudFront ডোমেইন অ্যাপ্লিকেশন API Key     তারপর, আমরা API কী কপি করার জন্য আইকনটি ক্লিক করব কারণ এই API কী Angular অ্যাপ্লিকেশনে কনফিগার করা হবে। 8.     আগুনের চাবিকাঠি তৈরি করা হয়েছে। 9. Angular অ্যাপ্লিকেশন তৈরি করুন। এটি HTML, CSS, এবং TypeScript (JavaScript) ব্যবহার করে WEB, মোবাইল এবং ডেস্কটপ অ্যাপ্লিকেশন তৈরি করার জন্য একটি উন্নয়ন প্ল্যাটফর্ম। আঙ্গুল আঙ্গুল আমরা অ্যাপ্লিকেশনটি Angular base structure ব্যবহার করে তৈরি করি। এআই কনফিগারেশন ফাইল নিষ্ক্রিয়, সার্ভার দিক রেন্ডারিং (এসএসআর) নিষ্ক্রিয়, রুট ফাইল নিষ্ক্রিয়, এবং 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 ফ্রেমওয়ার্ক কনফিগার করব. আমরা পোস্টের ধাপ 2 এবং 3 করব . 2. একটি Angular অ্যাপ্লিকেশনে Bootstrap CSS ফ্রেমওয়ার্ক যোগ করুন একটি Angular অ্যাপ্লিকেশনে Bootstrap CSS ফ্রেমওয়ার্ক যোগ করুন একটি Angular অ্যাপ্লিকেশনে Bootstrap CSS ফ্রেমওয়ার্ক যোগ করুন 
 
 পরে, আমরা নীচের কমান্ড দিয়ে পরিবেশ পরিবর্তনগুলির জন্য কনফিগারেশন ফাইল তৈরি করব। 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 যার ফলাফল সৃষ্টি হয়েছিল এয়ারপোর্টে। এবং নীচে যেমন ফাইল। 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',
    },
  },
 পরিবর্তনগুলি কনফিগার করার পরে, আমরা বিষয়বস্তু মুছে ফেলব ক্লাস থেকে ফাইল, তৈরি করুন এবং পদ্ধতি এবং বাস্তবায়ন এর পদ্ধতি ক্লাস যেটি পরিচালনা করবে নীচের মত পদ্ধতি 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('');
        },
      });
    }
  }

}
 এখন, আমরা বিষয়বস্তু থেকে মুছে ফেলব ফাইল এবং যোগ করুন Tag সঙ্গে নীচের হিসাবে বদলি। 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 অ্যাক্সেস করব। অ্যাপ্লিকেশনটি কাজ করছে কিনা তা নিশ্চিত করুন। 8. http://localhost:4200/             Angular অ্যাপ্লিকেশনটি তৈরি এবং AWS WAF CAPTCHA চ্যালেঞ্জের সাথে ইন্টিগ্রেট করা হয়েছে। 9. অ্যাপ্লিকেশন রিপোজিটর উপলব্ধ . https://github.com/rodrigokamada/angular-aws-waf-captcha https://github.com/rodrigokamada/angular-aws-waf-captcha উপসংহার এই নিবন্ধটিতে কী ব্যাখ্যা করা হয়েছে তা সংক্ষেপে বর্ণনা করুন: 
 
 
 আমরা এপিআই কী তৈরি করেছি এবং ডোমেইনটি কনফিগার করেছি যেখানে ক্যাপচা AWS WAF এ কাজ করবে। আমরা একটি Angular অ্যাপ্লিকেশন তৈরি করেছি এবং ক্যাপচা কোড যোগ করেছি। আপনি AWS WAF ক্যাপচা চ্যালেঞ্জ ব্যবহার করে বট সুরক্ষা সহ ওয়েব অ্যাপ্লিকেশন তৈরি করতে এই নিবন্ধটি ব্যবহার করতে পারেন। পড়ার জন্য ধন্যবাদ, এবং আশা করি আপনি নিবন্ধটি উপভোগ করেছেন! এই টিউটোরিয়ালটি পোস্ট করা হয়েছে আমার পর্তুগিজ ভাষায় blog ব্লগ যখনই আমি নতুন নিবন্ধ পোস্ট করতে আপডেট থাকতে, আমাকে অনুসরণ করুন এবং . টুইটার লিংকিং টুইটার লিংকিং

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

গল্পের মূল ভাষায় এই অডিও তৈরি!

অতিদীর্ঘ; পড়তে

কিভাবে একটি Angular অ্যাপ্লিকেশনে AWS WAF CAPTCHA যোগ করবেন

কিভাবে একটি Angular অ্যাপ্লিকেশনে AWS WAF CAPTCHA যোগ করবেন

About Author

মন্তব্য

আসে ট্যাগ

এই নিবন্ধটি উপস্থাপন করা হয়েছে

Related Stories

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

হ্যাকারনুন লেখার প্রতিযোগিতা জিততে চান? #crypto-api প্রতিযোগিতার বিজয়ীরা কী সুপারিশ করেন তা এখানে

ডিজিটাল যাযাবর শুনুন: থাইল্যান্ডের নতুন ডিটিভি ভিসা সম্পর্কে আপনার যা জানা দরকার

সেলিং দ্য ওয়াটারস: ডেটা লেক সহ প্রোডাকশন-গ্রেড RAG অ্যাপ্লিকেশন তৈরি করা

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

হ্যাকারনুন লেখার প্রতিযোগিতা জিততে চান? #crypto-api প্রতিযোগিতার বিজয়ীরা কী সুপারিশ করেন তা এখানে

ডিজিটাল যাযাবর শুনুন: থাইল্যান্ডের নতুন ডিটিভি ভিসা সম্পর্কে আপনার যা জানা দরকার

সেলিং দ্য ওয়াটারস: ডেটা লেক সহ প্রোডাকশন-গ্রেড RAG অ্যাপ্লিকেশন তৈরি করা

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps