ASP.NET MVC 5 アプリで SMS と電子メール Two-Factor 認証を使用する

作成者: Rick Anderson

このチュートリアルでは、Two-Factor 認証を使用して ASP.NET MVC 5 Web アプリを構築する方法について説明します。 続行 前に、ログイン、電子メールの確認、パスワードリセット を使用して、セキュリティで保護された ASP.NET MVC 5 Web アプリを作成する手順を完了する必要があります。 完成したアプリケーション は、からダウンロードできます。 ダウンロードには、電子メールまたは SMS プロバイダーを設定せずに電子メールの確認と SMS をテストできるデバッグ ヘルパーが含まれています。

このチュートリアルは、Rick Anderson (Twitter: @RickAndMSFT) によって作成されました。

• ASP.NET MVC アプリ を作成する
• 2 要素認証 の SMS を設定する
• 2 要素認証 を有効にする
• その他のリソース

ASP.NET MVC アプリを作成する

まず、Visual Studio Express 2013 for Web 以降 インストールして実行します。

1. 新しい ASP.NET Web プロジェクトを作成し、MVC テンプレートを選択します。 Web フォームでは ASP.NET ID もサポートされているため、Web フォーム アプリでも同様の手順を実行できます。
   
2. 既定の認証は、個々のユーザー アカウント のままにします。 Azure でアプリをホストする場合は、チェック ボックスをオンのままにします。 チュートリアルの後半では、Azure にデプロイします。 Azure アカウントの開設は無料です。
3. SSLを使用するように プロジェクトを設定します。

2 要素認証用に SMS を設定する

このチュートリアルでは、Twilio または ASPSMS を使用する手順を説明しますが、他の SMS プロバイダーを使用できます。

1. SMS プロバイダーを使用したユーザー アカウントの作成

   Twilio または ASPSMS アカウントを作成します。

2. 追加パッケージのインストールまたはサービス参照の追加

   Twilio:
   パッケージ マネージャー コンソールで、次のコマンドを入力します。
   Install-Package Twilio

   ASPSMS:
   次のサービス参照を追加する必要があります。

   

   住所：
   https://webservice.aspsms.com/aspsmsx2.asmx?WSDL

   Namespace：
   ASPSMSX2

3. SMS プロバイダーのユーザー資格情報の を把握する

   Twilio:
   Twilio アカウントの [ダッシュボード] タブで、アカウント SID をコピーし、認証トークンをコピーします。

   ASPSMS:
   アカウント設定から、Userkey に移動し、自己定義の パスワードと一緒にコピーします。

   これらの値は、後でキー "SMSAccountIdentification" および "SMSAccountPassword" 内の web.config ファイルに格納します。

4. SenderID/Originator を指定する

   Twilio:
   [番号] タブで、Twilio の電話番号をコピーします。

   ASPSMS:
   [の[発信者のロック解除] メニューで、1 つ以上の発信元のロックを解除するか、英数字の発信元を選択します (すべてのネットワークでサポートされていません)。

   この値は、後でキー "SMSAccountFrom" 内の web.config ファイルに格納します。

5. SMS プロバイダーの資格情報をアプリ に転送する

   アプリで資格情報と送信者の電話番号を使用できるようにします。 わかりやすくするために、これらの値を web.config ファイルに格納します。 Azure にデプロイすると、Web サイトの [構成] タブの アプリ設定 セクションに値を安全に格納できます。

   </connectionStrings>
      <appSettings>
         <add key="webpages:Version" value="3.0.0.0" />
         <!-- Markup removed for clarity. -->
         <!-- SendGrid-->
         <add key="mailAccount" value="account" />
         <add key="mailPassword" value="password" />
         <add key="SMSAccountIdentification" value="My Identification" />
         <add key="SMSAccountPassword" value="My Password" />
         <add key="SMSAccountFrom" value="+12065551234" />
      </appSettings>
     <system.web>
   

   警告

   セキュリティ - 機密データをソース コードに格納しないでください。 アカウントと資格情報は、サンプルをシンプルにするために上記のコードに追加されます。 ASP.NET と Azureにパスワードやその他の機密データをデプロイするためのベスト プラクティス 参照してください。

6. SMS プロバイダーへのデータ転送の実装

   App_Start\IdentityConfig.cs ファイルで SmsService クラスを構成します。

   使用される SMS プロバイダーに応じて、Twilio または ASPSMS セクションをアクティブ化します。

   public class SmsService : IIdentityMessageService
   {
       public Task SendAsync(IdentityMessage message)
       {
           // Twilio Begin
           //var accountSid = ConfigurationManager.AppSettings["SMSAccountIdentification"];
           //var authToken = ConfigurationManager.AppSettings["SMSAccountPassword"];
           //var fromNumber = ConfigurationManager.AppSettings["SMSAccountFrom"];
   
           //TwilioClient.Init(accountSid, authToken);
   
           //MessageResource result = MessageResource.Create(
               //new PhoneNumber(message.Destination),
               //from: new PhoneNumber(fromNumber),
              //body: message.Body
           //);
   
           ////Status is one of Queued, Sending, Sent, Failed or null if the number is not valid
            //Trace.TraceInformation(result.Status.ToString());
           ////Twilio doesn't currently have an async API, so return success.
            //return Task.FromResult(0);    
           // Twilio End
   
           // ASPSMS Begin 
           // var soapSms = new MvcPWx.ASPSMSX2.ASPSMSX2SoapClient("ASPSMSX2Soap");
           // soapSms.SendSimpleTextSMS(
           //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountIdentification"],
           //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountPassword"],
           //   message.Destination,
           //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountFrom"],
           //   message.Body);
           // soapSms.Close();
           // return Task.FromResult(0);
           // ASPSMS End
       }
   }
   

7. Views\Manage\Index.cshtml Razor ビューを更新します (注: 終了コードのコメントを削除するだけでなく、次のコードを使用してください)。

   @model MvcPWy.Models.IndexViewModel
   @{
      ViewBag.Title = "Manage";
   }
   <h2>@ViewBag.Title.</h2>
   <p class="text-success">@ViewBag.StatusMessage</p>
   <div>
      <h4>Change your account settings</h4>
      <hr />
      <dl class="dl-horizontal">
         <dt>Password:</dt>
         <dd>
            [
            @if (Model.HasPassword)
            {
               @Html.ActionLink("Change your password", "ChangePassword")
            }
            else
            {
               @Html.ActionLink("Create", "SetPassword")
            }
            ]
         </dd>
         <dt>External Logins:</dt>
         <dd>
            @Model.Logins.Count [
            @Html.ActionLink("Manage", "ManageLogins") ]
         </dd>
           <dt>Phone Number:</dt>
         <dd>
            @(Model.PhoneNumber ?? "None") [
            @if (Model.PhoneNumber != null)
            {
               @Html.ActionLink("Change", "AddPhoneNumber")
               @: &nbsp;|&nbsp;
               @Html.ActionLink("Remove", "RemovePhoneNumber")
            }
            else
            {
               @Html.ActionLink("Add", "AddPhoneNumber")
            }
            ]
         </dd>
         <dt>Two-Factor Authentication:</dt> 
         <dd>
            @if (Model.TwoFactor)
            {
               using (Html.BeginForm("DisableTwoFactorAuthentication", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
               {
                  @Html.AntiForgeryToken()
                  <text>Enabled
                     <input type="submit" value="Disable" class="btn btn-link" />
                  </text>
               }
            }
            else
            {
               using (Html.BeginForm("EnableTwoFactorAuthentication", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
               {
                  @Html.AntiForgeryToken()
                  <text>Disabled
                     <input type="submit" value="Enable" class="btn btn-link" />
                  </text>
               }
            }
         </dd>
      </dl>
   </div>
   

8. ManageController の EnableTwoFactorAuthentication および DisableTwoFactorAuthentication アクション メソッドに、[ValidateAntiForgeryToken] 属性があることを確認します。

   //
   // POST: /Manage/EnableTwoFactorAuthentication
   [HttpPost,ValidateAntiForgeryToken]
   public async Task<ActionResult> EnableTwoFactorAuthentication()
   {
       await UserManager.SetTwoFactorEnabledAsync(User.Identity.GetUserId(), true);
       var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
       if (user != null)
       {
           await SignInAsync(user, isPersistent: false);
       }
       return RedirectToAction("Index", "Manage");
   }
   //
   // POST: /Manage/DisableTwoFactorAuthentication
   [HttpPost, ValidateAntiForgeryToken]
   public async Task<ActionResult> DisableTwoFactorAuthentication()
   {
       await UserManager.SetTwoFactorEnabledAsync(User.Identity.GetUserId(), false);
       var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
       if (user != null)
       {
           await SignInAsync(user, isPersistent: false);
       }
       return RedirectToAction("Index", "Manage");
   }
   

9. アプリを実行し、以前に登録したアカウントでログインします。

10. ユーザー ID をクリックすると、Manage コントローラー内の Index アクション メソッドがアクティブになります。
    

11. [追加] をクリックします。
    

12. AddPhoneNumber アクション メソッドは、SMS メッセージを受信できる電話番号を入力するダイアログ ボックスを表示します。

    // GET: /Account/AddPhoneNumber
    public ActionResult AddPhoneNumber()
    {
       return View();
    }
    

    

13. 数秒後に、確認コードを含むテキスト メッセージが表示されます。 それを入力し、「送信」を押します。
    

14. [管理] ビューには、電話番号が追加されたことが表示されます。

2 要素認証を有効にする

テンプレートで生成されたアプリでは、UI を使用して 2 要素認証 (2FA) を有効にする必要があります。 2FA を有効にするには、ナビゲーション バーでユーザー ID (電子メール エイリアス) をクリックします。

[2FA を有効にする] をクリックします。

ログアウトしてから、もう一度ログインします。 電子メールを有効にしている場合 (前のチュートリアル参照)、2FA の SMS または電子メールを選択できます。

[コードの確認] ページが表示され、ここで (SMS または電子メールから) コードを入力できます。

[このブラウザーを記憶する] チェックボックスをオンにすると、このチェックボックスがオンになっているブラウザーとデバイスでは、2FA を使用せずにログインできます。 悪意のあるユーザーがデバイスにアクセスできない限り、2FA を有効にし、このブラウザーを記憶する をクリックすることで、信頼されていないデバイスからのすべてのアクセスに対して強力な 2FA 保護を維持しつつ、便利なワンステップパスワードアクセスを提供します。 これは、定期的に使用する任意のプライベート デバイスで実行できます。

このチュートリアルでは、新しい ASP.NET MVC アプリで 2FA を有効にする方法について簡単に説明します。 このチュートリアル 、ASP.NET ID で SMS と電子メールを使用した 2 要素認証について、サンプルの背後にあるコードについて詳しく説明します。

その他のリソース

• ASP.NET ID を使用した SMS と電子メールを使用した 2 要素認証の 2 要素認証について詳しく説明します
• ASP.NET ID の推奨リソースへのリンク
• ASP.NET ID を使用した アカウントの確認とパスワードの回復 パスワードの回復とアカウントの確認について詳しく説明します。
• MVC 5 アプリと Facebook、Twitter、LinkedIn、Google OAuth2 のサインオン このチュートリアルでは、Facebook と Google OAuth 2 の承認を使用して ASP.NET MVC 5 アプリを作成する方法について説明します。 また、ID データベースにデータを追加する方法も示します。
• メンバーシップ、OAuth、SQL Database を使用してセキュリティで保護された ASP.NET MVC アプリを Azure Webにデプロイします。 このチュートリアルでは、Azure デプロイ、ロールを使用してアプリをセキュリティで保護する方法、メンバーシップ API を使用してユーザーとロールを追加する方法、および追加のセキュリティ機能を追加します。
• OAuth 2 用 Google アプリを作成し、そのアプリをプロジェクト に接続する
• Facebook でアプリを作成し、アプリをプロジェクトに接続
• Project での SSL の設定
• C# と ASP.NET MVC 開発環境をセットアップする方法