پیاده سازی Google reCAPTCHA در برنامه Simple React و Node.js

https://www.youtube.com/watch?v=0xd0Gfr-dYo

در چشم انداز دیجیتال امروز، محافظت از برنامه های شما در برابر ربات ها و هرزنامه ها بسیار مهم است. یکی از راه‌های موثر برای افزودن یک لایه امنیتی اضافی به فرم‌های خود، ادغام Google reCAPTCHA است.

CAPTCHA (آزمون تورینگ عمومی کاملاً خودکار برای تشخیص رایانه‌ها و انسان‌ها) نوعی آزمون پاسخ به چالش است که در محاسبات برای تعیین اینکه آیا کاربر انسان است یا خیر، استفاده می‌شود. این کمک می کند تا نرم افزار خودکار از انجام اقداماتی که می تواند کیفیت خدمات را کاهش می دهد جلوگیری کند.

reCAPTCHA شکل پیشرفته‌تری از CAPTCHA است که توسط Google توسعه یافته است، که نه تنها از وب‌سایت‌ها در برابر هرزنامه و سوء استفاده محافظت می‌کند، بلکه به دیجیتالی کردن متن، حاشیه‌نویسی تصاویر، و ساخت مجموعه داده‌های یادگیری ماشینی کمک می‌کند. اغلب شامل شناسایی اشیاء در تصاویر یا علامت زدن کادری است که می‌گوید «من ربات نیستم».

یک ربات یا اسکریپت خودکار، در تئوری، می‌تواند تلاش کند روی یک چک باکس CAPTCHA کلیک کند، اما سیستم‌های CAPTCHA مدرن مانند reCAPTCHA از تکنیک‌های مختلفی برای تشخیص رفتار انسان از اسکریپت‌های خودکار استفاده می‌کنند. این تکنیک ها عبارتند از:

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

این پست وبلاگ شما را در فرآیند پیاده سازی Google reCAPTCHA در یک برنامه ساده React و Node.js راهنمایی می کند. ما هر دو قسمت جلویی و بک‌اند را پوشش می‌دهیم و اطمینان حاصل می‌کنیم که تأیید reCAPTCHA به طور یکپارچه در فرآیند ورود به سیستم شما یکپارچه شده است.

پیوند به پروژه GH:

https://github.com/shillehbean/youtube-p2/tree/main/reCAPTCHA-react

——-

قبل از پرداختن به موضوع، از شما دعوت می‌کنیم که از تلاش‌های جاری ما حمایت کنید و پلتفرم‌های مختلف ما را که به تقویت پروژه‌های اینترنت اشیا اختصاص داده شده‌اند، بررسی کنید:

• در کانال یوتیوب ما مشترک شوید: با عضویت در کانال ما در YouTube — Shilleh از آخرین آموزش ها و اطلاعات پروژه ما به روز باشید.
• از ما حمایت کنید: حمایت شما ارزشمند است. برای کمک به ما در ادامه تولید محتوای با کیفیت، یک قهوه برای من در Buy Me A Coffee بخرید.
• استخدام خدمات متخصص اینترنت اشیا: برای کمک شخصی در پروژه های اینترنت اشیا، من را در UpWork استخدام کنید.

وب سایت شیله تک (تخفیفات استثنایی):

https://shillehtek.com/collections/all

فروشگاه آمازون ShillehTek:

فروشگاه آمازون ShillehTek – ایالات متحده

فروشگاه آمازون ShillehTek – کانادا

فروشگاه آمازون ShillehTek – ژاپن

*مرحله 1: محیط React و Node.js خود را تنظیم کنید
*

ابتدا مطمئن شوید که Node.js و npm را روی دستگاه خود نصب کرده اید. اگر نه، آنها را از https://nodejs.org/en دانلود و نصب کنید.

مرحله 2: یک React App جدید ایجاد کنید

یک برنامه React جدید با استفاده از Create React App ایجاد کنید:

npx create-react-app recaptcha-demo
cd recaptcha-demo

*مرحله 3: بسته های ضروری را نصب کنید
*

استفاده خواهیم کرد react-google-recaptcha برای ادغام reCAPTCHA در برنامه React ما:

در حال نصب ajv به صورت دستی با npm install --save-dev ajv@^7 با اطمینان از در دسترس بودن نسخه صحیح برای وابستگی های پروژه شما، یک خطای ماژول از دست رفته را برطرف می کند.

npm install --save-dev ajv@^7
npm install react-google-recaptcha axios react-toastify

مرحله 4: Node.js Backend خود را ایجاد کنید

با ایجاد یک دایرکتوری جدید و مقداردهی اولیه یک پروژه جدید Node.js، باطن Node.js خود را تنظیم کنید:

cd ..
mkdir backend
cd backend
npm init -y
npm install express axios dotenv cors jsonwebtoken express-async-handler
npm install --save-dev nodemon

ساختار دایرکتوری شما باید به این شکل باشد.

*مرحله 5: Google reCAPTCHA را راه اندازی کنید
*

برای ثبت سایت خود به کنسول مدیریت Google reCAPTCHA در https://www.google.com/recaptcha/admin/create بروید. شما یک کلید سایت و یک کلید مخفی دریافت خواهید کرد. این کلیدها را برای استفاده در برنامه خود ذخیره کنید.

