خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

Google reCAPTCHA را در یک React Application ادغام کنید

ارشیا یوسفی ادیب ۲۷ تیر, ۱۴۰۲ 5 min read

با هرزنامه ها مشکل دارید؟ با افزودن reCAPTCHA به برنامه React خود، یک مانع ایجاد کنید.

همانطور که برنامه های کاربردی وب و تلفن همراه محبوب تر شده اند، خطر اسپم و سایر فعالیت های مخرب نیز افزایش می یابد. CAPTCHA می تواند یک اقدام امنیتی مفید برای جلوگیری از این نوع تهدیدات امنیتی باشد.

CAPTCHA یک ویژگی امنیتی حداقلی است که معمولاً با فرم های وب ادغام می شود تا از حملات خودکار توسط هرزنامه ها جلوگیری کند. این تضمین می کند که کاربر دسترسی به یک برنامه در واقع انسان است و نه یک ربات که کدهای مخرب را اجرا می کند.

CAPTCHA چیست؟

مخفف CAPTCHA مخفف Completely Automated Public Test Turing برای تشخیص کامپیوترها و انسان ها از یکدیگر است. این به یک آزمایش کامپیوتری اشاره دارد که بررسی می‌کند تا مشخص کند کاربر خاصی که با برنامه شما تعامل دارد، یک انسان است یا نه یک ربات.

انواع مختلفی از تست های CAPTCHA وجود دارد که می توانید آنها را در برنامه خود ادغام کنید، مانند CAPTCHA های مبتنی بر متن و صوتی. با این حال، محبوب ترین و موثرترین نوع Google reCAPTCHA است. با استفاده از الگوریتم های پیشرفته تجزیه و تحلیل ریسک، تشخیص بین کاربران واقعی و ربات ها را بررسی می کند.

Google reCAPTCHA در دو نسخه ارائه می شود:

  • reCAPTCHA V3: این نسخه در پس زمینه اجرا می شود و امتیاز کلی را بر اساس رفتار کاربر تعیین می کند.
  • reCAPTCHA V2: این نسخه چک باکس “من یک ربات نیستم” را در فرم احراز هویت قرار می دهد.

این راهنما Google reCAPTCHA V2 را بررسی خواهد کرد. برای یادگیری نحوه ادغام آن در برنامه React به ادامه مطلب مراجعه کنید.

برنامه React را در کنسول مدیریت reCAPTCHA ثبت کنید

برای شروع، باید برنامه خود را در کنسول توسعه دهنده reCAPTCHA ثبت کنید. به کنسول مدیریت reCAPTCHA Google بروید، با حساب Google خود وارد شوید و جزئیات فرم مورد نیاز را پر کنید.

نام برچسب را وارد کنید، reCAPTCHA V2 را انتخاب کنید، و در کادر کشویی، با استفاده از گزینه “I’m not a robot”، درخواست های تأیید را انتخاب کنید. در نهایت، نام دامنه برنامه خود را ارائه دهید. برای توسعه محلی، localhost را به عنوان نام دامنه تایپ کنید.

تنظیمات Google reCAPTCHA

هنگامی که برنامه شما را ثبت کرد، سایت شما را به صفحه جدیدی با کلیدهای مخفی و سایت تولید شده شما هدایت می کند.

مطلب مرتبط:   با پردازش زبان طبیعی یک طبقه‌بندی کننده هرزنامه از ابتدا بسازید

کلیدهای reCAPTCHA

یک React Client ایجاد کنید

این پروژه دو جنبه دارد: شما یک کلاینت React ایجاد می‌کنید که یک فرم ورود ساده را با Google reCAPTCHA ارائه می‌کند و یک Backend Express که درخواست‌های POST را به API reCAPTCHA می‌دهد تا رمز تولید شده پس از تکمیل چالش reCAPTCHA را تأیید کند.

یک پوشه پروژه به صورت محلی برای قرار دادن فایل های پروژه خود ایجاد کنید. سپس برنامه React را ایجاد کنید و دایرکتوری فعلی را به پوشه مشتری تغییر دهید. در دایرکتوری ریشه پوشه مشتری خود، یک فایل .env برای ذخیره کلید مخفی API و کلید سایت ایجاد کنید.

REACT_APP_reCAPTCHA_SITE_KEY = 'site key'
REACT_APP_reCAPTCHA_SECRET_KEY = 'secret key'

