SMS や電子メールで 2 要素認証する ASP.NET MVC 5 アプリ

作成者 : Rick Anderson

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

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

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

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

Note

警告: 続行する前に、 ログイン、電子メールの確認、パスワードのリセットを使用して、セキュリティで保護された ASP.NET MVC 5 Web アプリの作成 を完了する必要があります。 このチュートリアルVisual Studio 2013完了するには、Update 3 以降をインストールする必要があります。

  1. 新しい ASP.NET Web プロジェクトを作成し、MVC テンプレートを選択します。 Web Formsでは ASP.NET ID もサポートされているため、Web フォーム アプリでも同様の手順を実行できます。
    [New A S P dot NET Project]\(新しい A S P ドット NET プロジェクト\) ウィンドウを示すスクリーンショット。既定の認証である [個々のユーザー アカウント] が強調表示されています。
  2. 既定の認証は [個々のユーザー アカウント] のままにします。 Azure でアプリをホストする場合は、チェック ボックスをオンのままにします。 チュートリアルの後半では、Azure にデプロイします。 Azure アカウントは無料で開くことができます。
  3. SSL を 使用するようにプロジェクトを設定します。

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

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

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

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

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

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

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

    [サービス参照の追加] ウィンドウを示すスクリーンショット。[アドレス] と [名前空間] の入力バーが強調表示されています。

    Address:
    https://webservice.aspsms.com/aspsmsx2.asmx?WSDL

    名前空間:
    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 プロバイダーへのデータ転送の実装

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

    使用されている 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. 内の EnableTwoFactorAuthentication および DisableTwoFactorAuthentication アクション メソッドにManageController[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アクティブになります。
    A S P ドット NET アプリのホーム ページを示すスクリーンショット。サンプル USER I D が強調表示されています。

  11. [追加] をクリックします。
    A S P ドット NET アプリの [アカウント設定] ページを示すスクリーンショット。[なし] [電話番号] セクションの横にある [追加] が強調表示されています。

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

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

    A S P ドット NET アプリの [電話番号の追加] ページを示すスクリーンショット。サンプルの電話番号には、その下に [確認コードの送信] ボタンが入力されています。

  13. 数秒後に、確認コードを含むテキスト メッセージが表示されます。 それを入力し、[ 送信] を押します
    A S P ドット NET アプリの [電話番号の追加] ページのスクリーンショット。入力バーにサンプル検証コードが入力され、その下に [送信] ボタンが表示されています。

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

2 要素認証を有効にする

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

A S P ドット NET アプリのホーム ページを表示するスクリーンショット。サンプルの USER I D が強調表示されています。

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

A S P ドット NET アプリの [アカウント設定] ページを示すスクリーンショット。Two-Factor認証: [リンクを有効にする] セクションが強調表示されている状態で無効になっています。

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

A S P ドット NET アプリの [確認コードの送信] ページを示すスクリーンショット。[電話コード] と [Email コード] が選択されているドロップダウン メニュー。

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

2 FA の A S P ドット NET アプリの [確認] ページを示すスクリーンショット。サンプル コードの下で、[このブラウザーを記憶する] チェック ボックスが強調表示されています。

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

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

その他のリソース