PHP接Google第三方登入API最完整與最簡易範例

陳國仁

10 min readNov 22, 2023

當網路上找不到完整步驟，都是東缺一步、西缺一步，就是我自己找網路資訊來實作完成後，整理成心得文章的時候!!

電商常見，要讓消費者盡快買單，會盡量減少買單步驟，[第三方登入]就是讓消費者快速買單的優化步驟之一，所以很重要!!

要從手動輸入帳號密碼，變成快速Google第三方登入，重點在用程式取得Google提供的 [帳號]、[E-mail]、[帳號圖片]...等資訊。

直接看我已成功的google的影片(https://youtu.be/lcsCmTbV-a0)

然後，重點提示，

取得Google API資訊最重要三元素(如下圖)：
1.用戶端編號、
2.用戶端密鑰、
3.已授權的重新導向URI

步驟開始：

一、自己在

C:\xampp\htdocs

資料夾裡面，再新增一個glogin資料夾，當作這支小程式的專案資料夾。

再新增一個內容是空的 login.php，後面會把程式碼貼到這檔案裡面。

二、環境準備

XAMPP建議下載最新版來用，假如情非得已，需要用XAMPP舊版，則可能會遇到一個地雷-CA憑證檔案有問題，造成Google第三方登入時，出現很難看懂的錯誤訊息。

以下是用XAMPP舊版要先更新一下CA與確認CA的設定。

主要參考stackoverflow這一篇解法：https://stackoverflow.com/questions/55488982/failed-loading-cafile-stream-c-xampp-apache-bin-curl-ca-bundle-crt
步驟是：到curl下載cacert.pem檔(https://curl.haxx.se/ca/cacert.pem)，
再把cacert.pem複製到 C:\xampp\apache\bin 下面
把 cacert.pem 改檔名成 curl-ca-bundle.crt

三、安裝不同版本PHP對應的Google API 好用利器-Composer

下載網址：https://getcomposer.org/Composer-Setup.exe

程式要能有接收Google的帳號資訊的功能，首先，就是要先引用Google寫給大家公用的一包程式碼，而PHP有許多版本，這包Google程式碼也有對應版本，我寫本篇文章時鐵齒硬是要多花時間測試手動在github尋找對應版本的API程式函式庫後，非常極端十分之建議，用 Composer 這支程式，幫我們自動偵測電腦的PHP版本後，自動下載對應版本的Google API 函式庫，會是比較省時省力的好方法!!

以下是Win10環境，下載+安裝 Composer 的步驟截圖：

這一步要記得把 Add this PHP to your path? 打勾，可以很方便在[命令提示視窗]輸入Composer相關指令!!

安裝完 Composer，開啟Win10的命令提示視窗，輸入 composer -v 看板本，有顯示版本號碼的話，才表示有正常完成安裝。

再來，輸入以下二個關鍵的指令(建議用複製-貼上的)，讓Composer 這支程式，幫我們自動偵測電腦的PHP版本後，自動下載對應版本的Google API 函式庫，下載到我們指定的 C:\xampp\htdocs\glogin的 glogin資料夾裡面：

cd C:\xampp\htdocs\glogin

composer require google/apiclient:"^2.0"

實際執行指令的畫面如下：

執行下載完成，可以在 C:\xampp\htdocs\glogin 這路徑的資料夾裡面，看到多出一個 vendor 資料夾，與多2個檔案。

四、啟動 XAMPP的Apache 與 MySQL伺服器

五、重要步驟!! 向 Google API 網站，申請讀取帳號資訊的授權碼!!

可以用關鍵字 "Google API Console" 搜尋到 Google API 網站，如下圖：

以下是逐步操作的步驟截圖：

要申請前，Google 會要求在瀏覽器登入一個Google帳號來使用

登入完，便可以依照下面截圖，一步步來操作。

需要 滑鼠點選與輸入資訊的部分，我已經用紅色線框起來，其他則維持預設就好!!

第一項(很多步XD)，應用程式註冊的申請

下面測試使用者 這一步要記得加!! 不然後面會出現應用程式權限的錯誤喔!!

應用程式註冊的步驟申請完成後，進入第二項，也是最重要的，

Google API最重要三元素的資訊申請：
1.用戶端編號、
2.用戶端密鑰、
3.已授權的重新導向URI

步驟如下：

這邊經過測試，可以直接填寫在電腦上跑程式的 localhost相關本機電腦網址，很方便! 這邊填寫等一下我們要執行的網址即可：

http://localhost/glogin/login.php

注意一件事，設定這個返回的網址，不會立即生效!! 需要5分鐘-數小時才會生效，也就是說，實作時，做完設定後，一開始做測試時，會時好時壞，等久一點，測試過程才會越來越穩定喔!!

最後，終於出現用戶端編號，與用戶端密鑰 二項資訊了，感動阿!!等一下程式內做設定會用到，記得存起來!!(也可以按下畫面左下的[下載 JSON]做資料存到本機電腦的內容備份)。

六、直接奉上 login.php要寫的完整程式碼!! 大家可以直接複製-貼上!! 方便做測試與學習。

<?php
//載入一次 'vendor/autoload.php' 這個文件
require_once 'vendor/autoload.php';

//設定取得Google API 三要素：用戶端編號、用戶端密鑰、已授權的重新導向URI
$clientID = '1010701894579-t5b0llelhiokv69dc7088io2af52maoa.apps.googleusercontent.com';
$clientSecret = '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';
$redirectUrl = 'http://localhost/glogin/login.php';

// 建立client端 的 request需求 給 Google
$client = new Google_Client();
$client->setClientId($clientID);
$client->setClientSecret($clientSecret);
$client->setRedirectUri($redirectUrl);
$client->addScope('profile');
$client->addScope('email');

//$_GET['code']的'code' 是取得 [授權碼]
if (isset($_GET['code'])) {
    $token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
    $client->setAccessToken($token);

    //取得GOOGLE使用者帳號資訊
    $gauth = new Google_Service_Oauth2($client);
    $google_info = $gauth->userinfo->get();
    $email = $google_info->email;
    $name = $google_info->name;
    $picture = $google_info->picture;
    
    echo "<img src='". $picture."' >Welcome Name:" . $name . " , You are registered using email: " . $email;
} else {
    echo "<a href='" . $client->createAuthUrl() . "'>Login with Google</a>";
}
?>

這邊有一個地雷，就是我在編輯程式碼時，如下圖，會在必需的 Google_Service_Oauth2() 這個函數出現語法有問題的紅色提醒線，經過測試，應該是VSCode外掛中有安裝老牌的 PHP Intelephence 大象模組的誤判，假如真的遇到一直出現誤判，就暫時關閉或暫時移除該外掛模組即可!!

(讓我又多花時間找原因與測試，氣!!! )