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

[アーティクル]
02/15/2023

このチュートリアルでは、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 アプリを作成する

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

Note

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

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

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

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

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

Twilio または ASPSMS アカウントを作成します。
追加のパッケージのインストールまたはサービス参照の追加

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

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

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

名前空間:
ASPSMSX2
SMS プロバイダーユーザーの資格情報の把握

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

ASPSMS:
アカウント設定から[Userkey]$ ユーザーキー$ に移動し、自己定義パスワードと共にコピー します。

これらの値は、後でキー"SMSAccountIdentification"と "SMSAccountPassword" 内の web.config ファイルに格納します。
SenderID または Originator の指定

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

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

この値は、後でキー "SMSAccountFrom" 内の web.config ファイルに格納します。
SMS プロバイダーの資格情報をアプリに転送する

資格情報と送信者の電話番号をアプリで使用できるようにします。簡単にするために、これらの値を web.config ファイルに格納します。 Azure にデプロイすると、Web サイトの [構成] タブの [アプリ設定 ] セクションに値を安全に格納できます。
```
</connectionStrings>
   <appSettings>
      <add key="webpages:Version" value="3.0.0.0" />
      
      
      <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 にデプロイするためのベストプラクティスに関するページを参照してください。

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
    }
}

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>

内の 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");
}

アプリを実行し、以前に登録したアカウントでログインします。
ユーザー ID をクリックすると、コントローラーでManageアクションメソッドがIndexアクティブになります。
[追加] をクリックします。
アクションメソッドは AddPhoneNumber 、SMS メッセージを受信できる電話番号を入力するダイアログボックスを表示します。
```
// GET: /Account/AddPhoneNumber
public ActionResult AddPhoneNumber()
{
   return View();
}
```
数秒後に、確認コードを含むテキストメッセージが表示されます。それを入力し、[ 送信] を押します。
[管理] ビューには、電話番号が追加されたことが表示されます。

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 要素認証について、サンプルの背後にあるコードについて詳しく説明します。

その他のリソース

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