Azure AppServiceでOpenID Connect プロバイダーを使用してログインする

Wed, Sep 1, 2021

※ 本エントリーは2021/09時点の内容になります。現在プレビュー機能のため内容が変更になる場合があります。

AzureのAppServiceは、認証プロバイダとしてAzure AD/Facebook/Google/Twitterに加えて、OpenID Connectを選ぶことができます。このエントリーは、OpenID Connect の仕様に準拠したカスタム認証プロバイダーを使用してAzure App Servicesを構成する方法を説明します。

KeyCloakでOpenID Connectプロバイダーを構築する

まずはじめに機能検証を行うために、OpenID Connectプロバイダーを構築します。既存のIDプロバイダーがある場合はそちらを使ってください。

KeyCloakの検証環境構築

ここでは、Azure Container InstanceとKeyCloakを使って簡易的なIDプロバイダを作成します。

まず、Azureの東日本リージョンにリソースグループを作成します

az login
RG_NAME=keycloak
ACI_NAME=keycloak

az group create -n $RG_NAME -l japaneast

Azure Container Instanceは(ACI)、Azureが提供するコンテナ実行環境サービスです。次のコマンドを実行してKeyCloakをAzure Container Instanceを起動します。ここで、'–environment-variablesオプション’ でKeyCloakの管理者ユーザ名を’KEYCLOAK_USER’、パスワードを’KEYCLOAK_PASSWORD'に設定します。

az container create \
    -g $RG_NAME \
    -n $ACI_NAME \
    --image jboss/keycloak \
    --dns-name-label aci-keycloak \
    --ports 8080 \
    --environment-variables 'KEYCLOAK_USER'='admin' 'KEYCLOAK_PASSWORD'='password'

次のコマンドを実行すると、ACIの完全修飾ドメイン名(FQDN)とそのプロビジョニング状態が表示されます。

az container show \
    -g $RG_NAME \
    -n $ACI_NAME \
    --query "{FQDN:ipAddress.fqdn,ProvisioningState:provisioningState}" \
    --out table

ブラウザでKeyCloakのFQDNの8080ポートにアクセスします。 [Administration Console]から指定したKeyCloakの管理者ユーザ名/パスワードでログインします。

http://xxxx.japaneast.azurecontainer.io:8080/

これで環境が作成できました。

KeyCloakの設定

続いて、[Administration Console]-[Clients]を選び、[Create]ボタンをクリックします。

[Add Client]画面で以下の項目を設定し、[Save]ボタンをクリックします。

設定項目	設定値
Client ID	keycloak
Client Protocol	openid-connect

次に、KeyCloakの画面で[Access Type]を[confidential]を選び、[Valid Redirect URIs]に「*」を入力し、[Save]ボタンをクリックします。

ここで、KeyCloakのCredentialを取得します。[Credentials]タブを開き[Secret]に表示された値を後で使用するためにメモします。

また、動作確認を行う際にKeyCloakに任意のユーザを登録しておきましょう。

KeyCloakの環境構築に関しては、公式ドキュメントを参照するか、野村総合研究所のOpenStandiaメンバー中心でメンテされている和訳サイトを参照してください。

AppService でWebアプリを作成する

Node.js アプリケーションの作成

認証を設定するサンプルのNode.jsアプリケーションを作成します。次のコマンドでExpress ジェネレーターツールを使用して新しいExpressアプリケーションをスキャフォールディングします。

npx express-generator myExpressApp --view pug --git

アプリケーションの依存関係をインストールするために、新しいフォルダーに移動して npm install を実行します。

cd myExpressApp
npm install

ローカル環境でアプリケーションが動作することを確認します。

npm start

ブラウザでhttp://localhost:3000 にアクセスし動作確認を行います。

つぎにOpenID Connect プロバイダーを使用してログインできるよう、App Serviceの認証を設定します。ここでは、Expressアプリケーションのルートフォルダ「myExpressApp」配下にauth.jsonという名前のファイルを作成します。

これを以下のサンプルをもとに書き換えます。

ここで変更すべき箇所は [identityProviders]-[openIdConnectProviders]-[kaycloak]-[registration]-[openIdConnectConfiguration]の[wellKnownOpenIdConfiguration]の値を、上記で順で構築した検証用のACIのFQDNに変更します。

