網站Google第三方登入
【網站第三方登入】網頁申請Google登入憑證設定教學｜天矽科技網頁設計
※申請Google API服務就必須綁信用卡
網站會員第三方登入
建設一個可以提供會員登入的網站時，許多企業人員會希望會員能夠透過「第三方」的方式註冊或登入，像是以Facebook、LINE或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帳號
➤ Step2. 建立專案
進入Google API Console點選「API和服務」，進入資訊主頁，如果沒有專案，請點「建立專案」並「新增專案名稱」。
▲API和服務
▲建立專案
▲新增專案名稱
➤ Step3. 設定OAuth同意畫面
接著，為了取得憑證，就需要先至「左側選單」點選設定「OAuth同意畫面」，這裡的意義在於「只有被設定進入授權網域清單的網域才能夠使用憑證」。
點選「OAuth同意畫面」後，就會進入User Type的選項，選擇您要設定及註冊應用程式的方式，包含您的目標使用者，您只能將一個應用程式與您的專案建立關聯。
- 內部：
只提供給G Suite方案的帳號使用，非該機構的帳號皆無法登入使用。 - 外部：
提供給所有類型的 Google 帳號使用 (應用程式可能需要經過驗證，否則使用者登入時可能會出現應用程式尚未被驗證過的畫面)。
▲ OAuth同意畫面
▲ OAuth User Type
➤ Step4. 編輯應用程式註冊申請
點選建立後，即可開始設定OAuth相關資料，必填項目有應用程式名稱、使用者支援電子郵件、授權網域與開發人員電子郵件地址。
※ 注意「已授權網域」要填寫頂級網域 (tsg.com)。
▲ 編輯應用程式註冊申請
➤ Step5. 取得OAuth憑證
完成上方設定後，點選左側選單的「憑證」進入憑證頁面，接著點選上方的「+建立憑證」、「OAuth用戶端ID」。
▲ 進入憑證頁面
▲ 建立憑證並點選OAuth用戶端ID
➤ Step6. 建立 OAuth 用戶端 ID
進入後選擇應用程式類型，因為我們要做的是網頁第三方登入/註冊功能的嵌入，因此請選擇「網頁應用程式」。
點選後，填入應用程式名稱、Domain(網域) 與 登入成功後導向的URL(網址)。
※ 注意：
「已授權的重新導向URL」是當使用者確定登入授權之後，Google會用於取得 token(安全權杖) 的 code 附帶在 URL 的後面，接著要將這個 code 丟給後端程式去跟 Google 換取，取得授權資料的token(安全權杖)。
▲ 建立用戶端ID
➤ Step7. 取得用戶端ID與密碼
上面的步驟都建立好並成功後，就會獲得「用戶端ID」與「用戶端密碼」，這兩個資料一定要保管好！
接著可以在頁面中下載憑證檔案 (json 格式檔案)，這檔案是給程式產生登入網址及後續授權token 向 google 獲取使用者資訊作使用。
▲ 獲取OAuth用戶端ID密碼
▲ JSON憑證檔案
設定好的用戶端ID與密碼
如果不小心將彈出來的視窗關閉怎麼辦？
設定好的用戶端ID與密碼在哪？
◆ 在這裡：
API和服務→ 憑證→ OAuth用戶端 ID→ 點選名稱→ 進入「網頁應用程式 的用戶端 ID」頁面→ 右側就有用戶端編號、密碼與建立日期
▲ 點選憑證畫面
▲ 進入用戶端ID畫面
看更多：
➤ LINE第三方登入教學
➤ Facebook第三方登入教學
