<h1 id="%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> この記事について</h1>
<p>この記事では <a href="https://auth0.com/" target="_blank" rel="nofollow noopener noreferrer">Auth0</a> で1つのアクセストークン(JWT) を使ってNode.jsの <a href="https://expressjs.com/" target="_blank" rel="nofollow noopener noreferrer">Express</a> で作った複数のAPIにアクセスする方法について紹介します。</p>
<h1 id="%E3%81%8A%E3%81%8A%E3%81%BE%E3%81%8B%E3%81%AA%E6%89%8B%E9%A0%86">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%8A%E3%81%BE%E3%81%8B%E3%81%AA%E6%89%8B%E9%A0%86" aria-hidden="true"></a> おおまかな手順</h1>
<p>おおまかな手順を下記に示します。</p>
<ol>
<li>APIの登録</li>
<li>APIの設定</li>
<li>アプリケーションの登録</li>
<li>アプリケーションの設定</li>
<li>APIのコーディング</li>
<li>UIのコーディング</li>
<li>動作確認</li>
</ol>
<p>Auth0のAPIやアプリケーションの登録／設定の詳しい操作手順については <a href="https://zenn.dev/tatsuyasusukida/articles/auth0-webapi" target="_blank">Node.jsでAuth0を利用してAPI認可を実装する</a> を参考にしていただければ幸いです。</p>
<h1 id="api%E3%81%AE%E7%99%BB%E9%8C%B2">
<a class="header-anchor-link" href="#api%E3%81%AE%E7%99%BB%E9%8C%B2" aria-hidden="true"></a> APIの登録</h1>
<p>Auth0のWebコンソールのAPIsページで下記のAPIを登録します。</p>
<ul>
<li>Name: Auth0 Multiple API</li>
<li>Identifier: auth0-multiple-api</li>
<li>Signing Algorithm: RS256</li>
</ul>
<h1 id="api%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#api%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> APIの設定</h1>
<p>APIのPermissionsページで下表3点のスコープを追加します。</p>
<table>
<thead>
<tr>
<th>Permission</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>api1:read:status</td>
<td>API1 Read Status</td>
</tr>
<tr>
<td>api2:read:status</td>
<td>API2 Read Status</td>
</tr>
<tr>
<td>api3:read:status</td>
<td>API3 Read Status</td>
</tr>
</tbody>
</table>
<p>また、QuickStartページでNode.jsのタブをクリックして表示されるサンプルコードに含まれる下記3点を後の手順のために控えます。</p>
<ul>
<li>jwksUri (例: <a href="https://example.jp.auth0.com/.well-known/jwks.json" target="_blank" rel="nofollow noopener noreferrer">https://example.jp.auth0.com/.well-known/jwks.json</a>)</li>
<li>audience (auth0-multiple-api)</li>
<li>issuer (例: <a href="https://example.jp.auth0.com/" target="_blank" rel="nofollow noopener noreferrer">https://example.jp.auth0.com/</a>)</li>
</ul>
<h1 id="%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E7%99%BB%E9%8C%B2">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E7%99%BB%E9%8C%B2" aria-hidden="true"></a> アプリケーションの登録</h1>
<p>Applicationsページで下記のアプリケーションを登録します。</p>
<ul>
<li>Name: Auth0 Multiple API Client</li>
<li>Application Type: Single Page Web Applications</li>
</ul>
<h1 id="%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> アプリケーションの設定</h1>
<p>ApplicationのSettingsページで下記3点の設定を変更して保存します。</p>
<ul>
<li>Allowed Callback URLs: <a href="http://localhost:8080/" target="_blank" rel="nofollow noopener noreferrer">http://localhost:8080/</a>
</li>
<li>Allowed Logout URLs: <a href="http://localhost:8080/" target="_blank" rel="nofollow noopener noreferrer">http://localhost:8080/</a>
</li>
<li>Allowed Web Origins: <a href="http://localhost:8080/" target="_blank" rel="nofollow noopener noreferrer">http://localhost:8080/</a>
</li>
</ul>
<p>また、下記の2点を後の手順のために控えます。</p>
<ul>
<li>Domain（例: example.jp.auth0.com）</li>
<li>ClientId（例: 0123456789abcdefghijklmnopqrstuv）</li>
</ul>
<h1 id="api%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0">
<a class="header-anchor-link" href="#api%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0" aria-hidden="true"></a> APIのコーディング</h1>
<p>ターミナルで下記のコマンドを実行してコーディングの準備をします。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">mkdir</span> auth0-multiple-api
<span class="token builtin class-name">cd</span> auth0-multiple-api
<span class="token function">npm</span> init <span class="token parameter variable">-y</span>
<span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">--save</span> cors dotenv express express-jwt express-jwt-authz http-server jwks-rsa
<span class="token function">touch</span> .env api.js
</code></pre></div><h2 id=".env">
<a class="header-anchor-link" href="#.env" aria-hidden="true"></a> .env</h2>
<p>エディタで.envを開いて前の手順で控えた内容を入力します。</p>
<span class="embed-block zenn-embedded zenn-embedded-gist"><iframe id="zenn-embedded__660e622838095" src="https://embed.zenn.studio/gist#zenn-embedded__660e622838095" data-content="https%3A%2F%2Fgist.github.com%2Ftatsuyasusukida%2F27f303a4bdac46209b513aaf85353bd5%3Ffile%3D.env.example" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<h2 id="api.js">
<a class="header-anchor-link" href="#api.js" aria-hidden="true"></a> api.js</h2>
<p>エディタでapi.jsを開いて下記の内容を入力します。</p>
<span class="embed-block zenn-embedded zenn-embedded-gist"><iframe id="zenn-embedded__e6e7f323f3d99" src="https://embed.zenn.studio/gist#zenn-embedded__e6e7f323f3d99" data-content="https%3A%2F%2Fgist.github.com%2Ftatsuyasusukida%2F27f303a4bdac46209b513aaf85353bd5%3Ffile%3Dapi.js" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<p>ポイントについては <a href="https://zenn.dev/tatsuyasusukida/articles/auth0-webapi#main.js" target="_blank">Node.jsでAuth0を利用してAPI認可を実装する</a> の記事と同様ですので割愛します。</p>
<h1 id="ui%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0">
<a class="header-anchor-link" href="#ui%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0" aria-hidden="true"></a> UIのコーディング</h1>
<p>同じディレクトリまたはuiなどの名前で別のディレクトリに作成して移動してから下記のコマンドを実行します。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">touch</span> auth_config.json index.html ui.js
</code></pre></div><p><a href="https://gist.github.com/tatsuyasusukida/27f303a4bdac46209b513aaf85353bd5" target="_blank" rel="nofollow noopener noreferrer">この記事に関するGist</a> ではディレクトリを使用できないので同じディレクトに作成していますが、個人的にはAPIに関係するファイルはapiディレクトリ、UIに関係するファイルはuiディレクトリに分けた方がスッキリすると考えています。</p>
<h2 id="auth_config.json">
<a class="header-anchor-link" href="#auth_config.json" aria-hidden="true"></a> auth_config.json</h2>
<p>エディタでauth_config.jsonを開いて前の手順で控えた内容を入力します。</p>
<span class="embed-block zenn-embedded zenn-embedded-gist"><iframe id="zenn-embedded__f06956e1010f4" src="https://embed.zenn.studio/gist#zenn-embedded__f06956e1010f4" data-content="https%3A%2F%2Fgist.github.com%2Ftatsuyasusukida%2F27f303a4bdac46209b513aaf85353bd5%3Ffile%3Dauth_config.example.json" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<h2 id="index.html">
<a class="header-anchor-link" href="#index.html" aria-hidden="true"></a> index.html</h2>
<p>エディタでindex.htmlを開いて下記の内容を入力します。</p>
<span class="embed-block zenn-embedded zenn-embedded-gist"><iframe id="zenn-embedded__a443c1659adfb" src="https://embed.zenn.studio/gist#zenn-embedded__a443c1659adfb" data-content="https%3A%2F%2Fgist.github.com%2Ftatsuyasusukida%2F27f303a4bdac46209b513aaf85353bd5%3Ffile%3Dindex.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<h2 id="ui.js">
<a class="header-anchor-link" href="#ui.js" aria-hidden="true"></a> ui.js</h2>
<p>エディタでui.jsを開いて下記の内容を入力します。</p>
<span class="embed-block zenn-embedded zenn-embedded-gist"><iframe id="zenn-embedded__b97903daa77cc" src="https://embed.zenn.studio/gist#zenn-embedded__b97903daa77cc" data-content="https%3A%2F%2Fgist.github.com%2Ftatsuyasusukida%2F27f303a4bdac46209b513aaf85353bd5%3Ffile%3Dui.js" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<p>ポイントについては <a href="https://zenn.dev/tatsuyasusukida/articles/auth0-webapi#main.js-1" target="_blank">Node.jsでAuth0を利用してAPI認可を実装する</a> の記事と同様ですので割愛します。ただし、createAuth0Clientのscopeオプションがapi1:read:status api2:read:statusとなっている点にはご注目ください。</p>
<h1 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 動作確認</h1>
<p>ターミナルで下記のコマンドを実行してAPIを起動します。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">node</span> <span class="token parameter variable">-r</span> dotenv/config 
</code></pre></div><p>新しいターミナルを起動して下記のコマンドを実行してUIを起動します。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">npx http-server -c-1
</code></pre></div><p>ブラウザで <a href="http://localhost:8080" target="_blank" rel="nofollow noopener noreferrer">http://localhost:8080</a> にアクセスしてから「ログイン」ボタンをクリックして認証と認可を行います。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--s4l454ns--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/f97de01647fc1cf9d5c8a65f.png%3Fsha%3D3a189a1e8e9df63d751c2ca50d1c1f706dec5a90" alt="UIにアクセスした直後の様子です。Webページは認証、API1、API2、API3の4つのセクションで構成されています。認証セクションはログインボタンとログアウトボタンを含んでいます。API1セクションはAPI1のステータスを取得するボタンとレスポンスの表示部を含んでいます。API2とAPI3も同様です。" loading="lazy" class="md-img"></p>
<p>認証と認可が完了したら「API1のステータスを取得する」ボタンをクリックしてAPI1のステータスを取得できることを確認します。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--SZOC30Yu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/114a8ebb7e363444fea49ca4.png%3Fsha%3Dbfc0e8d58409db47af6174aeadf0d70258448551" alt='「API1のステータスを取得する」ボタンをクリックした直後の様子です。レスポンスの表示部の内容がResponse: {"name": "api1", "ok": true}になっています。' loading="lazy" class="md-img"></p>
<p>続いて「API2のステータスを取得する」ボタンをクリックしてAPI2のステータスを取得できることを確認します。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--RmWu_LKb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d127f3ba86f5908efa99642f.png%3Fsha%3D3eb245849214addfd898b7272918c1c9231331cf" alt='「API2のステータスを取得する」ボタンをクリックした直後の様子です。レスポンスの表示部の内容がResponse: {"name": "api2", "ok": true}になっています。' loading="lazy" class="md-img"></p>
<p>続いて「API3のステータスを取得する」ボタンをクリックしてAPI3のステータスを取得<strong>できない</strong>ことを確認します（api3:read:statusを認可していないので取得に失敗するのが正しい動作です）。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--iUnx6cNz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/a11eda4e8fc69478152818ca.png%3Fsha%3Deaca3bae4ed5a098f8aec19b37f03bf180a95144" alt="「API3のステータスを取得する」ボタンをクリックした直後の様子です。レスポンスの表示部の内容がResponse: Insufficient scopeになっています。" loading="lazy" class="md-img"></p>
<h1 id="%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9Fweb%E3%83%9A%E3%83%BC%E3%82%B8">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9Fweb%E3%83%9A%E3%83%BC%E3%82%B8" aria-hidden="true"></a> 参考にしたWebページ</h1>
<p>この記事を作成するために参考にしたWebページを下記に示します。</p>
<ul>
<li><a href="https://auth0.com/docs/get-started/apis/set-logical-api" target="_blank" rel="nofollow noopener noreferrer">Configure Logical API for Multiple APIs</a></li>
</ul>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<p>JWTのaud（audience、トークンの受け取り手）はURLである必要があると思い込んでいたのでURLでなくてもOKであることに加え、複数のAPIで使い回しても良いことを知った時は驚きでした。<a href="https://community.auth0.com/t/my-token-has-multiple-audiences-is-that-normal/41417" target="_blank" rel="nofollow noopener noreferrer">Auth0のコミュニティのWebページ</a> によるとAuth0のJWTのaudは2つの要素からなる配列であり、そのうち1件はAuth0のuserinfo（ユーザー情報を取得するためのAPI）なので実質1つのaudienceだけを指定することができます。複数のaudienceを指定できることが理想ですが、Auth0の仕様でできないのであればこの記事で紹介したように方法を使うことで1つのトークンで複数のAPIにアクセスすることができます。もっと良い方法をご存知の方がいましたらお気軽にコメントをいただければ幸いです。最後までお読みいただきありがとうございました！</p>
<h1 id="%E9%96%A2%E9%80%A3%E8%A8%98%E4%BA%8B">
<a class="header-anchor-link" href="#%E9%96%A2%E9%80%A3%E8%A8%98%E4%BA%8B" aria-hidden="true"></a> 関連記事</h1>
<ul>
<li><a href="https://zenn.dev/tatsuyasusukida/articles/auth0-webapi" target="_blank">Node.jsでAuth0を利用してAPI認可を実装する</a></li>
<li><a href="https://zenn.dev/tatsuyasusukida/articles/auth0-webapp" target="_blank">Node.jsでAuth0を利用してユーザー認証を実装する</a></li>
</ul>


Auth0で1つのアクセストークンを使って複数のAPIにアクセスする方法

Discussion