# GOOGLE 快速登入服務 申請教學

【網站第三方登入】網頁申請Google登入憑證設定教學

要在網頁上設定使用Google第三方登入的功能，就要先到Google進行資料的設定與驗證，接著取得「用戶端ID編號」與「用戶端密碼」後，才可配合嵌入至網頁中。
※申請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帳號

→ 前往Google Cloud Platform

## ➤ 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畫面