یکپارچه سازی صفحه ورود گوگل (Google Login) با وبسایت PHP – از صفر تا صد

در این مقاله قصد داریم به توضیح شیوه یکپارچه‌سازی صفحه ورود گوگل در وب‌سایت PHP بپردازیم. ما از API به نام OAuth گوگل استفاده می‌کنیم که روشی آسان و قدرتمند برای ورود به یک وب‌سایت با حساب گوگل محسوب می‌شود.

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

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

ما در این مقاله از API ورود OAuth گوگل استفاده می‌کنیم تا کاربران وب‌سایتمان بتوانند با استفاده از اطلاعات حساب گوگل خود وارد وب‌سایت ما شوند. البته کاربران همچنان می‌توانند با استفاده از فرم ثبت نام معمولی وب‌سایت ثبت نام کنند، اما ارائه سرویس ورود گوگل یا چیزی مانند آن می‌تواند به حفظ نرخ «نگهداشت کاربر» (user retention) کمک کند.

طرز کار ورود گوگل چگونه است؟

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

فیلم آموزش پروژه محور PHP و MySQL – پیاده سازی انواع لاگین و ثبت نام در فرادرس

کلیک کنید

زمانی که کاربر روی دکمه Login With Google کلیک کند، یک گردش کار ورود گوگل آغاز می‌شود که کاربر را به سایت گوگل می‌برد تا وارد حساب خود شود. هنگامی که کاربر به صفحه مربوطه منتقل شود، اطلاعات حساب گوگل خود را وارد می‌کند و سپس به صفحه «کسب رضایت» (consent) هدایت خواهد شد. در صفحه کسب رضایت از کاربر سؤال می‌شود که آیا اجازه اشتراک اطلاعات حساب گوگل خود با وب‌سایت شخص ثالث را می‌دهد. در این حالت وب‌سایت شخص ثالث همان سایتی است که کاربر می‌خواهد با اطلاعات حساب گوگل خود در آن وارد شود. کاربر در این مرحله دو گزینه دارد: یا موافقت و یا مخالفت می‌کند.

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

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

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

در این بخش با مراحل تنظیم ابتدایی که برای یکپارچه‌سازی ورود گوگل در یک وب‌سایت PHP مورد نیاز است آشنا خواهیم شد.

ایجاد یک پروژه API گوگل

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

زمانی که وارد حساب گوگل خود شدید، به صفحه «کنسول توسعه‌دهندگان گوگل» (Google Developers Console) (+) بروید. بدین ترتیب صفحه داشبورد گوگل چنان که در تصویر زیر ملاحظه می‌کنید، باز می‌شود:

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

روی لینک New Project کلیک کنید و نام پروژه و جزییات دیگر را در آن وارد کنید. جزییات ضروری را مطابق تصویر زیر وارد کنید:

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

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

سپس روی Credentials در نوار سمت چپ کلیک کنید. این کار موجب می‌شود که کادر API Credentials زیر برگه Credentials مانند تصویر زیر نمایان شود:

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

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

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

نصب کتابخانه کلاینت SDK گوگل مربوط به PHP

در این بخش باید کتابخانه کلاینت SDK گوگل مربوط به PHP را نصب کنیم. دو روش به این منظور وجود دارد:

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

روش Composer

اگر ترجیح می‌دهید کتابخانه مزبور را از طریق Composer نصب کنید، کافی است دستور زیر را اجرا کنید:

$composer require google/apiclient:"^2.0"

به همین راحتی کتابخانه SDK گوگل نصب می‌شود.

دانلود فایل‌ها

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

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

یکپارچه‌سازی کتابخانه PHP

اگر به خاطر داشته باشید، وقتی در بخش قبلی مشغول پیکربندی اپلیکیشن گوگل بودیم، از ما درخواست شد که redirect URL را در پیکربندی اپلیکیشن وارد کنیم و ما آن را طوری تنظیم کردیم که به آدرس http://localhost/redirect.php باز هدایت شود. اینک زمان آن رسیده است که فایل را بسازیم.

بدین ترتیب فایل را با محتوای زیر ایجاد کنید:

1<?php
2require_once 'vendor/autoload.php';
3 
4// init configuration
5$clientID = '<YOUR_CLIENT_ID>';
6$clientSecret = '<YOUR_CLIENT_SECRET>';
7$redirectUri = '<REDIRECT_URI>';
8  
9// create Client Request to access Google API
10$client = new Google_Client();
11$client->setClientId($clientID);
12$client->setClientSecret($clientSecret);
13$client->setRedirectUri($redirectUri);
14$client->addScope("email");
15$client->addScope("profile");
16 
17// authenticate code from Google OAuth Flow
18if (isset($_GET['code'])) {
19  $token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
20  $client->setAccessToken($token['access_token']);
21  
22  // get profile info
23  $google_oauth = new Google_Service_Oauth2($client);
24  $google_account_info = $google_oauth->userinfo->get();
25  $email =  $google_account_info->email;
26  $name =  $google_account_info->name;
27 
28  // now you can use this profile info to create account in your website and make user logged in.
29} else {
30  echo "<a href='".$client->createAuthUrl()."'>Google Login</a>";
31}
32?>

در ادامه بخش‌های کلیدی کد فوق را بررسی می‌کنیم.

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

require_once 'vendor/autoload.php';

سپس یک بخش پیکربندی وجود دارد که در آن پیکربندی اپلیکیشن با تنظیم موارد مقتضی مقداردهی می‌شود. البته توجه داشته باشید که شما باید جاهای خالی را با مقادیر مربوط به خود پر کنید.

1// init configuration
2$clientID = '<YOUR_CLIENT_ID>';
3$clientSecret = '<YOUR_CLIENT_SECRET>';
4$redirectUri = '<REDIRECT_URI>';

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

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

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

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

در نهایت یک بخش از کد داریم که گردش کار ورود را اجرا می‌کند.

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

ابتدا بخش else را بررسی می‌کنیم. این بخش زمانی تحریک می‌شود که مستقیماً به اسکریپت دسترسی داشته باشید. این بخش یک لینک را نمایش می‌دهد که کاربر را به صفحه ورود گوگل هدایت می‌کند. لازم به ذکر است که ما از متد createAuthUrl در شیء برای ساختن URL مربوط به OAuth استفاده کرده‌ایم.

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

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

بدین ترتیب در این روش به اطلاعات پروفایل کاربری که از طریق حساب گوگل وارد شده دسترسی خواهیم داشت. می‌توان از این اطلاعات برای ایجاد حساب در سایت استفاده کرد و یا این که آن‌ها را در یک «نشست» (Session) ذخیره کرد. اساساً این به شما بستگی دارد که از اطلاعات برگشتی از گوگل چگونه استفاده کنید.

سخن پایانی

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

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های برنامه‌نویسی PHP
• گنجینه برنامه نویسی PHP
• مجموعه آموزش‌های برنامه‌‌نویسی
• برنامه‌نویسی PHP و هر آنچه برای شروع باید بدانید — آموزش جامع
• ساخت یک فرم تماس با PHP — از صفر تا صد

==