LoginSignup
4
15

More than 5 years have passed since last update.

@hiromasa-masuda(増田 裕正)

Visual Studio 2017 による ASP.NET Core MVC の Azure Active Directory 認証の構成

Last updated at Posted at 2017-04-19

ASP.NET Core MVC でサポートされる認証方式について

以前の投稿 Visual Studio 2017 による ASP.NET Core MVC 開発 では、"ASP.NET Core Web アプリケーション" のプロジェクト テンプレートを利用して、ASP.NET Core MVC アプリケーションを作成しました。

今回は、Web アプリケーションに必ず必要となる要件の一つである認証、認可の実現方法についてです。
少々昔すぎるかもしれませんが、ASP.NET では、以下の認証がサポートされていると説明されていました。

  • Windows 認証
  • フォーム認証
  • Passport 認証

ASP.NET MVC では、メンバーシップ プロバイダーにより、既存の用意された認証方式を利用したり、独自の認証方式を実装したりしました。
さらに、ASP.NET MVC 4 以降では、ASP.NET Identity が採用され、ASP.NET Core MVC でも同様の仕組みがサポートされています。

プロジェクト作成時に認証の種類毎にコードを出力できます。
image.png

  • 個別のユーザー アカウント: SQL Server にユーザー アカウント プロファイルを作成します。その他 Facebook, Twitter, Google, Microsoft アカウントで認証する場合もこちらを選択します。
  • 職場または学校アカウント: Active Directory, Azure Active Directory により認証を行う場合は、こちらを選択します。
  • Windows 認証: Windows 認証を選択する場合は、こちらを選択します。

今回は、認証に Azure Active Directory を利用した認証方法の実装を行いたいと考えています。

Azure Active Directory の作成

Azure Active Directory の認証を構成するには、Azure 環境が必要です。
Azure アカウントをお持ちでない場合は、以下から、無料で Azure アカウントを作成できます。

アカウント作成時にクレジット カードが必要となりますが、有償のサービスを利用しなければ課金されることはありません。
Azure Active Directory においても有償版を明示的に選ばなければ、課金されることはありません。
無料クレジットが付与されることもあるので、この機会に Azure の利用をはじめてみましょう。

Azure の環境が整ったら、[新規] - [セキュリティ + ID] - [Azure Active Directory] を選択する。
image.png

[組織名] に任意の名称を入力、[初期ドメイン名] ドメイン名を入力、[国/リージョン] に任意のリージョンを入力し、[作成] を選択します。
image.png

Azure Active Directory が作成されたら、ブラウザーをリロードします。
右上のアカウント名をクリックすると、作成した Azure Active Directory が選択可能となるので、これを選択します。
image.png

選択したディレクトリに移動するので、この状態から [Azure Active Directory] を選択します。
同画面より新規に作成した "Azure Active Directory" の設定を行うことができるので、この手順を覚えておきます。
image.png

Azure Active Directory のユーザーの追加

次に、Azure Active Directory にユーザーを追加します。
[すべてのユーザー] - [新しいユーザー] を選択します。
image.png

[名前] に任意の名前、[ユーザー名] に任意のアカウント名 + "@" + Azure Active Directory の FQDN を設定、[パスワードを表示] をチェックし、表示されたパスワードを覚えておきます、[作成] を選択します。
Azure Active Directory 内のローカル アカウントはこの方法で作成します。
image.png

Azure Active Directory の非常に便利な点として、外部のユーザーを追加できるということがあります。
Microsoft アカウントや他の Azure Active Directory のユーザーを招待し、追加できます。
[すべてのユーザー] - [新しいゲスト ユーザー] を選択します。
image.png

招待する Microsoft アカウントや他の Azure Active Directory のアカウント、招待メッセージを入力し、[招待する] を選択します。
image.png

プロジェクトの作成

次に、Visual Studio 2017 により Azure Active Directory を利用した認証を行う ASP.NET Core MVC プロジェクトを作成します。

Visual Studio 2017 を起動し、[ファイル] - [新規作成] - [プロジェクト] を選択。
[テンプレート] - [Visual C#] - [.NET Core] を選択し、[ASP.NET Core Web アプリケーション(.NET Core)] を選択し、[OK] を選択。

image.png

[Web アプリケーション] を選択し、[認証の変更] を選択します。
image.png

[ドメイン] に、前出の手順で作成した Azure Active Directory の FQDN を入力、[OK] を選択します。
image.png

認証が要求されるので、Azure の管理権限を持つアカウントでサインインします。
image.png

テンプレート選択画面に戻ってくるので、[OK] でプロジェクト テンプレートを生成します。
image.png

次に生成されたプロジェクトを実行します。[F5] キーもしくは、[IIS Express] を選択して、プロジェクトを実行します。
実行時に、IIS Express の自己証明書の信頼についてのダイアログが表示された場合は、[はい] を選択します。
image.png
続けて証明書をインストールします。[はい] を選択します。
image.png

プロジェクト起動後、認証画面に遷移するので、前出の手順で、Azure Active Directory に追加したユーザーのアカウントとパスワードでサインインします。
image.png

パスワードの更新が促された場合は、パスワードを更新します。
image.png

ここで、Intenal Server Error が発生することがあります。
https://localhost:xxxx/signin-oidc に遷移してしまっている場合は、https://localhost:xxxx/ へ遷移し直してください。
初期画面が表示され、右上のサインインしたアカウントが表示されていることが確認できます。
image.png

生成されたソース コードの確認

生成されたソース コードの Startup.Configure メソッドを確認すると、OpenID Connect の認証の定義が追加されていることが分かります。IApplicationBuilder.UseOpenIdConnectAuthentication メソッドにより、Azure Active Directory への OpenID Connect 認証に必要な情報を OpenIdConnectOptions のインスタンスにより設定しています。

Startup.cs

public class Startup
{
    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseBrowserLink();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }

        app.UseStaticFiles();

        app.UseCookieAuthentication();

        app.UseOpenIdConnectAuthentication(new OpenIdConnectOptions
        {
            ClientId = Configuration["Authentication:AzureAd:ClientId"],
            Authority = Configuration["Authentication:AzureAd:AADInstance"] + Configuration["Authentication:AzureAd:TenantId"],
            CallbackPath = Configuration["Authentication:AzureAd:CallbackPath"]
        });

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

OpenIdConnectOptions により OpenID Connect の情報を設定しているのは、ClientId, Authority, CallbackPath の 3 つのみです。
この 3 つの情報を設定するのみで、Azure Active Director を利用した認証を実現できてしまいます。

「ASP.NET Core MVC における構成ファイル appsettings.json からの値取得」でも書いたように、ClientId, Authority, CallbackPath の値は、appsettings.json に定義された値を取得するように実装されています。

appsettings.json
{
  "Authentication": {
    "AzureAd": {
      "AADInstance": "https://login.microsoftonline.com/",
      "CallbackPath": "/signin-oidc",
      "ClientId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
      "Domain": "aspnetcore001.onmicrosoft.com",
      "TenantId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
    }
  },
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  }
}

これらの値が Azure Active Directory のどの値に該当するかを見ていきます。
このコードで別の Azure Active Directory への接続へ設定を変更する場合に必要となります。

まず、TenantId は、[プロパティ] - [ディレクトリ ID] に対応します。この値は、Azure Active Directory のインスタンスを識別する一意な ID です。
image.png

ClientId は、[アプリの登録] から、該当のアプリを選択、[アプリケーション ID] に対応します。この値は、Azure Active Directory 上に登録したアプリに対する一意な ID です。
image.png

image.png

以上で、Visual Studio 2017 に標準で提供されている ASP.NET Core MVC のテンプレートを利用し、Azure Active Directory の認証の実装を容易に行うことができました。
認証機構を独自に開発する際には、パスワードのリセット、パスワードの複雑さのポリシーなども自身で開発する必要があり、これには、多くのコストが必要となります。
Azure Active Directory は、この認証に伴う必要な機能の多くを提供するため、開発者は、本来のアプリケーションの重要な機能にリソースを集中できるようになり、より魅力的なアプリケーションの開発を行うことができるようになると考えています。

4
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
15