Tích hợp Google reCAPTCHA trong ứng dụng React

Cài đặt các gói cần thiết

Cài đặt Axios, bạn sẽ sử dụng thư viện này để thực hiện các yêu cầu HTTP từ trình duyệt và React-Google-reCAPTCHA. Gói này cung cấp triển khai dành riêng cho React cho API reCAPTCHA.

 npm install react-recaptcha-google axios --save 

Tích hợp Google reCAPTCHA trong ứng dụng React

Mở tệp src/App.jsxóa mã React soạn sẵn và thêm mã bên dưới:

Thành phần này sẽ hiển thị biểu mẫu đăng nhập đơn giản bao gồm tiện ích Google reCAPTCHA.

Đầu tiên, nhập các gói React, Axios và Reac-google-recaptcha:

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

Sau đó xác định ba biến trạng thái: successMsg, errorMsg và validToken. Mã của bạn sẽ cập nhật các trạng thái này sau khi gửi biểu mẫu thành công và xác thực reCAPTCHA. Ngoài ra, hãy lấy trang web và khóa bí mật từ tệp 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; 

Xác định móc useRef tham chiếu thành phần reCAPTCHA để thu thập mã thông báo được tạo sau khi người dùng hoàn thành các thử thách reCAPTCHA.

   const captchaRef = useRef(null); 

Sau đó, tạo hàm handleSubmit để gọi khi người dùng gửi biểu mẫu đăng nhập. Hàm này lấy mã thông báo từ thành phần reCAPTCHA và sau đó gọi hàm cài lại phương pháp đặt lại reCAPTCHA để cho phép kiểm tra tiếp theo.

Ngoài ra, nó kiểm tra xem mã thông báo có tồn tại hay không và gọi hàm verifyToken để xác minh mã thông báo. Sau khi đã xác minh mã thông báo, nó sẽ cập nhật trạng thái Mã thông báo hợp lệ với dữ liệu phản hồi 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")
      }
    }
  } 

Cuối cùng, xác định hàm verifyToken sẽ gửi yêu cầu POST tới điểm cuối máy chủ Express bằng Axios, chuyển mã thông báo reCAPTCHA và khóa bí mật trong phần thân yêu cầu. Nếu yêu cầu thành công, nó sẽ đẩy dữ liệu phản hồi vào mảng APIResponse và kết quả là trả về mảng đó.

   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);
    }
  };
 

Cuối cùng, hãy trả lại biểu mẫu có thành phần reCAPTCHA. Thành phần này lấy móc tham chiếu và khóa trang web làm đạo cụ để định cấu hình và hiển thị tiện ích reCAPTCHA.

Khi người dùng gửi biểu mẫu, thành phần này sẽ hiển thị thông báo lỗi hoặc thành công dựa trên giá trị của trạng thái validToken. Nếu mã thông báo reCAPTCHA hợp lệ, nghĩa là người dùng đã hoàn thành thành công các thử thách reCAPTCHA, thì nó sẽ hiển thị thông báo thành công, nếu không, nó sẽ hiển thị thông báo lỗi.

   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 

Cuối cùng, hãy chạy máy chủ phát triển và truy cập trình duyệt http://localhost:3000 của bạn để xem kết quả.

Tạo Express Backend

Để bắt đầu, trong thư mục gốc của toàn bộ thư mục dự án, hãy tạo một máy chủ web Express, và cài đặt các gói này:

 npm install express cors axios body-parser 

Thiết lập máy chủ tốc hành

Tiếp theo, mở tệp index.js trong thư mục dự án máy chủ và thêm mã này:

 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}`)); 

Mã này làm như sau:

• Máy chủ xác định tuyến Bài đăng tạo yêu cầu HTTP POST không đồng bộ tới API reCAPTCHA của Google để xác minh mã thông báo reCAPTCHA bằng Axios, chuyển cùng khóa bí mật để xác thực trong URL yêu cầu.
• Nếu mã thông báo reCAPTCHA được xác minh thành công, máy chủ sẽ phản hồi bằng đối tượng JSON chứa thuộc tính “success” được đặt thành true, thuộc tính “message” cho biết mã thông báo đã được xác minh thành công và thuộc tính “verification_info” chứa thông tin về phản hồi xác minh từ API của Google.
• Nếu xảy ra lỗi trong quá trình xác minh, máy chủ sẽ phản hồi bằng một đối tượng JSON chứa thuộc tính “success” được đặt thành false và thuộc tính “message” cho biết đã xảy ra lỗi khi xác minh mã thông báo.

Cuối cùng, hãy chạy máy chủ nút và kiểm tra chức năng của tính năng reCAPTCHA.

 node index.js 

ReCAPTCHA có thể đảm bảo an ninh chống lại Spambot không?

Theo Google, dịch vụ reCAPTCHA của họ có tỷ lệ thành công hơn 99%, nghĩa là chỉ một tỷ lệ nhỏ thư rác có thể vượt qua tính năng bảo mật reCAPTCHA.

reCAPTCHA không phải là hoàn hảo, vì những kẻ xấu kiên quyết vẫn có thể tìm ra cách giải quyết. Nhưng nó vẫn là một công cụ thiết yếu có thể làm giảm đáng kể rủi ro từ spambot.