ورود با حساب گوگل در PHP و جاوا اسکریپت
ورود با حساب گوگل در PHP – در این آموزش یاد خواهید گرفت که چگونه با استفاده از حساب کاربری گوگل تان به جای ساخت حساب وارد اکانت کاربری شوید .
این ویژگی در خیلی از وب اپلیکیشن ها وجود دارد مانند evernote , soundcloud و …
3 فایل مورد نیاز :
1- index.html برای افزودن meta تگ دارای مقدار client id گوگل است برای شناسایی هویت وبسایت
2- app.js پس از ورود کاربر از طریق pop-up باز شده توکن آیدی را دریافت کرده و به سمت سرور یعنی
3- signin-users.php ارسال می کنیم که در صورتی که توکن معتبر بود می توانیم یک session معتبر برای آن بسازیم .
ثبت نام وبسایت در گوگل developer
برای ثبت وبسایت تان به این آدرس وارد شده و مطابق تصاویر زیر عمل کنید .
روی Configure a project کلیک کرده نام پروژه را انتخاب کنید و سپس Next
نامی انتخاب کرده و سپس Next
web browser انتخاب شده و سپس آدرس وبسایتی که می خواهید از طریق آن ورود با گوگل را پیاده سازی کنید در پایان Create .
در پایان یک Client ID و Client Secret دریافت می کنید ، می توانید برای جزئیات بیشتر دکمه Download را کلیک کرده و اطلاعات احراز هویت را دانلود کنید و Done
فایل index.html برای دکمه Sign-in و افزودن app.js
<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <meta name="google-signin-client_id" content="کلاینت آیدی را در اینجا وارد کنید"> <title>لاگین با google در PHP , (Rapidcode.ir)</title> <script src="https://apis.google.com/js/platform.js" async defer></script> </head> <body> <div class="g-signin2" data-onsuccess="onSignInGUser"></div> <a href="#" onclick="onSignOutGUser();">خروج از حساب</a> <script src="app.js"></script> </body> </html>
دقت داشته باشید که در خط 5 یعنی google-signin-client_id باید client id را وارد کنید
فایل app.js برای افزودن pop-up جهت دریافت داده های کاربر از جمله token ID
function onSignInGUser(userData) { var profile = userData.getBasicProfile(); const tokenID = userData.getAuthResponse().id_token; console.log(tokenID); console.log('ID: ' + profile.getId()); console.log('Name: ' + profile.getName()); console.log('Image URL: ' + profile.getImageUrl()); console.log('Email: ' + profile.getEmail()); var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://example.com/signin-users.php'); xhr.responseType = 'json'; const frmdata = new FormData(); frmdata.append("gtokenID" , tokenID); xhr.onload = function() { console.log(xhr.response); }; xhr.send(frmdata); } function onSignOutGUser() { var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut().then(function() { console.log('کاربر با موفقیت از حساب خود خارج شد !'); }); }
خط 11 به جای example.com آدرس وبسایت تان که فایل signin-users.php در آن وجود دارد را وارد کنید .
دکمه به شکل زیر خواهید دید :
همچنین اگر console را باز کنید اطلاعاتی از کاربر مشاهده می کنید مثل :
فایل signin-users.php برای اعتبار سنجی token کاربر
قبل از نصب کتابخانه PHP گوگل را با دستور زیر دانلود و به پروژه اضافه کنید .
composer require google/apiclient:"^2.0"
header("Content-Type: application/json"); require_once 'vendor/autoload.php'; define("CLIENT_ID", "کلاینت آیدی را در اینجا وارد کنید"); $g_token_id = $_POST['gtokenID'] ?? 0; $client = new Google_Client(['client_id' => CLIENT_ID]); $g_user = $client->verifyIdToken($g_token_id); if ($g_user) { $userid = $g_user['sub']; $response_msg = ["status" => 1, "msg" => "google user successfully logged in", "userID" => "$userid"]; } else $response_msg = ["status" => 0, "msg" => "failed to signin user"]; echo json_encode($response_msg);
مقدار CLIENT_ID جایگذاری کنید .
در صورتی که با پیغام google user successfully logged in مواجه شدید یعنی کاربر به درستی وارد شده و می توانید برای آن session بسازید .
دانلود پروژه ورود با حساب گوگل در PHP
ارسال نظر