می توانید کد این پروژه را در مخزن GitHub آن پیدا کنید.

بسته های مورد نیاز را نصب کنید

Axios را نصب کنید، از این کتابخانه برای درخواست HTTP از مرورگر و React-Google-reCAPTCHA استفاده خواهید کرد. این بسته یک پیاده سازی خاص React را برای reCAPTCHA API ارائه می دهد.

npm install react-recaptcha-google axios --save

Google reCAPTCHA را در برنامه React ادغام کنید

فایل src/App.js را باز کنید، کد Boilerplate React را حذف کنید و کد زیر را اضافه کنید:

این مؤلفه یک فرم ورود ساده را ارائه می دهد که شامل ویجت Google reCAPTCHA است.

ابتدا بسته های React، Axios و react-google-recaptcha را وارد کنید:

import React, { useState, useRef } from 'react';
import Axios from 'axios';
import ReCAPTCHA from 'react-google-recaptcha';

سپس سه متغیر حالت تعریف کنید: successMsg، errorMsg و validToken. کد شما پس از ارسال موفقیت آمیز فرم و تأیید اعتبار reCAPTCHA، این حالت ها را به روز می کند. علاوه بر این، سایت و کلیدهای مخفی را از فایل ENV دریافت کنید.

function App() {
  const [SuccessMsg, setSuccessMsg] = useState("")
  const [ErrorMsg, setErrorMsg] = useState("")
  const [valid_token, setValidToken] = useState([]);

  const SITE_KEY = process.env.REACT_APP_reCAPTCHA_SITE_KEY;
  const SECRET_KEY = process.env.REACT_APP_reCAPTCHA_SECRET_KEY;

یک قلاب userRef تعریف کنید که به مؤلفه reCAPTCHA ارجاع می دهد تا توکن تولید شده پس از تکمیل چالش های reCAPTCHA توسط کاربر را ضبط کند.

  const captchaRef = useRef(null);

سپس، یک تابع handleSubmit ایجاد کنید تا زمانی که کاربر فرم ورود را ارسال می کند، تماس بگیرد. این تابع رمز را از مؤلفه reCAPTCHA دریافت می کند و سپس روش reset را برای تنظیم مجدد reCAPTCHA فراخوانی می کند تا امکان بررسی های بعدی فراهم شود.

علاوه بر این، وجود توکن را بررسی می‌کند و تابع verifyToken را برای تأیید توکن فراخوانی می‌کند. هنگامی که توکن را تأیید کرد، وضعیت validToken را با داده های پاسخ API به روز می کند.

  const handleSubmit = async (e) => {
    e.preventDefault();
    let token = captchaRef.current.getValue();
    captchaRef.current.reset();

    if (token) {
      let valid_token = await verifyToken(token);
      setValidToken(valid_token);

      if (valid_token[0].success === true) {
        console.log("verified");
        setSuccessMsg("Hurray!! you have submitted the form")
      } else {
        console.log("not verified");
        setErrorMsg(" Sorry!! Verify you are not a bot")
      }
    }
  }

در نهایت، تابع verifyToken را تعریف کنید که یک درخواست POST را با استفاده از Axios به یک نقطه پایانی سرور Express ارسال می کند، رمز reCAPTCHA و کلید مخفی را در بدنه درخواست ارسال می کند. اگر درخواست موفقیت آمیز باشد، داده های پاسخ را به آرایه APIResponse فشار می دهد و در نتیجه آرایه را برمی گرداند.

  const verifyToken = async (token) => {
    let APIResponse = [];

    try {
      let response = await Axios.post(`http://localhost:8000/verify-token`, {
        reCAPTCHA_TOKEN: token,
        Secret_Key: SECRET_KEY,
      });

      APIResponse.push(response['data']);
      return APIResponse;
    } catch (error) {
      console.log(error);
    }
  };

در نهایت، فرمی را با مولفه reCAPTCHA برگردانید. این مؤلفه قلاب مرجع و کلید سایت را به عنوان ابزاری برای پیکربندی و نمایش ویجت reCAPTCHA می گیرد.

مطلب مرتبط:   WebAssembly چیست؟

هنگامی که کاربر فرم را ارسال می کند، کامپوننت یک پیام موفقیت آمیز یا خطا را بر اساس مقدار حالت validToken ارائه می دهد. اگر رمز reCAPTCHA معتبر باشد، به این معنی که کاربر چالش های reCAPTCHA را با موفقیت انجام داده است، پیام موفقیت را نشان می دهد، در غیر این صورت، پیام خطا را نمایش می دهد.

  return (
    <div className="App">
      <header className="App-header"> 
        <div className="logIn-form">
          <form onSubmit={handleSubmit}>
            {valid_token.length > 0 && valid_token[0].success === true
             ? <h3 className="textSuccess">{SuccessMsg}</h3>
             : <h3 className="textError">{ErrorMsg} </h3>}

            <p>User Name</p>
            <input type="text" placeholder="User Name..." />

            <p>Password</p>
            <input type="password" placeholder = "Password..." />

            <ReCAPTCHA
              className="recaptcha"
              sitekey={SITE_KEY}
              ref={captchaRef}
            />

            <button type="submit">Submit</button>
          </form>
        </div>
      </header>
    </div>
  );
}

