ASP.NET Core / Angular Webアプリでログインができない

Question

前提・実現したいこと

AngularでASP.NET Core Webアプリケーションを作成しており、
ログイン・ログアウト機能を実装したいです。

発生している問題・エラーメッセージ

ユーザー登録はできるのですが、ログインをすることができず困っています。

<行ったこと>

• VisualStudio2019でAsp.Net Core WebアプリケーションのAngularテンプレート(個別のユーザーアカウントで認証)でプロジェクトを作成しました。
• その後、パッケージマネージャーコンソールから次のコマンドを実行し、マイグレーションを行いました。

　・Add-Migration InitialCreate
・Update-Database

• ビルドしデバッグを実行して立ち上げた後、「Registry」でユーザーを登録。
• 作成したユーザーのメールアドレスとパスワードでログインを試みるものの、Invalid login attempt.と出てしまいログインができません。

※ DBにユーザーが登録されているのは確認しました。また、入力内容はコピペなので誤りもないかと思います。

該当のソースコード

プロジェクトを作成後、マイグレーションを実行した以外は何もしておりません(きっと何かを加える必要があるかと思うのですが・・・)。下記ソースコードはすべて namespaceを省略しています。

Startup.cs

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddDbContext<ApplicationDbContext>(options =>
                options.UseSqlServer(
                    Configuration.GetConnectionString("DefaultConnection")));

        services.AddDefaultIdentity<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
                .AddEntityFrameworkStores<ApplicationDbContext>();

        services.AddIdentityServer()
                .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();

        services.AddAuthentication()
                .AddIdentityServerJwt();
        services.AddControllersWithViews();
        services.AddRazorPages();
            
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseDatabaseErrorPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
                
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        if (!env.IsDevelopment())
        {
            app.UseSpaStaticFiles();
        }

        app.UseRouting();

        app.UseAuthentication();
        app.UseIdentityServer();
        app.UseAuthorization();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller}/{action=Index}/{id?}");
            endpoints.MapRazorPages();
        });

        app.UseSpa(spa =>
        {
                
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        });
    }
}

ApplicationDbContext.cs

public class ApplicationDbContext : ApiAuthorizationDbContext<ApplicationUser>
{
    public ApplicationDbContext(
            DbContextOptions options,
            IOptions<OperationalStoreOptions> operationalStoreOptions) : base(options, operationalStoreOptions)
    {
    }
}

試したこと

• マイクロソフトの公式に当該の内容かと思われる「SPAs の認証と承認」というページがあったので読み、書いてあるコードの一部を実行しました。ただ読んでいても理解ができない部分も多く、ちゃんと実行できたかは心配です。

補足情報（FW/ツールのバージョンなど）

実行環境は Windows10、 VisualStudio2019, ASP.NET Core3.1 です。

認証機能がついたASP.NETのWebアプリケーションを作るのは初めてなので、認証機能実装の壁を越えられずにいます・・・。どなたにご教示いただければ幸いです。

Comments

[退会済みユーザー]

Angular というのは必須条件なのですか？　多分そうであろうと思いながらもお聞きしてますが・・・

もし、ASP.NET Web アプリの勉強をしているとかで Angular にこだわるわけではなく、ユーザー認証が実装できれば Web Forms でも MVC でも Razor でもよいということであれば Angular という条件は外してもらった方が回答が集まりやすそうですので。

[退会済みユーザー]

質問者さん、無言ですが、回答しているのでそれに対するフィートバックをしてください。役に立った・立たなかった程度のレスならすぐに返せるのでは？　無言はとにかく NG です。

[yamacs]

ご連絡が遅くなり、大変申し訳ありません。そして非常に丁寧にご回答くださったにもかかわらず、まだしっかり試すことができていない現状です。今日明日中に確認しあらためてフィードバックさせていただきます。

ちなみに
> Angular というのは必須条件なのですか？
> もし、ASP.NET Web アプリの勉強をしているとかで Angular にこだわるわけではなく、ユーザー認証が実装できれば Web Forms でも MVC でも Razor でもよいということであれば Angular という条件は外してもらった方が回答が集まりやすそうですので。

おっしゃる通りかと思います。ただできることであればAngularでフロントエンドを実装したいと考えておりました。ただお書きになっている通り、まずはASP.NET Web アプリを学ぶためにMVCなどで実装をしてみたほうがよいのかもしれません。そちらも検討いたします。

いずれにせよ丁寧にご回答くださった内容、必ずトライさせていただきます。

Answer 1

作成したユーザーのメールアドレスとパスワードでログインを試みるものの、Invalid login attempt.と出てしまいログインができません。

自分の環境 Windows 10 Pro 64-bit v1909, VS2019 v16.6.5, Core 3.1 で以下の通りテンプレートを作って自動生成させたアプリで試してみましたが、そういうことはなく、問題なくログインできました。

質問に書いてあったことと自分のケースで違うのは、以下の画像の通りプロジェクトを生成した時点で EF Code First で DB を作るためのスキーマ定義ファイルは作られているので、Add-Migration は不要で、Update-Database だけで LocalDB に ASP.NET Identity 用の DB は生成されるということです。

それから、質問には書いてなかったですが、登録に成功すると表示される下の画像で Click here to confirm your account をクリックしましたか？

デフォルトで Email Confirmation が有効になっているので、メールを送る代わりに上の画像のページで確認を行うようになっています。それをしないと EmailConfirmed フィールドが True にならないのでログインできません。

その後ならログインできるはずです。

上の回答の太文字の部分の違いが怪しいので確認してみてください。

後はデバッグするぐらいしか手はないですが、登録・ログイン関係はソースコードではなく Razor Class Library として提供されているので、そのままではブレークポイントが設定できないのが問題です。スキャフォールディング機能を使ってソースコードを取り込むまでやるかどうかはお任せします。

Comments

[yamacs]

フィードバック遅れてしまい、本当に申し訳ありません。
今しがたこちらに回答してくださった通りに実践してみたところ無事にログインすることができました！

おっしゃる通り、太字の部分が今回の問題の原因だったようです。マイグレーションするには「Add-Migration」「Update-Database」が必要だと思っていたのですが、このテンプレートでは「Update-Database」だけで良かったのですね。
また、登録後の「Click here to confirm your account」も完全に見逃していました。こちらのクリックが必要だということは本当に自分だけでは気づくことができませんでした。

この度は非常に分かりやすく原因をご指摘くださりありがとうございました。本当に救われました。そして繰り返しになりますがフィードバック遅れてしまったこと、大変申し訳ありません。このようにすぐにご回答くださる方の誠意を無下にするような対応が二度とないよう今回のことはしっかり学びとし、引き続きこちらのサイトを使わせていただければと思います。本当にありがとうございました！