天矽科技 line

天矽部落格最新的網路趨勢資訊

網站設計趨勢

【網站第三方登入】網頁申請Google登入憑證設定教學|天矽科技網頁設計

部落格:【網站第三方登入】網頁申請Google登入憑證設定教學|天矽科技網頁設計

 

要在網頁上設定使用Google第三方登入的功能,就要先到Google進行資料的設定與驗證,接著取得「用戶端ID編號」與「用戶端密碼」後,才可配合嵌入至網頁中。

網站會員第三方登入

 

 建設一個可以提供會員登入的網站時,許多企業人員會希望會員能夠透過「第三方」的方式註冊或登入,像是以Facebook、LINE或Google作為其工具使用,這種方式不僅對使用者來說快速又方便,對企業網站來說也能提高會員的加入意願與速度。

 那麼本篇要介紹的就是「如何申請Google的登入認證」?

Google第三方登入

▲ 響藝 Google登入功能

 

為什麼要申請憑證

 申請憑證、認證的原因是為了要確保對接的資訊是沒有問題且安全的,因此在將Google登入/註冊工具嵌入網站前,要先取得Google提供的 用戶端ID​編號 與 密碼 ,接著交由工程師做最後的串接,才能在網站中有效的連動功能。

 

申請Google第三方登入

 

步驟導覽:
Step1. 帳號申請
Step2. 建立專案
Step3. 設定OAuth同意畫面
Step4. 編輯應用程式註冊申請
Step5. 取得OAuth憑證
Step6. 建立 OAuth 用戶端 ID
Step7. 取得用戶端ID與密碼
快速查找:設定好的用戶端ID與密碼

 

Step1. 帳號申請

 在申請 Google第三方登入之前,當然要先有一個 Google的帳號,如果你沒有Googel帳號,記得先申請一組。

 有一組 Google帳號後,即可進入 Google API Console 開始建立專案。

Google API Console

 ▲ Google API Console

點此申請Google帳號

→ 前往Google Cloud Platform


 

Step2. 建立專案

 進入Google API Console點選「API和服務」,進入資訊主頁,如果沒有專案,請點「建立專案」並「新增專案名稱」。

API和服務

▲API和服務

 

建立專案

▲建立專案

 

新增專案

▲新增專案名稱

 


 

Step3. 設定OAuth同意畫面

 接著,為了取得憑證,就需要先至「左側選單」點選設定「OAuth同意畫面」,這裡的意義在於「只有被設定進入授權網域清單的網域才能夠使用憑證」。

 點選「OAuth同意畫面」後,就會進入User Type的選項,選擇您要設定及註冊應用程式的方式,包含您的目標使用者,您只能將一個應用程式與您的專案建立關聯。

  1. 內部:
    只提供給G Suite方案的帳號使用,非該機構的帳號皆無法登入使用。

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

OAuth同意畫面

▲ OAuth同意畫面

 

OAuth User Type

▲ OAuth User Type

 


 

Step4. 編輯應用程式註冊申請

 點選建立後,即可開始設定OAuth相關資料,必填項目有應用程式名稱使用者支援電子郵件授權網域開發人員電子郵件地址

※ 注意「已授權網域」要填寫頂級網域 (tsg.com)。

編輯應用程式註冊申請

▲ 編輯應用程式註冊申請

 


 

Step5. 取得OAuth憑證

 完成上方設定後,點選左側選單的「憑證」進入憑證頁面,接著點選上方的「+建立憑證」、「OAuth用戶端ID」。

建立憑證

▲ 進入憑證頁面

 

用戶端ID

▲ 建立憑證並點選OAuth用戶端ID

 


 

Step6. 建立 OAuth 用戶端 ID

 進入後選擇應用程式類型,因為我們要做的是網頁第三方登入/註冊功能的嵌入,因此請選擇「網頁應用程式」。

選取網頁應用程式

 

 點選後,填入應用程式名稱、Domain(網域) 與 登入成功後導向的URL(網址)。

※ 注意:
已授權的重新導向URL」是當使用者確定登入授權之後,Google會用於取得 token(安全權杖) 的 code 附帶在 URL 的後面,接著要將這個 code 丟給後端程式去跟 Google 換取,取得授權資料的token(安全權杖)。

建立用戶端ID

▲ 建立用戶端ID

 


 

Step7. 取得用戶端ID與密碼

 上面的步驟都建立好並成功後,就會獲得「用戶端ID」與「用戶端密碼」,這兩個資料一定要保管好!

 接著可以在頁面中下載憑證檔案 (json 格式檔案),這檔案是給程式產生登入網址及後續授權token 向 google 獲取使用者資訊作使用。

獲取ID與密碼

▲ 獲取OAuth用戶端ID密碼

 

下載JSON

▲ JSON憑證檔案

 

設定好的用戶端ID與密碼

 如果不小心將彈出來的視窗關閉怎麼辦?
 設定好的用戶端ID與密碼在哪?

在這裡:
API和服務憑證→  OAuth用戶端 ID→ 點選名稱→ 進入「網頁應用程式 的用戶端 ID」頁面→ 右側就有用戶端編號、密碼與建立日期

憑證、用戶名稱

▲ 點選憑證畫面

 

取得編號與密碼

▲ 進入用戶端ID畫面

 

看更多:
LINE第三方登入教學
Facebook第三方登入教學

 

回上一頁
信箱
客服
Line@