{
    "platform": {
        "enabled": true
    },
    "globalValidation": {
        "redirectToProvider": "keycloak",
        "unauthenticatedClientAction": "RedirectToLoginPage"
    },
    "identityProviders": {
        "openIdConnectProviders": {
            "keycloak": {
                "enabled": true,
                "registration": {
                    "clientId": "keycloak",
                    "clientCredential": {
                        "clientSecretSettingName": "KEYCLOAK_CLIENT_SECRET"
                    },
                    "openIdConnectConfiguration": {
                        "wellKnownOpenIdConfiguration": "http://<your_acr_name>.japaneast.azurecontainer.io:8080/auth/realms/master/.well-known/openid-configuration"
                    }
                },
                "login": {
                    "nameClaimType": "name",
                    "scopes": [
                        "openid"
                    ],
                    "loginParameterNames": []
                }
            }
        }
    },
    "login": {
        "tokenStore": {
            "enabled": true
        }
    }     
}

また、KeyCloakのSecretはこのファイルに直接記述せずに、AppServiceのアプリケーション設定で指定した値(キー名: KEYCLOAK_CLIENT_SECRET)を参照します。

AppServiceへのデプロイ

アプリケーションの準備ができたので、Visual Studio Codeの拡張機能を使用してAppServiceのLinux環境にデプロイします。

コマンドパレット(Ctrl + Shift + P) から「deploy to web app」と入力し、Azure App Service: Deploy to Web App コマンドを実行します。次に、[Create new Web App](新しい Web アプリの作成) を選択します。Webアプリ名にグローバルに一意な名前を入力し、Enter キーをクリックます。

デプロイ手順の詳細については、公式ドキュメント「Azure で Node.js Web アプリを作成する」を参照してください。

次に、KeyCloakのSecretをWebAppsのアプリケーション設定に登録します。 Azureポータルにアクセスし、作成したWebAppsの[設定]-[構成]-[アプリケーション設定の追加]で以下を登録します。

設定項目	設定値
名前	KEYCLOAK_CLIENT_SECRET
値	KeyCloakで取得したSecretの値¦

ファイルベースの構成の有効化

現時点で、WebAppsでOIDCを使った認証を有効にするためには、ファイルベースの構成の有効化が必要になります。

ブラウザでResource Explroer（https://resources.azure.com）を開きます。

次にツリーから [subscriptions] - [<お使いのサブスクリプション>] - [resourceGroups] - [<WebAppsのリソースグループ名>] - [providers] - [Microsoft.Web] - [sites] - [<WebApps名>] - [config] - [authsettingsV2] を選び、以下の項目を設定します。

ここで、configFilePathに、auth.jsonのファイルパスを指定してください。Linuxの場合は以下のようになります。

  "properties": {
    "platform": {
      "enabled": true,
      "configFilePath": "/home/site/wwwroot/auth.json"
    }
  }

この設定後は Azure Portal から App Service Authentication の設定が出来なくなるため、変更したい場合は Resource Explroer か Azure CLI を使う必要があります。

設定が完了したら、WebAppsを再起動します。

詳細な手順は、公式ドキュメント「OpenID Connect プロバイダーを使用してログインするように App Service または Azure Functions アプリを構成する (プレビュー)」を参照してください。

また、より詳細な情報はしばやん雑記-App Service Authentication が OpenID Connect Provider をサポートするようになったが大変参考になりました！ありがとうございます。

動作確認

これで設定が完了しましたので、WebAppsにデプロイしたサンプルアプリにアクセスします。

KeyCloakの認証ダイアログが表示されるので、KeyCloakで設定したユーザ名とパスワードを使用してログインします。認証に成功すると、サンプルアプリが表示されます。

clean up

次のコマンドを実行して、検証環境を削除します。

az group delete -n $RG_NAME

まとめ

本エントリーでは、App ServiceにデプロイしたWebサービスをOpenID Connect プロバイダーを使用して認証する手順をまとめました。これは現在プレビュー機能のため、今後は変更になる可能性があります。

最新の情報は、公式ドキュメントを参照してください。

以上