Azure AD 認証してみた | デーコムラボ

小浜です。

今回はAzure Active Directoryの認証を行うサンプルアプリ(Angular Webアプリ)(SPA)と、Androidアプリを動かしてみます。

サンプルアプリ１：Angular Webアプリ(SPA)

前提とする構成

MicrosoftアカウントとAzure有料サブスクリプション契約
Windows 10 Pro version 1909
Windows機のメモリは12GB以上を想定しています。
Windows機の空きHDD容量は300GB以上必要です。

背景解説

Azure Active Directory
Windows Server Active Drectory と Azure Active Directory 、名前と役割は似ていますが内部的には別物なので注意が必要です。
Windows Server Active Drectoryは、基本的にイントラネット(社内ネット)の認証認可を担っていますが、Azure Active Directoryはインターネット側の認証認可を行う目的で作られています。簡単に言えばOffice365契約者の認証認可のために作られたものです。
OAuth 2.0
ネットワーク上に分散したサイト間で、認証サイトと認可サイトが異なる場合に用いる認可フローです。
RFC 6749 (The OAuth 2.0 Authorization Framework) で定義されています。用途ごとに4つの認可フローがあります。
RFC6749の日本語訳はこちら。https://openid-foundation-japan.github.io/rfc6749.ja.html The OAuth 2.0 Authorization Framework
Qiita上に解説があります。 https://qiita.com/TakahikoKawasaki/items/200951e5b5929f840a1f OAuth 2.0 全フローの図解と動画 – Qiita
Webアプリ(SPA)の場合はImplicit Flow(インプリシットフロー)(暗黙的な許可のフロー)を使います。
MSAL (Microsoft Authentication Library)
Microsoftのクライアント側認証用ライブラリです。以下に概要説明があります。
https://docs.microsoft.com/ja-jp/azure/active-directory/develop/msal-overview
今回のサンプルアプリ(Angular / Android)は、どちらもMSALを使用しています。
Azure Active Directory相手に認証認可を行う場合には便利です。

作成する構成

Azure Active Directory 上にテナントを作成します。
Azure App Service の WebApps 上に Angular9 SPA アプリを設置します。
Angular9 SPA アプリから認証を行います。

セットアップ準備

chocolateyによる各種ツールのインストール

Windowsにnodejsなどをインストールするため、chocolateyを使用します。

https://chocolatey.org/ Chocolatey – The package manager for Windows

chocolateyはWindows向けのパッケージマネージャーです。
Mac OS Xで言うところのHomebrewのようなもので、Microsoft公式提供ではありませんが、色々なソフトウェアをコマンドラインからインストールすることができます。

まずchocolateyのインストールを行います。管理者権限で起動したWindows PowerShellから以下を入力します。

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

1 2	Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

次に、Chocolateyを使ってツールをインストールしていきます。

nodejs 14.8.0
JavaScriptの実行エンジンです。
azure-cli 2.11.1
az cliコマンドをインストールします。
jq 1.6
jsonを処理するコマンドです。
msys2 20200816.0.0
bash環境としてMSYS2を利用しています。普通の人にはWSL2がお勧めです。

管理者権限で起動したWindows PowerShellから以下を入力します。

choco install -y nodejs
choco install -y azure-cli
choco install -y jq
choco install -y msys2

choco install -y nodejs

choco install -y azure-cli

choco install -y jq

choco install -y msys2

ここで、管理者権限で起動したWindows PowerShellを終了します。

Azure AD テナントの作成

Azure AD テナントを作成します。

https://docs.microsoft.com/ja-jp/azure/active-directory/fundamentals/active-directory-access-create-new-tenant クイックスタート – Azure AD にアクセスして新しいテナントを作成する – Azure AD | Microsoft Docs

Azure AD テナントを作成するコマンドラインツールは無いのでAzureポータルから手動で作ります。

https://portal.azure.com/ ポータルに入る
リソースの作成から「Azure Active Directory」を選択
組織名と初期ドメイン名に「OreContoso」を入力 (名前が衝突している場合は変える)
国に「日本」を入力
作成を選択

新しいディレクトリを管理するには作成後の画面の「ここをクリック」のリンクを踏むと、
ブラウザのログインユーザーの下の表示が「既定のディレクトリ」から「ORECONTOSO」に変わります。

