[ASP.NET MVC] 如何使用 MOTP 搭配 OTP Authenticator App 產生一次性密碼登入

[ASP.NET MVC] 如何使用 MOTP 搭配 OTP Authenticator App 產生一次性密碼登入

在傳統的登入系統中總是使用帳號密碼的方式驗證身份,這種方式如果密碼不小心被盜取的話,帳號資料就會有被駭入的可能性。
為了提升帳號安全性,我們可以利用手機 App 產生一次性密碼 (MOTP),做為登入的第二道密碼使用又稱雙重驗證,這樣的優點是不容易受到攻擊,需要登入密碼及一次性密碼才可以完成登入。

這次的教學重點會放在如何與 OTP Authenticator 免費 App 搭配產生一次性密碼,並在網頁上驗證一次性密碼 (OTP)。

我寫了簡單的範例,在 C# Asp.Net 網頁產生註冊 QR Code,並利用免費的 OTP Authenticator App 掃描 QR Code 產生一次性密碼 (OTP) 後,再回到網頁上驗證身份。

範例建置環境
前端架構: Vue.js, jQuery, Bootstrap
後端架構: C# ASP.Net MVC .Net Framework

此登入範例為求重點展示 MOTP 所以沒有使用資料庫,大家了解 MOTP 規則後,可以應用在實務專案上。
文末會提供範例檔下載連結。

行動一次性密碼 (MOTP) 是什麼

行動一次性密碼(英語:Mobile One-Time Password,簡稱MOTP),又稱動態密碼或單次有效密碼,利用行動裝置上產生有效期只有一次的密碼。
有效期採計時制,通常可設定為 30 秒到兩分鐘不等,時間過了之後就失效,下次需要時再產生新密碼。

MOTP 產生密碼的方法是手機取得註冊時的密鑰 (Token) 與 Pin 之後,以當下時間利用 MD5 加密後產生密碼,並取前 6 碼為一次性密碼。

有關 MOTP 的原文介紹可參考: Mobile One Time Passwords

建立 MVC 範例專案

開啟 Visual Studio 2022 選擇「建立新專案」,專案類型為「ASP.NET Web 應用程式(.NET Framework)」。

建立 MVC 範例專案

輸入專案名稱及儲存位置,選擇「MVC」類型。

完成後即會開啟 MVC 的範本專案,執行「F5」,可以瀏覽 MVC 預設初始畫面。

C# 產生使用者註冊 QR Code

在範例頁面中輸入 UserID, Pin 及 密鑰,就可以產生 OTP Authenticator 可註冊的 QR Code。

以下是完成後的畫面,

C# 產生使用者註冊 QR Code

Pin 要求為 4 碼數字。密鑰要求為 16 或 32 碼字元,範例中會隨機產生 16 碼亂數。

接下來看一下程式碼部份

引用 Vue.js 與 jquery.blockUI 底層

打開網頁版本配置頁 \Views\Shared\_Layout.cshtml,在下方的 JavaScript 引用增加兩個類別庫。

這兩個類別庫的順序要求就是要放在 jQuery 的後面。

前端 View 語法

我們新建專案後在 \Views\Home\Index.cshtml 貼上 View 語法。

修改 Controller

接著在 \Controllers\HomeController.cs 增加 Action 來回傳前端的要求。

引用 Zxing.Net 套件

BarcodeWriter 是第三方套件,貼上程式碼時會錯誤發生,VS 有建議可安裝套件解決,在建議選項內有「安裝套件 ‘ZXing.Net’ -> 尋找並安裝最新版本」,點擊後會自動安裝最新版本。

引用 Zxing.Net 套件

QrCodeEncodingOptions  一樣使用建議選擇安裝套件。

建立 Model

剛剛在 HomeController 建立的方法,有定義新的參數及回傳類別,這些類別要放在 Model 裡面,
在 Models 目錄按右鍵選「加入」->「類別」。

建立 Model

輸入名稱為「HomeModel」,按「新增」。

然後在「HomeModel」的類別裡面,再加入新的類別。

程式產生 QR Code 之後,接下來就要利用 OTP Authenticator App 來操作了。

手機下載安裝 OTP Authenticator

OTP Authenticator 是針對 Mobile-OTP,行動裝置雙因素身份驗證規則而開發的免費 App,由 Swiss SafeLab 所開發。
Android 版本在 Google Play 沒有連結,若下載連結失效,可至官網重新下載 Apk

OTP Authenticator

OTP Authenticator 註冊使用者帳號

打開 OTP Authenticator 後,左側選單點擊「Profiles」

OTP Authenticator

下方點擊「Create Profile」

點擊「Scan Profile」

OTP Authenticator

掃描網頁上提供的 QR Code
完成後即會增加使用者列表

點擊名稱後,輸入註冊時的 Pin 4位數字,例如範例上的 「0000」

OTP Authenticator

App 即會產生一次性密碼,每 30 秒會更換新密碼。此新密碼在網頁上使用者登入時會用到。

網頁使用者登入驗證 MOTP

當 App 安裝好之後,我們就可以回到網頁上來測試一下,在畫面上輸入登入 ID,然後 MOTP 就輸入手機上出現的一次性密碼,再驗證登入是否成功。

看到「登入成功」,就表示成功了,我們已經順利的從 App 產生一次性密碼,然後在網頁上驗證成功了。

在驗證 OTP 時需要確認手機的時區和伺服器時區是一樣的,這樣才能檢查過去時間內有效的 OTP。
檢核使用 timestamp 加上密鑰及 Pin 用 MD5 加密,再取前 6 碼做為一次性密碼。
範例中以輸入的 OTP 與過去 1 分鐘內其中一組密碼相等即為登入成功。

重點整理

  1. 產生使用者註冊 QR Code
  2. 安裝 OTP Authenticator
  3. OTP 掃描 QR Code
  4. 網頁登入驗證身份

範例下載

連結 GitHub 下載範例

相關學習文章

如果你在學習上有不懂的地方,需要諮詢服務,可以參考站長服務,我想辨法解決你的問題
如果文章內容有過時、不適用或錯誤的地方,幫我在下方留言通知我一下,謝謝

加入社團一起討論

關注我的 IG

3 thoughts on “[ASP.NET MVC] 如何使用 MOTP 搭配 OTP Authenticator App 產生一次性密碼登入

  1. 在驗證登入的 javascript 中, 有看到判斷UserKey, 但在 HTML中, 只有 UserID 及MOTP, 是不是我遺漏了什麼?

    1. 因為通常 UserKey 和 UserPin 會記錄在資料庫內做驗證使用,所以畫面上沒有放HTML,也是模擬正常登入只需要 UserId 及 MOTP,而驗證時會用到,所以我直接讀建立使用者區的 UserKey 及 UserPin

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

five × five =


The reCAPTCHA verification period has expired. Please reload the page.