export default App

در نهایت، سرور توسعه را اجرا کنید و برای مشاهده نتایج به مرورگر http://localhost:3000 بروید.

قابلیت Google reCAPTCHA

Backend Express را ایجاد کنید

برای شروع، در دایرکتوری ریشه کل پوشه پروژه، یک وب سرور Express ایجاد کنید و این بسته ها را نصب کنید:

npm install express cors axios body-parser

سرور اکسپرس را راه اندازی کنید

سپس فایل index.js را در پوشه پروژه سرور باز کنید و این کد را اضافه کنید:

const express = require('express')
const axios = require('axios');
const cors = require('cors');
const app = express();

const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();
const PORT = process.env.PORT || 8000;

app.use(jsonParser);
app.use(cors());

app.post("/verify-token", async (req,res) => {
  const { reCAPTCHA_TOKEN, Secret_Key} = req.body;

  try {
    let response = await axios.post(`https://www.google.com/recaptcha/api/siteverify?secret=${Secret_Key}&response=${reCAPTCHA_TOKEN}`);
    console.log(response.data);

    return res.status(200).json({
      success:true,
      message: "Token successfully verified",
      verification_info: response.data
    });
  } catch(error) {
    console.log(error);

    return res.status(500).json({
      success:false,
      message: "Error verifying token"
    })
  }
});

app.listen(PORT, () => console.log(`App started on port ${PORT}`));

این کد کارهای زیر را انجام می دهد:

  • سرور یک مسیر Post را تعریف می کند که یک درخواست HTTP POST ناهمزمان را به API reCAPTCHA Google می دهد تا رمز reCAPTCHA را با استفاده از Axios تأیید کند، و از امتداد کلید مخفی برای احراز هویت در URL درخواست عبور می کند.
  • اگر رمز reCAPTCHA با موفقیت تأیید شود، سرور با یک شی JSON حاوی یک ویژگی “موفقیت” که روی true تنظیم شده است، یک ویژگی “پیام” نشان می دهد که رمز با موفقیت تأیید شده است، و یک ویژگی “verification_info” حاوی اطلاعات مربوط به پاسخ تأیید پاسخ می دهد. از API گوگل
  • اگر در طی فرآیند تأیید خطایی رخ دهد، سرور با یک شی JSON حاوی یک ویژگی “موفقیت” که روی false تنظیم شده است و یک ویژگی “پیام” نشان می دهد که در تأیید توکن خطایی وجود داشته است، پاسخ می دهد.
مطلب مرتبط:   نحوه ایجاد دشمن در بازی های گودو

در نهایت، سرور گره را اجرا کنید و عملکرد ویژگی reCAPTCHA را آزمایش کنید.

node index.js

آیا reCAPTCHA ها می توانند امنیت را در برابر هرزنامه ها تضمین کنند؟

به گفته گوگل، سرویس reCAPTCHA آن دارای نرخ موفقیت بیش از 99٪ است، به این معنی که تنها درصد کمی از هرزنامه ها می توانند ویژگی امنیتی reCAPTCHA را دور بزنند.

reCAPTCHA بی‌خطا نیست، زیرا بازیگران بد مصمم هنوز هم می‌توانند راه‌حل‌هایی پیدا کنند. اما همچنان یک ابزار ضروری است که می تواند به میزان قابل توجهی خطر ربات های هرزنامه را کاهش دهد.

Tags: