Hong  Nhung

Hong Nhung

1658943000

Ngăn Chặn Thư Rác Và Phát Hiện Bot Với ReCAPTCHA

Gần đây, đã có nhiều cách triển khai khác nhau để ngăn chặn việc gửi thư rác cho các dịch vụ web khác nhau. Một trong những cách triển khai này là sử dụng tính năng reCAPTCHA. ReCAPTCHA là một bài kiểm tra tự động để xác định xem người dùng ứng dụng web là người hay bot. Bằng cách này, các đặc quyền hoặc quyền truy cập chỉ được cấp cho người dùng là con người, do đó giảm việc sử dụng không mong muốn.

Trong hướng dẫn này, người đọc sẽ tìm hiểu reCAPTCHA là gì và cách triển khai chúng trong ứng dụng web.

ReCAPTCHA là gì?

ReCAPTCHA là một CAPTCHA(Kiểm tra Turing công khai hoàn toàn tự động để nói với máy tính và con người khác biệt) miễn phí, dễ thêm và một tính năng bảo mật trang web nâng cao do Google sở hữu. Nó được phát triển để quản lý việc sử dụng trang web không mong muốn từ bot và ngăn chặn việc gửi thư rác bằng cách triển khai các kỹ thuật khác nhau để xác định xem người dùng trang web là người hay bot. Các kỹ thuật này liên quan đến việc trình bày cho người dùng một bài kiểm tra mà con người có thể dễ dàng giải quyết nhưng khó xác định đối với bot hoặc phần mềm độc hại. Việc triển khai tính năng bảo mật này trong trang web sẽ ngăn chặn việc lạm dụng trang web trong khi vẫn cho phép người dùng sử dụng trang web như họ phải làm, tức là người dùng hợp pháp có thể thực hiện các hoạt động bình thường của họ là truy cập và sử dụng trang web sau khi vượt qua bài kiểm tra reCAPTCHA. Ảnh GIF bên dưới chứa các ví dụ về các loại reCAPTCHA mà bạn có thể đã gặp trên trang web:

1

Việc triển khai tính năng bảo mật reCAPTCHA trong một trang web sẽ mang lại những lợi ích sau:

  • Ngăn phần mềm tự động lạm dụng các hoạt động nhất định. Ví dụ về những điều đó là thăm dò ý kiến, bình luận tin tức hoặc một cuộc khảo sát. Công nghệ reCAPTCHA sẽ ngăn chặn các hành động lặp lại của bot vì cần có một bài kiểm tra reCAPTCHA mới cho một phiên người dùng mới.
  • reCAPTCHA đóng vai trò như một biện pháp hạn chế thư rác.
  • Có tính năng reCAPTCHA hỗ trợ phân biệt lưu lượng truy cập giả và thật được tạo trên trang web.
  • reCAPTCHA ngăn người dùng chạy các hoạt động thô bạo trên một trang web vì phần mềm sẽ không thể vượt qua bài kiểm tra bảo mật mỗi khi nó chạy.

Nhìn chung, reCAPTCHA được bảo mật, vì chúng không có các mẫu có thể dự đoán được trong bài kiểm tra đã chọn được trình bày cho người dùng.

Các loại reCAPTCHA và phương thức hoạt động khác nhau

Theo thời gian, đã có những phát triển trong các phiên bản reCAPTCHA, với mỗi phiên bản mới bổ sung thêm một kỹ thuật kiểm tra người dùng mới. Cho đến nay, Google đã phát hành ba phiên bản reCAPTCHA; v1, v2 và v3.

  • v1 của reCAPTCHA được thiết kế để hiển thị hình ảnh và trường văn bản. Người dùng phải nhập những gì họ có thể nhìn thấy trong hình ảnh. Hình ảnh này thường chứa một tập hợp các ký tự, với các ký tự này hoặc bị cong vênh, bị kéo căng hoặc ít hiển thị hơn một chút. Lý do của việc thao tác các khía cạnh trực quan của văn bản là làm cho phần mềm không thể nhận dạng văn bản được viết trong hình ảnh. Nếu văn bản được nhập vào trường văn bản khớp với các ký tự trong hình ảnh thì quá trình kiểm tra sẽ thành công. Nếu không, người dùng sẽ được yêu cầu thực hiện một bài kiểm tra mới.2
  • Phiên bản thứ hai của reCAPTCHA v2 vẫn được sử dụng cho đến ngày nay. V2 có hai loại khác nhau: kiểm tra trong đó người dùng phải chọn hộp kiểm để xác nhận văn bản nói rằng “Tôi không phải là rô bốt” và loại thứ hai là thử thách bảo mật trong đó người dùng được hiển thị với các bộ hình ảnh khác nhau và yêu cầu để chọn hình ảnh tương ứng với các đối tượng cụ thể. Những vật thể này có thể là thuyền, vòi chữa cháy, đèn đường, máy bay, v.v. Người dùng được xác minh khi chọn tất cả các hình ảnh tương ứng và thử nghiệm được coi là thành công.

3b

3

Đối với phiên bản này, reCAPTCHA giám sát hành vi trang web của người dùng. Nếu người dùng sử dụng trang web một cách đáng ngờ, họ sẽ được hiển thị với hình ảnh reCAPTCHA; nếu không, chúng được hiển thị với biến thể hộp kiểm.

  • v3 là một dạng reCAPTCHA vô hình. Phiên bản reCAPTCHA này sẽ theo dõi lưu lượng truy cập của trang web để xác định xem hành động của người dùng có đáng ngờ hay không. Nếu hành động của người dùng được xác định là không đáng ngờ, không có thách thức nào được hiển thị và ngược lại.

Tích hợp reCAPTCHA với Next.js

Để chứng minh tính năng reCAPTCHA, chúng tôi sẽ có một biểu mẫu sử dụng CAPTCHA để chỉ cho phép những người dùng hợp pháp gửi dữ liệu. Để làm theo hướng dẫn này, hãy sao chép mã biểu mẫu khởi động từ kho lưu trữ GitHub và chạy npm installtrong thư mục dự án để cài đặt tất cả các phụ thuộc cần thiết.

Chúng tôi sẽ cần hai thứ: thứ nhất, một khóa API để truy cập reCAPTCHA và thứ hai, react-google-recaptchaphụ thuộc. Để lấy khóa truy cập của bạn, hãy điều hướng trong trình duyệt của bạn đến đây :

4

Trên trang này, chúng tôi được yêu cầu nhập tiêu đề của khóa của chúng tôi vào Labeltrường. Đối với loại reCAPTCHA, chúng tôi sẽ sử dụng biến thể v2 “Tôi không phải là rô bốt”. Trong trường Tên miền, chúng tôi sẽ nhập “localhost” và cuối cùng nhấp vào nút “Gửi” để tạo khóa. Sao chép các khóa đã tạo vì chúng tôi sẽ sử dụng chúng trong ứng dụng của mình. Tiếp theo, cài đặt react-google-recaptchaphụ thuộc bằng lệnh sau trong CLI:

npm install --save react-google-recaptcha

Sau khi cài đặt xong, chúng ta có thể nhập và sử dụng gói này trong Index.js:

import ReCAPTCHA from "react-google-recaptcha";

Tiếp theo, thêm ReCAPTCHAthành phần trong biểu mẫu ngay bên dưới nút đăng nhập:

//.... 
<input
    type="text"
    placeholder="Doe"
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  />
</span>
<button className="submit">Log in</button>
<ReCAPTCHA sitekey="your app site key"/>

Thành ReCAPTCHAphần yêu cầu một sitekeythuộc tính để có thể sử dụng nó. Bây giờ, nếu chúng ta chạy ứng dụng bằng npm run devlệnh, chúng ta sẽ nhận được kết quả tương tự như hình ảnh:

5

Thành ReCAPTCHAphần này cho phép chúng tôi tùy chỉnh hành vi và giao diện của ReCAPTCHA bằng cách sử dụng các thuộc tính khác nhau. Một số thuộc tính này bao gồm:

  • Chủ đề: Điều này nhận một lighthoặc darkgiá trị. Theo mặc định, reCAPTCHA được hiển thị bằng chủ đề sáng, nhưng việc thêm themethuộc tính có giá trị là darksẽ hiển thị reCAPTCHA trông tối.
  • onChange: Điều này thực hiện một chức năng gọi lại khi người dùng hoàn thành reCAPTCHA.
  • Kích thước: Thuộc tính này nhận bất kỳ giá trị nào sau đây compact: normalhoặc invisible. Nó chỉ định kích thước của reCAPTCHA hoặc xác định xem reCAPTCHA có bất khả chiến bại hay không.
  • Loại: Điều này chỉ định xem reCAPTCHA có sử dụng hình ảnh hoặc âm thanh hay không.

Phát lại phiên nguồn mở

OpenReplay là bộ mã nguồn mở, phát lại phiên cho phép bạn xem người dùng làm gì trên ứng dụng web của mình, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay được tự lưu trữ để kiểm soát toàn bộ dữ liệu của bạn.

replayer.png

Bắt đầu tận hưởng trải nghiệm gỡ lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí .

Xử lý Gửi biểu mẫu

Đối với biểu mẫu, chúng tôi muốn người dùng chỉ có thể gửi khi họ đã hoàn thành reCAPTCHA. Bất cứ khi nào người dùng hoàn thành reCAPTCHA, một mã thông báo sẽ được tạo. Mã thông báo này có giá trị trong hai phút và chỉ có thể được sử dụng một lần. Chúng tôi sẽ truy cập mã thông báo này trong ứng dụng của mình để cho phép người dùng gửi biểu mẫu sau khi hoàn thành reCAPTCHA. Để nắm bắt mã thông báo này, chúng tôi sẽ sử dụng hook useRef từ React:

//first we add an import for useRef
import { React, useState, useRef } from "react";

Sau đó, chúng tôi sẽ tạo một biến nơi chúng tôi sẽ lưu trữ giá trị của mã thông báo, bằng cách sử dụng useRef:

const getCaptchaRef = useRef(null);

Sau đó, thêm biến này vào thuộc reftính của reCAPTCHAthành phần:

<ReCAPTCHA
  sitekey= "your site key here"
  ref={getCaptchaRef}
/>

Thuộc reftính trả về các hàm trợ giúp khác nhau. Một số chức năng này và mục đích tương ứng của chúng bao gồm:

  • excecuteAsync(): Hàm này gửi yêu cầu trả về mã thông báo hoặc lỗi (nếu có). Mặc dù vậy, chức năng này chỉ áp dụng cho các reCAPTCHA vô hình. Đối với reCAPTCHA hiển thị, getValue()hàm được sử dụng để trả về mã thông báo.
  • getValue(): Như tên của nó, hàm này trả về giá trị của trường reCAPTCHA.
  • reset(): Điều này được sử dụng để đặt lại reCAPTCHA và có thể áp dụng trong trường hợp reCAPTCHAkiểm tra tiếp theo.

Chúng tôi có thể sử dụng refđể lấy mã thông báo của chúng tôi như hình dưới đây:

<ReCAPTCHA
  sitekey= "your site key"
  theme="dark"
  ref={getCaptchaRef}
  onChange={() => {
    reCaptchaValue();
  }}
/>

Ở đây, chúng tôi đã thêm một hàm trong thuộc tính thành phần của chúng tôi onChange. Chúng tôi sẽ sử dụng chức năng này để đặt giá trị của mã thông báo của chúng tôi:

const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
};

Tiếp theo, chúng tôi phải xác minh mã thông báo đã tạo trước khi bật tính năng gửi. Để thực hiện việc này, chúng ta cần POSTyêu cầu https://www.google.com/recaptcha/api/siteverifysử dụng Node.js trên chương trình phụ trợ. Tạo một tệp mới Server.js, trong thư mục gốc của ứng dụng của bạn. Đối với máy chủ, chúng tôi sẽ yêu cầu hai phần phụ thuộc; Axiosđể xử lý POSTyêu cầu của chúng tôi và Expressquản lý các tuyến máy chủ. Chúng ta có thể cài đặt các phần phụ thuộc này bằng các lệnh CLI sau:

npm i express axios cors

Tiếp theo, tạo một tệp Server.jstrong thư mục gốc của thư mục dự án. Trong Server.js, hãy nhập mã sau:

const express = require("express");
const axios = require("axios");
const cors = require("cors");

const router = express.Router();
const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/", router);

router.post("/status", async (req, res) => {
  const { token } = req.body; // get token from the request we will create in index.js
  const secret = "SITE SECRET";
  await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`, // URL
    {
        secret: secret,
        response: token,
    }, // URL parameters
  );
  //return response based on the status of the post request
  if (res.status(200)) {
    res.send(true);
  } else {
    res.send(false);
  }
});
app.listen(port, () => {
  console.log(`server is listening on ${port}`);
});

Trong đoạn mã trên, chúng tôi đã tạo một máy chủ chạy trên cổng 5000 và lắng nghe định tuyến /status. Sử dụng máy chủ này, chúng tôi sẽ thực hiện một yêu cầu đăng để xác định xem mã thông báo có hợp lệ hay không và sau đó trả lại phản hồi. Nếu mã thông báo hợp lệ, máy chủ sẽ trả lại phản hồi thích hợp. Nếu không, nó sẽ trả lại một phản hồi false. Mở thiết bị đầu cuối và khởi động máy chủ với node Server.js.

Với điều này tại chỗ, chúng tôi sẽ bắt đầu yêu cầu của chúng tôi index.jstrong chức năng của chúng tôi reCaptchaValue, như được hiển thị bên dưới:

const [valid, setValid] = useState(false)
const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
  console.log(token);
  await axios
    .post("http://localhost:5000/status", {
      response: token,
    })
    .then((res) => {
      console.log(res);
      setValid(res.data)
    })
    .catch((err) => {
      console.log(err);
    });
};

Trong mã, chúng tôi đã thực hiện một yêu cầu đăng lên URL máy chủ của chúng tôi với mã thông báo được trả lại bởi reCAPTCHA. Sau đó, chúng tôi đặt giá trị của một trạng thái validbằng với giá trị được res.datatrả về từ máy chủ, "true" hoặc "false".

6

Cuối cùng, chúng tôi sẽ thêm một onClicktrình xử lý vào nút của mình để thực hiện các hoạt động khác nhau dựa trên giá trị của valid:

<button className="submit" onClick={()=>{handleSubmit()}}>Log in</button>

Và trong handleSubmit()chức năng:

const handleSubmit = ()=>{
 if(valid){
 alert("welcome user " + value + " " + value2)
 }
 else{
   alert("please verify you are not a robot")
 }
}

Nếu chúng tôi chạy ứng dụng của mình ngay bây giờ, chúng tôi nhận được kết quả sau:

7

Nếu người dùng không thực hiện được reCAPTCHA, nó chỉ cần yêu cầu người dùng thử lại cho đến khi kiểm tra thành công.

8

Sự kết luận

Hướng dẫn này đã dạy chúng tôi về reCAPTCHA và cách chúng tôi có thể tích hợp tính năng bảo mật này vào ứng dụng Tiếp theo.

Nguồn: https://blog.openreplay.com/prevent-spam-and-detect-bots-with-recaptcha

#recaptcha

What is GEEK

Buddha Community

Ngăn Chặn Thư Rác Và Phát Hiện Bot Với ReCAPTCHA
Hong  Nhung

Hong Nhung

1658943000

Ngăn Chặn Thư Rác Và Phát Hiện Bot Với ReCAPTCHA

Gần đây, đã có nhiều cách triển khai khác nhau để ngăn chặn việc gửi thư rác cho các dịch vụ web khác nhau. Một trong những cách triển khai này là sử dụng tính năng reCAPTCHA. ReCAPTCHA là một bài kiểm tra tự động để xác định xem người dùng ứng dụng web là người hay bot. Bằng cách này, các đặc quyền hoặc quyền truy cập chỉ được cấp cho người dùng là con người, do đó giảm việc sử dụng không mong muốn.

Trong hướng dẫn này, người đọc sẽ tìm hiểu reCAPTCHA là gì và cách triển khai chúng trong ứng dụng web.

ReCAPTCHA là gì?

ReCAPTCHA là một CAPTCHA(Kiểm tra Turing công khai hoàn toàn tự động để nói với máy tính và con người khác biệt) miễn phí, dễ thêm và một tính năng bảo mật trang web nâng cao do Google sở hữu. Nó được phát triển để quản lý việc sử dụng trang web không mong muốn từ bot và ngăn chặn việc gửi thư rác bằng cách triển khai các kỹ thuật khác nhau để xác định xem người dùng trang web là người hay bot. Các kỹ thuật này liên quan đến việc trình bày cho người dùng một bài kiểm tra mà con người có thể dễ dàng giải quyết nhưng khó xác định đối với bot hoặc phần mềm độc hại. Việc triển khai tính năng bảo mật này trong trang web sẽ ngăn chặn việc lạm dụng trang web trong khi vẫn cho phép người dùng sử dụng trang web như họ phải làm, tức là người dùng hợp pháp có thể thực hiện các hoạt động bình thường của họ là truy cập và sử dụng trang web sau khi vượt qua bài kiểm tra reCAPTCHA. Ảnh GIF bên dưới chứa các ví dụ về các loại reCAPTCHA mà bạn có thể đã gặp trên trang web:

1

Việc triển khai tính năng bảo mật reCAPTCHA trong một trang web sẽ mang lại những lợi ích sau:

  • Ngăn phần mềm tự động lạm dụng các hoạt động nhất định. Ví dụ về những điều đó là thăm dò ý kiến, bình luận tin tức hoặc một cuộc khảo sát. Công nghệ reCAPTCHA sẽ ngăn chặn các hành động lặp lại của bot vì cần có một bài kiểm tra reCAPTCHA mới cho một phiên người dùng mới.
  • reCAPTCHA đóng vai trò như một biện pháp hạn chế thư rác.
  • Có tính năng reCAPTCHA hỗ trợ phân biệt lưu lượng truy cập giả và thật được tạo trên trang web.
  • reCAPTCHA ngăn người dùng chạy các hoạt động thô bạo trên một trang web vì phần mềm sẽ không thể vượt qua bài kiểm tra bảo mật mỗi khi nó chạy.

Nhìn chung, reCAPTCHA được bảo mật, vì chúng không có các mẫu có thể dự đoán được trong bài kiểm tra đã chọn được trình bày cho người dùng.

Các loại reCAPTCHA và phương thức hoạt động khác nhau

Theo thời gian, đã có những phát triển trong các phiên bản reCAPTCHA, với mỗi phiên bản mới bổ sung thêm một kỹ thuật kiểm tra người dùng mới. Cho đến nay, Google đã phát hành ba phiên bản reCAPTCHA; v1, v2 và v3.

  • v1 của reCAPTCHA được thiết kế để hiển thị hình ảnh và trường văn bản. Người dùng phải nhập những gì họ có thể nhìn thấy trong hình ảnh. Hình ảnh này thường chứa một tập hợp các ký tự, với các ký tự này hoặc bị cong vênh, bị kéo căng hoặc ít hiển thị hơn một chút. Lý do của việc thao tác các khía cạnh trực quan của văn bản là làm cho phần mềm không thể nhận dạng văn bản được viết trong hình ảnh. Nếu văn bản được nhập vào trường văn bản khớp với các ký tự trong hình ảnh thì quá trình kiểm tra sẽ thành công. Nếu không, người dùng sẽ được yêu cầu thực hiện một bài kiểm tra mới.2
  • Phiên bản thứ hai của reCAPTCHA v2 vẫn được sử dụng cho đến ngày nay. V2 có hai loại khác nhau: kiểm tra trong đó người dùng phải chọn hộp kiểm để xác nhận văn bản nói rằng “Tôi không phải là rô bốt” và loại thứ hai là thử thách bảo mật trong đó người dùng được hiển thị với các bộ hình ảnh khác nhau và yêu cầu để chọn hình ảnh tương ứng với các đối tượng cụ thể. Những vật thể này có thể là thuyền, vòi chữa cháy, đèn đường, máy bay, v.v. Người dùng được xác minh khi chọn tất cả các hình ảnh tương ứng và thử nghiệm được coi là thành công.

3b

3

Đối với phiên bản này, reCAPTCHA giám sát hành vi trang web của người dùng. Nếu người dùng sử dụng trang web một cách đáng ngờ, họ sẽ được hiển thị với hình ảnh reCAPTCHA; nếu không, chúng được hiển thị với biến thể hộp kiểm.

  • v3 là một dạng reCAPTCHA vô hình. Phiên bản reCAPTCHA này sẽ theo dõi lưu lượng truy cập của trang web để xác định xem hành động của người dùng có đáng ngờ hay không. Nếu hành động của người dùng được xác định là không đáng ngờ, không có thách thức nào được hiển thị và ngược lại.

Tích hợp reCAPTCHA với Next.js

Để chứng minh tính năng reCAPTCHA, chúng tôi sẽ có một biểu mẫu sử dụng CAPTCHA để chỉ cho phép những người dùng hợp pháp gửi dữ liệu. Để làm theo hướng dẫn này, hãy sao chép mã biểu mẫu khởi động từ kho lưu trữ GitHub và chạy npm installtrong thư mục dự án để cài đặt tất cả các phụ thuộc cần thiết.

Chúng tôi sẽ cần hai thứ: thứ nhất, một khóa API để truy cập reCAPTCHA và thứ hai, react-google-recaptchaphụ thuộc. Để lấy khóa truy cập của bạn, hãy điều hướng trong trình duyệt của bạn đến đây :

4

Trên trang này, chúng tôi được yêu cầu nhập tiêu đề của khóa của chúng tôi vào Labeltrường. Đối với loại reCAPTCHA, chúng tôi sẽ sử dụng biến thể v2 “Tôi không phải là rô bốt”. Trong trường Tên miền, chúng tôi sẽ nhập “localhost” và cuối cùng nhấp vào nút “Gửi” để tạo khóa. Sao chép các khóa đã tạo vì chúng tôi sẽ sử dụng chúng trong ứng dụng của mình. Tiếp theo, cài đặt react-google-recaptchaphụ thuộc bằng lệnh sau trong CLI:

npm install --save react-google-recaptcha

Sau khi cài đặt xong, chúng ta có thể nhập và sử dụng gói này trong Index.js:

import ReCAPTCHA from "react-google-recaptcha";

Tiếp theo, thêm ReCAPTCHAthành phần trong biểu mẫu ngay bên dưới nút đăng nhập:

//.... 
<input
    type="text"
    placeholder="Doe"
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  />
</span>
<button className="submit">Log in</button>
<ReCAPTCHA sitekey="your app site key"/>

Thành ReCAPTCHAphần yêu cầu một sitekeythuộc tính để có thể sử dụng nó. Bây giờ, nếu chúng ta chạy ứng dụng bằng npm run devlệnh, chúng ta sẽ nhận được kết quả tương tự như hình ảnh:

5

Thành ReCAPTCHAphần này cho phép chúng tôi tùy chỉnh hành vi và giao diện của ReCAPTCHA bằng cách sử dụng các thuộc tính khác nhau. Một số thuộc tính này bao gồm:

  • Chủ đề: Điều này nhận một lighthoặc darkgiá trị. Theo mặc định, reCAPTCHA được hiển thị bằng chủ đề sáng, nhưng việc thêm themethuộc tính có giá trị là darksẽ hiển thị reCAPTCHA trông tối.
  • onChange: Điều này thực hiện một chức năng gọi lại khi người dùng hoàn thành reCAPTCHA.
  • Kích thước: Thuộc tính này nhận bất kỳ giá trị nào sau đây compact: normalhoặc invisible. Nó chỉ định kích thước của reCAPTCHA hoặc xác định xem reCAPTCHA có bất khả chiến bại hay không.
  • Loại: Điều này chỉ định xem reCAPTCHA có sử dụng hình ảnh hoặc âm thanh hay không.

Phát lại phiên nguồn mở

OpenReplay là bộ mã nguồn mở, phát lại phiên cho phép bạn xem người dùng làm gì trên ứng dụng web của mình, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay được tự lưu trữ để kiểm soát toàn bộ dữ liệu của bạn.

replayer.png

Bắt đầu tận hưởng trải nghiệm gỡ lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí .

Xử lý Gửi biểu mẫu

Đối với biểu mẫu, chúng tôi muốn người dùng chỉ có thể gửi khi họ đã hoàn thành reCAPTCHA. Bất cứ khi nào người dùng hoàn thành reCAPTCHA, một mã thông báo sẽ được tạo. Mã thông báo này có giá trị trong hai phút và chỉ có thể được sử dụng một lần. Chúng tôi sẽ truy cập mã thông báo này trong ứng dụng của mình để cho phép người dùng gửi biểu mẫu sau khi hoàn thành reCAPTCHA. Để nắm bắt mã thông báo này, chúng tôi sẽ sử dụng hook useRef từ React:

//first we add an import for useRef
import { React, useState, useRef } from "react";

Sau đó, chúng tôi sẽ tạo một biến nơi chúng tôi sẽ lưu trữ giá trị của mã thông báo, bằng cách sử dụng useRef:

const getCaptchaRef = useRef(null);

Sau đó, thêm biến này vào thuộc reftính của reCAPTCHAthành phần:

<ReCAPTCHA
  sitekey= "your site key here"
  ref={getCaptchaRef}
/>

Thuộc reftính trả về các hàm trợ giúp khác nhau. Một số chức năng này và mục đích tương ứng của chúng bao gồm:

  • excecuteAsync(): Hàm này gửi yêu cầu trả về mã thông báo hoặc lỗi (nếu có). Mặc dù vậy, chức năng này chỉ áp dụng cho các reCAPTCHA vô hình. Đối với reCAPTCHA hiển thị, getValue()hàm được sử dụng để trả về mã thông báo.
  • getValue(): Như tên của nó, hàm này trả về giá trị của trường reCAPTCHA.
  • reset(): Điều này được sử dụng để đặt lại reCAPTCHA và có thể áp dụng trong trường hợp reCAPTCHAkiểm tra tiếp theo.

Chúng tôi có thể sử dụng refđể lấy mã thông báo của chúng tôi như hình dưới đây:

<ReCAPTCHA
  sitekey= "your site key"
  theme="dark"
  ref={getCaptchaRef}
  onChange={() => {
    reCaptchaValue();
  }}
/>

Ở đây, chúng tôi đã thêm một hàm trong thuộc tính thành phần của chúng tôi onChange. Chúng tôi sẽ sử dụng chức năng này để đặt giá trị của mã thông báo của chúng tôi:

const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
};

Tiếp theo, chúng tôi phải xác minh mã thông báo đã tạo trước khi bật tính năng gửi. Để thực hiện việc này, chúng ta cần POSTyêu cầu https://www.google.com/recaptcha/api/siteverifysử dụng Node.js trên chương trình phụ trợ. Tạo một tệp mới Server.js, trong thư mục gốc của ứng dụng của bạn. Đối với máy chủ, chúng tôi sẽ yêu cầu hai phần phụ thuộc; Axiosđể xử lý POSTyêu cầu của chúng tôi và Expressquản lý các tuyến máy chủ. Chúng ta có thể cài đặt các phần phụ thuộc này bằng các lệnh CLI sau:

npm i express axios cors

Tiếp theo, tạo một tệp Server.jstrong thư mục gốc của thư mục dự án. Trong Server.js, hãy nhập mã sau:

const express = require("express");
const axios = require("axios");
const cors = require("cors");

const router = express.Router();
const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/", router);

router.post("/status", async (req, res) => {
  const { token } = req.body; // get token from the request we will create in index.js
  const secret = "SITE SECRET";
  await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`, // URL
    {
        secret: secret,
        response: token,
    }, // URL parameters
  );
  //return response based on the status of the post request
  if (res.status(200)) {
    res.send(true);
  } else {
    res.send(false);
  }
});
app.listen(port, () => {
  console.log(`server is listening on ${port}`);
});

Trong đoạn mã trên, chúng tôi đã tạo một máy chủ chạy trên cổng 5000 và lắng nghe định tuyến /status. Sử dụng máy chủ này, chúng tôi sẽ thực hiện một yêu cầu đăng để xác định xem mã thông báo có hợp lệ hay không và sau đó trả lại phản hồi. Nếu mã thông báo hợp lệ, máy chủ sẽ trả lại phản hồi thích hợp. Nếu không, nó sẽ trả lại một phản hồi false. Mở thiết bị đầu cuối và khởi động máy chủ với node Server.js.

Với điều này tại chỗ, chúng tôi sẽ bắt đầu yêu cầu của chúng tôi index.jstrong chức năng của chúng tôi reCaptchaValue, như được hiển thị bên dưới:

const [valid, setValid] = useState(false)
const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
  console.log(token);
  await axios
    .post("http://localhost:5000/status", {
      response: token,
    })
    .then((res) => {
      console.log(res);
      setValid(res.data)
    })
    .catch((err) => {
      console.log(err);
    });
};

Trong mã, chúng tôi đã thực hiện một yêu cầu đăng lên URL máy chủ của chúng tôi với mã thông báo được trả lại bởi reCAPTCHA. Sau đó, chúng tôi đặt giá trị của một trạng thái validbằng với giá trị được res.datatrả về từ máy chủ, "true" hoặc "false".

