[教學] Google OAuth 2.0 申請與使用指南

      在〈[教學] Google OAuth 2.0 申請與使用指南〉中尚無留言

現在 Google 有很多應用資源，而如果有軟體想要存取使用者的資料（例如：想要實作使用 Google 帳戶登入需要使用者的信箱與姓名），必須透過 OAuth 授權取得 token，再使用 token 去與 google 拿該使用者授權的資源，本篇教學如何申請 Google OAuth 2.0 的憑證並且如何使用該憑證來向使用者取得授權。

建立專案

首先打開 Google API Console

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

如果沒有專案，點 [建立] 按鈕

建立自己想要的專案名稱

設定 OAuth 同意畫面

在取得憑證前，需要先設定 [OAuth 同意畫面]

因為只有被設定進 [授權網域清單] 的網域才能夠使用憑證

在專案頁面面點左邊的 [OAuth 同意畫面]

會有兩種選擇分別為：

  • 內部：只提供給使用 G Suite 方案的帳號使用，非該機構的帳號皆無法登入使用

  • 外部：提供給所有類型的 Google 帳號使用 (應用程式可能需要經過驗證，否則使用者登入時可能會出現應用程式尚未被驗證過的畫面)

接著設定 OAuth 相關資料，這邊 [應用程式名稱] 以及 [已授權網域] 是必填的，而 [已授權網域] 要填寫頂級網域，填寫完畢儲存便完成此步驟

取得 OAuth 憑證

進入專案頁面點左邊的 [憑證]，接著點建立憑證

點選 [OAuth 用戶端 ID]

接著要選擇應用程式類型，這邊 Demo 的需求是 Web 應用所以選擇 [網路應用程式]，並且填寫自己的應用程式 domain 以及 登入成功後導向的 URI

※ 注意：[已授權的重新導向URI] 是當使用者確定登入授權之後，Google 會將用於取得 token 的 code 附帶在 URL 的後面，接著要將這個 code 丟給後端程式去跟 Google 換取取得授權資料的 token

成功後會取得用戶端 ID 以及用戶端密碼 (這兩個資料一定要保管好)

接著可以在頁面中下載憑證檔案 (一個 json 格式檔案)，這檔案是給程式用於產生登入網址以及之後利用授權的 token 向 google 取得使用者資訊使用

程式實作

使用者依據自己環境選擇使用的程式語言

官方提供的不同程式語言 Library：https://developers.google.com/api-client-library

而這邊以 PHP 程式碼作範例

※ 使用者可以進入此網址將已授權的權限註銷掉： https://myaccount.google.com/permissions?hl=zh_TW

安裝 library

composer require google/apiclient

產生取得授權用的登入 URL 程式碼

$client = new Google_Client();
// 設定憑證 (前面下載的 json 檔)
$client->setAuthConfig(__DIR__  . '/../client_secret.json');
// 這邊要填寫接受 code 的 API (必須與憑證中設定的網址完全相同)
$client->setRedirectUri('http://your-web.com/recive-oauth-code.php');
// 需要授權取得的資源
$client->addScope('https://www.googleapis.com/auth/userinfo.email');
$client->addScope('https://www.googleapis.com/auth/userinfo.profile');
// 產生 URL 給使用者
$url = $client->createAuthUrl();

使用取得的 code 去取得使用者資源

$client = new Google_Client();
// 設定憑證 (前面下載的 json 檔)
$client->setAuthConfig(__DIR__  . '/../client_secret.json');
// 使用者登入後 redirect 過來附帶的 code
$client->authenticate($_GET['code']);

// 使用 Service 去取得使用者資訊以及 email
$service = new Google_Service_Oauth2($client);
$user_info = $service->userinfo->get();

$open_id = $user_info->id;
$email = $user_info->email;
$name = $user_info->name;
$photo_picture = $user_info->picture;

發表迴響