میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

عضویت و لاگین در سایت با گوگل

ساخت سیستم عضویت و لاگین در سایت با گوگل با Api و کتابخانه client گوگل بسیار آسان است بدین صورت است که خیلی از سایت ها هستند که توی بخش عضویت شما میتونید با ایدی گوگل خودتون عضو بشید ,اینگونه که شما روی یه دکمه کلیک میکنید و سپس به صفحه گوگل میرید و یوزر پسوورد خودتون رو میزنید , بعد از تایید کردن به صفحه سایت برمیگردید و میبینید که لاگین شدید  به این روش میگویند federated login که شما با عضو بودن توی گوگل میتونید توی سایت های دیگه عضو باشید .

 

عضویت و لاگین در سایت با گوگل

 

برای ایجاد فرم عضویت و لاگین در سایت با گوگل , باید مراحل زیر رو انجام بدیم:

 

مرحله اول: ایجاد پروژه در گوگل

شما ابتدا باید یک پروژه در گوگل ایجاد کنید , برای این کار به آدرس Google Developer Console بروید ( البته این سرویس گوگل برای ایران تحریم است و باید از نرم افزارهای تغییر آی پی استفاده کنید) و مثل تصاویر زیر اقدام به ایجاد یک پروژه ی جدید کنید

عضویت و لاگین در سایت با گوگل

بعد از ایجاد پروژه اون رو باز کنید و روی enable and manage APIs کلیک کنید و منتظر بمونید تا صفحه لود بشه :

عضویت و لاگین در سایت با گوگل

حالا برید روی سربرگ overview از سمت چپ صفحه کلیک کنید:

عضویت و لاگین در سایت با گوگل

حالا روی لینک Google+ API کلیک کنید و دکمه ی enable رو بزنید و بعد در سمت چپ صفحه روی Credentials کلیک کنید و بعدش روی New credentials کلیک کنید و از منوی باز شده OAuth client ID رو انتخاب کنید

عضویت و لاگین در سایت با گوگل

 

عضویت و لاگین در سایت با گوگل عضویت و لاگین در سایت با گوگل

حالا Web Application رو انتخاب کنید و فیلد های مربوطه رو پر کنید

 

عضویت و لاگین در سایت با گوگل

در قسمت مربوط به فیلد Name نام اپلیکیشن یا برنامه ی خودتون رو بنویسید (یه نام فرضی تایپ کنید که مرتبط با پروژه ی شما باشه) و در قسمت Authorized JavaScript origins نام دامنه ی سایت خودتون یا http://localhost رو وارد کنید و در قسمت Authorized redirect URIs ادرسی رو وارد کنید که میخواید بعد از لاگین شدن در گوگل , کاربران به اونجا فرستاده بشن.

 

عضویت و لاگین در سایت با گوگل

 

حالا ما به Client ID و Client secret و Redirect URI نیاز داریم , پروژه ی خودتون رو باز کنید تا این مشخصات رو ببینید , اونا رو کپی کنید و یه جایی نگهدارید و ادامه اموزش رو ببینید( دقت کنید در اینجا redirect URI در کدی که من دارم مینویسم ادرس فایل login.php است )

مرحله ی دوم : ساخت فایلی که درخواست لاگین شدن رو به گوگل بفرسته

یک فایل با نام google_request.php بسازید و دستورات زیر رو توش قرار بدید:

 

 

<?php
function google_request($method, $url, $header, $data){
if( $method == 1 ){
$method_type = 1; // 1 = POST
}else{
$method_type = 0; // 0 = GET
}
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($curl, CURLOPT_HEADER, 0);
if( $header !== 0 ){
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
}
curl_setopt($curl, CURLOPT_POST, $method_type);
if( $data !== 0 ){
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
}
$response = curl_exec($curl);
$json = json_decode($response, true);
curl_close($curl);
return $json;
}
?>

تابعی که ما در بالا ایجاد کردیم چهارتا مقدار به عنوان ورودی میگیره که به صورت زیر توضیح میدم:

method : روش ارسال داده ها داده ها به گوگل رو مشخص میکنه , اگه ۱ باشه داده ها به صورت POST و اگه ۰ باشه داده ها به صورت GET به گوگل ارسال میشن.

url : ادرس مورد نظر ما برای ارسال داده ها هست که در اینجا باید ادرس گوگل باشه

header : هدرها یا پروتکل های HTTP رو مشخص میکنه

data : داده های مورد نظر برای ارسال رو مشخص میکنه

مرحله ی سوم : ساخت فایلی برای وارد کردن مشخصات پروژه ی گوگل خودمون , تا بتونیم از API گوگل استفاده کنیم:

یک فایل با نام config.php ایجاد کنید و دستورات زیر رو توش بنویسید

 

 