Azure Portal トップ画面から、画面右上のログイン中のユーザーボタンをクリックし、
「ディレクトリの切り替え」リンクから「ディレクトリ＋サブスクリプション」選択ポップアップを表示し、
「既定のディレクトリ」と「OreContoso」を切り替えることができます。

削除する場合場合の操作は以下です。

ポータルからユーザー名の下にあるディレクトリ名をクリック、ディレクトリの切り替えをクリック、 [ディレクトリ + サブスクリプション] フィルターを使用して、削除するディレクトリにサインインしていることを確認し、必要に応じてターゲットディレクトリに切り替えます。
[Azure Active Directory] を選択し、 [Contoso – 概要] ページで [ディレクトリの削除] を選択します。
権限が足りなくてディレクトリを削除できない場合は、リンクがあるので、権限を昇格します。

Azure App Service の作成

Azure Azure App Service は、ロードバランサー, Webサーバ, アプリケーションサーバの機能を提供しています。
* 参考 https://docs.microsoft.com/ja-jp/azure/app-service/

ここでは、Azure CLI を用いてAzure App Service を作成するbash手順を作成しました。

実際に実行するには、Azureの有料プランの契約が必要になるので注意が必要です。

スクリプトを使う前に、以下のように、環境変数にAzureのユーザー名、パスワード、サブスクリプションIDを設定します。

以下の操作例ではbash用の記述で説明します。PowerShellの場合は適宜読み替えてください。

# AZURE情報
export AZURE_USER="your_username"
export AZURE_PASS="your_password"
export AZURE_SUBSCRIPTION="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"

# AZURE情報

export AZURE_USER="your_username"

export AZURE_PASS="your_password"

export AZURE_SUBSCRIPTION="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"

続けて各種定数の環境変数を設定していきます。

# GLOBAL_NAMEは、色々な箇所に付与される名前のプリフィックスを定義しています。
# Azure App Serviceでは、同じロケーションの内部で他と重ならないユニークな名前を付ける必用があります。
export GLOBAL_NAME=mymyore1
# リソースグループ名設定 名前関連はDNSで使われるので、DNS名で使える文字が良い。
export RG_WORK_NAME=${GLOBAL_NAME}-work-rg
# サイトのロケーション選択 japaneast / eastus / eastus2 とかから選択
export RG_LOCATION=japaneast
export RG_LOCATION_SHORT=jpe

# App Service Plan Name
export APP_SVC_PLAN_NAME=${GLOBAL_NAME}-app-svc-plan
export APP_SVC_PLAN_SKU=B2

# web app 3 angular webapps
export WEB_APPS_DIR_NAME3=angular9-sample-app
export WEB_APPS_APP_NAME3=angular9-sample-app
export WEB_APPS_APP_FQDN3=${WEB_APPS_APP_NAME3}.azurewebsites.net

# GLOBAL_NAMEは、色々な箇所に付与される名前のプリフィックスを定義しています。

# Azure App Serviceでは、同じロケーションの内部で他と重ならないユニークな名前を付ける必用があります。

export GLOBAL_NAME=mymyore1

# リソースグループ名設定名前関連はDNSで使われるので、DNS名で使える文字が良い。

export RG_WORK_NAME=${GLOBAL_NAME}-work-rg

# サイトのロケーション選択 japaneast / eastus / eastus2 とかから選択

export RG_LOCATION=japaneast

export RG_LOCATION_SHORT=jpe

# App Service Plan Name

export APP_SVC_PLAN_NAME=${GLOBAL_NAME}-app-svc-plan

export APP_SVC_PLAN_SKU=B2

# web app 3 angular webapps

export WEB_APPS_DIR_NAME3=angular9-sample-app

export WEB_APPS_APP_NAME3=angular9-sample-app

export WEB_APPS_APP_FQDN3=${WEB_APPS_APP_NAME3}.azurewebsites.net

続けて作成操作を行います。

# Azureにログイン
az login -u ${AZURE_USER} -p ${AZURE_PASS}

# サブスクリプションの設定
az account set --subscription ${AZURE_SUBSCRIPTION}

