開啟 Google Oauth2 Authorizing API requests 功能

主要參考 Google+ Platform 指南說明用來開啟Google 提供Oauth2 讓有google 帳號的人可以直接用他們的google 帳號做登入。

首先先進到自己的Google API Console 頁面。畫面如下：

一開始要先開啟一個新專案所以點擊上方的『請選取專案』後會有一個燈箱效果的畫面。然後點擊右上方的『+』做新增專案。

新增專案

新增專案

然後替專案取個你自己要的名字如下圖：

然後『建立』。最後會回到剛剛console API的畫面接著一樣從上方的『請選取專案』的下拉選單選取剛剛建立的專案名稱。

選取剛剛建立的專案

接著就會發現你的Console API 頁面的名稱就改成你選擇的專案名稱了。

然後我們接著收尋 google+ API，Google的Oauth2 相關的功能是這個api名稱，所以如果你打Oauth是找不到任何相關的API。

然後啟用它。

接著會回到console controller 畫面並且要求你『建立憑證』。

由於我主要目的是讓使用者可以透過他們的google 帳號登入網頁因此API的呼叫來源選擇『JavaScript』，存取資料選擇『使用者資料』，最後點擊下方的『我需要哪些憑證』。

然後把『已授權的JavaScript來源』設定為你的網站名稱，由於我是用angular開發所以我設定為http://localhost:4200這個網址發出來的Javascript request來做Sign In的動作。

下方的『已授權的重新導向URI』的意思就是當使用者在使用google帳號允許網站授權拿取他的資訊後，google會發出網站接著轉址到哪個地方去的request，但是因為我是採用angular 前後端分開的framework所以這個重新導向變成沒有功用，我必須自己控制Router做重新導向。但是如果你是用Django開發網站那他就會要求Django重新導向你所設定的網址去喔。

接下來這邊可以讓使用者在同意google帳號允許授權時可以看到你的網站圖案、公司名稱、產品名稱....等資訊。不過因為我是做測試用所以這邊就除了產品名稱外其他就全部跳過。接著就會拿到一組google 提供的 Client ID。

輸入產品名稱

client ID

那組ID是我們網頁要跟Google server 做ID辨識用，之後在自己寫的request API會用到。