Node.jsとExpressで二要素認証を追加する方法

二要素認証とは、パスワードのような「知っているもの」と、モバイルデバイスの認証トークンのような「持っているもの」の両方をユーザーが必要とするパターンを指す。

このチュートリアルでは、Vonage Verify APIとExpress.jsを使用して検証トークンシステムを実装する方法を説明します。

アプリケーションには3つのページがある。携帯電話番号の入力を求める最初のページ、送られてきたコードを入力するページ、そして最後にコードが正しいかどうか、認証が成功したかどうかを確認するページだ。

The first diagram shows a page that asks for a phone number and has a button. The second diagram shows a code entry form and a cancel button. The third is a success page.

完成したコード例は次のサイトで入手できる。 https://github.com/nexmo-community/verify-node-express

前提条件

• Node.jsマシンにインストールされている

セットアップ

新しいディレクトリを作成し、ターミナルで開く。を実行する。 npm init -yを実行して package.jsonファイルを作成し npm install express body-parser nunjucks nexmo.

ファイルを作成し index.jsファイルを作成し、依存関係を設定する：

const app = require('express')()
const bodyParser = require('body-parser')
const nunjucks = require('nunjucks')
const Nexmo = require('nexmo')

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
nunjucks.configure('views', { express: app })

const nexmo = new Nexmo({ 
  apiKey: 'API KEY FROM DASHBOARD',
  apiSecret: 'API SECRET FROM DASHBOARD'
})

// Other code will go here

app.listen(3000)

Nunjucksでは、テンプレートにデータを渡す際に {{ variable }}構文を使ってテンプレートにデータを渡すことができます。ディレクトリにあるファイルを自動的にパースするように設定されています。 viewsディレクトリにあるファイルを自動的に解析するように設定されており app.

ランディングページの作成

というディレクトリを作成し viewsというディレクトリを作成し index.htmlファイルを作成する：

{{ message }}

<form method="post" action="verify">
  <input name="number" type="tel">
  <button>Get code</button>
</form>

でルートを作成します。 index.jsにルートを作成します：

app.get('/', (req, res) => { 
  res.render('index.html', { message: 'Hello, world!' }) 
})

ターミナルで node index.jsを実行し、ブラウザで localhost:3000をブラウザで開く。コード中の {{ message }}の代わりに、メッセージがページ上部に入力されていることに注目してください。

A webpage showing the form and the Hello World message

検証リクエストの作成

のフォームは index.htmlにPOSTリクエストを送信します。 /verifyに送信します。これを処理する新しいルートを index.js:

app.post('/verify', (req, res) => {
  nexmo.verify.request({
    number: req.body.number,
    brand: 'ACME Corp'
  }, (error, result) => {
    if(result.status != 0) {
      res.render('index.html', { message: result.error_text })
    } else {
      res.render('check.html', { requestId: result.request_id })
    }
  })
})

デフォルトでは ワークフロー1これはSMSを送信し、コードを読み出すためにコールし、そしてまたコールする。最後のステップは、全リクエストが終了する5分前に待機する。をオプションとして渡すことができます。 workflow_idをオプションとして渡すことができる。

結果には statusプロパティが含まれます - 0はアクションが成功したことを意味し、それ以外はエラーがあったことを意味します。 index.htmlページに渡されます。成功した場合 check.htmlがレンダリングされます。

コードを確認する

作成 check.htmlディレクトリに viewsディレクトリに作成する：

<form method="post" action="check">
  <input name="code" placeholder="Enter code">
  <input name="requestId" type="hidden" value="{{ requestId }}">
  <button>Verify</button>
</form>

コードが正しいかどうかをチェックするには、コードと同様にリクエストIDが必要である。と同じ方法で {{message}}と同じ方法で、隠しフィールド requestIdの値が動的に提供されます。

Source code showing the request ID inserted as the value for the hidden input

前と同じように、これはPOSTリクエストを /checkエンドポイントに POST リクエストを送信します。 action属性で指定されているように、エンドポイントに POST リクエストを送信します。

に新しいエンドポイントを作成する。 index.js:

app.post('/check', (req, res) => {
  nexmo.verify.check({
    request_id: req.body.requestId,
    code: req.body.code
  }, (error, result) => {
    if(result.status != 0) {
      res.render('index.html', { message: result.error_text })
    } else {
      res.render('success.html')
    }
  })
})

返された statusが0の場合、チェックは成功し、検証は完了する。を作成する。 success.htmlファイルを viewsフォルダにファイルを作成する：

<h1>🎉 Success! 🎉</h1>

次はどうする？

2FAの導入、おめでとうございます。それが楽しい経験であったことに同意していただけることを願っています。

プロダクションでは、さらに考慮しなければならないことがある：

• エラーやゼロ以外のステータスコードの処理をより堅牢に。

• 進行中の検証をキャンセルする機能を提供すること。

• ユーザーがSMSと通話ベースのコード配信のどちらを好むかを指定できるようにする。

• Vonage 番号インサイト APIを使用して、有効な電話番号のみが Verify API に渡されるようにします。

最終プロジェクトは下記でご覧いただけます。 https://github.com/nexmo-community/verify-node-express

これまで通り、サポートが必要な場合はお気軽に Vonage開発者コミュニティSlack.そこでお会いできることを楽しみにしています。