# リソースグループ作成
az group create --name $RG_WORK_NAME --location $RG_LOCATION

# App Service plan 作成
az appservice plan create \
  --name ${APP_SVC_PLAN_NAME} \
  --resource-group ${RG_WORK_NAME} \
  --is-linux \
  -l ${RG_LOCATION} \
  --sku ${APP_SVC_PLAN_SKU} \
  --number-of-workers 1

# Azureにログイン

az login -u ${AZURE_USER} -p ${AZURE_PASS}

# サブスクリプションの設定

az account set --subscription ${AZURE_SUBSCRIPTION}

# リソースグループ作成

az group create --name $RG_WORK_NAME --location $RG_LOCATION

# App Service plan 作成

az appservice plan create \

--name ${APP_SVC_PLAN_NAME} \

--resource-group ${RG_WORK_NAME} \

--is-linux \

-l ${RG_LOCATION} \

--sku ${APP_SVC_PLAN_SKU} \

--number-of-workers 1

Azure Active Directoryの認証を行うAzure App Service (WebApps) サンプルアプリの作成

AzureAD認証を行う実装については以下に解説記事があります。
* 参考 https://docs.microsoft.com/ja-jp/azure/active-directory/develop/quickstart-v2-angular

https://github.com/AzureAD/microsoft-authentication-library-for-js/ Microsoft Authentication Library for JavaScript (MSAL.js)
Azure AD認証を行う Webアプリ(SPA)のサンプルがあります。現時点ではAngular9用のものです。
https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/README.md
MSAL for Angular版の使用方法が書いてあります。

以下のコマンドでサンプルソースを入手します。

git clone https://github.com/AzureAD/microsoft-authentication-library-for-js.git

1 2	git clone https://github.com/AzureAD/microsoft-authentication-library-for-js.git

git cloneしたディレクトリ内部の「microsoft-authentication-library-for-js/samples/msal-angular-samples/angular9-sample-app」に、Angular9用のサンプルファイルがあります。

local PC上でAngular9 Webアプリ(SPA) の起動

まずはlocal PC上で画面を見てみます。

注意：Windows上では、AngularのソースはCドライブに置いてください。Dドライブではビルドできません。

# ディレクトリ移動
cd angular9-sample-app

# package-lock.jsonに従って、同じバージョンのnpmをインストール
npm ci

# 自動でビルドしてローカル実行
# (npxはプロジェクト内の node_moduls/.bin/以下にあるコマンドを実行するコマンド)
# (ngはAngular CLIコマンド)
npx ng serve

# ディレクトリ移動

cd angular9-sample-app

# package-lock.jsonに従って、同じバージョンのnpmをインストール

npm ci

# 自動でビルドしてローカル実行

# (npxはプロジェクト内の node_moduls/.bin/以下にあるコマンドを実行するコマンド)

# (ngはAngular CLIコマンド)

npx ng serve

ブラウザで http://localhost:4200/ を表示すると、Angularサンプルの画面が表示されます。

画面右上にLoginボタンが表示されています。ログイン成功後にはLogoutボタンに変化します。

Angular Webアプリ(SPA) を Azure ADに登録

Angular Webアプリ(SPA) を Azure ADに登録します。

https://docs.microsoft.com/ja-jp/azure/active-directory/develop/quickstart-v2-angular Angular シングルページアプリでユーザーをサインインさせる – Microsoft identity platform | Microsoft Docs
この手順に沿って進めます。
参考 https://docs.microsoft.com/ja-jp/azure/active-directory/develop/scenario-spa-app-registration シングルページアプリケーション (SPA) の登録 – Microsoft identity platform | Microsoft Docs
参考 https://docs.microsoft.com/ja-jp/azure/active-directory/develop/v2-oauth2-implicit-grant-flow OAuth 2.0 暗黙的な許可のフロー – Microsoft ID プラットフォーム | Microsoft Docs

この手順では、暗黙的な許可フローを使用します。
Angular9のサンプルがMSAL for js 1.0系を使用しており、暗黙的な許可フローしか利用できないためです。

まずはテナントを選択しておきます。
1. Azure portal ( https://portal.azure.com/ ) にサインインします。
1. そのアカウントで複数のテナントにアクセスできる場合は、右上でアカウントを選択してから、ポータルのセッションを、使用したい Azure AD テナントに設定します。

アプリを登録します。
1. Azure Active Directory を検索して選択します。
1. [管理] の [アプリの登録] を選択します。
1. [新規登録] を選択して、アプリケーションの [名前] を入力します。アプリケーションの [サポートされているアカウントの種類] を選択します。ここでは「シングルテナント」を選択します。ここではまだ [リダイレクト URI] は入力しないでください。
1. [登録] を選択して、アプリの登録を作成します。

アプリの詳細設定を行います。
1. Azure Active Directory を検索して選択します。
1. Azure portal で、「アプリの登録」で前に作成したアプリの登録を選択します。
1. [管理] の下で、 [認証] 、 [プラットフォームの追加] の順に選択します。
1. [Web アプリケーション] の下で、 [シングルページアプリケーション] タイルを選択します。
1. [リダイレクト URI] の下で、リダイレクト URI を入力します。リダイレクトＵＲＬには「http://localhost:4200/」を入力します。
1. 暗黙的なフローを有効にします。
1. アプリケーションでユーザーがサインインする場合は、 [ID トークン] を選択します。
1. アプリケーションでも保護された Web API を呼び出す必要がある場合は、 [アクセストークン] を選択します。
1. [構成] を選択して、リダイレクト URI の追加を完了します。

Angular シングルページアプリ(SPA) からの APIのアクセス許可を登録する

Angular9サンプルでは、Azure ADログイン後にProfileボタンでActive Directoryに登録されているユーザー情報をMS Graph APIで取得して画面に表示する機能があります。
ここでは、そのＡＰＩを許可します。

Azure portal ( https://portal.azure.com/ ) にサインインします。
Azure Active Directory を検索して選択します。
Azure portal で、「アプリの登録」で前に作成したアプリの登録を選択します。
[管理]の[APIのアクセス許可]を選択し、アクセス許可の追加ボタンをクリック、右側のペインから[Microsoft Graph]をクリック、[委任されたアクセス許可]をクリック、[openid Sign users in] と [profile View users’ basic profile] にチェックを入れます。

最初から許可されていた[User.Read]を加えて、画面に３個のAPIの許可が表示されます。

Angular シングルページアプリ(SPA) からの APIのアクセス許可/スコープを設定する

ここの登録操作を行うとAngularページ単位の認証の要求（AngularのCanActivate機能を用いたGuard）が利用可能になります。

アクセス許可/スコープとロールを公開する
参考 https://docs.microsoft.com/ja-jp/azure/active-directory/develop/quickstart-configure-app-expose-web-apis クイックスタート:Web API を公開するようにアプリを構成する – Microsoft identity platform | Microsoft Docs

Azure portal ( https://portal.azure.com/ ) にサインインします。
Azure Active Directory を検索して選択します。
Azure portal で、「アプリの登録」で前に作成したアプリの登録を選択します。
「APIの公開」から、「Scopeの追加」をクリックします。アプリケーションIDのURIは変更せずにそのまま[保存してから続ける]をクリックし、スコープ名に「access_as_user」を入力します。表示名と説明は適当に入力し[スコープの追加]をクリックします。

アプリに対して事前承認しておくと、ユーザーの同意画面を表示しないことも可能です。

Azure portal ( https://portal.azure.com/ ) にサインインします。
Azure Active Directory を検索して選択します。
Azure portal で、「アプリの登録」で前に作成したアプリの登録を選択します。
「APIの公開」を選択します。
[承認済みのクライアントアプリケーション] の下にある、 [クライアントアプリケーションの追加] を選択します
事前承認するクライアントアプリケーションの [アプリケーション (クライアント) ID] を入力します。登録した Web アプリケーションのIDを使います。
[承認済みのスコープ] で、同意を求めるメッセージを表示しないスコープを選択し、 [アプリケーションの追加] を選択します。

作成したテナントからのAPIのアクセス許可に管理者の同意を与える

作成したテナントからのAPIのアクセス許可に管理者の同意を設定します。

Azure portal ( https://portal.azure.com/ ) にサインインします。
Azure Active Directory を検索して選択します。
Azure portal で、「エンタープライズアプリケーション」で前に作成したアプリの登録を選択します。
[セキュリティ]の[アクセス許可]を選択し、 [管理者の同意を与えます]ボタンをクリックします。

Angular シングルページアプリ(SPA) の登録情報を取得する

ここまでの登録操作で登録された情報をAzureポータル画面から取得します。後でAngularアプリ(SPA)の設定に記載します。

Azure portal ( https://portal.azure.com/ ) にサインインします。
Azure Active Directory を検索して選択します。
Azure portal で、「アプリの登録」で前に作成したアプリの登録を選択します。
「概要」から、以下の情報をコピーしてメモしておきます。
1. アプリケーション（クライアント）ID
2. ディレクトリ（テナント）ID
3. アプリケーションIDのURI

Angular シングルページアプリ(SPA) にAzure ADの登録情報を設定する

Azureポータル画面から取得した情報をAngularアプリ(SPA)のソースコードに記載します。

アプリケーション（クライアント）ID
ディレクトリ（テナント）ID
アプリケーションIDのURI

angular9-sample-app/src/app/app.module.tsの内部に記載します。

function MSALConfigFactory(): Configuration {
  return {
    auth: {
      // clientId: '6226576d-37e9-49eb-b201-ec1eeb0029b6',
      // authority: "https://login.microsoftonline.com/common/",
      clientId: 'アプリケーション（クライアント）ID',      ★ 1. アプリケーション（クライアント）ID を記載
      authority: "https://login.microsoftonline.com/ディレクトリ（テナント）ID/",  ★ 2. ディレクトリ（テナント）IDを記載
      validateAuthority: true,
      redirectUri: "http://localhost:4200/", ★ リダイレクトURIを記載
      postLogoutRedirectUri: "http://localhost:4200/", ★ リダイレクトURIを記載
      navigateToLoginRequestUrl: true,
    },
    cache: {
      cacheLocation: "localStorage",
      storeAuthStateInCookie: isIE, // set to true for IE 11
    },
  };
}

function MSALAngularConfigFactory(): MsalAngularConfiguration {
  return {
    popUp: !isIE,
    consentScopes: [
      "user.read",
      "openid",
      "profile",
      "アプリケーションIDのURI/access_as_user"  ★ 3. アプリケーションIDのURIを記載
    ],
    unprotectedResources: ["https://www.microsoft.com/en-us/"],
    protectedResourceMap,
    extraQueryParameters: {}
  };
}

function MSALConfigFactory(): Configuration {

return {

auth: {

// clientId: '6226576d-37e9-49eb-b201-ec1eeb0029b6',

// authority: "https://login.microsoftonline.com/common/",

clientId: 'アプリケーション（クライアント）ID', ★ 1. アプリケーション（クライアント）ID を記載

authority: "https://login.microsoftonline.com/ディレクトリ（テナント）ID/", ★ 2. ディレクトリ（テナント）IDを記載

validateAuthority: true,

redirectUri: "http://localhost:4200/", ★ リダイレクトURIを記載

postLogoutRedirectUri: "http://localhost:4200/", ★ リダイレクトURIを記載

navigateToLoginRequestUrl: true,

cache: {

cacheLocation: "localStorage",

storeAuthStateInCookie: isIE, // set to true for IE 11

};

}

function MSALAngularConfigFactory(): MsalAngularConfiguration {

return {

popUp: !isIE,

consentScopes: [

"user.read",

"openid",

"profile",

"アプリケーションIDのURI/access_as_user" ★ 3. アプリケーションIDのURIを記載

unprotectedResources: ["https://www.microsoft.com/en-us/"],

protectedResourceMap,

extraQueryParameters: {}

};

}

localhost 上の Angular Webアプリ(SPA) からの Azure AD 認証の実施

angular9-sample-appディレクトリに移動して、ビルドと起動を行います。

# ディレクトリ移動
cd angular9-sample-app

# 自動でビルドしてローカル実行
npx ng serve

# ディレクトリ移動

cd angular9-sample-app

# 自動でビルドしてローカル実行

npx ng serve

ブラウザで http://localhost:4200/ にアクセスし、画面右上の[Login]ボタンをクリックします。

ボタンが[Logout]表示に変化すればログイン成功です。

ログインした状態ならば、[Profile]ボタンクリックにより、画面上にログイン中のユーザーの名前が表示されます。

Angular Webアプリ(SPA) のビルドとAzure WebAppsへの登録

ビルドとWebAppsの作成＆登録を行う手順は以下になります。

# ディレクトリ移動
pushd ${WEB_APPS_DIR_NAME3}

# Angular App ビルド
npx ng build --prod

# ZIPで登録するディレクトリに移動
cd dist
cd ${WEB_APPS_DIR_NAME3}

# create PM2 config file  これは必須
# App Service の Web Apps の node.js モードでは、 Linux docker コンテナを起動し、
# メインプログラムとして pm2 serve が実行される。 (ZIPの中にindex.jsファイルがある場合)
# pm2 用の設定ファイル(ecosystem.config.js) が無いと pm2 コマンド異常が終了して
# コンテナ停止→起動の繰り返しになる。
cat &gt; ecosystem.config.js &lt;&lt; "EOF"
module.exports = {
    script: "serve",
    env: {
        PM2_SERVE_PATH: '.',
        PM2_SERVE_PORT: 8080
    }
}
EOF

rm -f /tmp/${WEB_APPS_APP_NAME3}.zip
zip -r /tmp/${WEB_APPS_APP_NAME3}.zip .
cd ..
cd ..

# webappが既にあるかチェック
if az webapp list -o json | jq -r ' .[] | .hostNames' | grep ${WEB_APPS_APP_FQDN3} 1&gt; /dev/null 2&gt; /dev/null ; then
    echo "found"
    export DO_WEBAPP=done
else
    echo "not found"
    export DO_WEBAPP=
fi

# 最初の一回だけ実施
# nodeのランタイムでwebappを作る
# (悲報：Linuxでしか実行できない。node|10.14が処理できない)
if [ x"$DO_WEBAPP"x = x""x ]; then

    # 使用可能なランタイム一覧
    az webapp list-runtimes

    # webapp 作成
    az webapp create \
        --name ${WEB_APPS_APP_NAME3} \
        --resource-group ${RG_WORK_NAME} \
        --plan ${APP_SVC_PLAN_NAME} \
        --runtime "node|10.14"
    export DO_WEBAPP=done
fi

# WebDeploy/MSDeploy を使用して Web アプリをデプロイする場合は以下。
az webapp config appsettings set \
    --resource-group ${RG_WORK_NAME} \
    --name ${WEB_APPS_APP_NAME3} \
    --settings WEBSITE_WEBDEPLOY_USE_SCM=false

# zipファイルのアップロード
az webapp deployment source config-zip \
    --resource-group ${RG_WORK_NAME} \
    --name ${WEB_APPS_APP_NAME3} \
    --src /tmp/${WEB_APPS_APP_NAME3}.zip

echo "今回ZIPで登録したアプリのURLは以下になる。"
echo "https://${WEB_APPS_APP_NAME3}.azurewebsites.net/"

# ディレクトリ移動

pushd ${WEB_APPS_DIR_NAME3}

# Angular App ビルド

npx ng build --prod

# ZIPで登録するディレクトリに移動

cd dist

cd ${WEB_APPS_DIR_NAME3}

# create PM2 config file これは必須

# App Service の Web Apps の node.js モードでは、 Linux docker コンテナを起動し、

# メインプログラムとして pm2 serve が実行される。 (ZIPの中にindex.jsファイルがある場合)

# pm2 用の設定ファイル(ecosystem.config.js) が無いと pm2 コマンド異常が終了して

# コンテナ停止→起動の繰り返しになる。

cat > ecosystem.config.js << "EOF"

module.exports = {

script: "serve",

env: {

PM2_SERVE_PATH: '.',

PM2_SERVE_PORT: 8080

}

EOF

rm -f /tmp/${WEB_APPS_APP_NAME3}.zip

zip -r /tmp/${WEB_APPS_APP_NAME3}.zip .

cd ..

# webappが既にあるかチェック

if az webapp list -o json | jq -r ' .[] | .hostNames' | grep ${WEB_APPS_APP_FQDN3} 1> /dev/null 2> /dev/null ; then

echo "found"

export DO_WEBAPP=done

else

echo "not found"

export DO_WEBAPP=

# 最初の一回だけ実施

# nodeのランタイムでwebappを作る

# (悲報：Linuxでしか実行できない。node|10.14が処理できない)

if [ x"$DO_WEBAPP"x = x""x ]; then

# 使用可能なランタイム一覧

az webapp list-runtimes

# webapp 作成

az webapp create \

--name ${WEB_APPS_APP_NAME3} \

--resource-group ${RG_WORK_NAME} \

--plan ${APP_SVC_PLAN_NAME} \

--runtime "node|10.14"

export DO_WEBAPP=done

# WebDeploy/MSDeploy を使用して Web アプリをデプロイする場合は以下。

az webapp config appsettings set \

--resource-group ${RG_WORK_NAME} \

--name ${WEB_APPS_APP_NAME3} \

--settings WEBSITE_WEBDEPLOY_USE_SCM=false

# zipファイルのアップロード

az webapp deployment source config-zip \

--resource-group ${RG_WORK_NAME} \

--name ${WEB_APPS_APP_NAME3} \

--src /tmp/${WEB_APPS_APP_NAME3}.zip

echo "今回ZIPで登録したアプリのURLは以下になる。"

echo "https://${WEB_APPS_APP_NAME3}.azurewebsites.net/"

登録が成功すると、https://angular9-sample-app.azurewebsites.net/ のサイトにAngular Webアプリ(SPA)が公開されます。

まだAzure AD認証はできません。リダイレクトURIが http://localhost:4200/ のままだからです。

Azure Active Directory にて、アプリのリダイレクトURIを追加します。
1. Azure Active Directory を検索して選択します。
1. Azure portal で、「アプリの登録」で前に作成したアプリの登録を選択します。
1. [管理] の下で、 [認証] 、[シングルページアプリケーション] の中の[リダイレクトURI]の下の[URIの追加]を選択します。
1. リダイレクト URI を入力します。リダイレクトＵＲＬには「https://angular9-sample-app.azurewebsites.net/」を入力して追加します。
1. 画面上の[保存]をクリックして、リダイレクト URI の追加を完了します。

Angularのソース側「angular9-sample-app/src/app/app.module.ts」のリダイレクトURIを「https://angular9-sample-app.azurewebsites.net/」に変更します。

function MSALConfigFactory(): Configuration {
  return {
    auth: {
      // clientId: '6226576d-37e9-49eb-b201-ec1eeb0029b6',
      // authority: "https://login.microsoftonline.com/common/",
      clientId: 'アプリケーション（クライアント）ID',      ★ 1. アプリケーション（クライアント）ID を記載
      authority: "https://login.microsoftonline.com/ディレクトリ（テナント）ID/",  ★ 2. ディレクトリ（テナント）IDを記載
      validateAuthority: true,
      // redirectUri: "http://localhost:4200/",
      // postLogoutRedirectUri: "http://localhost:4200/",
      redirectUri: "https://angular9-sample-app.azurewebsites.net/", ★ リダイレクトURIを記載
      postLogoutRedirectUri: "https://angular9-sample-app.azurewebsites.net/", ★ リダイレクトURIを記載
      navigateToLoginRequestUrl: true,
    },
    cache: {
      cacheLocation: "localStorage",
      storeAuthStateInCookie: isIE, // set to true for IE 11
    },
  };
}

function MSALConfigFactory(): Configuration {

return {

auth: {

// clientId: '6226576d-37e9-49eb-b201-ec1eeb0029b6',

// authority: "https://login.microsoftonline.com/common/",

clientId: 'アプリケーション（クライアント）ID', ★ 1. アプリケーション（クライアント）ID を記載

authority: "https://login.microsoftonline.com/ディレクトリ（テナント）ID/", ★ 2. ディレクトリ（テナント）IDを記載

validateAuthority: true,

// redirectUri: "http://localhost:4200/",

// postLogoutRedirectUri: "http://localhost:4200/",

redirectUri: "https://angular9-sample-app.azurewebsites.net/", ★ リダイレクトURIを記載

postLogoutRedirectUri: "https://angular9-sample-app.azurewebsites.net/", ★ リダイレクトURIを記載

navigateToLoginRequestUrl: true,

cache: {

cacheLocation: "localStorage",

storeAuthStateInCookie: isIE, // set to true for IE 11

};

}

ソース変更後、ビルドとWebApps登録を行う手順を再度実行します。

WebApps登録後、ブラウザで https://angular9-sample-app.azurewebsites.net/ にアクセスし、画面右上の[Login]ボタンをクリックします。

ボタンが[Logout]表示に変化すればログイン成功です。

ログインした状態ならば、[Profile]ボタンクリックにより、画面上にログイン中のユーザーの名前が表示されます。

以上で Azure Active Directory 認証可能なWebアプリ(SPA)が登録できました。

サンプルアプリ２：Android アプリ

Azure Active Directoryの認証を行うスマホアプリ(Kotolin) サンプルアプリを動かしてみます。

前提とする構成

Microsoftアカウントがあること
Windows 10 Pro version 1909
Windows機のメモリは16GB以上を想定しています。
Windows機の空きHDD容量は300GB以上必要です。

作成する構成

Android エミュレータ上で Azure Active Directory 認証を行うアプリを動かして認証してみます。

セットアップ準備

chocolateyによる各種ツールのインストール

Chocolateyを使ってツールをインストールしていきます。

androidstudio 4.0.1.0
Android用のIDEです。

管理者権限で起動したWindows PowerShellから以下を入力します。

choco install -y AndroidStudio

1 2	choco install -y AndroidStudio

ここで、管理者権限で起動したWindows PowerShellを終了します。

Azure Active Directoryの認証を行うAndroid サンプルアプリの作成

AzureAD認証を行う実装については以下に解説記事があります。
* 参考 https://docs.microsoft.com/ja-jp/azure/active-directory/develop/quickstart-v2-android

https://github.com/Azure-Samples/ms-identity-android-kotlin.git
Azure AD認証を行う Android アプリのサンプルがあります。

Android サンプルアプリのソースの用意

適当なディレクトリの中で、以下の操作を行います。

git clone https://github.com/Azure-Samples/ms-identity-android-kotlin.git

1 2	git clone https://github.com/Azure-Samples/ms-identity-android-kotlin.git

Android Studio エミュレータからのサンプルアプリの起動と認証実施

Android Studio 上でサンプルアプリを動かして認証してみます。

Android Studioを起動して、Git Cloneした「ms-identity-android-kotlin/」ディレクトリのプロジェクトを開きます。
画面右上の「AVD Manager」アイコンをクリックして、[Create Virtual Device]ボタンをクリックします。
[Pixel 3a]を選択して[Next]をクリックします。
System Imageは API Level 29 の Download リンクをクリックします。 Android 10 相当のイメージです。1.1GBほどダウンロードしますのでしばらく待ちます。完了したら[Next]をクリックします。
Android Virtual Device (AVD) の画面では[Finish]をクリックします。AVDのウィンドウは閉じます。
Android Studio のメイン画面に戻ると、Pluginのアップデートを促されるので、アップデートを実施します。
画面上に AVD [Pixel 3a API 29] のセレクトボックスが表示されます。その右側にある [Run]アイコンをクリックします。
Android エミュレータが起動し、Android起動画面が表示されます。そのあと自動的にサンプルアプリが起動します。
サンプルアプリのタイトルバーには[Single Account Mode]と表示されています。ここで画面の[SIGN IN]ボタンをクリックします。
Chrome初回起動時の使用許諾画面が表示されるので[Accept]ボタンをクリックします。
Microsoft Azure のログイン画面が表示されるので、Microsoft アカウントのユーザー名とパスワードを入力します。
サンプルアプリの[SIGN IN]ボタンがグレイアウトし、ログイン成功したことを示します。画面下にはAzure Active DirectoryからGraph APIで取得したJSONデータが表示されます。

以上の操作でAzure Active Directoryを用いた認証ができました。

今回はここで力尽きたので自作のテナント(OreContoso)用への書き換えは操作手順は紹介しませんが、
サンプルアプリのGitサイト( https://github.com/Azure-Samples/ms-identity-android-kotlin.git ) の READMEには
Azure Active Directoryへのアプリの登録操作の記載がありますので、自作テナント専用アプリに改造することも可能です。

Pocket