---
# System prepended metadata

title: Google 第三方登入
tags: [Node.js 直播班 - 2023 春季班]

---

---
tags: Node.js 直播班 - 2023 春季班
---

# Google 第三方登入

* [線上範例程式碼 week8 branch](https://github.com/gonsakon/express-week4-sample/tree/feature/googleAuth)
* [Google 第三方圖示](https://whimsical.com/google-passport-6kuRrQ3ioC5mVwhaM5kngy)
* [Google 服務設計](https://console.cloud.google.com/welcome)

## NPM
* [passport](https://www.npmjs.com/package/passport)

## 圖示
![](https://hackmd.io/_uploads/S11oD9ESh.png)

## OAuth 2.0 的授權
簡單來說其實就是獲取令牌（token）的過程。OAuth 協定定義了四種獲取令牌的授權方式（authorization grant）如下：

* 授權碼模式（authorization-code）
* 隱藏模式（implicit）
* 密碼模式（password）
* 客戶端憑證模式（client credentials）



## 延伸資訊
* [使用 Express + Passport 實作一個 Google OAuth 2.0 登入](https://israynotarray.com/nodejs/20220525/790433249/)
* [前後端分離範例](https://blog.hanklu.tw/spa-api-social-loign/)
* [[筆記] 認識 OAuth 2.0：一次了解各角色、各類型流程的差異](https://medium.com/%E9%BA%A5%E5%85%8B%E7%9A%84%E5%8D%8A%E8%B7%AF%E5%87%BA%E5%AE%B6%E7%AD%86%E8%A8%98/%E7%AD%86%E8%A8%98-%E8%AA%8D%E8%AD%98-oauth-2-0-%E4%B8%80%E6%AC%A1%E4%BA%86%E8%A7%A3%E5%90%84%E8%A7%92%E8%89%B2-%E5%90%84%E9%A1%9E%E5%9E%8B%E6%B5%81%E7%A8%8B%E7%9A%84%E5%B7%AE%E7%95%B0-c42da83a6015)
* [Google 的第三方登入 (web 前端實作)](https://dwatow.github.io/2021/06-15-google-sign-in-oauth/)



## 前後端分離後端寫法

### 前端
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://accounts.google.com/o/oauth2/v2/auth?client_id=771760535711-6it451lk1m6ah82gk5rps86p7qsopkt6.apps.googleusercontent.com&redirect_uri=http://localhost:5500/googlecallback.html&response_type=code&scope=email%20profile&access_type=offline">Google 登入</a>

</body>
</html>
```
### 後端
```
router.post('/googleClient/callback', passport.authenticate('google', { session: false }), handleErrorAsync(async(req,res,next)=> {
  const user = await User.findById(req.user.id);
  generateSendJWT(user,200,res)
}))
```