かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Azure ADを使ってAzure Web Appの認証をする

ログイン画面とかユーザー管理画面とかをそんなに求められてないシステムならお手軽なのでお勧めです。

基本的にここに書いてある内容にそっていきます。

azure.microsoft.com

ASP.NET Webアプリケーションを作る

空のアプリを作ります。ここではokazukiadappという名前にしました。一応MVCにチェックを入れておきます。

f:id:okazuki:20160208184910p:plain

そして、HomeControllerとIndex.cshtmlを作って実行したら最低限何か表示されるようにしておきます。

f:id:okazuki:20160208185134p:plain

Azure側の設定をする

Web appの作成

ポータルでWeb appを作ります。okazukiadappという名前で作成しました。

配備の確認

発行プロファイルをダウンロードして、Visual Studioで発行をしてインポートしてとりあえずデプロイできるようにしておきます。

f:id:okazuki:20160208190421p:plain

最後にControllerにAuthorize属性をつけて認証が必要なようにしておきます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace okazukiadapp.Controllers
{
    [Authorize]
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }
}

Azure ADの設定をする

クラシックポータル(じゃないとできないので泣く泣く)でAzure ADのディレクトリを作成します。ここではokazukiadという名前で作りました。

ユーザータブで適当にユーザーを作ります。

f:id:okazuki:20160208190701p:plain

f:id:okazuki:20160208190757p:plain

f:id:okazuki:20160208190948p:plain

次にアプリケーションタブでアプリケーションを作ります。 組織で開発中のアプリケーションを追加を選びます。

f:id:okazuki:20160208191222p:plain

次にアプリ名を適当に決めます

f:id:okazuki:20160208191313p:plain

サインオンURLでアプリのURLとアプリケーションID/URLで何か適当なURL?を指定します。

f:id:okazuki:20160208191528p:plain

アプリケーションが追加されたらちょっとわかりづらい情報を取得します。テナントIDというのがいるのですが、こいつがぱぱっとそれっぽく取得できません。アプリケーションを追加した後に表示される画面に「エンドポイントの表示」というボタンがあるので、それを押します。そうすると、各種URLが表示されるのですが、このURLの中にGUIDが含まれています。これがテナントIDなので控えておきます。

次に「クライアントID」という項目があるのでこれを控えておきます。

Web appの設定

以下のライブラリをNuGetからインストールします。

PM> Install-Package Microsoft.Owin.Security.OpenIdConnect
PM> Install-Package Microsoft.Owin.Security.Cookies
PM> Install-Package Microsoft.Owin.Host.SystemWeb

OWINのStartupクラスを追加します。

using Microsoft.Owin;
using Microsoft.Owin.Security;
using Microsoft.Owin.Security.Cookies;
using Microsoft.Owin.Security.OpenIdConnect;
using Owin;

[assembly: OwinStartup(typeof(okazukiadapp.Startup))]

namespace okazukiadapp
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.SetDefaultSignInAsAuthenticationType(
                CookieAuthenticationDefaults.AuthenticationType);
            app.UseCookieAuthentication(new CookieAuthenticationOptions());
            app.UseOpenIdConnectAuthentication(
                new OpenIdConnectAuthenticationOptions
                {
                    ClientId = "先ほど控えたクライアントID",
                    Authority = "https://login.microsoftonline.com/先ほど控えたテナントID",
                    PostLogoutRedirectUri = "https://okazukiadapp.azurewebsites.net/"
                });
        }
    }
}

Web.configのappSettingsにida:ClientID, ida:Tenant, ida:PostLogoutRedirectUrlを追加します。 ClientIdは先ほど取得したやつで、テナントは、ADのディレクトリ名.onmicrosoft.comで、最後のがアプリのURLあたりを書いてればいいでしょう。

<appSettings>
  <add key="webpages:Version" value="3.0.0.0"/>
  <add key="webpages:Enabled" value="false"/>
  <add key="ClientValidationEnabled" value="true"/>
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  <!-- ここから -->
  <add key="ida:ClientId" value="先ほど控えたクライアント"/>
  <add key="ida:Tenant" value="okazukiad.onmicrosoft.com"/>
  <add key="ida:PostLogoutRedirectUrl" value="https://okazukiadapp.azurewebsites.net/"/>
  <!-- ここまで -->
</appSettings>

デプロイして動作確認

デプロイしてアクセスするとAzure ADのサインイン画面に遷移します。 そして、ADに登録したユーザーでサインインすると(初回サインイン時はパスワードの変更を求められる)アプリの画面が表示されます。

ユーザー名の表示

こんな感じでいけます。

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@User.Identity.Name さんようこそ!

わからないこと

ロールってどうやるのだろう。 ここらへん?

www.cloudidentity.com