إدراج في هذه المقالة ، سنقوم بإعداد تطبيق WEB باستخدام النسخة الأحدث من و التكامل مع CAPTCHA التحدي لحماية من الروبوتات. الأغنية AWS WAF (Web Application Firewall) الأغنية AWS WAF (Web Application Firewall) متطلبات قبل أن نبدأ، تحتاج إلى تثبيت وإعداد الأدوات التالية لإنشاء التطبيق Angular وتدميرها مع AWS WAF captcha. 
 
 
 
 
 Node.js و npm: Node.js هو برامج تشغيل الكمبيوتر JavaScript على أساس محرك V8 من جوجل. npm هو مدير بطاقات لـ Node.js (Node.js Package Manager). Angular CLI: Angular CLI هو أداة أدوات خطة الأوامر لـ Angular ، وسوف تستخدم لإنشاء هيكل البنية الأساسية لبرنامج Angular. IDE (على سبيل المثال، Visual Studio Code أو WebStorm): هو أداة IDE (بيئة تطوير متكاملة) مع متصفح مرئي لمساعدة في تطوير التطبيقات، وسيتم استخدامها لتطوير التطبيق Angular. حساب AWS: Amazon Web Services هو منصة خدمات الحوسبة السحابية، وسيتم استخدامها لمكافحة AWS WAF CAPTCHA. Node.js و NPM زاوية CLI كود Visual Studio WebStorm حساب AWS أن تبدأ إنشاء وتحديث الحساب على AWS WAF. (Web Application Firewall) هو خدمة أمنية تم تصميمها لحماية التطبيقات و APIs الخاصة بك من الاستغلالات التي يمكن أن تؤثر على الوصول، وتهديد الأمن، أو استهلاك الموارد المفرطة. AWS WAF AWS WAF دعونا نتوصل إلى حساب AWS. ثم انقر فوق الرابط . 1. , https://aws.amazon.com/waf/ انقر على Console https://aws.amazon.com/waf/     ملاحظة : 
 
 إذا لم تكن لديك حساب Amazon، اتبع الخطوات من 1 إلى 9 من المقال التقييم باستخدام Amazon Cognito إلى تطبيق Angular في الجلسة. تحديد الوثيقة باستخدام Amazon Cognito إلى تطبيق Angular تحديد الوثيقة باستخدام Amazon Cognito إلى تطبيق Angular الآن، وسوف نضيف في المجال إكسب في المجال إكسب في المجال ثم انقر فوق الزر . 2. ID الحساب أو أليس اسم المستخدم كلمة المرور ، إشارة في     بعد ذلك ، سنقوم بتصوير في مجلد البحث ثم انقر فوق الخيار . 3. WAV WAF و SHIELD     بعد ذلك ، سوف نضيف على النسخة . 4. تطبيق التكامل     بعد التخطيط على النسخة وسوف نضيف على Tab . 5. تطبيق التكامل إدماج CAPTCHA     الآن ، سنضيف على الخيار انقر فوق الزر لتسجيل URL من ملف JavaScript ، لأن هذا URL سيتم تخصيصه في التطبيق Angular ، ثم انقر فوق الزر . 6. CloudFront جاكرتا نسخة JavaScript إنتاج مفتاح API     في النهاية ، سوف نضيف على الخيار إكسب في المجال مع موقع الويب الخاص بك ، ثم انقر فوق الزر . 7. CloudFront المساحة إنتاج مفتاح API     ثم سوف نضغط على الرمز لتسجيل مفتاح API لأن هذا مفتاح API سوف يتم تشغيله في التطبيق Angular. 8.     أولاً: تم إنشاء مفتاح API. 9. إنشاء التطبيق Angular. هو منصة تطوير لإنشاء التطبيقات على شبكة الإنترنت، والأجهزة المحمولة، والصفحات المكتبية باستخدام HTML، CSS، وTypeScript (JavaScript). الأغنية الأغنية دعونا نخلق التطبيق مع الهيكل الأساسي Angular باستخدام أداة مع الملفات التي تم إلغاء تكوين AI، والترجمة على الجانب الموردي (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. سنقوم بعمل الخطوات 2 و 3 من المقال . 2. إضافة إطار Bootstrap CSS إلى تطبيق Angular إضافة إطار Bootstrap CSS إلى تطبيق Angular إضافة إطار Bootstrap CSS إلى تطبيق Angular 
 
 بعد ذلك، وسوف نخلق ملفات التكوين للعديد من المتغيرات البيئية باستخدام الخطوة أدناه. ng generate environments
CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (2309 bytes)
 ثم نقوم بتصميم المتغيرات مع URL من ملف JavaScript يحتوي على رمز التكامل AWS WAF ومعدل مع مفتاح API الذي تم إنشاؤه في 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',
    },
  },
 بعد تكوين التعديلات، سوف نترك المحتوى من الطبقة من الملف، إنشاء و الطرق، وتطبيقها الطريقة من الطبقة التي ستعمل على تنفيذها الطريقة أدناه. 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('');
        },
      });
    }
  }

}
 وسوف نقوم بإزالة المحتوى من الملف وملء اكتب مع The التعديلات المتعددة كما أدناه. 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 النتيجة خلاصة ما كتبته في هذه المقالة: 
 
 
 لقد خلصنا إلى مفتاح API وتحديد المساحة التي ستعمل فيها captcha في AWS WAF. قمنا بتطوير تطبيق Angular وإضافة رمز captcha. يمكنك استخدام هذه المقالة لإنشاء تطبيقات ويب مع حماية البوت باستخدام تحدي AWS WAF captcha. شكراً لك على القراءة، وأنا أعتقد أنك تحب المقالة! تم نشر هذا الدرس على في البرتغال المدونة المدونة للحفاظ على التحديث عند نشر مقالات جديدة، اتبعني على و . تويتر لينك تويتر لينك

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

كيفية إضافة AWS WAF CAPTCHA إلى تطبيق Angular

About Author

تعليقات

شنق العلامات

تم تقديم هذه المقالة في

Related Stories

Top 4 Hiring Trends for Mobile App Developers in 2018

Top iOS & iPhone Mobile App Development Companies

Cappasity -Turning dreams into Augmented reality

30 Top Blockchain Development Companies in 2019

Top 4 Hiring Trends for Mobile App Developers in 2018

Top iOS & iPhone Mobile App Development Companies

Cappasity -Turning dreams into Augmented reality

30 Top Blockchain Development Companies in 2019

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps