SMS 2 要素認証を利用し、ASP.NET Web フォームを作成する (C#)

[アーティクル]
06/16/2023

Emailと SMS Two-Factor 認証を使用してアプリ ASP.NET Web Formsダウンロードする

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

はじめに

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

ASP.NET Web Forms アプリを作成する

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

注意

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

新しいプロジェクト (ファイル ->新しいプロジェクト) を作成し、[新しいプロジェクト] ダイアログボックスから ASP.NET Web アプリケーション テンプレートと.NET Framework バージョン 4.5.2 を選択します。
[新しい ASP.NET プロジェクト] ダイアログボックスで、Web Forms テンプレートを選択します。既定の認証は [個々のユーザーアカウント] のままにします。次に、[ OK] を クリックして新しいプロジェクトを作成します。
プロジェクトの Secure Sockets Layer (SSL) を有効にします。チュートリアルシリーズを使用したはじめにの「プロジェクトの SSL を有効にする」セクションWeb Forms記載されている手順に従います。
Visual Studio で、パッケージマネージャーコンソール (Tools -NuGet Package Manger ->>Package Manager Console) を開き、次のコマンドを入力します。
Install-Package Twilio

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

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

Twilio アカウントを作成します。
Twilio アカウントの [ ダッシュボード ] タブで、 アカウント SID と 認証トークンをコピーします。 後でアプリに追加します。
[ 番号 ] タブで、Twilio の電話番号 もコピーします。
Twilio アカウント SID、 認証トークン 、 電話番号 をアプリで使用できるようにします。物事をシンプルにするために、これらの値を web.config ファイルに格納します。 Azure にデプロイすると、Web サイトの [構成] タブの appSettings セクションに値を安全に格納できます。また、電話番号を追加する場合は、番号のみを使用します。
SendGrid 資格情報を追加することもできます。 SendGrid は電子メール通知サービスです。 SendGrid を有効にする方法の詳細については、「Create a Secure ASP.NET Web Forms App with user registration, email confirmation and password reset」というタイトルのチュートリアルの「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 のトピックを参照してください。

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

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;
```

黄色で強調表示されている行を削除して、 Account/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>

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

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

Account/TwoFactorAuthenticationSignIn.aspx.cs の codebehind で、黄色で強調表示された次のコードを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 要素認証を有効にします。
ログオフしてから、再度ログインします。電子メールを有効にした場合は、2 要素認証用に SMS または電子メールを選択できます。電子メールを有効にしていない場合は、「ユーザー登録を使用してセキュリティで保護された ASP.NET Web Forms アプリを作成する」というチュートリアルEmail確認とパスワードリセットを参照してください。
[Two-Factor認証] ページが表示され、コードを入力できます (SMS または電子メールから)。
[このブラウザーのチェックを記憶する] ボックスをクリックすると、チェックボックスをオンにしたブラウザーとデバイスを使用するときに、2 要素認証を使用してログインする必要が除外されます。悪意のあるユーザーがデバイスにアクセスできない限り、2 要素認証を有効にし、[ このブラウザーを記憶 する] をクリックすると、信頼されていないデバイスからのすべてのアクセスに対して強力な 2 要素認証保護を維持しながら、便利な 1 ステップのパスワードアクセスが提供されます。これは、定期的に使用するすべてのプライベートデバイスで実行できます。

次の方法で共有