نحوه لاگین به وب سایت از طریق گوگل در PHP
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 9 دقیقه

نحوه لاگین به وب سایت از طریق گوگل در PHP

در این مقاله قصد داریم نحوه ادغام لاگین به سیستم از طریق گوگل در وب سایتهای مبتنی بر PHP را توضیح دهیم. برای این کار از Google OAuth API استفاده خواهیم کرد، که راهی آسان و قدرتمند برای ایجاد لاگین گوگل برای وب‌سایت شما است.

به‌عنوان یک کاربر وب، احتمالا مشکل مدیریت حساب‌های متعدد برای سایت‌های مختلف را تجربه کرده‌اید. مخصوصا زمانی که چندین رمز عبور برای سرویس‌های مختلف دارید، و یک وب‌سایت از شما می‌خواهد که حساب کاربری دیگری را ایجاد کنید.

برای مقابله با این موضوع، می‌توانید از قابلیت ورود سریع به سیستم بهره گرفته تا به بازدیدکنندگان اجازه دهید از اعتبار اکانت موجود خود برای باز کردن حساب در سایت شما استفاده کنند. امروزه بسیاری از وب‌سایت‌ها به کاربران امکان می‌دهند با استفاده از حساب‌های موجود خود در گوگل، فیسبوک، توییتر یا سرویس‌های محبوب دیگر لاگین کنند. این یک روش راحت برای کاربران جدید است که به جای ثبت نام به عنوان یک حساب کاربری جدید با نام کاربری و رمز عبوری دیگر، در یک سایت بصورت سریع ثبت نام کنند.

در اینجا از Google OAuth Login API استفاده می‌کنیم که به کاربران امکان می‌دهد با اکانت‌های موجود گوگل خود به وب سایت وارد شوند. البته کاربران همچنان باید بتوانند با فرم ثبت نام معمول در سایت نیز ثبت نام کنند، اما ارائه لاگین گوگل یا چیزی شبیه به آن می‌تواند به جذب کاربران کمک شایانی کند.

لاگین به سیستم از طریق گوگل چگونه کار می‌کند

ابتدا بیایید مرور مختصری بر جریان داده‌های سطح بالای این فرآیند داشته باشیم. همانطور که در نمودار زیر می‌بینید، سه موجودیت اصلی در فرآیند لاگین وجود دارد: کاربر، وب سایت پذیرنده و گوگل.

اکنون می‌خواهیم جریان کلی نحوه عملکرد ورود گوگل در سایت خود را درک کنیم.

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

وقتی روی دکمه Login With Google کلیک می‌کنند، جریان ورود به سیستم گوگل آغاز شده و کاربران را برای ورود به سایت گوگل ارجاع می‌دهد. سپس آن‌ها با اطلاعات کاربری گوگل وارد سیستم شده و پس از آن به صفحه انتخاب و تایید اکانت خود هدایت می‌شوند.

این صفحه از کاربران اجازه می‌خواهد اطلاعات حساب گوگل خود را با سایت شخص ثالث به اشتراک بگذارند. در این حالت، سایت شخص ثالث سایتی است که آن‌ها می‌خواهند از حساب گوگل خود برای ورود استفاده کنند. بنابراین دو گزینه در اختیار دارند، یا می‌توانند اجازه دهند یا آن را رد کنند.

هنگامی که آن‌ها اجازه می‌دهند اطلاعات‌شان را با سایت شخص ثالث به اشتراک بگذارند، به سایت مورد نظر برگردانده می‌شوند، جایی که فرایند ورود به سیستم گوگل را آغاز کرده‌اند.

در این مرحله کاربر با گوگل لاگین می‌شود و سایت شخص ثالث به اطلاعات پروفایل کاربر دسترسی پیدا کرده که می‌توان از آن برای ایجاد حساب کاربری و انجام ورود کاربر استفاده کرد. پس فرایند اصلی ورود به سیستم از طریق گوگل در سایت شما این چنین است. نمودار زیر یک نمای کلی از مراحلی که در مورد آن صحبت کردیم را ارائه می‌دهد.

در ادامه، این فرایند ورود به سیستم را در یک مثال کاربردی با PHP پیاده‌سازی خواهیم کرد.

راه‌اندازی پروژه برای لاگین از طریق گوگل

