ورود با حساب گوگل در 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

ورود با حساب گوگل در PHP و جاوا اسکریپت

ثبت نام وبسایت در گوگل developer

فایل index.html برای دکمه Sign-in و افزودن app.js

فایل app.js برای افزودن pop-up جهت دریافت داده های کاربر از جمله token ID

فایل signin-users.php برای اعتبار سنجی token کاربر

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید . لغو پاسخ