<?php
$scope = "https://www.googleapis.com/auth/userinfo.email"; // Do not change it!
$redirect_uri = "xxxx"; // Enter your redirect_uri
$client_id = "xxxx"; // Enter your client_id
$client_secret = "xxxx"; // Enter your client_secret
$login_url = "https://accounts.google.com/o/oauth2/v2/auth?scope=$scope&response_type=code&redirect_uri=
$redirect_uri&client_id=$client_id"; // Do not change it!
$image_size = 100; // Change user profile image size: 100 = 100x100
?>

در کد بالا قسمت هایی که نوشتم do not change رو به هیچ وجه تغییر ندید. در قسمت هایی که به صورت xxxx گذاشتم تنظیماتی که از قسمت پروژه ی گوگل دریافت کردید رو وارد کنید که شامل redirect_uri و client_id و client_secret میشه , همچنین در اخر میتونید سایز عکسی که از یوزر دریافت میکنید رو به صورت image_size مشخص کنید. من در اینجا براتون ۱۰۰ پیکسل رو گذاشتم.

مرحله چهارم : در این مرحله صفحه ی لاگین رو میسازیم

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

حالا یه فایل با نام login.php بسازید و دستورات زیر رو توی اون بنویسید:

 

 

<?php
session_start();
if( !isset($_GET['code']) or isset($_SESSION["gp_access_token"]) or isset($_SESSION["gp_result"]) ){
header("location: index.php");
exit();
}
include 'google_request.php';
include 'config.php';
$header = array( "Content-Type: application/x-www-form-urlencoded" );
$data = http_build_query(
array(
'code' => str_replace("#", null, $_GET['code']),
'client_id' => $client_id,
'client_secret' => $client_secret,
'redirect_uri' => $redirect_uri,
'grant_type' => 'authorization_code'
)
);
$url = "https://www.googleapis.com/oauth2/v4/token";
$result = google_request(1, $url, $header, $data);
if( !empty($result['error']) ){ // If error login
header("location: index.php");
exit();
}else{
$_SESSION["gp_access_token"] = $result['access_token']; // Access Token
header("location: index.php");
}
?>

مرحله ی پنجم : ساخت صفحه ای برای نمایش اطلاعات دریافت شده از گوگل

یه فایل با نام index.php بسازید و دستورات زیر رو توش بنویسید

 

 

<?php
session_start();
include 'config.php';
if( isset($_SESSION["gp_access_token"]) ){ // If logged in
include 'google_request.php';
$access_token = $_SESSION["gp_access_token"]; // User access token
$api_url = "https://www.googleapis.com/plus/v1/people/me?fields=aboutMe%2Cemails%2Cimage%2Cname&access_token=
$access_token"; // Do not change it!
if( !isset($_SESSION["gp_result"]) ){
$result = google_request(0, $api_url, 0, 0);
$_SESSION["gp_result"] = $result;
$user_info = $_SESSION["gp_result"];
}else{
$user_info = $_SESSION["gp_result"];
}
$first_name = $user_info['name']['givenName']; // User first name
$last_name = $user_info['name']['familyName']; // User last name
$email = $user_info['emails'][0]['value']; // User email
$get_profile_image = $user_info['image']['url'];
$change_image_size = str_replace("?sz=50", "?sz=$image_size", $get_profile_image);
$profile_image_link = $change_image_size; // User profile image link
$page_title = "Hello my name is $first_name $last_name!"; // Page title if user is logged in
}
else{
$page_title = "Login With Google Plus API"; // Page title if user is not logged in
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php echo $page_title; ?></title>
</head>
<body>
<?php
if( isset($_SESSION["gp_access_token"]) ){ // If logged in
?>
<img src="<?php echo $profile_image_link; ?>">
<h1>Hello <?php echo $first_name.' '.$last_name; ?>!</h1>
<p>Your Email: <?php echo $email; ?></p>
<?php
}
else{ // If is not logged in
?>
<h1>Welcome</h1>
<p><a href="<?php echo $login_url; ?>">Login with Google plus</a></p>
<?php
}
?>
</body>
</html>

 

که نوشته Login with Google plus و وقتی که کاربر روی لینک کلیک میکنه به صفحه ی گوگل میره و بعد از لاگین کردن توی گوگل دوباره به همین صفحه میاد و عکس و مشخصاتش نمایش داده میشه  به همین راحتی.

نکته : دقت کنید در اینجا redirect URI همون فایل login.php است و باید در تنظیمات گوگل خودتون نیز ادرس فایل login.php رو بزارید تا بعد از لاگین شدن کاربر اطلاعات از طرف گوگل به این فایل ارسال بشه.

 


 

امیدواریم آموزش اختلاف زمان بین دو تاریخ در PHP نیز برای شما مفید واقع شده باشد .برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