AzureWebAppのIdPでOktaを使う方法（OpenIDConnect）とアプリ側で認証情報の取得

概要

• AzureWebApp の IdP を使った認証で、EntraID の代わりに Okta を使用する
  • Okta 側で OpenID Connect を使うための設定
  • AzureWebApp 側で OpenID Connect を使うための設定
• AzureWebApp で IdP 認証したユーザの認証情報の取得
  （今回の例では Gradio を使用。ただし header に自動的に設定されるため、どのウェブアプリでも取得が可能）

準備

• 事前に AzureWebApp を作成
  • 「既定のドメイン」を Okta の設定で使用するためメモする
  • IdP 認証の確認のみの場合アプリはデプロイしてもしていなくても良い
    

Okta

Okta のアカウントを作成

記事作成時は developer edition を使っていたが廃止されるようなので差分が発生する可能性有り
https://developer.okta.com/blog/2025/05/13/okta-developer-edition-changes#deprecating-okta-developer-edition-organizations

• 下記から登録すると個人でいろいろ試せる Okta アカウントを作成出来る
  • フリーメールだと駄目らしいので私は携帯電話のキャリアメールアドレスを使用した
  • スマホに Okta Verify が必要（ログインとかでワンタイムパスワードが必要）
    https://developer.okta.com/signup/
    

- 登録が終わったら下記からログインする
https://okta-devok12.okta.com/

• 下記からログインする（Okta Integrator Free Plan 後）
  https://developer.okta.com/login/
  

Okta にアプリを作成

• 「アプリケーション」→「アプリケーション」→「アプリ統合を作成」を選択
  
• 「OIDC - OpenID Connect」「Webアプリケーション」を選択して次へ
  
• 今回の動作確認では以下のように設定して保存する
  • アプリ名を適当に入力
  • サインインリダイレクト URI に AzureWebApp のドメイン情報 + 「/.auth/login/testOktaIdp2/callback」を入力する
    • アプリケーションを ID プロバイダーに登録する
    • 「testOktaIdp2」の部分は後ほど AzureWebApp 側で別途設定する任意の値
      （Okta 側は後から変更も可能なので一旦雑に決めても良い）
  • サインアウトリダイレクト URI に AzureWebApp のドメイン情報を入力する（何も入れなくても今回の動作確認では問題無いかもしれない）
  • 「Organizationの全員にアクセスを許可」を選択
    
• 作成後アプリが表示される
  

Okta アプリの必要情報を保存

• 作成した Okta アプリの「クライアントID」「クライアントシークレット」を保存
  
• Okta 管理画面の「カスタムドメイン」の情報に「/.well-known/openid-configuration」を付与した URI を保存
  例：https://test.okta.com/.well-known/openid-configuration
  

AzureWebApp で OpenID Connect 認証の追加

• 「ID プロバイダーを追加」を選択して「OpenID Connect」を選択
  
• 今回の動作確認では以下のように設定して保存する
  • OpenID プロバイダー名に先行手順で設定した AzureWebApp のドメイン情報 + 「/.auth/login/testOktaIdp2/callback」 の「testOktaIdp2」部分を入力
  • メタデータ URL に先行手順で保存したOkta 管理画面の「カスタムドメイン」の情報に「/.well-known/openid-configuration」を付与した URI を入力
  • 「クライアントID」「クライアントシークレット」にそれぞれ Okta アプリから保存した値を入力
    
• 追加した ID プロバイダーが表示される
  
• 一度アプリを再起動しておく（不要の可能性も有り）
  

AzureWebApp の認証の動作確認

• シークレットモードでブラウザを立ち上げ AzureWebApp の URL にアクセス
  
• 上記アクセスするとリダイレクトされて Okta の画面が出るのでログインする
  • ログインすると AzureWebApp の画面に戻る
    （Webアプリをデプロイ済みであればアプリ画面が、未デプロイの時はAzureのデフォルト画面的なものが表示される）
    

認証したユーザの情報をアプリ側で取得

ユーザ情報取得の概要

• AzureWebApp の IdP 認証を行った場合 header の中に認証したユーザの情報が保存されてリクエストの度に送られる
  アプリ コードでユーザー クレームにアクセスする
  

サンプルアプリの準備

• 例として以下のような Gradio アプリをデプロイする
  • gr.Request の .headers を使ってヘッダの中身を表示する

  import gradio as gr
  
  def main():
      def user_info(request: gr.Request):
          return request.headers
  
      with gr.Blocks() as demo:
          userinfo = gr.Textbox(interactive=True)
          demo.load(fn=user_info, inputs=None, outputs=userinfo)
      demo.launch(server_port=8000, server_name='0.0.0.0')
  
  if __name__ == "__main__":
      main()
  

確認

• デプロイ後に AzureWebApp にアクセスすると以下のように header の情報が表示される
  
  • x-ms-client-principal-name で Okta 認証時の ID （多分）が得られる
    
  • x-ms-client-principal には JWT が入っている
    • デコードすると氏名やメールアドレスが入っている事が分かる
      https://jwt.io/
      
• AzureWebApp で認証したユーザの情報をアプリ側で得る事で、チャット履歴の管理やアプリ側でのユーザごとの機能制御など便利になりそうだった
  • 今回の例では個人的に Okta を使用する必要があったので Okta を使って認証を行ったが、認証情報の取得方法については EntraID を使った場合も同様に取得が可能となる
• 今回は AzureWebApp + Okta + OpenID Connect の認証を試したので、次は AzureWebApp + Okta + SAML を使った認証も試したい（AzureWebApp サービスの機能として提供されている認証ではなく、アプリ側の制御になりそうだが）