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

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

天矽部落格最新的網路趨勢資訊 部落格 All 客製化網頁設計與案例 RWD網頁設計 上市上櫃詳細說 網路趨勢 資源分享 網站建置與SEO 天矽科技專欄 【網站第三方登入】網頁申請Google登入憑證設定教學｜天矽科技網頁設計   要在網頁上設定使用Google第三方登入的功能，就要先到Google進行資料的設定與驗證，接著取得「用戶端ID編號」與「用戶端密碼」後，才可配合嵌入至網頁中。

網站會員第三方登入   　建設一個可以提供會員登入的網站時，許多企業人員會希望會員能夠透過「第三方」的方式註冊或登入，像是以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帳號後，即可進入GoogleAPIConsole開始建立專案。

 ▲GoogleAPIConsole →點此申請Google帳號 → 前往GoogleCloudPlatform   ➤Step2.建立專案 　進入GoogleAPIConsole點選「API和服務」，進入資訊主頁，如果沒有專案，請點「建立專案」並「新增專案名稱」。

▲API和服務   ▲建立專案   ▲新增專案名稱     ➤Step3.設定OAuth同意畫面 　接著，為了取得憑證，就需要先至「左側選單」點選設定「OAuth同意畫面」，這裡的意義在於「只有被設定進入授權網域清單的網域才能夠使用憑證」。

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

內部： 只提供給GSuite方案的帳號使用，非該機構的帳號皆無法登入使用。

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

  ▲OAuth同意畫面   ▲OAuthUserType     ➤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第三方登入教學   回上一頁 Share 文章標籤 Google 更多網路趨勢文章 【郵件設定操作】公司信箱要如何設定到手機上收發？天矽科技網頁設計 【郵件設定操作】公司信箱設定到自家電腦收發信件！天矽科技網頁設計 【教學】MetaFacebookMessenger嵌入碼在哪？如何嵌入網站？｜天矽網頁設計 信箱 客服 Line@