使用 Google 雲端平台註冊 Oauth API,實現 Google 帳號登入功能

第三方驗證服務

第三方驗證服務是一種身份驗證方法,指的是:網站或應用程式以外部機制,為使用者提供註冊/登入等功能,而非透過本身的系統進行身分驗證。透過第三方驗證,使用者可以透過單一帳號進行登入,並簡化註冊過程、減少需要輸入的資料。常見的社群平台,例如:LINE、Google、twitter(X) 等,都提供了第三方驗證機制。

Google Cloud API

Google Cloud API 是 Google 雲端平台上提供的一套工具和服務,用於開發者建立、擴展和管理雲端應用程式。為了將 Google 提供的帳號驗證功能使用在您的網站,首先,我們必須在 Google 雲端平台上註冊一組 API;以下將為您介紹操作方式:

建立 Google Gloud 專案

前往 Google 雲端平台:API 及服務。 使用 Google 雲端平台必須使用您的 Google 帳號,請先確認您有先登入。

create-oauth-api-with-google-cloud-plarform-2024-01-17-18-28-15

點擊畫面左上方的「選取專案」按鈕後,請在浮動視窗中選取您要用來建立 API 的專案。如果您現在沒有任何專案,請點擊右上角的「新增專案」。

create-oauth-api-with-google-cloud-plarform-2024-01-17-18-37-12

進入 新增專案 頁面,請輸入「專案名稱」(使用英文字母、數字、單引號、連字號、空格或驚嘆號,長度在 4~30 個字元之間)後,按下「建立」送出。

create-oauth-api-with-google-cloud-plarform-2024-01-17-18-45-34

點擊點擊畫面左上方的「選取專案」按鈕,選取剛才建立的專案。

create-oauth-api-with-google-cloud-plarform-2024-01-17-18-55-25

建立 Oauth 應用程式

您將會進入專案控制台頁面,請點擊畫面左側的「OAuth同意畫面」。

create-oauth-api-with-google-cloud-plarform-2024-01-17-19-02-22

選擇使用者類型。因為您的網站註冊及登入需要對所有 Google 使用者開放,請選擇「外部」並按下「建立」。

create-oauth-api-with-google-cloud-plarform-2024-01-17-19-13-56

接著,進入 編輯應用程式申請 頁面。 在這裡我們將填入應用程式的各項資訊:

  • **應用程式名稱 (必填)**:將出現在 Google 登入視窗中,讓使用者辨識目前透過哪一個應用程式進行登入作業,請填入與您商家/網站相符的資訊,以增加可信度。
  • **使用者支援電子郵件 (必填)**:方便使用者與您聯絡,洽詢同意聲明相關事宜。
  • **電子郵件地址 (必填)**:方便 Google 雲端平台傳送有關服務異動的通知信給您。
create-oauth-api-with-google-cloud-plarform-2024-01-26-13-55-10

特別注意:請在「授權網域」區塊,點擊「新增網域」,並將您想要置入 Google 第三方驗證服務的頂級網域;最後,按下「儲存並繼續」。

create-oauth-api-with-google-cloud-plarform-2024-01-26-13-56-19

接下來,在【2. 範圍】及【3. 測試使用者】,同樣按下「儲存並繼續」,您會來到【4. 摘要】頁面,列出所有您設定的資訊:

create-oauth-api-with-google-cloud-plarform-2024-01-26-13-56-47

建立憑證

在左側欄位點擊「憑證」進入憑證頁面。點擊畫面上方的「+ 建立憑證」並在下拉選單中,選擇「OAuth 用戶端 ID」:

create-oauth-api-with-google-cloud-plarform-2024-01-26-13-57-21

在【應用程式類型】選擇「網頁應用程式」,隨後輸入「名稱」。這個名稱僅在 Google 雲端平台中顯示,不會顯示在您網站的使用者介面中。

create-oauth-api-with-google-cloud-plarform-2024-01-26-13-58-01

在【已授權的重新導向 URI】處,點擊「+ 新增 URI」按鈕,輸入 蓋婭科技 提供給您的【重新導向網址】。按:如果您不確定此處資訊,請與我們聯絡以便取得正確的網址。

create-oauth-api-with-google-cloud-plarform-2024-01-26-13-59-04

最後,按下「建立」完成 OAuth 用戶端建立流程。系統將跳出一個浮動視窗,列出API 連線時必須的重要資訊。

create-oauth-api-with-google-cloud-plarform-2024-01-26-13-59-28

發布應用程式

接下來,要請您將應用程式發佈到正確環境:請點擊左側欄位「OAuth 同意畫面」,並在【發布狀態】中,按下「發布應用程式」按鈕,將第三方驗證功能正式上線。

create-oauth-api-with-google-cloud-plarform-2024-01-26-13-59-58
create-oauth-api-with-google-cloud-plarform-2024-01-26-14-00-10

提供連線資訊

最後,請點擊左側欄位的「憑證」,進入【OAuth 2.0 用戶端 ID】中建立的應用程式,將 用戶端編號用戶端密鑰 欄位右側的小圖標,將會複製欄位文字。請將資提供給蓋婭資訊,讓我們進一步為您在網站上實現結合 LINE 帳號的登入/註冊功能!

create-oauth-api-with-google-cloud-plarform-2024-01-26-14-00-46
create-oauth-api-with-google-cloud-plarform-2024-01-26-14-01-05

Allen Chu

擅長 WordPress 網頁設計,將客製化開發實踐在 CMS 系統中。相信視覺和功能性同樣重要,希望把好的體驗帶給使用者。

想知道更多嗎?

填入常用的電子郵件,即可在第一時間獲取最新知識!

Subscription Form