6

Cuối cùng, chúng tôi sẽ thêm một onClicktrình xử lý vào nút của mình để thực hiện các hoạt động khác nhau dựa trên giá trị của valid:

<button className="submit" onClick={()=>{handleSubmit()}}>Log in</button>

Và trong handleSubmit()chức năng:

const handleSubmit = ()=>{
 if(valid){
 alert("welcome user " + value + " " + value2)
 }
 else{
   alert("please verify you are not a robot")
 }
}

Nếu chúng tôi chạy ứng dụng của mình ngay bây giờ, chúng tôi nhận được kết quả sau:

7

Nếu người dùng không thực hiện được reCAPTCHA, nó chỉ cần yêu cầu người dùng thử lại cho đến khi kiểm tra thành công.

8

Sự kết luận

Hướng dẫn này đã dạy chúng tôi về reCAPTCHA và cách chúng tôi có thể tích hợp tính năng bảo mật này vào ứng dụng Tiếp theo.

Nguồn: https://blog.openreplay.com/prevent-spam-and-detect-bots-with-recaptcha

#recaptcha

Sival Alethea

Sival Alethea

1624410000

Create A Twitter Bot With Python

Create a Twitter bot with Python that tweets images or status updates at a set interval. The Python script also scrapes the web for data.

📺 The video in this post was made by freeCodeCamp.org
The origin of the article: https://www.youtube.com/watch?v=8u-zJVVVhT4&list=PLWKjhJtqVAbnqBxcdjVGgT3uVR10bzTEB&index=14
🔥 If you’re a beginner. I believe the article below will be useful to you ☞ What You Should Know Before Investing in Cryptocurrency - For Beginner
⭐ ⭐ ⭐The project is of interest to the community. Join to Get free ‘GEEK coin’ (GEEKCASH coin)!
☞ **-----CLICK HERE-----**⭐ ⭐ ⭐
Thanks for visiting and watching! Please don’t forget to leave a like, comment and share!

