🚅
Auth0を使って爆速でOIDCの学習環境を構築する

2025/10/18に公開
こんにちは。

私は最近OIDC(OpenID Connect)のキャッチアップをしているのですが、各種パラメータの検証などにおいて気軽に検証可能な OpenID Provider(OP) を構築したいと考えていました。

Auth0を使用して検証環境を用意する方法がスムーズだったので共有できればと思います。

 Auth0Auth0は認証の素人である私も一度は聞いたことのある idP です。

環境構築がかなり簡単、かつ個人の検証の範囲であれば無料プランで十分だということが分かり、こちらを使用して学習環境を構築することにしました。
Auth0の無料プランが拡充
無料トライアルの開始後、22日間は多要素認証（MFA）や外部データベース接続、組織内で利用されているIdPとの連携を実現するEnterprise Connectionsなど数多くの機能を試行できます。
また、22日間のトライアル期間が終了した後も無料プランという形で、これまでは7,500ユーザーまでの月間のアクティブユーザーを上限として、基本的な認証機能に加え、GoogleやFacebookといった他サービスが提供しているIdPを利用するSocial Connections、パスキーなどを無料で利用でき、多くの開発者に利用いただき支持されてきました。
22日間はトライアル期間で、その後も無料プランは継続してくれるみたいですね。

他要素認証は無料プランには含まれないとのこと。

 実際にAuth0の環境をセッティングする構築するといっても、サインアップしてしまえば基本的な機能を備えたOPを提供してくれます。

サインアップすると以下のような画面になると思います。

 redirect_uri の設定redirect_uri の設定をします。

今回、私はクライアント側のコードをローカルで立ち上げるため、localhost を redirect_uri に設定しています。
左側のメニューから [アプリケーション] > [アプリケーション] を選択します

Default App という名前でデフォルトのアプリケーションが存在しているはずなので、そちらを選択します
[設定]タブに移動し、下にスクロールすると[許可するCallback URL]という欄が存在するのでそちらにコールバック先のURLを指定します。(例. http://localhost:8080/callback)
ページ最下部の [保存] をクリックして設定を保存します。
以上で検証するための設定は完了です🎉

 クライアント(RP、Relying Party)の構築今回は、authorize エンドポイントからコールバックされた際の成否、およびパラメータを表示するのみの必要最低限の実装をします。

なお、言語は TypeScript、フレームワークはHonoを使用しています。
index.ts
import { Hono } from 'hono'
import { serve } from '@hono/node-server'

const app = new Hono()

const PORT = 8080
const CALLBACK_PATH = '/callback'

app.get(CALLBACK_PATH, (c) => {
  const params = c.req.query()

  let status = "不明なリダイレクト (Unknown Redirection)"
  let statusColor = "gray"

  if (params.code) {
    status = "認証成功 (OIDC Success)"
    statusColor = "green"
  } else if (params.error) {
    status = `認証エラーが発生しました (Error: ${params.error})`
    statusColor = "red"
  }

  let paramListHtml = ""
  for (const [key, value] of Object.entries(params)) {
    const escapedKey = key.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    const escapedValue = value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    paramListHtml += `<li><strong>${escapedKey}:</strong> <code>${escapedValue}</code></li>`
  }

  const htmlContent = `
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hono OIDC コールバックテスト結果</title>
        <style>
            body { font-family: Arial, sans-serif; margin: 50px; background-color: #f4f4f4; }
            .container { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); max-width: 600px; margin: auto; }
            h1 { color: ${statusColor}; }
            code { background-color: #eee; padding: 2px 4px; border-radius: 4px; }
            ul { list-style-type: none; padding: 0; }
            li { margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
        </style>
    </head>
    <body>
        <div class="container">
            <h1 style="color: ${statusColor};">${status}</h1>
            <p>OIDCプロバイダーからのリダイレクトを正常に受け取りました。</p>
            <h2>受信したクエリパラメータ:</h2>
            <ul>
                ${paramListHtml || '<li>パラメータはありません。</li>'}
            </ul>
            <p>この画面が表示されたということは、リダイレクトURI <code>http://localhost:${PORT}${CALLBACK_PATH}</code> の設定と動作は**成功**しています。</p>
        </div>
    </body>
    </html>
  `

  return c.html(htmlContent)
})

serve({
  fetch: app.fetch,
  port: PORT,
}, () => {
  console.log(`Hono OIDC Callback Test Server running on http://localhost:${PORT}`)
})
これを起動しておけば検証の準備万端です👌

 試しにauthorizeエンドポイントを実行してみる準備が整ったので、試しに認可コードを取得するためにauthorizeエンドポイントを実行してみましょう。

authorizeエンドポイントを実行するためにはAuth0の設定画面からドメイン、クライアントIDを取得する必要があります。確認手段は以下です。
左側のメニューから [アプリケーション] > [アプリケーション] を選択します
[選択]タブの[基本情報]の[ドメイン]、[クライアントID]をコピー
クライアントIDを取得できたら以下URLにアクセスします。
https://<ドメイン>/authorize?
  client_id=<クライアントID>
  &redirect_uri=<設定したredirect_uri>
  &response_type=code
  &scope=openid%20profile%20email
実行すると、Auth0のアプリケーションにサインアップと情報共有の同意が求められるので指示通りに進めます。
同意を済ませると、認可コードの取得が成功し以下のような画面に遷移することが確認できます。
これでクライアント⇄OPの疎通および認可コードの取得ができることが確認できました！👍

 まとめ爆速でOIDCの検証環境を作る方法をまとめてみました、皆さんの学習の役に立つと幸いです。
Auth0

実際にAuth0の環境をセッティングする

redirect_uri の設定

クライアント(RP、Relying Party)の構築

試しにauthorizeエンドポイントを実行してみる

まとめ

Discussion
