[筆記] 如何建立Google OAuth2 用戶端 ID及使用Passport實作第三方登入驗證

建立憑證

1.先至https://console.developers.google.com
API和服務->憑證->建立憑證-> 選取OAuth用戶端ID

2.選取應用程式類型

因為我是開發網路APP所以選網頁應用程式，並且輸入應用程式的名稱，以及當google驗證程式完成後google會將我們重新導向哪條路由:已授權的重新導向 URI (EX: http:// localhost:8000/auth/google/callback)

3.取得用戶端編號及用戶端密碼

通過以上步驟最後即可於憑證頁面看到用戶端編號及用戶端密碼了

Passport實作

1.安裝套件

npm i passport passport-google-oauth2 

2.引入套件並設定

const GoogleStrategy = require('passport-google-oauth2').Strategy
//Google驗證策略
passport.use(new GoogleStrategy({
  clientID: process.env.GOOGLE_ID,
  clientSecret: process.env.GOOGLE_SECRET,
  callbackURL: process.env.GOOGLE_CALLBACK,
  (req, accessToken, refreshToken, profile, done) => {
  const { email, name } = profile._json
  User.findOne({ email })
    .then(user => {       
       if (user) return done(null, user)
       const randomPassword = Math.random().toString(36).slice(-8)
       bcrypt.genSalt(10)
         .then(salt => bcrypt.hash(randomPassword, salt))
         .then(hash => User.create({
                         name,
                         email,
                         password: hash
                       }))
                       .then(user => done(null, user))
                       .catch(err => done(err, null))
          })
     }))

1. profile為google驗證成功會回傳的使用者資訊(可以在console中印出來看),而我們要的資訊大部分都在profile._json中
2. clientID,clientSecrety則是前一個步驟拿到用戶端編號及用戶端密碼
3. callbackURL是google驗證完成後會將瀏覽器導向這條路由
4. 第十行~第二十二行: 到資料庫尋找該使用者是否已存在,若存在則回傳使用者資訊,若不存在則創建隨機密碼並把資料儲存回資料庫後再回傳使用者資訊

3.設定路由

這邊有兩條路由要設定,一條是向google請求驗證的路由,一條是驗證完成的重新導向URL

//路由可自行定義,不過照慣例通常會是: /auth/facebook, /auth/twitter等
app.get('/auth/google',  
//使用passport.authenticate並指定google驗證策略,來驗證請求 
// scope中可以帶入應用程式想要獲取的使用者資訊
passport.authenticate('google', { scope:
      [ 'email', 'profile' ] }
));
//在前面有設定已授權的重新導向URI,Google驗證成功後就會將瀏覽器導向此路由
app.get( '/auth/google/callback',
    passport.authenticate( 'google', {
        successRedirect: '/', //passport會驗證是否成功,是的話就導向首頁
        failureRedirect: '/users/login' //失敗則倒回登入頁面
}));

參考資料:

https://mherman.org/blog/social-authentication-with-passport-dot-js/#register-oauth
http://www.passportjs.org/packages/passport-google-oauth2/