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

ساخت سیستم عضویت و لاگین در سایت با گوگل با 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;
}
?>

<?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
?>

<?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");
}
?>

<?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>

<?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>

</head>

<body>

<?php

if( isset($_SESSION["gp_access_token"]) ){ // If logged in

<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 رو بزارید تا بعد از لاگین شدن کاربر اطلاعات از طرف گوگل به این فایل ارسال بشه.

برای دانلود پروژه عضویت و لاگین در سایت با گوگل از قسمت زیر اقدام کنید

موفق باشید

لغو پاسخ

علی ۱۶ اسفند ۱۳۹۹

سلام
وارد گوگل میشه اما وقتی اطلاعات را بر می‌گردونه این خروجی را میدهد
[error] => invalid_client [error_description] => Unauthorized

پاسخ

حسن شفیعی ۱۶ اسفند ۱۳۹۹

سلام. احتمالا کلید ها رو اشتباه زدید

پاسخ

rezamms ۲۲ بهمن ۱۳۹۹

سلام
من سورس آخر آموزش رو دانلود کردم و در سایتم هم آپلود کردم
اما مقدار ایمیل بازگشتی NULL هست و هیچی نشون نمیده!
https://rezamms.ir/login/index.php

پاسخ

حسن شفیعی ۲۲ بهمن ۱۳۹۹

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

پاسخ

rezamms ۲۲ بهمن ۱۳۹۹

دقیقا مثل آموزش جلو رفتم
اما کار نمیده

پاسخ

ایمان ۲۰ اسفند ۱۳۹۸

سلام
توی نکته گفتین که اطلاعات به login ارسال میشه ولی نمایش اطلاعات توی index.php هست.
من هر دو رو انجام دادم و وارد گوگل میشه و گوگل رو انتخاب میکنم برمیگرده به صفحه ی index.php و چیزی عوض نشده فقط ادرس url با get یک چیزهایی اضافه شده و توی login.php هم تنظیم کردم بازم فرقی نکرد و هیچی نمایش داده نشد.
بررسی کنید ممنون میشم.

پاسخ

حسن شفیعی ۲۰ اسفند ۱۳۹۸

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

پاسخ

ایمان ۲۰ اسفند ۱۳۹۸

چجوری اطلاعات برگشت داده شده رو ببینم؟
میخوام برای ورود یا ثبت نام از این روش استفاده کنم که خودکار ایمیل وریفای بشه ، میشه از این استفاده کرد؟

پاسخ
حسن شفیعی ۲۰ اسفند ۱۳۹۸

مقدار post برگشت داده شده رو var_dump کنید.
بله میتونید استفاده کنید

پاسخ
ایمان ۲۰ اسفند ۱۳۹۸

یه چیز دیگه.
وقتی به سایت برگشت داده میشه Login With Google API خالیه و چیزی نمایش داده نمیشه.
ولی مقدارین با گت در url هست ولی نمیتونم کاری انجام بدم.

پاسخ

مهدی ۳۰ اردیبهشت ۱۳۹۸

ببخشید این افزونه Subscribe & Download رو نصب کردم
میخوام فقط به سرویس های جیمیل و یاهو ایمیل بفرسته و اگر غیر این بود بگه ایمیل نا معتبر باید چکاری انجام بدم؟

پاسخ

حسن شفیعی ۳۰ اردیبهشت ۱۳۹۸

سلام.
این شرط را به شرط های خط احتمالا ۱۵۰۰ تا ۱۵۲۰ باشه در فایل اصلی افزونه subscribe-download.php اضافه کنید
elseif (!preg_match(“/@(gmail|yahoo)\.com/i”, $email)) {
$error .= ‘ایمیل نامعتبر’;
}

موفق باشید.

پاسخ

امیرحسین آقاجانی ۲۹ اسفند ۱۳۹۶

سلام ممنون از آموزش خوبتون! من به نتیجه رسیدم!
اما عکسه نمیاد!
اسکریپت شما هم تست کردم عکس نمیاد!
من عکس هم دارم اما نیومد
ممنون میشم راهنمایی کنید

پاسخ

حسن شفیعی ۲۹ اسفند ۱۳۹۶

سلام . خوشحالم مفید واقع شده .

مشکل حادی نیست کافیه تصویر مورد نظر رو درست آدرس دهی کنید .

موفق باشید.

پاسخ

امیرحسین آقاجانی ۲۹ اسفند ۱۳۹۶

میشه یکم راهنمایی کنید ؟
ممنون میشم

پاسخ
حسن شفیعی ۲۹ اسفند ۱۳۹۶

بله حتما.

عملا نباید مشکلی باشه . شما هنگام برگشت مقدار $user_info رو var_dump کنید و ببینید خانه image به چه صورت مقدار دهی شده تا آدرس عکس و اطلاعات رو بتونید جزئی تر بررسی کنید که آیای مقداری برگشت داده شده یا نه

موفق باشید

پاسخ
امیرحسین آقاجانی ۲۹ اسفند ۱۳۹۶

https://amiraghajani.com/os/auth/

مقداری که بر میگردونه خالیه 🙁

پاسخ
حسن شفیعی ۲۹ اسفند ۱۳۹۶

تست کردم مشکلی نداره . و مقدار url در image رو برگشت میده.

https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg?sz=520

موفق باشید

پاسخ

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

دانـلود باکــس

اتصال به درگاه پرداخت paypal در php

ایجاد محدودیت ip برای صفحه لاگین

آموزش ساخت سیستم نظردهی با php

ثبت نام مرحله ای با php

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه