WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

ASP.NET Identity にエンティティ追加

by WebSurfer 23. June 2021 14:54

Visual Studio のテンプレートで認証を「個別のユーザーアカウント」としてプロジェクトを作成すると ASP.NET Identity を使った認証システムが実装されます。それにエンティティを追加する方法を書きます。この記事の例では下の画像の左上の Post エンティティがそれです。

ASP.NET Identity に Post エンティティを追加

Post というのは投稿という意味です。複数のユーザーが複数の投稿をするアプリで、投稿内容を SQL Server データベースで保持し、Post エンティティクラスを定義して Entity Framework 経由で書き込み、読み出し、編集などを行うという想定です。

ユーザーの誰が投稿を書いたかを識別できるように、上の画像のように Post と ApplicationUser をナビゲーションプロパティで紐づけます。(結果、EF Code First で生成されるデータベースでは、ApplicationUser に該当する dbo.AspNetUsers テーブルの Id 列に、dbo.Posts テーブルの ApplicationUserId 列から FK 制約が張られます)

上の画像の Post エンティティ以外の基本のエンティティクラスとコンテキストクラスは ASP.NET Identity の中で定義済みです。(.NET Framework 版の場合は Models/IdentityModels.cs に ApplicationUser クラスと ApplicationDbContext クラスが含まれていて、その継承元で定義されています)

それに Post エンティティを追加してナビゲーションプロパティを張るには Post クラスを追加するだけではダメで、既存の基本のエンティティクラスとコンテキストクラスにも手を加える必要があります。それをどのようにするかというのがこの記事の話です。

.NET Framework 版の場合は自動生成された Models/IdentityModels.cs にコンテキストクラスとエンティティクラスが定義されていますので、それに手を加えて Migration を実行することになります。

手を加えた Models/IdentityModels.cs のサンプルコードは以下の通りです。コードの中で「追加」とコメントした部分を追加しているだけです。(Core 版は場所が違うので注意。この記事の下の方の説明と画像を見てください)

using System.Data.Entity;
using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;

// 追加
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace Mvc5App3.Models
{
    // ApplicationUser クラスにさらにプロパティを追加すると、ユーザーの
    // プロファイル データを追加できます。詳細については、
    // https://go.microsoft.com/fwlink/?LinkID=317594 を参照してください。
    public class ApplicationUser : IdentityUser
    {
        public async Task<ClaimsIdentity> GenerateUserIdentityAsync(
                               UserManager<ApplicationUser> manager)
        {
            // authenticationType が CookieAuthenticationOptions
            // .AuthenticationType で定義されているものと一致して
            // いる必要があります
            var userIdentity = await manager.CreateIdentityAsync(
                 this, DefaultAuthenticationTypes.ApplicationCookie);
            // ここにカスタム ユーザー クレームを追加します
            return userIdentity;
        }

        // 追加
        public virtual IList<Post> Posts { get; set; }
    }

    // 追加
    public class Post
    {
        [Key, Required]
        public int PostId { get; set; }

        [Required, MaxLength(128)]
        public string Title { get; set; }

        [Required, MaxLength(1024)]
        public string Content { get; set; }

        [Required, ForeignKey(nameof(User))]
        public string ApplicationUserId { get; set; }

        public virtual ApplicationUser User { get; set; }
    }

    public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
    {
        public ApplicationDbContext()
            : base("DefaultConnection", throwIfV1Schema: false)
        {
        }

        public static ApplicationDbContext Create()
        {
            return new ApplicationDbContext();
        }

        // 追加
        public DbSet<Post> Posts { get; set; }
    }
}

上のコードの通りコンテキストクラスとエンティティクラスに手を加えてから Migration 操作 (Add-Migration, Update-Database) を行うと以下のテーブルが SQL Server データベースに生成されます。

Migration 操作で追加された Posts テーブル

dbo.Posts テーブルの ApplicationUserId 列から ApplicationUser に相当するテーブル dbo.AspNetUsers の Id 列に FK 制約が張られます。もちろん Models/IdentityModels.cs のコードに定義したナビゲーションプロパティも期待通り働きます。


以上は .NET Framework 版の話です。Core 版の場合も上記とほぼ同じようにして既存のデータベースに Posts テーブルを追加し、既存の AspNetUsers テーブルの Id 列に FK 制約を張ることができます。

