Azure AD 認証してみた

posted in: Android | 0

小浜です。

今回は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から以下を入力します。

次に、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から以下を入力します。

ここで、管理者権限で起動した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 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したディレクトリ内部の「microsoft-authentication-library-for-js/samples/msal-angular-samples/angular9-sample-app」に、Angular9用のサンプルファイルがあります。

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

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

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

ブラウザで 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を許可します。

  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]を加えて、画面に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

  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の内部に記載します。

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

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

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

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

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

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

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

登録が成功すると、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/」に変更します。

ソース変更後、ビルドと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から以下を入力します。

ここで、管理者権限で起動した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 サンプルアプリのソースの用意

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

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へのアプリの登録操作の記載がありますので、自作テナント専用アプリに改造することも可能です。

LINEで送る
Pocket