最近想試試串接第三方登入，所以就去看看google的文件研究一下，但真的要更瞭解運作還是乖乖了解一下OAuth 2.0 會比較好，下面放幾篇
- Yu-Cheng Chuang大大的13篇blog(但我還沒看完)www
簡報整合版 : https://speakerdeck.com/chitsaou/jian-dan-yi-dong-de-oauth-2-dot-0
- Mike大大這篇
但這邊就已達成目標為目的，來實作就這樣啦開始唄~~下面是分隔線
依照官方文件串接前必須先去申請授權憑證，所以要做以下的步驟
- Go to the Credentials page.
2. 點擊創建憑據> OAuth客戶端ID 。
3. 選擇Web應用程序應用程序類型。
4. 為您的OAuth 2.0客戶端命名，然後點擊創建
建立好後會拿一組client ID 跟 client Secret
(小心不要外洩 ，不然會被壞壞喔~~)
OK事先準備完成，接下來要完成第三方登入這邊有兩個方法，
- 按照官方文件先看這篇設定button ，再看這篇設定後端
- 依靠第三方套件passport-google-oauth20來幫你處理
這邊前置設定會建立一個index.html和用express建立的web sever =>app.js後面用passport也是沿用一樣的設定
那就先來官方的
前端設定:
- 加入官方套件 : " <script src=”https://apis.google.com/js/platform.js" async defer></script>"
- 放上妳申請的client_Id: "<meta name=”google-signin-client_id” content=”這裡是妳申請的client_Id”>"
- 加入官方給的第三方登入按鈕: <div class=”g-signin2" data-onsuccess=”onSignIn”></div>
- 加入script點擊的時候觸發事件onSignIn
- 成功授權拿到token後，用axios POST到後端(我設 http://localhost:3000/auth/google)去做驗證
後端設定
1. 依照官方文件引入以下
const { OAuth2Client } = require('google-auth-library')
const CLIENT_ID = '妳申請的client_Id放在這'
const client = new OAuth2Client(CLIENT_ID)2. 使用套件的方法去對前端傳入 id_token 去做認證
const token = req.body.id_token
const ticket = await client.verifyIdToken({
idToken: token,
audience: CLIENT_ID
})3. 驗證完就會拿回來的使用者資料 ticket，如以下format(官方範例)
4. 拿到使用者的資訊後，就能存入資料庫和session等等個人化的處理
利用Passport處理
先回到https://console.cloud.google.com/apis/credentials 憑證內加入重新導向的URL，這hen重要
前端設定:
這邊只要改一點，只需要放上登入按鈕，可以自己客製，路由依照個人選擇這裡是設"http://localhost:3000/auth/google"
後端設定
- 新增passport.js去做相關設定
passport.use( new GoogleStrategy({...}))
新增google strategy的設定，使用者授權通過後，會依照這裡面的邏輯設定執行，所以會在這邊將使用者資訊存到資料庫，再看有沒有後續需要利用的資料，用 done(null, “妳想要的資料”)回傳出去，且會包在req.user內。
其他的小細節，像是參數profile，這是由client端利用scope去指定想要的資料，使用者同意後，google依照妳指定的資料回傳給妳，會包在profile._json中。
passport.serializeUser & passport.deserializeUser
本例是將登入狀態存到session中，這兩個method是一個節省儲存空間的手段，如下圖，只在session內留下能代表該資料的key，需要使用者資料的時候，再去資料庫用key找出使用者資訊
2. 設定app.js相關設定
這裡就可以好好講一下整個認證拿資料的過程以下
- 前端按下登入按鈕，會轉到指定路由"auth/google"
- 後端: 會依照google strategy的需求，去向google要資料
使用者: 使用者會看到授權畫面，按下確定後 - google會把妳透過scope開的資料傳到rediret_url就是"/auth/google/callback"，進行google strategy包的那串callback:
(accessToken, refreshToken, profile, done) => {
….
} - 待依照callback 邏輯將資料存到資料庫，回傳需要的資料後，就會幫妳轉只到指定的路由"/success"
其他像是 passport.session、passport.initialize 、express.session，因為本例是利用session來儲存登入or 未登入狀態，所以詳情請去看passport的官方網站解釋就不做贅述啦~~
另外存入資料庫方面，就沒特別引資料庫進來，而是做一個簡化放在passport.js的users物件中。
以上就是實作流程啦，下一篇再來透過google 的第三方登入，來看看Oath 2.0 的其中一種Authorization Code，有實作一次整個很有感~~
886
