Node.js Passport User Authentication

Node.js 身份認證:Passport 入門

上一篇文章,我練習了一些用 Node.js 設計 RESTful API 的基礎。今天再來分享一下學習使用 Passport 進行用戶認證的心得。延續對 RESTful API 的學習,這篇也用 POST 來驗證。

本文適合沒有 Passport 經驗的新手。

目錄

  1. 學習目標
  2. Passport 是什麼?
  3. Express.js 與 Body-Parser
  4. 準備工作
  5. 設定 Passport 本地策略( Local Strategy )
  6. Express 配合 Passport 進行身份認證
  7. Curl 測試認證
  8. 總結
  9. 下載程式源碼

1. 學習目標

  • 使用 Passport,透過用戶名稱與密碼進行認證。

2. Passport 是什麼?

Passport 是專門為身份認證而設計的 Node.js 中間件。為了應對認證方式多種多樣,包括最簡單的帳號密碼到各大網站提供的 API ( Facebook, Twitter, Google ),Passport 採用了一種名為策略(Strategies)的方案,也就是為每一種認證提供一個獨立的策略,你需要哪一個,才載入,以保證程式的簡洁性。這樣的設計使 Passport 在 Node.js 的社區中大受歡迎,基本上所有主流的認證方式都有對應的策略存在。

這篇文章會採用本地(Local)策略,使用帳號密碼實現用戶認證。

3. Express.js 與 Body-Parser

Express 是 Node.js 最多人使用的 Web 框架,之前我們也介紹過。 Express 和 Passport 可以完美地配合。 Passport 可以直接作為路由中間件用於 Express。 Body-Parser 在上一篇已經出現過,用來解釋傳進來的資料。

4. 準備工作

同樣地,我們建立一個新的 project ,用 npm init 來進行初始化。接著用 npm install 安裝要用到的模組:

前面提到過, Passport 把每一個策略獨立成為一個模組,因此除了 passport 模組之外,我們還需要 passport-local 來處理本地模組。

這次,我們把所有的程式放在 index.js 裡面,首先要做的就是把全部 require 寫在開頭:

注意 passport-local 的部份,直接使用它的 Strategy 屬性。

接著,建立兩個測試用戶,帶有帳號、密碼和 ID :

認證時,就用這些資料為參照。

5. 設定 Passport 本地策略( Local Strategy )

先看一下程式:

Passport 本地策略的設定主要有兩個重點:一是指定認證欄位;二是提供進行認證的 callback 函式( verify callback )。

可以看到,我們在 new LocalStrategy() 裡面,首先就指定了帳號與密碼兩個欄位;緊接著就是認證用的 callback,這個函式接受三個參數,前兩個分別是待認證的帳號與密碼,而最後的 done 是另一個 callback ,用來傳回認證結果。如果認證成功,則在第二個參數傳回用戶物件:

認證失敗的話,則第二個參數傳回 false,並在第三個參數傳回相應的錯誤訊息,例如:

最後,將這個策略加入到 Passport,並命名為 local。當然這個命名是由你自行決定,也可以有多個不同名稱的策略同時存在:

這樣 Passport 就基本上準備好了,最後一步是初始化,這要配合 Express 使用。

要瞭解 Passport 更多的設定,可以查看其官方文檔

6. Express 配合 Passport 進行身份認證

一樣先看看程式:

這裡的 BodyParser 和 Passport 對 App( Express ) 來講就是中間件( middleware )。

其中 BodyParser.urlencoded 的參數 extended 決定解釋類型。為 false 時,只能解釋 key-value 組合( String, Array );為 true 時,可解釋任意類型。這裡我們只需處理帳號與密碼的組合,而傳入的型式為 JSON,所以,也讓 BodyParser 處理一下 JSON。

關於 BodyParser 的更多說明,可以查看其官方文檔

然後,把 Passport 初始化,我們就可以開始認證。

這裡同樣使用 POST 方法,Express 自備路由功能,我們就不需要 router 模組。

要處理的 Endpoint 是 /login ,

使用中間件 Passport 的 authenticate() 方法,其策略為 local ,不使用 session (可選)。

最後的 function 是成功時執行的 callback,做的事情就是傳回 User ID。

別忘了,我們要運行伺服器,監聽 port 3000 ,Express 也幫我們處理好伺服器的部份,直接執行 listen() 就可以:

7. Curl 測試認證

用 Curl 進行 POST 的測試:

反斜線( \ )代表指令未完,下一行繼續。

-H 設定 Header,這裡指定資料類型為 JSON。

-d 後面接資料主題,這裡的格式是 JSON 。

-v 顯示詳細資訊,可省略。

我們得到結果為:

User ID 1

若帳號或密碼錯誤,會得到:

Unauthorized

若沒有提供帳號密碼等資訊,則會得到:

Bad Request

8. 總結

這個例子演示了 Passport 的基本使用方法,雖然有點陽春,但對於學習 Passport 的操作流程也是不錯的入門。學習期間也查了一下 Passport 的官方文檔,發現寫得滿淺顯易懂的,例子也相當簡洁,想要進一步瞭解 Passport 的同學不妨細讀。

知識點:

  • 理解 Passport 的策略。
  • 理解 Passport 的工作流程( workflow ):1. 設定策略;2. 將策略加入 Passport;3. 在 Express 中初始化策略;4. 作為 Express 的路由中間件進行身份認證。

9. 下載程式源碼

這篇教學的程式源碼已上傳到 Github,歡迎前往下載:

GitHub 下載

參考

分享到:

  • Veck Hsiao

    讚喔!

    請問這種後端的驗證是不是不需要自己載入 Facebook SDK?

    另外,passport 的認證方式,有辦法做到跳出 Facebook 授權的視窗給第一次透過 Facebook 登入我網站的使用者嗎?

    感謝!

    • 使用 Facebook 認證需要用到 passport-facebook 策略,可以看一下 passport 官方文檔的說明。