[C#] 如何使用 MOTP 搭配 OTP Authenticator App 產生一次性密碼登入(附範例下載)

[C#] 如何使用 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

C# 產生使用者註冊 QR Code

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

C# 產生使用者註冊 QR Code

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

接下來看一下程式碼部份

HTML

Javascript

C# Controller

程式碼使用到 QR Code 元件,使用 NuGet 安裝 ZXing.Net 元件,安裝方法可參考: [C#]QR Code 網址產生與解析

此段程式碼要先產生可讀取的 XML 檔,例如

再將此 XML 轉為 QR Code 即可。

C# Model

程式產生 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

在畫面上輸入登入ID, MOTP (手機上的一次性密碼),再驗證登入是否成功。

接下來看一下程式碼部份

HTML

Javascript

C# Controller

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

C# Model

重點整理

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

範例下載

想要完整執行此範例可點擊下載: 範例下載

推薦課程

相關學習文章

如果你在學習上有不懂的地方,可以參考線上家教服務

如果你喜歡這篇文章,請幫我在上方綠色的拍手圖示按 5 下
使用 Google 或 FB 免費登入,你的鼓勵支持我繼續創作,寫出好的文章

[加入社團一起討論] 或是 [追蹤程式教練 Mars]

3 thoughts on “[C#] 如何使用 MOTP 搭配 OTP Authenticator App 產生一次性密碼登入(附範例下載)

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

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

發佈留言

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