不使用 Nuxt Auth Module，實作第三方登入Google & Facebook & Line

Published in

PeerOne Technology 皮偶玩互動科技

9 min readMay 17, 2020

網站透過第三方進行註冊和登入已經是各種網站服務的基本配備，第三方的綁定可以幫助用戶在註冊和登入時，省去繁瑣的帳密設定行為，增進用戶體驗流程的流暢性。此次文章將分享常見的第三方登入機制：Goolge、Facebook 以及 Line的透過Nuxt實作的過程。

開發環境

後端： Python / Django

前端： Vue / Nuxt

DeVops：GCP / Kubernetes

開發前準備

首先我們要先取得三個平台的Client Id，下面會簡單說明設定步驟

Line:

到Line官方開發者後台，並依照下列步驟完成前置設定

選擇你的 provider 並建立一個 Login channel

2. 輸入完基本資料後，會看到下圖頁面，並到 Basic settings 查看資訊，前端主要會用到 Channel ID。

⚠️ 另外需要注意 Permissions 的部分目前只能取得使用者的 id , 頭貼及暱稱，若需要獲取使用者的 Email 則需要另外進行信箱的驗證。

⚠️ 在OpenID Connect 點選 Apply 並進行信箱的驗證，完成後 Permissions 會多一個「OC_EMAIL」就代表成功囉。

3. 接著到 Line login 這個分頁設定 Callback URL，若要設定多組的話，直接按 Enter 把新的 URL 寫在新的一行即可。以上 Line 的部分就完成設定了！

Google:

到 GCP 選擇你的專案，選取左側菜單的「API和服務」→ 「憑證」

2. 完成下方欄位的資料

⚠️ 已授權的兩的欄位都可以用 http://localhost 方便在測試環境上開發

3. 完成後會拿到「用戶端ID」和「用戶端密鑰」，前端須記好「用戶端ID」，google的設定就完成囉！

Facebook

到臉書的開發者後台建立一個新的應用程式，並在「Facebook登入」的地方做設定後即完成。
Client id 從左側菜單「設定」→「基本資料」→「應用程式編號」取得！

⚠️ 臉書「有效的OAuth重新導向 URI」只能輸入 https 網域。除了添加網域記得也要把 callback URI 也要加上去！

套件選擇

在使用Nuxt實現第三方登入功能時，大部分開發者第一直覺就是使用 Nuxt 登入的套件 Auth Module，但考量到後端實現的方式，若使用 Auth Module 的話會欠缺彈性( 而且Line登入的部分也會卡關 )，因此以下內容，說明PeerOne如何不使用套件完成 Nuxt 第三方登入的功能

實作流程

首先需要在nuxt 專案設定好三個平台的client id

nuxt.config.js

const clientId = {
  fb: 'xxxxxxx',
  google: 'ooooo.apps.googleusercontent.com',
  line: 'zzzzzzzzz'
}
const callback_uri = 'https://www.xxx.com/callback'

並增加導向的uri在nuxt.config.js 的 env 參數中

env: {
  OAUTH_FACEBOOK: '',
  OAUTH_GOOGLE: '',
  OAUTH_LINE: ''
}

OAUTH_FACEBOOK的設定

https://www.facebook.com/v4.0/dialog/oauth?
  client_id=${clientId.fb}
  &redirect_uri=${callback_uri}
  &response_type=token
  &scope=public_profile,email

OAUTH_GOOGLE的設定

https://accounts.google.com/o/oauth2/auth?
  client_id=${clientId.fb}
  &redirect_uri=${callback_uri}
  &response_type=code
  &scope=profile+email

OAUTH_LINE的設定

https://access.line.me/oauth2/v2.1/authorize?
  client_id=${clientId.fb}
  &redirect_uri=${callback_uri}
  &response_type=code
  &scope=openid%20email%20profile
  &bot_prompt=aggressive
  &state=${自訂state}

不難發現每個平台參數大同小異，不過Line有幾個參數需要注意一下

response_type只能是code
state是必填參數
bot_prompt這個參數可以在取得使用者授權後順便讓使用者加為好友

2. 設定好參數後，我們需要讓使用者點登入按鈕後導轉到剛剛設定的uri

<button @click="handleClick('google')">Google登入</button>...handleClick (platform) {
  //判斷平台，做一些額外處理，並導轉到第三方頁面  const uri = process.env.OAUTH_GOOGLE  window.location.href = uri
}

3. 當使用者透過Google授權登入後，Google會導轉回我們之前設定的callback URI，會發現 URI 會長成下面這樣

https://www.xxxxx.com/callback?code=4%2FzQH6IYa9YQyXL6-l8Xkq2IkJQPN-rLAShvsr04cRiKEyV3GHpUUXMpkU_6ihr_VQYfSobngFH8sJBzWYFgoyk_8&scope=email%20profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile%20openid&authuser=0&prompt=none

我們需要在 nuxt 專案的 pages 目錄新增一個 callback.vue 才能對應我們的 callback URI，callback.vue 要做的事情就是擷取 code 。

⚠️ 這邊臉書回傳的 URI 比較不一樣，要截取的是#access_token的值

https://www.xxxxx.com/callback?#access_token=EAAHfuAg0TDkBAOZB4yRkdZCb1dfrwSs9LYc0NTJhXk2RNZBi6xQfzMGfnZANJzVSThYIwO5zMsHHQfKhWBYFwDAd7Wfx9mXGVb9eDnmf53Mb2KnU7MGdVqU6RLivmzgXRKudH0wT3Xz6Gc7EKOnZCaZCER88PaX3nFrvQ4TVvAmB6lMZCL57ZBUhd8DJV4ZBqr83NKAQbNWIfyQZDZD&data_access_expiration_time=1596251671&expires_in=6329

4. 實作 callback.vue

callback的畫面其實只是一個讀取中的圖片，背後要做的是拿到 token

我們會預先儲存使用者點了哪個平台的登入按鈕，因為臉書的key是access_token需要做不同的處理。

取到 token 之後我們就可以向後端發送登入請求了。後端會針對這個 token 做檢查，驗證成功後api會回傳使用者資料就代表登入成功囉。

主要邏輯的程式碼