#python #a twitter bot #a twitter bot with python #bot #bot with python #create a twitter bot with python

How to Add Google ReCAPTCHA V3 in CodeIgniter 4

Google reCAPTCHA v3 is an invisible type of captcha where the user doesn’t have to interact. It tracks the user behavior on the site and returns a score between 0 to 1 with the response.

This score is use for validation on the server side.

In this tutorial, I show how you can add Google reCAPTCHA v3 to your form in CodeIgniter 4.

Contents

  1. Get Google reCaptcha keys
  2. Create variables in .env
  3. Enable CSRF
  4. Create custom validation for reCaptcha v3
  5. Create Controller
  6. Routes
  7. Create View
  8. Output
  9. Conclusion

1. Get Google reCaptcha keys

You can skip this step if you already registered for Google reCAPTCHA v3 and have site and secret keys.

  • Navigate to the following link and login into your account if not logged in.
  • Following page will display.

Google reCAPTCHA create form

  • Here, enter label, select reCAPTCHA v3 from the reCAPTCHA type, enter your domain name without https e.g. makitweb.com. You can also specify localhost if you want to test it on your local system.
  • Check the Accept the reCAPTCHA Terms of Service and click the Submit button.

Google recaptcha v3 details

  • Copy the site and secret keys.

Google recaptcha v3 site and secret keys


2. Create variables in .env

  • Open .env file which is available at the project root.

NOTE – If dot (.) not added at the start then rename the file to .env.

  • Here, define 2 variables for storing the captcha site and secret keys –
GOOGLE_RECAPTCHAV3_SITEKEY = 6LdP-nIhAAAAAA6rzq7BTh_jKqIYeKMoaALxkKte
GOOGLE_RECAPTCHAV3_SECRETKEY = 6LdV-nIhAAAAAL-uFI4w9kQUaqMkeU2K3KojlXyE

3. Enable CSRF

  • Again open .env file.
  • Remove # from the start of the security.tokenName,security.headerName, security.cookieName, security.expires,and security.regenerate.
  • I update the security.tokenName value with 'csrf_hash_name'. With this name read CSRF hash. You can update it with any other value.
  • If you don’t want to regenerate CSRF hash after each request then set security.regenerate = false.
security.tokenName = 'csrf_hash_name' 
security.headerName = 'X-CSRF-TOKEN' 
security.cookieName = 'csrf_cookie_name' 
security.expires = 7200 
security.regenerate = true
  • Open app/Config/Filters.php file.
  • Uncomment 'csrf' in 'before' if commented.
// Always applied before every request
public $globals = [
    'before' => [
         // 'honeypot',
         'csrf',
         // 'invalidchars',
    ],
    'after' => [
        'toolbar',
        // 'honeypot',
        // 'secureheaders',
    ],
];

4. Create custom validation for reCaptcha v3

Create a rule to verify reCaptcha v3 response.

  • Create a new CaptchaValidation.php file in app/Config/ folder.
  • Create a CaptchaValidation class.
  • In the class create verifyrecaptchaV3() method. Here, the method name is also a rule name.
  • Read the secret key from .env file and assign it to $secretkey.
  • Send request to –
https://www.google.com/recaptcha/api/siteverify?secret=".$secretkey."&response=".$str."&remoteip=".$_SERVER['REMOTE_ADDR']
  • Here, pass secret key, recaptcha response, and IP address.
  • It returns a JSON response.
  • If $responseData->success is true and $responseData->score is > 0.6 then return true otherwise, assign error message in $error and return false.

NOTE – You can update value of $score from 0.6 to any other value. Make sure to set it between 0.5 to 1.

Completed Code

<?php 
namespace Config;

class CaptchaValidation{

     public function verifyrecaptchaV3(string $str, ?string &$error = null): bool
     {
          $secretkey = getenv('GOOGLE_RECAPTCHAV3_SECRETKEY');

          if(($str) && !empty($str)) {

               $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretkey."&response=".$str."&remoteip=".$_SERVER['REMOTE_ADDR']);

               $responseData = json_decode($response);
               $score = 0.6; // 0 - 1
               if($responseData->success && $responseData->score > $score) { // Verified
                    return true;
               }
          }

          $error = "Invalid captacha";

          return false;
     }

}

To use the above-created validation rule need to define it in the Validation.php file.

  • Open app/Config/Validation.php file.
  • Include Config\CaptchaValidation class.
  • Specify CaptchaValidation::class in $ruleSets Array.

Completed Code

<?php

namespace Config;

