f:id:horihiro:20200725205239p:plain Azure App Service が OpenID Connect による認証を (プレビューですが) サポートしたので、試してみました。
# といっても、元ネタは、Azure Functions の PM である Anthony Chu の下記ブログに書いてある内容で、ほぼ「追試」です。

公式ドキュメントはこちら。

Auth0 側の設定

Auth0 にログインして、アプリケーションを作成する
作成したアプリケーションから、下記の 3 つの情報をコピーする
- Client Id
- Client Secret
- Open ID Configuration 用 Endpoint ( Advanced Settings から取得可能です)
Application URIs のうち下記項目を設定する
- Application Login URI
  -> https://<app-name>.azurewebsites.net/.auth/login/auth0
- Application Callback URLs
  -> https://<app-name>.azurewebsites.net/.auth/login/auth0/callback
- Application Logout URLs
  -> https://<app-name>.azurewebsites.net/.auth/logout
アプリケーションを保存します。

App Service 側の設定

# Azure Functions も同じです

アプリケーション設定を追加する
今回は下記のような名称で作成します。
- 名前:
  AUTH0_CLIENT_SECRET
- 値:
  <Auth0 の Client Secret>
認証設定を有効化する
元ブログでは Azure CLI (az rest) でプロパティを更新していますが、Azure Resource Explorer から対象の App Service の config/authsettings を直接書き換えることも可能です。
設定ファイルを作成する
D:\home\site\wwwroot に、下記の設定ファイルを作成します。
認証設定の有効化 (上記 2. )で、authFilePath に auth.json と設定したので、設定ファイルのパスは D:\home\site\wwwroot\auth.json となります

{
  "platform": {
    "enabled": true
  },
  "globalValidation": {
    "redirectToProvider": "auth0",
    "unauthenticatedClientAction": "RedirectToLoginPage"
  },
  "identityProviders": {
    "openIdConnectProviders": {
      "auth0": {
        "registration": {
          "clientId": "<Auth0 の Client ID>",
          "clientCredential": {
            "secretSettingName": "AUTH0_CLIENT_SECRET"
          },
          "openIdConnectConfiguration": {
            "wellKnownOpenIdConfiguration": "<Auth0 の Open ID Configuration 用 Endpoint>"
          }
        },
        "login": {
          "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
          "scope": [ "openid", "profile", "email" ],
          "loginParameterNames": []
        }
      }
    }
  },
  "login": {
    "tokenStore": {
      "enabled": true
    }
  }
}

上の json のうち、secretSettingName には 1. で Client Secret を入れるために作成したアプリケーション設定の名前 (AUTH0_CLIENT_SECRET) を指定します。

試してみる

認証に関する情報はリクエストヘッダーに入ってくるので、下のような HTTP トリガー関数で (だいぶ雑に) 確認してみます

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    context.res = {
        status: 200,
        body: req.headers
    };
}

ブラウザーからアクセスしてみると、Auth0 のログイン画面にリダイレクトされるので、その画面でサインアップかログインすると、リクエストヘッダーがブラウザー上に表示されます。

f:id:horihiro:20200725204712p:plain