小浜です。
今回はAzure Active Directoryの認証を行うサンプルアプリ(Angular Webアプリ)(SPA)と、Androidアプリを動かしてみます。
サンプルアプリ1: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から以下を入力します。
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から以下を入力します。
1 2 3 4 5 |
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の場合は適宜読み替えてください。
1 2 3 4 5 |
# AZURE情報 export AZURE_USER="your_username" export AZURE_PASS="your_password" export AZURE_SUBSCRIPTION="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx" |
続けて各種定数の環境変数を設定していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
# 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 |
続けて作成操作を行います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
# 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版の使用方法が書いてあります。
以下のコマンドでサンプルソースを入手します。
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ドライブではビルドできません。
1 2 3 4 5 6 7 8 9 10 11 |
# ディレクトリ移動 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 を入力します。リダイレクトURLには「http://localhost:4200/」を入力します。
1. 暗黙的なフローを有効にします。
1. アプリケーションでユーザーがサインインする場合は、 [ID トークン] を選択します。
1. アプリケーションでも保護された Web API を呼び出す必要がある場合は、 [アクセス トークン] を選択します。
1. [構成] を選択して、リダイレクト URI の追加を完了します。
Angular シングルページアプリ(SPA) からの APIのアクセス許可を登録する
Angular9サンプルでは、Azure ADログイン後にProfileボタンでActive Directoryに登録されているユーザー情報をMS Graph APIで取得して画面に表示する機能があります。
ここでは、その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]を加えて、画面に3個の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 で、「アプリの登録」で前に作成したアプリの登録を選択します。
- 「概要」から、以下の情報をコピーしてメモしておきます。
- アプリケーション(クライアント)ID
- ディレクトリ(テナント)ID
- アプリケーションIDのURI
Angular シングルページアプリ(SPA) にAzure ADの登録情報を設定する
Azureポータル画面から取得した情報をAngularアプリ(SPA)のソースコードに記載します。
- アプリケーション(クライアント)ID
- ディレクトリ(テナント)ID
- アプリケーションIDのURI
angular9-sample-app/src/app/app.module.tsの内部に記載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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ディレクトリに移動して、ビルドと起動を行います。
1 2 3 4 5 6 |
# ディレクトリ移動 cd angular9-sample-app # 自動でビルドしてローカル実行 npx ng serve |
ブラウザで http://localhost:4200/ にアクセスし、画面右上の[Login]ボタンをクリックします。
ボタンが[Logout]表示に変化すればログイン成功です。
ログインした状態ならば、[Profile]ボタンクリックにより、画面上にログイン中のユーザーの名前が表示されます。
Angular Webアプリ(SPA) のビルドとAzure WebAppsへの登録
ビルドとWebAppsの作成&登録を行う手順は以下になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
# ディレクトリ移動 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 を検索して選択します。
1. Azure portal で、「アプリの登録」で前に作成したアプリの登録を選択します。
1. [管理] の下で、 [認証] 、[シングル ページ アプリケーション] の中の[リダイレクトURI]の下の[URIの追加]を選択します。
1. リダイレクト URI を入力します。リダイレクトURLには「https://angular9-sample-app.azurewebsites.net/」を入力して追加します。
1. 画面上の[保存]をクリックして、リダイレクト URI の追加を完了します。
Angularのソース側「angular9-sample-app/src/app/app.module.ts」のリダイレクトURIを「https://angular9-sample-app.azurewebsites.net/」に変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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)が登録できました。
サンプルアプリ2: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から以下を入力します。
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 サンプルアプリのソースの用意
適当なディレクトリの中で、以下の操作を行います。
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へのアプリの登録操作の記載がありますので、自作テナント専用アプリに改造することも可能です。