SMS Two-Factor 認証を使用して ASP.NET Web フォームアプリを作成する (C#)

2025-01-08

このチュートリアルでは、Two-Factor 認証を使用して ASP.NET Web フォームアプリを構築する方法について説明します。このチュートリアルは、「ユーザー登録、電子メールの確認、パスワードリセットを使用してセキュリティで保護された ASP.NET Web フォームアプリを作成する」というタイトルのチュートリアルを補完するように設計されています。さらに、このチュートリアルは、Rick Anderson の MVC チュートリアルに基づいていました。

紹介

このチュートリアルでは、Visual Studio を使用した Two-Factor 認証をサポートする ASP.NET Web フォームアプリケーションを作成するために必要な手順について説明します。 Two-Factor 認証は、追加のユーザー認証手順です。この追加の手順では、サインイン時に一意の個人識別番号 (PIN) が生成されます。 PIN は、通常、電子メールまたは SMS メッセージとしてユーザーに送信されます。その後、アプリのユーザーは、サインイン時に追加の認証手段として PIN を入力します。

チュートリアルのタスクと情報:

ASP.NET Web フォームアプリを作成する
SMS と Two-Factor 認証の設定
登録済みユーザーの Two-Factor 認証を有効にする
その他のリソース

ASP.NET Web フォームアプリを作成する

まず、Visual Studio Express 2013 for Web または Visual Studio 2013をインストールして実行します。 Visual Studio 2013 Update 3 以降もインストールします。また、以下で説明するように、Twilio アカウントを作成する必要があります。

手記

重要: このチュートリアルを完了するには、Visual Studio 2013 Update 3 以降インストールする必要があります。

新しいプロジェクト (ファイル ->新しいプロジェクト) を作成し、[ 新しいプロジェクト] ダイアログボックスから ASP.NET Web アプリケーション テンプレートと共に .NET Framework バージョン 4.5.2 を選択します。
[新しい ASP.NET プロジェクト] ダイアログボックスで、Web フォーム テンプレートを選択します。既定の認証は、個々のユーザーアカウントのままにします。次に、[OK] をクリックして新しいプロジェクトを作成します。
$Web フォームアイコンが青色で強調表示されている [New A S P dot Net Project]$新しい A S P ドットネットプロジェクト$ ダイアログボックスのスクリーンショット。$
プロジェクトの Secure Sockets Layer (SSL) を有効にします。 「Web Forms の概要」チュートリアルシリーズの「プロジェクトに対して SSL を有効にする」セクションの手順に従います。
Visual Studio で、パッケージマネージャーコンソール (ツール ->NuGet パッケージマネージャー ->パッケージマネージャーコンソール) を開き、次のコマンドを入力します。
Install-Package Twilio

SMS と Two-Factor 認証のセットアップ

このチュートリアルでは Twilio を使用しますが、任意の SMS プロバイダーを使用できます。

Twilio アカウントを作成します。
Twilio アカウントの [ダッシュボード] タブで、アカウント SID をコピーし、認証トークンを します。 後でアプリに追加します。
[番号] タブで、Twilio 電話番号 もコピーしてください。
Twilio アカウント SID、認証トークンの、電話番号 アプリで使用できるようにします。単純にするため、これらの値を web.config ファイルに格納します。 Azure にデプロイすると、Web サイトの [構成] タブの appSettings セクションに値を安全に格納できます。また、電話番号を追加する場合は、番号のみを使用します。
SendGrid 資格情報を追加することもできます。 SendGrid は電子メール通知サービスです。 SendGrid を有効にする方法の詳細については、「ユーザー登録、電子メールの確認、パスワードリセットを使用してセキュリティで保護された ASP.NET Web フォームアプリを作成する」というタイトルのチュートリアルの「SendGrid のフックアップ」セクションを参照してください。
```
</connectionStrings>
  <appSettings>
        
    <add key="emailServiceUserName" value="[EmailServiceAccountUserName]" />
    <add key="emailServicePassword" value="[EmailServiceAccountPassword]" />
    
    <add key="SMSSID" value="[SMSServiceAccountSID]" />
    <add key="SMSAuthToken" value="[SMSServiceAuthorizationToken]" />
    <add key="SMSPhoneNumber" value="+[SMSPhoneNumber]" />    
  </appSettings>
  <system.web>
```
警告

セキュリティ - 機密データをソースコードに格納しないでください。この例では、アカウントと資格情報は、Web.config ファイルの appSettings セクションに格納されます。 Azure では、これらの値を Azure portal の [ の構成] タブに安全に格納できます。関連情報については、「パスワードとその他の機密データを ASP.NET および Azureにデプロイするためのベストプラクティス」というタイトルの Rick Anderson のトピックを参照してください。

次の変更を黄色で強調表示して、App_Start\IdentityConfig.cs ファイルの SmsService クラスを構成します。

public class SmsService : IIdentityMessageService
{
    public Task SendAsync(IdentityMessage message)
    {
        var Twilio = new TwilioRestClient(
           ConfigurationManager.AppSettings["SMSSID"],
           ConfigurationManager.AppSettings["SMSAuthToken"]
        );
        var result = Twilio.SendMessage(
            ConfigurationManager.AppSettings["SMSPhoneNumber"],
           message.Destination, message.Body);

        // Status is one of Queued, Sending, Sent, Failed or null if the number is not valid
        Trace.TraceInformation(result.Status);

        // Twilio doesn't currently have an async API, so return success.
        return Task.FromResult(0);
    }
}

IdentityConfig.cs ファイルの先頭に次の using ステートメントを追加します。
```
using Twilio;
using System.Net;
using System.Configuration;
using System.Diagnostics;
```

黄色で強調表示されている行を削除して、アカウント/Manage.aspx ファイルを更新します。

<%@ Page Title="Manage Account" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Manage.aspx.cs" Inherits="WebFormsTwoFactor.Account.Manage" %>

<%@ Register Src="~/Account/OpenAuthProviders.ascx" TagPrefix="uc" TagName="OpenAuthProviders" %>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>

    <div>
        <asp:PlaceHolder runat="server" ID="successMessage" Visible="false" ViewStateMode="Disabled">
            <p class="text-success"><%: SuccessMessage %></p>
        </asp:PlaceHolder>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-horizontal">
                <h4>Change your account settings</h4>
                <hr />
                <dl class="dl-horizontal">
                    <dt>Password:</dt>
                    <dd>
                        <asp:HyperLink NavigateUrl="/Account/ManagePassword" Text="[Change]" Visible="false" ID="ChangePassword" runat="server" />
                        <asp:HyperLink NavigateUrl="/Account/ManagePassword" Text="[Create]" Visible="false" ID="CreatePassword" runat="server" />
                    </dd>
                    <dt>External Logins:</dt>
                    <dd><%: LoginsCount %>
                        <asp:HyperLink NavigateUrl="/Account/ManageLogins" Text="[Manage]" runat="server" />

                    </dd>
                    <%--
                        Phone Numbers can used as a second factor of verification in a two-factor authentication system.
                        See <a href="https://go.microsoft.com/fwlink/?LinkId=313242">this article</a>
                        for details on setting up this ASP.NET application to support two-factor authentication using SMS.
                        Uncomment the following block after you have set up two-factor authentication
                    --%>

                    <dt>Phone Number:</dt>
                    <%--
                    <% if (HasPhoneNumber)
                       { %>
                    <dd>
                        <asp:HyperLink NavigateUrl="/Account/AddPhoneNumber" runat="server" Text="[Add]" />
                    </dd>
                    <% }
                       else
                       { %>
                    <dd>
                        <asp:Label Text="" ID="PhoneNumber" runat="server" />
                        <asp:HyperLink NavigateUrl="/Account/AddPhoneNumber" runat="server" Text="[Change]" /> &nbsp;|&nbsp;
                        <asp:LinkButton Text="[Remove]" OnClick="RemovePhone_Click" runat="server" />
                    </dd>
                    <% } %>
                    --%>

                    <dt>Two-Factor Authentication:</dt>
                    <dd>
                        <p>
                            There are no two-factor authentication providers configured. See <a href="https://go.microsoft.com/fwlink/?LinkId=313242">this article</a>
                            for details on setting up this ASP.NET application to support two-factor authentication.
                        </p>
                        <% if (TwoFactorEnabled)
                          { %> 
                        <%--
                        Enabled
                        <asp:LinkButton Text="[Disable]" runat="server" CommandArgument="false" OnClick="TwoFactorDisable_Click" />
                        --%>
                        <% }
                          else
                          { %> 
                        <%--
                        Disabled
                        <asp:LinkButton Text="[Enable]" CommandArgument="true" OnClick="TwoFactorEnable_Click" runat="server" />
                        --%>
                        <% } %>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</asp:Content>

Manage.aspx.cs 分離コードの Page_Load ハンドラーで、黄色で強調表示されているコード行のコメントを次のように解除します。

protected void Page_Load()
{
    var manager = Context.GetOwinContext().GetUserManager<ApplicationUserManager>();

    HasPhoneNumber = String.IsNullOrEmpty(manager.GetPhoneNumber(User.Identity.GetUserId()));

    // Enable this after setting up two-factor authentientication
    PhoneNumber.Text = manager.GetPhoneNumber(User.Identity.GetUserId()) ?? String.Empty;

    TwoFactorEnabled = manager.GetTwoFactorEnabled(User.Identity.GetUserId());

    LoginsCount = manager.GetLogins(User.Identity.GetUserId()).Count;

    var authenticationManager = HttpContext.Current.GetOwinContext().Authentication;

    if (!IsPostBack)
    {
        // Determine the sections to render
        if (HasPassword(manager))
        {
            ChangePassword.Visible = true;
        }
        else
        {
            CreatePassword.Visible = true;
            ChangePassword.Visible = false;
        }

        // Render success message
        var message = Request.QueryString["m"];
        if (message != null)
        {
            // Strip the query string from action
            Form.Action = ResolveUrl("~/Account/Manage");

            SuccessMessage =
                message == "ChangePwdSuccess" ? "Your password has been changed."
                : message == "SetPwdSuccess" ? "Your password has been set."
                : message == "RemoveLoginSuccess" ? "The account was removed."
                : message == "AddPhoneNumberSuccess" ? "Phone number has been added"
                : message == "RemovePhoneNumberSuccess" ? "Phone number was removed"
                : String.Empty;
            successMessage.Visible = !String.IsNullOrEmpty(SuccessMessage);
        }
    }
}

アカウント/TwoFactorAuthenticationSignIn.aspx.csのコードビハインドにおいて、黄色で強調表示された次のコードを追加し、Page_Load ハンドラーを更新します。
```
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var userId = signinManager.GetVerifiedUserId<ApplicationUser, string>();
        if (userId == null)
        {
            Response.Redirect("/Account/Error", true);
        }
        var userFactors = manager.GetValidTwoFactorProviders(userId);
        Providers.DataSource = userFactors.Select(x => x).ToList();
        Providers.DataBind();
    }
}
```
上記のコードを変更すると、認証オプションを含む "Providers" DropDownList は最初の値にリセットされません。これにより、ユーザーは最初のオプションだけでなく、認証時に使用するすべてのオプションを正常に選択できます。
ソリューションエクスプローラーで、Default.aspx を右クリックし、[スタートページとして設定] 選択します。
アプリをテストして、最初にアプリをビルドし (Ctrl+Shift+B) アプリを実行し (F5)、[登録] を選択して新しいユーザーアカウントを作成するか、ユーザーアカウントが既に登録されている場合は ログイン を選択します。
ユーザーとしてログインしたら、ナビゲーションバーでユーザーID（電子メールアドレス）をクリックして、[アカウントの管理] ページ (Manage.aspx) を表示します。
[アカウントの管理] ページで、[電話番号] の横にある [追加] をクリックします。
(ユーザーとして) SMS メッセージ (テキストメッセージ) を受信する電話番号を追加し、[送信] ボタンをクリックします。

この時点で、アプリは Web.config の資格情報を使用して Twilio に連絡します。 SMS メッセージ (テキストメッセージ) が、ユーザーアカウントに関連付けられている電話に送信されます。 Twilio ダッシュボードを表示することで、Twilio メッセージが送信されたことを確認できます。
数秒後に、ユーザーアカウントに関連付けられている電話に、確認コードを含むテキストメッセージが表示されます。確認コードを入力し、[送信]押します。

登録済みユーザーの Two-Factor 認証を有効にする

この時点で、アプリに対して 2 要素認証を有効にしました。ユーザーが 2 要素認証を使用するには、UI を使用して設定を変更するだけです。

アプリのユーザーは、ナビゲーションバーのユーザー ID (電子メールエイリアス) をクリックして [アカウントの管理] ページを表示することで、特定のアカウントの 2 要素認証を有効にすることができます。次に、[ を有効にする] リンクをクリックして、アカウントの 2 要素認証を有効にします。[アカウントの管理] ブラウザーウィンドウのスクリーンショット。Two-Factor 認証に関連付けられているリンクが赤で強調表示されています。
ログオフしてから、もう一度ログインします。電子メールを有効にしている場合は、2 要素認証用に SMS または電子メールを選択できます。電子メールを有効にしていない場合は、「ユーザー登録、電子メールの確認、パスワードリセットを使用してセキュリティで保護された ASP.NET Web フォームアプリを作成する」というタイトルのチュートリアルを参照してください。[認証プロバイダーの選択] ドロップダウンリストを示す [Two-Factor 認証ブラウザー] ウィンドウ Two-Factor スクリーンショット。
[Two-Factor 認証] ページが表示され、コードを入力できます (SMS または電子メールから)。
[このブラウザー を記憶する] チェックボックスをオンにすると、チェックボックスをオンにしたブラウザーとデバイスを使用するときに、2 要素認証を使用してログインする必要がなくなります。悪意のあるユーザーがあなたのデバイスにアクセスできない限り、2 要素認証を有効にして、このブラウザーを記憶する をクリックすることで、信頼されていないデバイスからのアクセスに対する強力な2要素認証の保護を維持しながら、便利なワンプステップのパスワードアクセスを楽しむことができます。これは、定期的に使用する任意のプライベートデバイスで実行できます。

次の方法で共有

SMS Two-Factor 認証を使用して ASP.NET Web フォーム アプリを作成する (C#)

紹介

チュートリアルのタスクと情報:

ASP.NET Web フォーム アプリを作成する

SMS と Two-Factor 認証のセットアップ

登録済みユーザーの Two-Factor 認証を有効にする

その他のリソース

フィードバック

その他のリソース

SMS Two-Factor 認証を使用して ASP.NET Web フォームアプリを作成する (C#)

ASP.NET Web フォームアプリを作成する