Zenn
💬

とりあえず Flask で OIDC を使った Microsoft Entra ID での認証

2023/08/10に公開
Flask
Azure
OIDC
#
azurecontainerapps
tech

TL;DR

  • Flask でアプリを作る
  • Flask-Dance を使って OIDC 認証を設定する
  • Azure Container Apps で動かす

やっていく

今回はほぼメモ用の記事なので大した内容はありません。
サクッとやっていきましょう。

Flask でアプリを作って、OIDC 認証を実装する

ソースコードはこちらです。
Azure App ServiceでFlaskアプリケーションを公開する(with AAD認証) をほぼそのままお借りしています。

requirements.txt
flask
flask-dance
werkzeug
app.py
from flask import Flask, redirect, render_template, request, send_from_directory, url_for
from flask_dance.contrib.azure import make_azure_blueprint, azure
from werkzeug.middleware.proxy_fix import ProxyFix

app = Flask(__name__)
app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1, x_host=1)
app.secret_key = "STRONG-SECRET-KEY-HERE"

blueprint = make_azure_blueprint(
    client_id = "YOUR-CLIENT-ID-HERE",
    client_secret = "YOUR-CLIENT-SECRET-HERE",
    tenant = "YOUR-TENANT-ID-HERE",
)

app.register_blueprint(blueprint, url_prefix="/login")

@app.route("/", methods=["GET"])
def index():
    if not azure.authorized:
        return redirect(url_for("azure.login"))
    resp = azure.get("/v1.0/me")
    assert resp.ok
    return "You are {email} on Azure".format(email=resp.json()["userPrincipalName"])

if __name__ == "__main__":
    app.run(debug=True)

Microsoft Entra ID (旧 Azure AD) での認証を設定する

Azure Portal から Azure Active Directory を開き、App registrations から新しいアプリを作成します。
Redirect URI は一旦空っぽにしておきますが、後で入れます。
作成したら、Certificates & secrets から新しい client secret を作成します。
ここで表示される Secret は少し経つと表示できなくなるので気を付けてください。

また、Authentication に移り、ID tokens (used for implicit and hybrid flows) のチェックボックスをオンにします。

Azure Container Apps にデプロイする

あとで修正しますが、まずは一番簡単なやり方として Azure Container Apps に全部お任せプランで実行します。

az containerapp up -g <resource-group-name> -n <container-apps-name> --ingress external --target-port 50505 --source .

これだけで実は動きます。
app.py と requirements.txt さえあれば、後は全部お任せ、すごくないですか。
裏側では microsoft/Oryx というのを利用しており、Dockerfile を作ってコンテナ化までをまるっとやってくれます。

Redirect URI を設定する

ということで URL が決まったので、Azure Portal から App registrations で作成したアプリを開き、Authentication に移り、Redirect URI に Azure Container Apps の URL + "/login/azure/authorized" を追加します。
雰囲気的には、https://xxxxxxxxxxxx.xxxxxxxx-xxxxxxxx.japaneast.azurecontainerapps.io/login/azure/authorized みたいな感じになると思います。

作成したアプリにアクセスする

今回は / (ルート、一番上) に対して認証をかけているので、https://xxxxxxxxxxxx.xxxxxxxx-xxxxxxxx.japaneast.azurecontainerapps.io/ にアクセスすると、Microsoft Entra ID の認証画面が表示されます。
適当なアカウントを選択し、うまく認証が済むと、"You are hoge@example.com on Azure" みたいな文字が画面に表示されているはずです。

少し改善していく

このままでもいいのですが、microsoft/Oryx を使うとイメージが大きくなりすぎるので少し変更していきます。
まずは requirements.txt に gunicorn を追加しておきます。

requirements.txt
flask
flask-dance
werkzeug
gunicorn

加えて、Dockerfile、.dockerignore、gunicorn.conf.py を追加します。
ここら辺は Azure Container Apps に Flask または FastPI Web アプリをデプロイする を参考にしています。

Dockerfile
# syntax=docker/dockerfile:1

FROM python:3.11

WORKDIR /code

COPY requirements.txt .

RUN pip3 install -r requirements.txt

COPY . .

EXPOSE 50505

ENTRYPOINT ["gunicorn", "app:app"]
.dockerignore
.git*
**/*.pyc
.venv/
gunicorn.conf.py
# Gunicorn configuration file
import multiprocessing

max_requests = 1000
max_requests_jitter = 50

log_file = "-"

bind = "0.0.0.0:50505"

workers = (multiprocessing.cpu_count() * 2) + 1
threads = workers

timeout = 120

この状態で再度 az containerapp up してみると、いい感じになっているはずです、たぶん。

まとめ

というわけで、Flask で OIDC 認証を実装し、それを Azure Container Apps で動かしてみました。

Discussion