در این بخش، تنظیمات اولیه مورد نیاز برای ادغام ورود به سیستم از طریق گوگل با وب سایت مبتنی بر PHP را بررسی می‌کنیم.

ایجاد یک پروژه Google API

ابتدا باید یک اپلیکیشن با گوگل ایجاد کنید که به شما امکان می‌دهد سایت خود را در گوگل ثبت نمایید. این به شما اجازه می‌دهد تا اطلاعات اولیه در مورد وب سایت خود و چند جزئیات فنی دیگر را تنظیم کنید.

هنگامی که وارد گوگل شدید، کنسول Google Developers را باز کنید. همانطور که در تصویر زیر نشان داده شده است، صفحه داشبورد گوگل باز می‌شود.

از منوی بالا سمت چپ، روی لینک Select a project کلیک نمایید. همانطور که در تصویر زیر می‌بینید، باید یک پنجره جدید باز شود.

روی لینک پروژه جدید کلیک کرده تا صفحه مربوط به درخواست نام پروژه و سایر جزئیات باز شود. همانطور که در زیر مشاهده می‌کنید، جزئیات لازم را وارد نمایید.

برای ذخیره پروژه جدید خود بر روی دکمه Create کلیک کنید. سپس به صفحه داشبورد هدایت خواهید شد. روی Credentials از نوار کناری سمت چپ کلیک کرده و بعد به تب OAuth consent screen بروید.

در این صفحه باید جزئیات برنامه خود را وارد کنید مانند نام برنامه، لوگو و چند جزئیات دیگر. آن‌ها را پر کرده و ذخیره نمایید. برای انجام آزمایشی می‌توانید فقط نام برنامه را وارد کنید.

سپس روی Credentials در نوار کناری سمت چپ کلیک کنید. همانطور که در تصویر زیر نشان داده شده است، باید کادر API Credentials را در زیر تب Credentials به شما نشان دهد.

به منظور ایجاد مجموعه جدیدی از اعتبارنامه‌ها برای برنامه خود، رویClient credentials > OAuth client ID کلیک کنید. در این قسمت باید صفحه‌ای را مشاهده کنید که از شما می‌خواهد گزینه مناسب را انتخاب نمایید. بدین ترتیب گزینه Web application را انتخاب کرده و روی دکمه Create کلیک کنید. از شما خواسته می‌شود که جزئیات بیشتری در مورد درخواست خود ارائه دهید.

جزئیات نشان داده شده در تصویر بالا را وارد کرده و آن را ذخیره کنید. البته باید Redirect URI را مطابق تنظیمات برنامه خود تنظیم نمایید. این آدرسی است که کاربر پس از لاگین به آن هدایت می‌شود.

در این مرحله، اپلیکیشن کلاینت Google OAuth2 را ایجاد کرده‌ایم و اکنون باید بتوانیم از این برای یکپارچه‌سازی ورود به سیستم گوگل در سایت خود استفاده کنیم. لطفا مقادیر Client ID و Client Secret را که در طول پیکربندی برنامه در انتها مورد نیاز است، یادداشت کنید. همیشه می‌توانید Client ID و Client Secret را هنگام ویرایش برنامه خود بیابید.

نصب کتابخانه Google PHP SDK

در این بخش، نحوه نصب کتابخانه کلاینت Google PHP API را خواهیم دید. برای نصب آن دو گزینه وجود دارد:

  1. استفاده از کامپوزر (Composer)
  2. دانلود و نصب دستی فایل‌های کتابخانه

روش کامپوزر

اگر ترجیح می‌دهید آن را با استفاده از کامپوزر نصب کنید، فقط کافی است دستور زیر را اجرا نمایید.

$composer require google/apiclient:"^2.0"

و تمام.

روش دستی

اگر هم نمی‌خواهید از کامپوزر کمک بگیرید، می‌توانید آخرین نسخه پایدار را از صفحه رسمی API دانلود کنید.

در این مثال، فقط از کامپوزر استفاده کرده‌ایم.

اگر تا اینجا پیش رفته‌اید، اکنون باید اپلیکیشن گوگل خود را پیکربندی کرده و کتابخانه Google PHP API Client را نصب کرده باشید. در بخش بعدی و آخرین مرحله، نحوه استفاده از این کتابخانه در سایت PHP خود را خواهیم دید.

ادغام کتابخانه کلاینت

