استفاده از گوگل reCaptcha در ری اکت

استفاده از گوگل reCaptcha در ری اکت

استفاده از گوگل reCaptcha در ری اکت

Using Google reCaptcha in React Js

توسط : admin
در این مقاله با هم نحوه اعتبار سنجی من ربات نیستم توسط ورژن 2 ماژول گوگل reCaptcha در ری اکت رو بررسی میکنیم .

تاریخچه Google reCaptcha :

زندگی در عصر اطلاعات چنان  سریع تغییر می کند که اغلب حتی متوجه آن نمی شویم. به عنوان مثال ، سیستم تأیید هویت کاربر اینترنت CAPTCHA ، که همه جا فراگیر شده است .

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

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

این برنامه بسیار موفقیت آمیز بود. CAPTCHA به ابزاری همه گیر و بخشی پذیرفته شده از تجربه کاربران اینترنت تبدیل شد.

 

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

 

حتی با وجود این مزارع اسپم ، CAPTCHA هنوز محصول محکمی بود. اما مهندسان راضی نبودند. میلیون ها نفر داوطلبانه تصاویر مزخرف را به متن ترجمه می کردند ، که  این موضوع برای فون آن اصلا جالب به نظر نمی رسید . فون آن در مصاحبه ای با نیویورک تایمز در سال 2011 ، به این موضوع اشاره کرد که ، "آیا می توانیم کار مفید تری انجام دهیم؟"

 

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

 

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

بزودی گوگل از سیستم جدید و مشهور "No CAPTCHA reCAPTCHA" رونمایی کرد ، که نه به توانایی کاربران در رمزگشایی متن بلکه از رفتار آنلاین آنها قبل از عبور لایه های امنیتی متکی است. در حالی که یک کاربر در یک صفحه است ، یک الگوریتم نامرئی نحوه تعامل آنها با محتوا را تعیین می کند تا انسان یا روبات بودن او مشخص شود .سپس ، در همان ایست بازرسی ، از کاربران خواسته می شود یک متن واحد را تأیید کنند: "من یک روبات نیستم."

 

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

 

با هم خلاصه ای از تاریخچه این ابزار مفید رو مطالعه کردیم . حالا بریم خیلی خلاصه نحوه استفاده از نسخه 2 ابزار گوگل ری کپچا  در ری اکت رو با هم آموزش ببینیم .

تنها ماژولی که نیاز به نصب دارید :

react-google-recaptcha

 

قبل از اینکه بتونید از این ماژول استفاده کنید  باید در سایت گوگل کلید جدیدی تعریف کنید و آدرس سایت خودتون رو جهت استفاده از این کلید در سایت گوگل ثبت کنید . توجه کنید اگر در سیستم محلی یا لوکال در حال تست هستید باید آدرس localhost یا پورت 127.0.0.1 رو نیز به کلید ایجاد شده معرفی کنید . تصایر صفحه وب سایت گوگل برای معرفی کلید در ادامه آموزش آورده شده است .

صفحه ساخت کلید در گوگل ری کپچا

 

و حالا تنظیمات این کلید رو انجام میدیم و کلید ایجاد شده رو جهت استفاده در ماژول ری اکت کپی میکنیم .

تنظیمات گوگل ری کپچا ثبت سایتها و دریافت کلید

 

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

 

import React, { Component } from "react";
import ReCAPTCHA from "react-google-recaptcha";

class Login extends Component {
  state = { username: "", password: "", recaptcha: "", error: "" };

  onreCaptchaExpire = () => {
    this.setState({
      recaptcha: ""
    });
  };

  onreCaptchaChange = e => {
    this.setState({
      recaptcha: e
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    if (this.state.recaptcha === "" || this.state.recaptcha === undefined) {
      this.setState({
        error: "لطفا من ربات نیستم را انتخاب نمائید"
      });
      return;
    } else {
      this.setState({
        error: ""
      });
    }
    //continue your code
  };
  render() {
    return (
      <div style={{ padding: "50px" }}>
        <form onSubmit={this.handleSubmit}>
          <input
            style={{ display: "block", padding: "5px" }}
            type="text"
            value={this.state.username}
            onChange={e => {
              this.setState({
                username: e.target.value
              });
            }}
            placeholder="نام کاربری"
          />
          <input
            style={{ display: "block", padding: "5px" }}
            type="password"
            value={this.state.password}
            onChange={e => {
              this.setState({
                password: e.target.value
              });
            }}
            placeholder="رمز عبور"
          />
          <label style={{ color: "red", display: "block" }}>
            {this.state.error}
          </label>
          <ReCAPTCHA
            sitekey="کلید دریافت شده از گوگل"
            onChange={this.onreCaptchaChange}
            onExpired={this.onreCaptchaExpire}
          />
          <button>ورود</button>
        </form>
      </div>
    );
  }
}

export default Login;

 

 

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

شما میتونید فایل فشرده این پروژه رو از اینجا دانلود کنید  . رمز فایل nilootech.com هست . فراموش نکنید برای استفاده از پروژه دستور npm i برای نصب ماژولها الزامی هست . اگر نظری دارید و یا آموزش خاصی رو نیاز دارید خوشحال میشم زیر همین پست با من در میون بگذارید .

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

با ثبت نام در نیلوتک از آخرین بروز رسانی های آموزش ها و مقالات سایت مطلع شوید