ただし、Core 版では、Visual Studio のテンプレートで「個別のユーザーアカウント」を選んでプロジェクトを作成しても、ASP.NET Core Identity 関係のソースコードは含まれないことに注意してください。Razor Class Library (RCL) として実装されますのでコンテキストクラスとエンティティクラスに手を加えることができません。

なので、Core 版でこの記事のようなことを行う場合は、認証なしでプロジェクトを作成した後でスキャフォールディング機能を使ってソースコードと共に ASP.NET Core Identity を実装するのが良さそうです。

そうした場合、コンテキストクラスとエンティティクラスは下の画像の場所に生成されます。

コンテキストクラスとエンティティクラス

上の画像ではクラス名が ApplicationDbContext, ApplicationUser となっていますが、デフォルトの設定のまま進めると Application の部分がプロジェクト名になります。スキャフォールディングを行う際に任意に設定できますので、この記事では .NET Framework 版と同じ名前に設定しています。

上の画像の ApplicationDbContext, ApplicationUser クラスに、上のサンプルコードで書いたようにナビゲーションプロパティを追加します。

Post クラスはプロジェクトの既存の Models フォルダにクラスファイルを追加してそれに定義するのが良いと思います。

Tags: , ,

MVC

Password Recovery の実装 (MVC5)

by WebSurfer 17. March 2021 13:35

.NET Framework 版の ASP.NET MVC5 で ASP.NET Identity をユーザー認証に使用し、Password Recovery を実装する方法を備忘録として書いておきます。先の記事「Email Confirmation の実装 (MVC5)」の続きです。

ForgotPassword ページ