use CodeIgniter\Config\BaseConfig;
use CodeIgniter\Validation\CreditCardRules;
use CodeIgniter\Validation\FileRules;
use CodeIgniter\Validation\FormatRules;
use CodeIgniter\Validation\Rules;
use Config\CaptchaValidation; // Custom reCAPTCHA v3 validation

class Validation extends BaseConfig
{
      // --------------------------------------------------------------------
      // Setup
      // --------------------------------------------------------------------

      /**
      * Stores the classes that contain the
      * rules that are available.
      *
      * @var string[]
      */
      public $ruleSets = [
          Rules::class,
          FormatRules::class,
          FileRules::class,
          CreditCardRules::class,
          CaptchaValidation::class, // Custom reCAPTCHA v3 validation
      ];

      /**
      * Specifies the views that are used to display the
      * errors.
      *
      * @var array<string, string>
      */
      public $templates = [
          'list' => 'CodeIgniter\Validation\Views\list',
          'single' => 'CodeIgniter\Validation\Views\single',
      ];

      // --------------------------------------------------------------------
      // Rules
      // --------------------------------------------------------------------
}

5. Create Controller

Create PagesController Controller –

php spark make:controller PagesController
  • Open app/Controllers/PagesController.php file.
  • Create 2 methods –
    • index() – Load index view.
    • submitContactUs() – This method calls on form submit.

Validate the submitted values. Here, for validating recaptcha specify – 'recaptch_response' => 'required|verifyrecaptchaV3',.

verifyrecaptchaV3 is a custom validation rule created in the previous step.

If <form > is not validated then return to the page with error messages otherwise store the success message in SESSION flash and redirect to route('/').

Completed Code

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class PagesController extends BaseController
{
     public function index(){
         return view('index'); 
     }

     public function submitContactUs(){

         // Validation
         $input = $this->validate([
              'name' => 'required',
              'email' => 'required',
              'subject' => 'required',
              'message' => 'required',
              'recaptcha_response' => 'required|verifyrecaptchaV3',
            ],[
              'recaptcha_response' => [
                    'required' => 'Please verify captcha',
              ],
         ]);

         if (!$input) { // Not valid

              $data['validation'] = $this->validator;

              return redirect()->back()->withInput()->with('validation', $this->validator);

         }else{ 
              // Set Session
              session()->setFlashdata('message', 'Request Submitted Successfully!');
              session()->setFlashdata('alert-class', 'alert-success');

         }
         return redirect()->route('/');
     }

}

6. Routes

  • Open app/Config/Routes.php file.
  • Here, create 2 routes –
    • page/submitContactUs – Handle form submit.
$routes->get('/', 'PagesController::index');
$routes->post('page/submitContactUs', 'PagesController::submitContactUs');

7. Create View

  • Create index.php file in app/Views/ folder.
  • Include recaptcha js in <head > section –
<!-- reCAPTCHA JS-->
<script src="https://www.google.com/recaptcha/api.js?render=<?= getenv('GOOGLE_RECAPTCHAV3_SITEKEY') ?>"></script>

Here, also specify sitekey.

  • Create a contact form and set action URL to <?=site_url('page/submitContactUs')?>. Define onSubmit event on <form > that calls onSubmit(event).
  • Display an error message if <form> element is not validated. In the <form > also display an error message if recaptcha is not validated.
  • Create a hidden element #recaptcha_response to store recapatcha token response on <form > submit.
  • Create a submit button.

Script

  • Create onSubmit() function that calls on <form > submit.
  • Call grecaptcha.execute on submit action to get a token.
  • Assign the token to the hidden element #recaptcha_response.
  • Submit the <form >.

Completed Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to add Google reCAPTCHA v3 in CodeIgniter 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >

    <!-- reCAPTCHA JS-->
    <script src="https://www.google.com/recaptcha/api.js?render=<?= getenv('GOOGLE_RECAPTCHAV3_SITEKEY') ?>"></script>

    <!-- Include script -->
    <script type="text/javascript">

    function onSubmit(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
             grecaptcha.execute("<?= getenv('GOOGLE_RECAPTCHAV3_SITEKEY') ?>", {action: 'submit'}).then(function(token) {

                  // Store recaptcha response
                  document.getElementById("recaptcha_response").value = token;

                  // Submit form
                  document.getElementById("contactForm").submit();

             });
        });
    }

    </script>
</head>
<body>

    <div class="container">

        <div class="row">
             <div class="col-md-6 mt-5" style="margin: 0 auto;">

                 <?php 
                 // Display Response
                 if(session()->has('message')){
                 ?>
                      <div class="alert <?= session()->getFlashdata('alert-class') ?>">
                           <?= session()->getFlashdata('message') ?>
                      </div>
                 <?php
                 }
                 ?>

                 <h2 class="mb-4">Contact US</h2>

                 <?php $validation = \Config\Services::validation(); ?>

                 <form id="contactForm" method="post" action="<?=site_url('page/submitContactUs')?>" onSubmit="onSubmit(event)">

                     <?= csrf_field(); ?>

                     <!-- Recaptcha Error -->
                     <?php if( $validation->getError('recaptcha_response') ) {?>

                          <div class="alert alert-danger">
                                <?= $validation->getError('recaptcha_response'); ?>
                          </div>
                     <?php }?>

                     <div class="form-group mb-4">
                          <label class="control-label col-sm-2" for="name">Name:</label>
                          <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name" value="<?= old('name') ?>">
                          </div>

                          <!-- Error -->
                          <?php if( $validation->getError('name') ) {?>
                                <div class='text-danger mt-2'>
                                     * <?= $validation->getError('name'); ?>
                                </div>
                          <?php }?>
                     </div>
                     <div class="form-group mb-4">
                          <label class="control-label col-sm-2" for="email">Email:</label>
                          <div class="col-sm-10">
                                <input type="email" class="form-control" id="email" placeholder="Enter Email" name="email" value="<?= old('email') ?>">
                          </div>

                          <!-- Error -->
                          <?php if( $validation->getError('email') ) {?>
                                <div class='text-danger mt-2'>
                                     * <?= $validation->getError('email'); ?>
                                </div>
                          <?php }?>
                     </div>
                     <div class="form-group mb-4">
                          <label class="control-label col-sm-2" for="subject">Subject:</label>
                          <div class="col-sm-10">
                                <input type="text" class="form-control" id="subject" placeholder="Enter Subject" name="subject" value="<?= old('subject') ?>" >
                          </div>

                          <!-- Error -->
                          <?php if( $validation->getError('subject') ) {?>
                                <div class='text-danger mt-2'>
                                     * <?= $validation->getError('subject'); ?>
                                </div>
                          <?php }?>
                     </div>
                     <div class="form-group mb-4">
                          <label class="control-label col-sm-2" for="message">Message:</label>
                          <div class="col-sm-10">
                                <textarea class="form-control" id="message" name="message"><?= old('message') ?></textarea>
                          </div>

                          <!-- Error -->
                          <?php if( $validation->getError('message') ) {?>
                                <div class='text-danger mt-2'>
                                     * <?= $validation->getError('message'); ?>
                                </div>
                          <?php }?>
                     </div>

                     <div class="form-group "> 
                          <div class="col-sm-offset-2 col-sm-10">
                                <input type="hidden" id="recaptcha_response" name="recaptcha_response" value="">
                                <button type="submit" class="btn btn-info">Submit</button>
                          </div>
                     </div>
                 </form>
             </div>
        </div>

    </div>

</body>
</html>

8. Output

View Output


9. Conclusion

Using this you can protect your website without forcing the user to verify whether it is human or a bot.

You can also view this tutorial if you want to know Google reCAPTCHA v2 implementation in CodeIgniter 4.

If you found this tutorial helpful then don't forget to share.

Original article source at: https://makitweb.com/

#codeigniter #recaptcha #google 

aaron silva

aaron silva

1624451283

Uniswap crypto trading bot | crypto trading bot

The Uniswap crypto trading bot is trending in recent times across the globe. Millions of users are getting addicted to the digital transition change happening right now in the world. The introduction of a crypto-trading bot helps entrepreneurs and investors handle the trade from buying to selling to reap more profits. Crypto-trading bots are consistent and monotonous in managing simple to complex skills, but humans cannot attain everything that is highly challenging for them. The capacity of crypto bots has gigabytes of data per second to handle the trade, whereas humans can’t process that much data within that time frame. Infinite Block Tech provides complete assistance for clients across the globe to benefit from growing their business revenue from being a part of their success.

#uniswap crypto trading bot #crypto trading bot #crypto-trading bot

Lawson  Wehner

Lawson Wehner

1661022960

Flutter_recaptcha_v2: A Flutter Plugin for Google Recaptcha V2

flutter_recaptcha_v2

A Flutter plugin for Google ReCaptcha V2.

Getting Started

This plugin requires Webview to use Google ReCaptcha. This plugin only supports Google ReCAPTCHA V2 (not V3)

Obtain your own key & secret here: https://www.google.com/recaptcha

!!! Remember to add this domain into the reCaptcha setting or add your own domain: recaptcha-flutter-plugin.firebaseapp.com

Then test your API KEY at: https://recaptcha-flutter-plugin.firebaseapp.com/?api_key=API_KEY

Put RecaptchaV2 widget into your widget tree (Usually inside Stack widget), make sure it's placed on top of the tree and block all the behind interactions:

  • You can change the plugin url for the captcha domain insde the RecaptchaV2 or leave it by default non adding the line:
pluginURL: "https://mypersonalurl.com"

if you have setted your own domain, specify the domain used

  • To show the Cancel Button with the captcha controller set the boolean to true:

visibleCancelBottom: true

otherwise it won't appear

  • Set the Text for the Cancel buttom or leave it by default:
textCancelButtom: "CANCEL CAPTCHA"

Example

RecaptchaV2Controller recaptchaV2Controller = RecaptchaV2Controller();
...
RecaptchaV2(
    apiKey: "YOUR_API_KEY", // for enabling the reCaptcha
    apiSecret: "YOUR_API_SECRET", // for verifying the responded token
    pluginURL: "https://mypersonalurl.com",
	visibleCancelBottom: true,
	textCancelButtom: "CUSTOM CANCEL CAPTCHA BUTTOM TEXT",
	controller: recaptchaV2Controller,
    onVerifiedError: (err){
        print(err);
    },
    onVerifiedSuccessfully: (success) {
        setState(() {
            if (success) {
                // You've been verified successfully.
            } else {
                // "Failed to verify.
            }
        });
    },
),

The RecaptchaV2 widget is hidden by default, you need to attach the RecaptchaV2Controller and call show() method when needed. Like this:

recaptchaV2Controller.show();

Manually hide it:

recaptchaV2Controller.hide();

That's it!

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_recaptcha_v3

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_recaptcha_v3: ^0.1.3

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_recaptcha_v3/flutter_recaptcha_v2.dart';

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_recaptcha_v2/flutter_recaptcha_v2.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Google ReCaptcha Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String verifyResult = "";

  RecaptchaV2Controller recaptchaV2Controller = RecaptchaV2Controller();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Text("SHOW ReCAPTCHA"),
                  onPressed: () {
                    recaptchaV2Controller.show();
                  },
                ),
                Text(verifyResult),
              ],
            ),
          ),
          RecaptchaV2(
            apiKey: "6LeCwZYUAAAAAJo8IVvGX9dH65Rw89vxaxErCeou",
            apiSecret: "6LeCwZYUAAAAAKGahIjwfOARevvRETgvwhPMKCs_",
            controller: recaptchaV2Controller,
            onVerifiedError: (err){
              print(err);
            },
            onVerifiedSuccessfully: (success) {
              setState(() {
                if (success) {
                  verifyResult = "You've been verified successfully.";
                } else {
                  verifyResult = "Failed to verify.";
                }
              });
            },
          ),
        ],
      ),
    );
  }
}

Download Details:

Author: Senzil
Source Code: https://github.com/senzil/flutter_recaptcha_v2/ 
License: View license

#flutter #recaptcha #dart #recaptcha