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

پیشنیاز این آموزش آشنایی با زبان برنامه نویسی php و برنامه نویسی صفحه ورود و ثبت نام معمولی است.

ثبت اطلاعات در کنسول گوگل

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

https://console.developers.google.com/apis/credentials

1

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

نکته: اگر قبلاً یکبار با این اکانت گوگل خود اینکار را برای یک وب سایت کرده اید، نیازی به ساخت پروژه جدید و دریافت تأییدیه از گوگل ندارید و می توانید مستقیماً به مرحله ی 12 بروید و OAuth Client جدید خود را برای سایت جدیدتان ایجاد کنید.

2

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

1. برای ساخت اولین پروژه خود روی دکمه ی create project کلیک کنید. اینها پیش نیاز سایت OAuth Client است که برای ساخت امکان “ورود و ثبت نام با گوگل” در سایت لازم است.

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

3

1. یک نام دلخواه برای پروژه خود انتخاب کنید
2. روی دکمه ی create کلیک کنید تا پروژه ی شما ساخته شود.

4

1. برای ثبت اطلاعات سایت خود، روی دکمه ی configure consent screen کلیک کنید

5

1. گزینه ی external را انتخاب کنید تا تمام کاربرانی که اکانت جیمیل دارند بتوانند از طریق گوگل به سایت شما وارد شوند.
2. روی دکمه ی create کلیک کنید

6

در این بخش باید اطلاعات سایت خود را وارد کنید.

1. یک نام دلخواه به عنوان شناسه سایت
2. یک ایمیل برای پشتیبانی سایت
3. نکته: آپلود لوگو اختیاری است اما اگر لوگو را آپلود کنید، گوگل باید سایت شما را تأیید کند که کاری زمان بر است و باید اطلاعاتی را برای اثبات درخواست خود به گوگل ارسال کنید. پس پیشنهاد می شود لوگو را آپلود نکنید و از این قسمت رد شوید.
4. آدرس صفحه اصلی سایت
5. آدرس صفحه “سیاست حریم خصوصی” در سایت
6. آدرس صفحه “قوانین” سایت
7. روی دکمه ی Add Domain کلیک کرده و آدرس دامنه را وارد کنید.
8. ایمیلی که می خواهید گوگل از طریق آن با شما ارتباط برقرار کند را وارد کنید
9. روی دکمه save and continue برای رفتن به مرحله بعد کلیک کنید

7

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

1. برای اینکار روی گزینه ی Add or remove scopes کلیک کنید.

8

پس از کلیک روی add or remove scopes این صفحه در سمت راست صفحه به صورت اسلایدی باز می شود.

1. اطلاعات دلخواه خود را تیک بزنید. انتخاب دو گزینه ی اول که ایمیل کاربر و اطلاعات پروفایل اوست کافی است.
   توجه: انتخاب scope هایی که حساس هستند باعث می شود برنامه شما وارد پروسه ی تأیید از سمت ناظرین گوگل شود پس برای جلوگیری از این امر، فقط گزینه های غیر حساس (یعنی همان دو گزینه ی اول) را تیک بزنید.
2. سپس گزینه ی update را کلیک کنید. و سپس گزینه ی save and continue را کلیک کنید تا به مرحله ی بعد بروید.

9

در ابتدای کار، سایت شما در مرحله ی “testing” یعنی مرحله ی آزمایشی قرار دارد. در این حالت شما می توانید یک لیست ایمیل از کاربرانی که می شناسید را اضافه کنید تا لینک ورود با گوگل برای تست فقط برای آنها فعال باشد و پس از تست روی این کاربران به صورت عمومی آن را فعال کنید.

1. روی Add users کلیک کرده و آدرس ایمیل های مورد نظر خود را وارد کنید.

10

در مرحله آخر، یک خلاصه از اطلاعاتی که وارد کرده اید برای شما نمایش داده می شود.

1. پس از اطمینان از صحت اطلاعات وارد شده روی دکمه ی back to dashboard کلیک کنید تا اطلاعات ثبت شود.

11

1. در اینجا وضعیت سایت خود را می توانید ببینید که در حالت Testing قرار دارد.
2. برای انتشار برنامه روی دکمه ی Publish App کلیک می کنیم. اگر تمام مسائل بالا را رعایت کرده باشید، پیغامی ظاهر می شود که به شما می گوید نیازی به تأیید از سمت گوگل ندارید. روی confirm کلیک کرده و منتظر انتشار اپ خود بمانید.
3. اکنون دوباره روی لینک credentials کلیک می کنیم تا به صفحه قبل برگردیم تا OAuth Client اصلی خود را بسازیم.

12

1. روی دکمه create credential کلیک کنید
2. روی گزینه دوم، OAuth Client ID کلیک کنید.

13

1. از منوی کشویی Application type گزینه ی Web Application را انتخاب کنید

14

1. یک نام دلخواه برای این OAuth Client انتخاب کنید.
2. روی Add Url کلیک کرده و آدرس صفحه اصلی سایت را وارد کنید.
3. روی Add Url کلیک کرده و آدرس صفحه ای که می خواهید کاربر پس از ورود به آن هدایت شود را وارد کنید. این آدرس نباید هیچ پارامتری داشته باشد. می توانید همان آدرس صفحه اصلی را بدهید یا آدرس پروفایل کاربر را و …. (این آدرس را به خاطر داشته باشید، در مراحل بعد چندین بار باید از این آدرس استفاده شود)
4. برای ثبت اطلاعات روی دکمه create کلیک کنید.

15

1. پس از ساخته شدن OAuth Client، دو کد در اختیار شما قرار می گیرد. Client ID و Client Secret. این دو کد را در جایی ذخیره کنید تا در بخش بعد که برنامه نویسی درون سایت اصلی است از آن استفاده کنیم.

کد مربوط به ورود و ثبت نام با گوگل در php

این آموزش در تاریخ 22 دی 1400 آپدیت شده است. از این پس از کتابخانه زیر استفاده می کنیم.

برای ساخت دکمه ی ورود و ثبت نام با گوگل در php از کتابخانه زیر استفاده می کنیم:

https://github.com/googleapis/google-api-php-client

composer require google/apiclient:^2.12.1

برای دانلود به صورت فایل zip از لینک زیر استفاده می کنیم. در این لینک آخرین نسخه های ارائه شده برای ورژن ها مختلف php آورده شده است.

https://github.com/googleapis/google-api-php-client/releases

پس از قرار دادن پوشه دانلود شده در پروژه،‌ فایل autoloader.php را در فایل مربوطه include‌ می کنیم. و سپس تنظیمات اولیه مربوط به اتصال به api‌ گوگل را می نویسیم:

<?php

require_once 'vendor/autoload.php';
// init configuration
$clientID = 'google_client_id';
$clientSecret = 'google_client_secret';
$redirectUri = 'google_redirect_uri';

// create Client Request to access Google API
$googleclient = new Google_Client()‎;
$googleclient->setClientId($clientID);
$googleclient->setClientSecret($clientSecret);
$googleclient->setRedirectUri($redirectUri);
$googleclient->addScope("email");
$googleclient->addScope("profile");

به جای google_clien_id و google_client_secret دو کدی که در آخر از گوگل دریافت کردیم را وارد می کنیم و به جای google_redirect_uri آدرس ریدارکتی که در هنگام ثبت سایت در گوگل وارد کردیم باید قرار داده شود.

سپس برای ساخت لینک “ورود و ثبت نام با گوگل” کد زیر را در محل دلخواه در کد می نویسیم.

<a href="<?= $googleclient->createAuthUrl()‎ ?>">ورود/ثبت نام با گوگل</a>

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

<?php
if (isset($_GET['code'])) {
    try {

        $token = $googleclient->fetchAccessTokenWithAuthCode($_GET['code']);
        $googleclient->setAccessToken($token['access_token']);
        // get profile info
        $google_oauth = new Google_Service_Oauth2($googleclient);
        $google_account_info = $google_oauth->userinfo->get()‎;
        $user_email =  $google_account_info->email;
        $first_name =  $google_account_info->name;
        
    } catch (Exception $e) {
        echo $e->getMessage()‎;
        die;
    }
}

ابتدا کد دریافتی را به متد fetchAccessTokenWithAuthCode می دهیم تا در خروجی یک token‌ دریافت کنیم. سپس مقدار مربوط به کلید access_token از آن را به متد setAccessToken ارسال می کنیم تا بتوانیم پس از آن اطلاعات کاربر را دریافت کنیم.

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

بررسی اطلاعات کاربر پس از ورود

همانطور که گفتیم، پس از ورود کاربر یک پارامتر code به آدرس redirect_url ارسال می شود و ما باید این پارامتر را در آن صفحه دریافت کنیم. این کد را می توانیم در فایل header.php که معمولاً بخش هدر تمامی صفحات را دارد بنویسیم و یا در ابتدای فایل اصلی صفحه ی redirect_url:

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