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'))

次に、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

ここで、管理者権限で起動した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ポータルから手動で作ります。

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

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

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

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

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

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"

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

# 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 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

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

ブラウザで 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/ ) にサインインします。
2. そのアカウントで複数のテナントにアクセスできる場合は、右上でアカウントを選択してから、ポータルのセッションを、使用したい Azure AD テナントに設定します。

アプリを登録します。

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

アプリの詳細設定を行います。

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

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

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

1. Azure portal ( https://portal.azure.com/ ) にサインインします。
2. Azure Active Directory を検索して選択します。
3. Azure portal で、「アプリの登録」で前に作成したアプリの登録を選択します。
4. [管理]の[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

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

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

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

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

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

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

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

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

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

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

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

1. アプリケーション（クライアント）ID
2. ディレクトリ（テナント）ID
3. アプリケーション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: {}
  };
}

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

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

# ディレクトリ移動
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 > 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 ..
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=
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/"

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

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

Azure Active Directory にて、アプリのリダイレクトURIを追加します。

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

ソース変更後、ビルドと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

ここで、管理者権限で起動した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

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

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

1. Android Studioを起動して、Git Cloneした「ms-identity-android-kotlin/」ディレクトリのプロジェクトを開きます。
2. 画面右上の「AVD Manager」アイコンをクリックして、[Create Virtual Device]ボタンをクリックします。
3. [Pixel 3a]を選択して[Next]をクリックします。
4. System Imageは API Level 29 の Download リンクをクリックします。 Android 10 相当のイメージです。1.1GBほどダウンロードしますのでしばらく待ちます。完了したら[Next]をクリックします。
5. Android Virtual Device (AVD) の画面では[Finish]をクリックします。AVDのウィンドウは閉じます。
6. Android Studio のメイン画面に戻ると、Pluginのアップデートを促されるので、アップデートを実施します。
7. 画面上に AVD [Pixel 3a API 29] のセレクトボックスが表示されます。その右側にある [Run]アイコンをクリックします。
8. Android エミュレータが起動し、Android起動画面が表示されます。そのあと自動的にサンプルアプリが起動します。
9. サンプルアプリのタイトルバーには[Single Account Mode]と表示されています。ここで画面の[SIGN IN]ボタンをクリックします。
10. Chrome初回起動時の使用許諾画面が表示されるので[Accept]ボタンをクリックします。
11. Microsoft Azure のログイン画面が表示されるので、Microsoft アカウントのユーザー名とパスワードを入力します。
12. サンプルアプリの[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へのアプリの登録操作の記載がありますので、自作テナント専用アプリに改造することも可能です。