به یاد بیاورید که هنگام پیکربندی برنامه گوگل، باید redirect URI را در پیکربندی برنامه ارائه می‌کردیم و آن را روی مسیر https://localhost/redirect.php تنظیم می‌نمودیم. اکنون زمان ایجاد فایل redirect.php است.

ادامه دهید و redirect.php را با محتوای زیر ایجاد کنید.

<?php

require_once 'vendor/autoload.php';
// init configuration
$clientID = '<YOUR_CLIENT_ID>';
$clientSecret = '<YOUR_CLIENT_SECRET>';
$redirectUri = '<REDIRECT_URI>';

// create Client Request to access Google API
$client = new Google_Client();
$client->setClientId($clientID);
$client->setClientSecret($clientSecret);
$client->setRedirectUri($redirectUri);
$client->addScope("email");
$client->addScope("profile");
// authenticate code from Google OAuth Flow
if (isset($_GET['code'])) {
  $token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
  $client->setAccessToken($token['access_token']);
  // get profile info
  $google_oauth = new Google_Service_Oauth2($client);
  $google_account_info = $google_oauth->userinfo->get();
  $email =  $google_account_info->email;
  $name =  $google_account_info->name;

  // now you can use this profile info to create account in your website and make user logged in.
} else {
  echo "<a href='".$client->createAuthUrl()."'>Google Login</a>";
}
?>

بیایید قسمت‌های کلیدی کد را با هم مرور کنیم.

اولین کاری که باید انجام دهیم این است که فایل autoload.php را اضافه نماییم. این فایل بخشی از کامپوزر است و تضمین می‌کند، کلاس‌هایی که در اسکریپت خود استفاده می‌کنیم به صورت خودکار بارگذاری می‌شوند.

require_once 'vendor/autoload.php';

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

// init configuration
$clientID = '<YOUR_CLIENT_ID>';
$clientSecret = '<YOUR_CLIENT_SECRET>';
$redirectUri = '<REDIRECT_URI>';
 

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

// create Client Request to access Google API
$client = new Google_Client();
$client->setClientId($clientID);
$client->setClientSecret($clientSecret);
$client->setRedirectUri($redirectUri);

در مرحله بعد دامنه‌های ایمیل و پروفایل را اضافه کرده، بنابراین پس از ورود به اطلاعات اولیه پروفایل دسترسی داریم.

$client->addScope("email");
$client->addScope("profile");

در نهایت یک قطعه کد داریم که مراحل فرایند لاگین به سیستم را انجام می‌دهد.

// authenticate code from Google OAuth Flow
if (isset($_GET['code'])) {
  $token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
  $client->setAccessToken($token['access_token']);
  
  // get profile info
  $google_oauth = new Google_Service_Oauth2($client);
  $google_account_info = $google_oauth->userinfo->get();
  $email =  $google_account_info->email;
  $name =  $google_account_info->name;
 
  // now you can use this profile info to create account in your website and make user logged in.
} else {
  echo "<a href='".$client->createAuthUrl()."'>Google Login</a>";
}

در اینجا می‌خواهیم بخش else را با هم بررسی کنیم که با دسترسی مستقیم به اسکریپت فعال می‌شود. این لینکی را نمایش می‌دهد که کاربر را برای ورود به گوگل می‌برد. توجه به این نکته مهم است که ما از createAuthUrl (متدی در Google_Client) برای ساختن URL OAuth استفاده کرده‌ایم.

پس از کلیک بر روی لینک ورود با گوگل، کاربران برای لاگین به سایت گوگل هدایت می‌شوند. هنگامی که آنها وارد سیستم شدند، گوگل با ارسال متغیر کوئری استرینگ code کاربران را به سایت ما هدایت می‌کند. و این زمانی است که کد PHP در بلوک if فعال می‌شود. همچنین ما از code برای تبادل توکن دسترسی استفاده خواهیم کرد.

پس از دریافت توکن دسترسی، می‌توانیم از سرویس Google_Service_Oauth2 برای واکشی اطلاعات پروفایل کاربر لاگین شده استفاده کنیم.

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

جمع‌بندی

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

منبع

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
5 از 1 رای

/@heshmati74
عرفان حشمتی
Full-Stack Web Developer

کارشناس معماری سیستم های کامپیوتری، طراح و توسعه دهنده وب سایت

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید