در مورد این پست آموزشی
ساخت گوگل ریکپچا در لاراول
توی این مقاله آموزشی قصد داریم شما رو با نحوه ساخت گوگل کپچا در لاراول آشنا کنم.
گوگل ریکپچا یک سیستم امنیتی است که توسط گوگل برای تشخیص و جلوگیری از فعالیت‌های ناخواسته و خودکار در وب‌سایت‌ها استفاده می‌شود. هدف اصلی این سیستم، جلوگیری از اسپم، حملات دیده‌بان‌ها (ربات‌های خودکار) و سایر فعالیت‌های ناخواسته در وب‌سایت‌ها است. این سیستم به عنوان یک پل ارتباطی بین انسان و رایانه عمل می‌کند و به وب‌سایت‌ها کمک می‌کند تا از فعالیت‌های ناخواسته محافظت شوند.
خب بریم برای شروع !!!
قدم اول – نصب پکیج گوگل ریکپچا
در قدم اول کافیه دستور زیر رو در ترمینال ، در مسیر اصلی پروژه وارد می کنیم و منتظر می مونیم تا نصب پکیج انجام شه.
composer require anhskohbo/no-captcha
قدم دوم – ایجاد گوگل ریکپچا
بعد از اتمام نصب پکیج کافیه به سایت گوگل ریکپچا برید و یک گوگل کپچا بسازید.
در نظر داشته باشید که شما باید با فیلترشکن وارد سایت گوگل ریکپچا شوید.
بعد از وارد شدن به سایت گوگل ریکپچا مطابق تصویر زیر روی + کلیک کنید.
در مرحله بعد کافیه مطابق تصویر زیر عمل کنید:
در گزینه اول شما باید یک label دلخواه وارد کنید.
در گزینه دوم شما باید ورژن گوگل ریکپچا رو انتخاب کنید که من ترجیح میدم ورژن 2 رو انتخاب کنید.
در گزینه سوم شما باید دامین سایت خودتون رو بدون https وارد کنید.
بعد از تیک گزینه چهارم شما کافیه روی دکمه submit کلیک کنید و تصویر زیر برای شما باز خواهد شد.
در این مرحله شما یک گوگل کپچا ساختید و توی این مرحله دوتا کلید به شما میده که در مراحل بعدی به اونا نیاز داریم.
قدم سوم – ویرایش فایل env.
خب فایل env. رو در پروژه باز می کنیم و کدهای زیر رو به انتهای فایل اضافه می کنیم.
NOCAPTCHA_SECRET=**************** NOCAPTCHA_SITEKEY=***************
حالا اون دوتا کلیدی که در تصویر قبلی گفتم نگه دارید رو در این قسمت وارد کنید. توجه داشته باشید که هر کلید رو در قسمت مربوط به خودش رو وارد کنید.
قدم چهارم – نحوه ی استفاده از گوگل ریکپچا در پروژه
خب ما دیگه به راحتی میتونیم هرجایی که بخوایم از گوگل ریکپچا استفاده کنیم. با یک مثال شروع میکنیم.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>recaptch</title>
{!! NoCaptcha::renderJs() !!}
</head>
<body>
<div class="recaptch">
<input type="username" name="نام کاربری">
<input type="password" name="کلمه عبور">
<button type="submit">ذخیره</button>
</div>
<div class="recaptch">
{!! app('captcha')->display() !!}
</div>
</body>
</html>
خب امیدوارم که این مقاله آموزشی بدردتون خورده باشه و بتونید در پروژه ها و سایت هایتون ازش استفاده کنید.
موفق و پیروز باشید
نویسنده مطلب
یک نظر بنویسید