Microsoft のチュートリアル「ログイン、電子メール確認、パスワード リセットを使用して安全な ASP.NET MVC 5 Web アプリを作成する (C#)」の「パスワードの回復/リセット」以降のセクションの説明に従って実装します。

Password Recovery はユーザーがパスワードを��れてしまっても再設定できる手段を提供するものです。ページのヘッダ右上に表示されている [ログイン] リンクをクリックして Account/Login ページを表示すると、その中に [パスワードを忘れた場合] というリンクがあります(注: デフォルトではコメントアウトされていますので解除してください)。それをクリックすると上の画像の Accpunt/ForgotPassword ページに遷移します。

その [電子メール] テキストボックスに登録したメールアドレスを入力して [電子メール リンク] ボタンをクリックすると、入力したメールアドレスが Account/ForgotPassword アクションメソッドに POST されます。

Account/ForgotPassword アクションメソッドでは、(1) 送信されたメールアドレスが登録済み、(2)Email Confirmation 済みであることを確認します。条件 (1), (2) が確認できない場合は Account/ForgotPasswordConfirmation ページにリダイレクトされるだけでそれ以外何も起こりません。

条件 (1), (2) の条件の両方が確認できたらメールを送信するのですが、そのためにはテンプレートで生成された POST 側の Account/ForgotPassword アクションメソッド内の code(確認用のトークン)の生成、メール本文に含める url 作成、メール送信のためのコードのコメントアウトを解除します。

修正後のコードは以下の通りです。

// POST: /Account/ForgotPassword
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> ForgotPassword(
                                  ForgotPasswordViewModel model)
{
    if (ModelState.IsValid)
    {
        var user = await UserManager.FindByNameAsync(model.Email);
        if (user == null || 
            !(await UserManager.IsEmailConfirmedAsync(user.Id)))
        {
            return View("ForgotPasswordConfirmation");
        }

        // code の生成、メール本文に含める Accout/ResetPassword
        // への url 作成(既存のコードのコメントアウトを解除)
        string code = await UserManager
                      .GeneratePasswordResetTokenAsync(user.Id);
        var callbackUrl = Url.Action("ResetPassword", 
                          "Account", 
                          new { userId = user.Id, code = code }, 
                          protocol: Request.Url.Scheme);

        // メール送信。既存のコードのコメントアウト解除でもよいが、
        // ユーザーのメーラーが html の表示を許可していない可能性を
        // 考えて、html の a 要素を組み立てて送るのではなく、url そ
        // のものを送信するように変更した
        await UserManager.SendEmailAsync(user.Id,
            "Reset Password",
            "Please confirm your account by: " +
            Server.HtmlEncode(callbackUrl).Replace("&amp;", "&"));

        return RedirectToAction("ForgotPasswordConfirmation", 
                                "Account");
    }

    return View(model);
}

メールが送信された後、Account/ForgotPasswordConfirmation ページにリダイレクトされ、以下のような画面が表示されます。ユーザーにメールを見るよう促しているだけです。

ForgotPasswordConfirmation ページ

上のコードで送信されたメールは以下の画像のようになります。メール本文には Account/ResetPassword ページへの url が含まれ、それに userId と code がクエリ文字列として設定されています。

Reset Password メール

メールの url をクリックすると Account/ResetPassword ページが GET 要求され、クエリ文字列から userId と code が渡されます。その応答としてブラウザに以下のような画面が表示されます。

ResetPassword ページ

上のページに、最初に Account/ForgotPassword ページで入力したのと同じメールアドレスと、新しいパスワードを入力して [再設定] ボタンをクリックすると、メールアドレスとトークンが有効であればパスワードが新しいものに変更され、その後 ResetPasswordConfirmation ページにリダイレクトされます。

ResetPasswordConfirmation ページ

そのページのリンク [ここをクリックしてログイン] をクリックすると Account/Login ページに遷移するので、そこでメールアドレスと新しいパスワードを入力すればログインできます。


ユーザー登録の場合と違って、Password Recovery ではメールが受信でき、それに含まれるトークンを ResetPassword ページに送信し、そのページで新しいパスワードを登録できないと何ともならない・・・すなわちメール送信機能の実装は必須のコーディングとなっています。

メール送信機能を実装しなくても Password Recovery を可能にするには、コードを書き換えて、 ForgotPasswordConfirmation ページで上に書いた条件 (1), (2) の条件の両方が確認できたら、ResetPassword ページにリダイレクトするといった修正が必要と思われます。(未検証・未確認です)

Tags: , ,

MVC

Email Confirmation の実装 (MVC5)

by WebSurfer 16. March 2021 21:22

.NET Framework 版の ASP.NET MVC5 で ASP.NET Identity をユーザー認証に使用し、Email Confirmation を実装する方法を備忘録として書いておきます。

Email Confirmation

以前は Microsoft のチュートリアル「ログイン、電子メール確認、パスワード リセットを使用して安全な ASP.NET MVC 5 Web アプリを作成する (C#)」に従って生成されたコードに手を加えれば実装できたのですが、SendGrid が id と password による認証をサポートしなくなり、Api Key による認証を使うように変更する必要が生じました。

Core 版の MVC アプリ用には Api Key による認証を使う SendGrid による Email Confirmation のチュートリアルがあります(先の記事「Email Confirmation の実装 (CORE)」とそれからリンクが貼ってある Microsoft の記事を見てください)。それを参考に実装してみました。以下にその概要を書きます。

(1) プロジェクトの作成

Visual Studio 2019 の[新規作成(N)]⇒[プロジェクト(P)...]で「新しいプロジェクト」ダイアログを表示し、その中の「ASP.NET Web アプリケーション (.NET Framework)」テンプレートを選択して ASP.NET MVC アプリを作成します。

ASP.NET MVC アプリの作成

ASP.NET Identity による認証を実装する必要がありますので、上の画像のように認証に「個別のユーザーアカウント」を使用するように設定してください。

テンプレートで自動生成された認証関係のコードに手を加えて Email Confirmation の機能を実装します。

テンプレートが生成したデフォルトのコードでは、Accout/Register アクションメソッドでユーザーが登録に成功すると直ちにログインした状態になります。アクションメソッドにはメールを送信するコードが含まれていますがコメントアウトされています。

App_Data/IdentityConfig.cs ファイルに EmailService クラスというメール送信のためのクラスが定義されていて、クライアントからの要求を受けるとインスタンス化されて ApplicationUserManager に登録されます。ただし、EmailService クラスの SendAsync メソッドの中身が実装されてないのでメールを送ることはできません。

メールを送信するためには SendAsync メソッドに SendGrid を利用したメール送信機能を実装します。そして、Accout/Register に含まれているメール送信のためのコードのコメントアウトを解除します。

そうすることにより、ユーザー登録完了時点で登録したメールアドレスにメールが送信されます。ユーザーが受け取ったメール本文に含まれる url をクリックすると Accout/ConfirmEmail にクエリ文字列で設定された情報が送信され、サーバー側ではそれを確認してデータベースの AspNetUsers テーブルの EmailConfirmed フィールドを ture に設定します。

Account/Login アクションメソッドには、EmailConfirmed フィールドが ture になっている場合のみログインを許可するコードを追加します。これによりユーザーが送られてきたメール本文に含まれる url をクリックしない限りログインできないということになります。

(2) API Key の入手

メールの送信には SendGrid を利用します。ユーザー登録して API Key を入手してください。(先の記事「Email Confirmation の実装 (CORE)」のステップ (3) を見てください)

SendGrid は基本的に有償ですが、開発目的で送信するようなメールの数が少ない(一日 100 件以内だそうです)の場合は Free のサービスでよさそうです。

(3) SendGrid のインストール

NuGet を利用してプロジェクトに SendGrid をインストールします。

SendGrid をインストール

この記事では自分がインストールした時点での最新版 v9.22.0 を使いました。Microsoft のチュートリアル「ログイン、電子メール確認、パスワード リセットを使用して安全な ASP.NET MVC 5 Web アプリを作成する (C#)」にある SendGrid.Net40 とは違うので注意してください(それも一緒にインストールされますが)。

(4) API Key の保存

メールの差出人と SendGrid の API Key は web.config に保存します。暗号化などを考えた方が良いのかもしれませんが、この記事では簡略化のため生の Api Key を保存しています。

<appSettings>
  <add key="SendGridUser" value="WebSurfer" />
  <add key="SenGridKey" value="SG...t-A" />
</appSettings>

(5) EmailSender クラスの実装

メールを送信するため App_Data/IdentityConfig.cs の EmailService クラスにメール送信機能を実装します。

Microsoft のチュートリアル「Account confirmation and password recovery in ASP.NET Core」にあるコードを参考に以下のようにしました。

using System;
using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
using Microsoft.AspNet.Identity.Owin;
using Microsoft.Owin;
using Microsoft.Owin.Security;
using Mvc5EmailConfirmation.Models;

using SendGrid;
using SendGrid.Helpers.Mail;
using System.Configuration;

namespace Mvc5EmailConfirmation
{
    public class EmailService : IIdentityMessageService
    {
        public Task SendAsync(IdentityMessage message)
        {
            return Execute(ConfigurationManager.AppSettings["SenGridKey"], 
                       message.Subject, message.Body, message.Destination);
        }

        public Task Execute(string apiKey, string subject, 
                            string message, string email)
        {
            var client = new SendGridClient(apiKey);
            var msg = new SendGridMessage()
            {
                From = new EmailAddress("差出人メールアドレス",
                       ConfigurationManager.AppSettings["SendGridUser"]),
                Subject = subject,
                PlainTextContent = message,
                HtmlContent = message
            };
            msg.AddTo(new EmailAddress(email));

            msg.SetClickTracking(false, false);

            return client.SendEmailAsync(msg);
        }
    }

    // ・・・中略・・・
}

Core 版 MVC のチュートリアルの場合は Register メソッドから宛先メールアドレス、Subject、本文が直接渡されるのですが、.NET Framework 版 MVC5 のテンプレートで生成される SendAsync メソッドには UserManager 経由で IdentityMessage オブジェクトが渡されます。

その中に宛先メールアドレス、Subject、本文が含まれていますので、それぞれ Destination, Subject, Body プロパティを使って取得しています。

(6) Account/Register ページの修正

テンプレートで生成された SignInManager.SignInAsync メソッドをコメントアウトし、code の生成、メール本文に含める Accout/ConfirmEmail への url 作成、メール送信のためのコードのコメントアウトを解除します。

さらに、Home/Index にリダイレクトする既存のコードをコメントアウトし、代わりに登録完了後メール確認を促すページ Info を表示するようコードを追加します。Views/Shared/Info.cshtml をチュートリアルに従い作成・追加してください。

修正後のコードは以下の通りです。(修正は POST 側のみで GET 側は不要です)

// POST: /Account/Register
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Register(RegisterViewModel model)
{
    if (ModelState.IsValid)
    {
        var user = new ApplicationUser 
        { 
            UserName = model.Email, 
            Email = model.Email 
        };

        var result = await UserManager.CreateAsync(user, 
                                                   model.Password);

        if (result.Succeeded)
        {
            // 登録時にはログインさせないようコメントアウト
            //await SignInManager.SignInAsync(user, 
            //                                isPersistent:false, 
            //                                rememberBrowser:false);

            // code の生成、メール本文に含める Accout/ConfirmEmail
            // への url 作成(既存のコードのコメントアウトを解除)
            string code = await UserManager
                          .GenerateEmailConfirmationTokenAsync(user.Id);
            var callbackUrl = Url.Action("ConfirmEmail", 
                              "Account", 
                              new { userId = user.Id, code = code }, 
                              protocol: Request.Url.Scheme);

            // メール送信。既存のコードのコメントアウト解除でもよいが、
            // ユーザーのメーラーが html の表示を許可していない可能性を
            // 考えて、html の a 要素を組み立てて送るのではなく、url そ
            // のものを送信するように変更した
            await UserManager.SendEmailAsync(user.Id, "Confirm your email",
                "Please confirm your account by: " +
                Server.HtmlEncode(callbackUrl).Replace("&amp;", "&"));

            // メール確認を促すページ Info に表示するメッセージ
            ViewBag.Message = "Check your email and confirm your account," +
                " you must be confirmed before you can log in.";

            // チュートリアルに従い Views/Shared/Info.cshtml を別途作成要
            return View("Info");

            // これはコメントアウト
            //return RedirectToAction("Index", "Home");
        }
        AddErrors(result);
    }
    return View(model);
}

以上により、ユーザーが登録に成功するとこの記事の一番上の画像のとおり Info ページが表示され、ユーザーにメール確認を促します。

さらに、ユーザーが登録したメールアドレスに以下のメールが送信されます。メール本文にある url が Accout/ConfirmEmail となっており、クエリ文字列に userId と code が設定されています。ユーザーがこれをクリックすることにより Accout/ConfirmEmail に userId と code が送信され、メール確認が完了します(AspNetUsers テーブルの EmailConfirmed フィールドが ture に設定されます)。

確認メール

(7) Account/Login ページの修正

EmailConfirmed フィールドが ture になっているか否かを確認し true の場合のみログインを許可するコードを追加します。これによりユーザーが送られてきたメール本文に含まれる url をクリックしない限りログインできないということになります。

さらに、メール確認なしでログインしようとするとエラーメッセージを表示するためのコードも追加します。メッセージは Error ページ表示しますので、チュートリアルに従い Views/Shared/Error.cshtml を書き換えてください。

修正後のコードは以下の通りです。(修正は POST 側のみで GET 側は不要です)

// POST: /Account/Login
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Login(LoginViewModel model, 
                                      string returnUrl)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }

    // メール確認がされてない場合はログインできないようにする
    var user = await UserManager.FindByNameAsync(model.Email);
    if (user != null)
    {
        if (!await UserManager.IsEmailConfirmedAsync(user.Id))
        {
            ViewBag.errorMessage = 
                "You must have a confirmed email to log on.";

            // チュートリアルに従い Views/Shared/Error.cshtml 
            // を書き換えないと上のエラーメッセージは表示され
            // ないので注意
            return View("Error");
        }
    }

    var result = await SignInManager
                 .PasswordSignInAsync(model.Email, 
                                      model.Password, 
                                      model.RememberMe, 
                                      shouldLockout: false);
    switch (result)
    {
        case SignInStatus.Success:
            return RedirectToLocal(returnUrl);
        case SignInStatus.LockedOut:
            return View("Lockout");
        case SignInStatus.RequiresVerification:
            return RedirectToAction("SendCode", 
                new { ReturnUrl = returnUrl, 
                      RememberMe = model.RememberMe });
        case SignInStatus.Failure:
        default:
            ModelState.AddModelError("", "無効なログイン試行です。");
            return View(model);
    }
}

次はユーザーがパスワードを忘れてしまった場合の Password Recovery の実装ですが、この記事で続けると長くなりすぎるので別の記事「Password Recovery の実装 (MVC5)」に書きます。

Tags: , ,

MVC

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  September 2021  >>
MoTuWeThFrSaSu
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

View posts in large calendar