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 以降をインストールする必要があります。
- 新しい ASP.NET Web プロジェクトを作成し、MVC テンプレートを選択します。 Web Formsでは ASP.NET ID もサポートされているため、Web フォーム アプリでも同様の手順を実行できます。
- 既定の認証は [個々のユーザー アカウント] のままにします。 Azure でアプリをホストする場合は、チェック ボックスをオンのままにします。 チュートリアルの後半では、Azure にデプロイします。 Azure アカウントは無料で開くことができます。
- SSL を 使用するようにプロジェクトを設定します。
2 要素認証用に SMS を設定する
このチュートリアルでは、Twilio または ASPSMS を使用する手順を説明しますが、他の SMS プロバイダーを使用できます。
SMS プロバイダーを使用したユーザー アカウントの作成
追加のパッケージのインストールまたはサービス参照の追加
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" /> <!-- 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 にデプロイするためのベスト プラクティスに関するページを参照してください。
SMS プロバイダーへのデータ転送の実装
SmsService
App_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") @: | @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 (電子メール エイリアス) をクリックします。
[2FA を有効にする] をクリックします。
ログアウトしてから、再度ログインします。 メールを有効にしている場合 (前の チュートリアルを参照)、2FA の SMS またはメールを選択できます。
[コードの確認] ページが表示され、ここで (SMS または電子メールから) コードを入力できます。
[ このブラウザーを記憶 する] チェック ボックスをクリックすると、チェック ボックスをオンにしたブラウザーとデバイスを使用するときに、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 開発環境を設定する方法