Google OAuth Api 簡單教學

使用前準備:
1. Google Cloud Platform 帳號 (一般 google 即可申請)
2. 使用網域 (這邊以 haer0248.me 當作範例)
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 部分,接下為網頁端。
在 <head> 中加入

<script async defer 
src="https://apis.google.com/js/api.js" 
onload="this.onload=function(){};GoogleOAuthAPI()" onreadystatechange="if (this.readyState === 'complete') this.onload()"></script>
<script> 
function GoogleOAuthAPI() {
  gapi.load("client:auth2",  {
    callback: function() {
      gapi.client.init({
        clientId: "<這邊插入剛剛取得的用戶端 ID>",
        scope: "https://www.googleapis.com/auth/userinfo.profile"
      });
    }
  });
}
</script> 

以下部分為使用按鈕呼叫 (jQuery 判斷後顯示的 JS)
*注意,此處透過 ajax Post 到指定的 PHP 頁面進行登入,回傳資料為 data. 開頭,若需要回傳資料請繼續查看下方。
*若需要下面三項以外的資料,必須申請通過才可以取得,其他公開的請前往: https://any-api.com/googleapis_com/oauth2/docs/userinfo/oauth2_userinfo_get

<button id="google_link_btn">使用 Google 帳號登入</button>
<script>
$("button[id=google_link_btn]").click(function (){
  gapi.auth2.getAuthInstance().signIn().then(
    function(success) {
      var profile = success.getBasicProfile();
      $.ajax({
      type: "POST", url: "<請填入自己的登入 POST 頁面>", dataType: "json",
        data: {
          googlename: profile.getName(), // 取得 Google 帳號暱稱
          googleid: profile.getId(),     // 取得 Google OpenID
          gmail: profile.getEmail()      // 取得 Google 電子郵件
        },
        success: function(data) {
          // 請自行填寫回傳成功後要執行什麼
        },
        error: function(jqXHR) {
          alert("出現錯誤:" + jqXHR.status);
        }
      })
    },
    function(error) {
      alert("Google API出現錯誤");
    }
  );
});
</script>

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

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

if ($_SERVER['REQUEST_METHOD'] == "POST"){
  $googleid      = $_POST['googleid'];    // 取得 Google OpenID 
  $googlename    = $_POST['googlename'];  // 取得 Google 帳號暱稱
  $gmail         = $_POST['gmail'];       // 取得 Google 電子郵件
  
  /* 
    這邊可以填寫輸入資料庫及任何判斷或記錄於 SESSION 的部分,
    輸出一定要有一個 msg,否則於前端很難除錯!
  */
  
  $msg = '登入成功';
  
}else{
  $msg = '傳輸方式錯誤';
}
echo json_encode(array("msg" => $msg)); // 這邊就會在前端回傳 data.msg
?>

若有任何錯誤及問題,歡迎於底下留言及討論!

網頁工程師 • HTML、CSS、PHP | 關於我 → https://haer0248.me/about-me

留言前請注意:

  • 若登入社交帳號出現問題,請嘗試「啟用 Cookie」或「接受第三方 Cookie」。
  • 留言內容都會經過審核,才會發佈到網站上,我也會直接對您的留言做回覆。
  • 若嘗試使用留言洗頻,您的帳號或 IP 位置會直接被系統封鎖。
  • 請不要留下任何個人資料(姓名、電話、地址)。
  • 請針對文章內容做留言,經判斷為惡意訊息將會刪除。
  • 若須即時獲得回應,請加入我的私人 Discord 伺服器