*مرحله 6: متغیرهای محیطی خود را تنظیم کنید
*
یک فایل .env در فهرست راهنمای خود ایجاد کنید و کلیدهای Google reCAPTCHA خود را اضافه کنید:

CAPTCHA_SECRET_KEY=your-secret-key
JWT_SECRET=anything

یک فایل .env در فهرست پروژه React خود ایجاد کنید و کلید سایت Google reCAPTCHA خود را اضافه کنید:

REACT_APP_CAPTCHA_SITE_KEY=your-site-key

*مرحله 7: میان افزار Backend را برای تأیید reCAPTCHA ایجاد کنید
*

ایجاد یک middleware دایرکتوری و اضافه کنید recaptchaMiddleware.js برای رسیدگی به تأیید reCAPTCHA:

// backend/middleware/recaptchaMiddleware.js
const axios = require('axios');
const asyncHandler = require('express-async-handler');
const verifyCaptcha = asyncHandler(async (req, res, next) => {
  const { captcha } = req.body;
  if (!captcha) {
    return res.status(400).json({ message: 'Please complete the CAPTCHA' });
  }
  const secretKey = process.env.CAPTCHA_SECRET_KEY;
  try {
    const response = await axios.post(
      `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${captcha}`
    );
    if (response.data.success) {
      next();
    } else {
      return res.status(400).json({ message: 'CAPTCHA verification failed' });
    }
  } catch (error) {
    return res.status(500).json({ message: 'CAPTCHA verification error' });
  }
});
module.exports = { verifyCaptcha };

مرحله 8: سرور Express خود را ایجاد کنید

یک سرور Express راه اندازی کنید و از میان افزار برای تأیید reCAPTCHA استفاده کنید:

// backend/server.js
const express = require('express');
const dotenv = require('dotenv');
const cors = require('cors');
const { verifyCaptcha } = require('./middleware/recaptchaMiddleware');
const jwt = require('jsonwebtoken');

dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());
app.post('/api/login', verifyCaptcha, (req, res) => {
  const { email, password } = req.body;
  if (email === 'test@example.com' && password === 'password') {
    const token = jwt.sign({ id: 1, email }, process.env.JWT_SECRET, { expiresIn: '1h' });
    res.json({ token });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
});
const PORT = process.env.PORT || 5002;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

*مرحله 9: reCAPTCHA را در React ادغام کنید
*

در برنامه React خود، یک فرم ورود به سیستم ایجاد کنید که شامل مؤلفه reCAPTCHA است:

// src/Login.js
import React, { useState } from 'react';
import axios from 'axios';
import ReCAPTCHA from 'react-google-recaptcha';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './Login.css'; // Import the CSS file

const Login = () => {
  const [formData, setFormData] = useState({ email: '', password: '', captcha: '' });
  const [isLoggedIn, setIsLoggedIn] = useState(false); // Add state for login status
  const { email, password, captcha } = formData;

  const onChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const onCaptchaChange = (value) => {
    setFormData({ ...formData, captcha: value });
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!captcha) {
      toast.error('Please complete the CAPTCHA');
      return;
    }
    try {
      const response = await axios.post('http://localhost:5002/api/login', { email, password, captcha });
      toast.success('Login successful');
      setIsLoggedIn(true); // Set login status to true on success
      console.log(response.data); // Handle the response
    } catch (error) {
      toast.error(error.response.data.message || 'Login failed');
    }
  };

  return (
    
  );
};

export default Login;

/* src/Login.css */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
  }

  .login-form {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    width: 300px;
  }

  .login-form input {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .captcha-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .login-form button {
    padding: 0.75rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .login-form button:hover {
    background-color: #0056b3;
  }

  .success-message {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

*مرحله 10: فایل App.js را تغییر دهید
*

import React from 'react';
import Login from './Login';
import './App.css';  // Optionally, create this file for styling

const App = () => {
  return (
    
  );
};

export default App;

npm start را در پوشه recaptcha-demo اجرا کنید

nodemon server.js را در پوشه backend اجرا کنید

صفحه زیر را مشاهده خواهید کرد.

اگر با اعتبار مناسب وارد شوید و کپچا را بررسی کنید، یک پیام موفقیت آمیز خواهید دید

واقعاً به لطف اجرای کتابخانه Google به همین سادگی است! مراقب هزینه باشید، زیرا در صورت تنظیم روش پرداخت، مقیاس بیش از 10000 استفاده در ماه شروع به ایجاد هزینه در حساب Google Cloud شما می کند، در غیر این صورت اگر تنظیم پرداخت نداشته باشید، Captcha کار نخواهد کرد.

ما در این مثال Captcha v2 را بررسی کردیم اما واقعاً می توانید از v3 استفاده کنید و به همین ترتیب کار خواهد کرد.

نتیجه

پیاده‌سازی Google reCAPTCHA در برنامه‌های React و Node.js فرآیندی ساده است که می‌تواند امنیت برنامه شما را به میزان قابل توجهی افزایش دهد. با دنبال کردن مراحل ذکر شده در این راهنما، می توانید مطمئن شوید که فرم های شما در برابر سوء استفاده خودکار و هرزنامه محافظت می شوند. به یاد داشته باشید که پیاده سازی خود را به طور کامل در هر دو محیط توسعه و تولید آزمایش کنید تا مطمئن شوید که مطابق انتظار عمل می کند.