Google OAuth Api 簡單教學

使用前準備：
1. Google Cloud Platform 帳號 (一般 google 即可申請)
2. 使用網域 (這邊以 haer0248.me 當作範例)
3. composer require google/apiclient:^2.12.1
jQuery + PHP 基本認識 (?)

首先，前往 Google Cloud Platform 建立一個專案
連結： https://console.cloud.google.com/projectcreate

上方名稱可自訂，必須為 英文字母、數字、單引號、連字號、空格或驚嘆號。

點選建立按鈕後必須等待一段時間，完成後右上方鈴鐺會通知已完成建立，並前往建立的該專案。

於左側列表點選 API 和服務 => OAuth 同意畫面
User Type 選擇【外部】
其餘查看下方圖片填寫即可，網域請填入正確網域，否則後面的 OAuth 用戶端ID 會無法成功建立。

完成後點選左側列表 API 和服務 => 憑證 => 建立憑證 => OAuth 用戶端 ID
依照下方圖片填寫即可完成：

完成後，前往 API和服務 => 憑證 查看 OAuth 2.0 用戶端 ID 部分，複製【用戶端 ID】，會長得像 xxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com

以上為 Google Cloud Platform 部分，接下為網頁端。

在要登入的頁面中加入

<div id="g_id_onload" data-client_id="<填入用戶端 ID>" data-context="use" data-ux_mode="popup" data-callback="handleCredentialResponse" data-auto_prompt="false"></div>

<div class="g_id_signin" data-type="standard" data-shape="pill" data-theme="filled_black" data-text="continue_with" data-size="large" data-logo_alignment="left"></div>

<script>
function handleCredentialResponse(response) {
  $.ajax({
    type: "POST", url: "user.php", dataType: "json",
    data: {
      token: response.credential,
    },
    success: function (data) {
      alert(data.message);
    },
    error: function (jqXHR) {
      alert('登入失敗')
    }
  })
}
</script>

以下部分為使用按鈕呼叫 (jQuery 判斷後顯示的 JS)
＊注意，此處透過 ajax Post 到指定的 PHP 頁面進行登入，回傳資料為 data. 開頭，若需要回傳資料請繼續查看下方。
＊若需要下面三項以外的資料，必須申請通過才可以取得。

按鈕點選後帳號已選擇回傳資料頁面：

header('Content-Type: application/json; charset=UTF-8');

// 把 composer 載下來的函式庫塞進來
require_once 'vendor/autoload.php';

$return = array();
if ($_SERVER['REQUEST_METHOD'] == "POST") {
  /**
    *  這邊可以填寫輸入資料庫及任何判斷或記錄於 SESSION/COOKIE 的部分，
    *  輸出一定要有一個資料，否則於前端很難除錯!
    */
  $client  = new Google_Client(['client_id' => '<填入用戶端 ID>']);
  $payload = $client->verifyIdToken($_POST['token']);

  if ($payload) { // 驗證使用者是否存在
    $id = $payload['sub']; // Google Open ID
    $name = $payload['name']; // Username
    $mail = $payload['email']; // Email

    $return['message'] = '登入成功';
  } else {
    $return['message'] = '登入失敗';
  }
} else {
  $return['message'] = '傳輸方式錯誤';
}

echo json_encode($return); // 這邊就會往前端回傳 json

若有任何錯誤及問題，歡迎到 Discord 告知！