Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now

メニュー

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Authy、Node.jsおよびExpressを使用した2要素認証

この Express.js サンプルアプリケーションは、二要素認証を使用してユーザーをログインするログインシステムの構築方法を実証します。アプリケーションをローカルで実行する方法については、アプリケーションの README.md をご覧ください。

2要素認証(2FA)をWebアプリケーションに追加することで、ユーザーのデータの安全性を高めることができます。nbsp多要素認証では、まずAppへのログインを、それからユーザーのモバイルデバイスをそれぞれ検証することでユーザーの身元を決定します。

第 2 要素については、ユーザーが携帯電話を所有していることを以下のいずれかによって検証します。

  • モバイル Authy アプリへの OneTouch プッシュ通知をユーザーに送信する
  • モバイル Authy アプリを通じてユーザーにトークンを送信する
  • Twilio 経由で Authy を使って送信されたテキストメッセージでワンタイムトークンをユーザーに送信する

VMwareがAuthy 2FAを使用してエンタープライズモビリティー管理ソリューションをセキュアにしているか見てみましょう。

ここをクリックしてチュートリアルをはじめましょう!

Authy の設定

まだ Authy にサインアップしていない場合は、ここでサインアップします。最初のアプリケーションを作成し、任意の名前を付けます。アプリケーションを作成すると、プロダクション API キーがダッシュボードに表示されます。

Authy API キーを用意したら、このイニシャライザーファイルに格納します。

        
        
        
        
        config.js

        Authyの構成

        config.js

        Express アプリを設定したので、ユーザーを Authy に登録する方法を見てみましょう。

        Authyにユーザーを登録する

        ユーザーをAuthyに登録する

        新しいユーザーの作成時には、そのユーザーを Authy にも登録します。

        All Authy needs to get a user set up for your application is that user's email, phone number and country code. We need to make sure this information is required when the user signs up.

        ユーザーを Authy に登録すると、そのユーザーの authyId として保存する id が返されます。これは、Authy でユーザーのアイデンティティを確認する方法となるため、非常に重要です。

              
              
              
              
              models/User.js
              OneTouchでのユーザーのログイン方法を確認する

              Authy OneTouchでログインする

              When a user attempts to log in to our website, a second form of identification is needed. Let's take a look at Authy's OneTouch verification first.

              OneTouch は以下のように機能します。

              • ユーザーへのOneTouch承認リクエストの送信を試みます。
              • ユーザー の OneTouch が有効になっている場合は、 success メッセージが返される
              • ユーザーが Authy アプリで「Approve」を押す
              • Authy は 'Approved' ステータスを持つアプリに POST リクエストを発行する
              • ユーザーをログインさせる
                    
                    
                    
                    
                    api/sessions.js
                    OneTouchリクエストの送信方法

                    OneTouchリクエストを送信する

                    ユーザーがログインしたら、直ちに OneTouch でアイデンティティの検証を試みます。ユーザーが OneTouch デバイスを持っていない場合はグレースフルにフォールバックしますが、試してみるまでは分かりません。

                    Authyでは、皆さんのOneTouchリクエストの詳細について渡すことができます。 それはメッセージ、ロゴ、あるいその他の詳細を送信することができます。 details['some_detail']を追加することで、簡単に任意の数の詳細を送信できます。 金銭の振込の承認のためのOneTouchリクエストの送信という以下のようなシナリオが考えられます:

                    details = {
                      message: "Request to send money to Jarod's vault",
                      from: "Jarod",
                      amount: "1,000,000",
                      currency: "Galleons"
                    }
                    
                          
                          
                          
                          
                          models/User.js

                          メモ: ユーザーの2要素認証プロセスのステータスを確認する何らかの方法が必要です。 今回の場合はUser.authyStatus属性を更新することでこれを行います。 ユーザーがログインする前にこれをリセットすることが重要です。

                          コールバックエンドポイントの登録方法を確認する

                          OneTouchコールバックを構成する

                          OneTouch リクエストの送信後にユーザーが何を行ったのかをアプリで認識するためには、コールバックエンドポイントを Authy に登録する必要があります。

                                
                                
                                
                                
                                api/sessions.js

                                Here in our callback, we look up the user using the authy_id sent with the Authy POST request. At this point we would ideally use a websocket to let our client know that we received a response from Authy. However, for this version we're going to keep it simple and just update the authyStatus on the user. Now all our client-side code needs to do is check for user.authyStatus.approved before logging in the user.

                                非同期で認証を処理する

                                2要素認証を非同期で処理する

                                この例のユーザーインターフェイスは、Backbone と jQuery を使って記述した単一ページのアプリケーションです。

                                サーバーサイドで何が起こっているのかについてはすでに見てきましたので、次に JavaScript がそれらのサーバーエンドポイントとどのように連係しているのかを見てみましょう。

                                まず、送信されたログインフォームをハイジャックし、Ajax を使用して /session コントローラーにデータを渡します。そのエンドポイントの応答方法に応じて、ユーザーにトークンを求めるか、OneTouch レスポンスを待ちます。

                                OneTouchのレスポンスが期待できる場合、OneTouchのログインが承認または否認されるまで/authy/statusにポーリングを開始します。 このコントローラーを確認し、何が起こっているか見てみましょう。

                                      
                                      
                                      
                                      
                                      public/app/views/Login.js

                                      二要素をブラウザーで処理する

                                      public/app/views/Login.js
                                      OneTouch失敗時のためのトークンへのフォールバック

                                      Authyトークンへのフォールバック

                                      ここは、JavaScript がポーリングしているエンドポイントです。JavaScript は、ユーザーステータスが 'Approved' または 'Denied' になるのを待っています。ユーザーが OneTouch リクエストを承認した場合は、セッションを confirmed として保存し、それによってユーザーを正式にログインさせます。

                                      リクエストが拒否された場合は、/verify ページをレンダリングし、トークンを使ってログインすることをユーザーに求めます。

                                            
                                            
                                            
                                            
                                            api/sessions.js

                                            では、トークンで二要素を処理する方法を見てみましょう。

                                            ワンタイムトークンを送信する

                                            2FA トークンの送信

                                            ユーザーモデルと関連付けられている Authy ユーザー ID があれば、SMS 検証トークンをユーザーの電話に送信するようにリクエストを発行できます。Authy はトークン検証をモバイルアプリでもサポートします。そのため、ユーザーがそのアプリを持っている場合、デフォルトでは SMS の代わりにプッシュ通知を送信します。

                                            必要に応じて、ユーザーインターフェイス上で複数回このメソッドを呼び出すことができます。 これはユーザーがWebフォーム上で「コードを再送」ボタンをクリックするたびに実行されます。

                                                  
                                                  
                                                  
                                                  
                                                  models/User.js
                                                  コードの検証方法

                                                  コードを検証する

                                                  Expressのルートハンドラーは検証を行うためにフォームに送信されたコードを取得します。 connectミドルウェア関数がこのハンドラーの前に実行され、このセッションに関連づけられたユーザーを表すMongooseモデルインスタンスを含むrequestオブジェクトにuserプロパティーを追加します。 Userモデル上のverifyAuthyTokenを使用して、ユーザーから送信されたコードが正当かどうか確認します。

                                                        
                                                        
                                                        
                                                        
                                                        api/sessions.js

                                                        これで終わりです! 3 つの異なるメソッドと最新の Authy テクノロジーを使用して二要素認証を実装しました。

                                                        関連トピック

                                                        関連トピック

                                                        Twilio を使う Node.js 開発者であれば、他のチュートリアルも調べてみてください。

                                                        アカウント認証

                                                        ユーザーの携帯電話を検証することで、ログインシステムのセキュリティーを強化します。

                                                        SMS を介したサーバー通知

                                                        E メールよりも早く届き、ブロックされにくいテキストメッセージはタイムリーなアラートや通知に最適です。サーバー管理者に SMS・MMS で通知を送る方法を学びます。

                                                        これは役に立ちましたか?

                                                        Thanks for checking out this tutorial! If you have any feedback to share with us, we'd love to hear it. Connect with us on Twitter and let us know what you build!

                                                        Jarod Reyes Jose Oliveros Agustin Camino Andrew Baker Kat King
                                                        Rate this page:

                                                        ヘルプが必要ですか?

                                                        誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。