<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<h3 id="%E4%BD%95%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%8B">
<a class="header-anchor-link" href="#%E4%BD%95%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%8B" aria-hidden="true"></a> 何の記事か</h3>
<ul>
<li>Cognitoで外部プロバイダー（GitHub）認証を実装しようとして断念した体験談</li>
<li>試行錯誤して学んだことのまとめ（OAuth2.0とOIDCの大まかなフローとCognitoの機能について）</li>
</ul>
<p>実装しようと頑張ったけどできなかった！でも学ぶこともあったよ！という感じの記事です。</p>
<h3 id="%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%A7%E8%A9%B1%E3%81%95%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%A7%E8%A9%B1%E3%81%95%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8" aria-hidden="true"></a> この記事で話さないこと</h3>
<ul>
<li>認可・認証についての基礎</li>
<li>Cognitoの基礎、概要</li>
</ul>
<h2 id="%E3%82%84%E3%82%8D%E3%81%86%E3%81%A8%E3%81%97%E3%81%9F%E3%81%93%E3%81%A8%E3%80%81%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E3%82%84%E3%82%8D%E3%81%86%E3%81%A8%E3%81%97%E3%81%9F%E3%81%93%E3%81%A8%E3%80%81%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> やろうとしたこと、やったこと</h2>
<p>フロントはNext.js、認証ライブラリにNextAuthを利用。<br>
ユーザーはGitHubアカウントでログイン、主なコンテンツはGitHubと連携するアプリケーションです。<br>
認証機能の実装にAWS Cognitoを利用。<br>
外部IDプロバイダーとしてGitHubを設定。（OAuthAppアプリを使用）<br>
Cognitoがサポートしているのは以下の三つです。</p>
<ul>
<li>ソーシャルIDプロバイダー（Facebook, Google, Amazon, Apple）</li>
<li>SAMLプロバイダー</li>
<li>OpenID Connect（OIDC）プロバイダー</li>
</ul>
<p>GitHubOAuthアプリはいずれにも対応していないので、OIDCプロバイダーとして使えるように何らかの方法でOIDCの仕組みを実装する必要があります。<br>
今回はこちらを使用。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__be3d8f2a55bb9" src="https://embed.zenn.studio/card#zenn-embedded__be3d8f2a55bb9" data-content="https%3A%2F%2Fgithub.com%2FTimothyJones%2Fgithub-cognito-openid-wrapper" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/TimothyJones/github-cognito-openid-wrapper" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/TimothyJones/github-cognito-openid-wrapper</a></p>
<p>GitHub OAuthAppをOIDCプロバイダーとして使えるようにLambda関数とAPIGatewayでラップしたものです。<br>
やろうとした構成はこんな感じです。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--UPs_7Eri--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/5253f9f61a4953ba8da90540.png%3Fsha%3D05810d86c06a524b87e85c0fb43af042b2efdcd6" alt="Architecture" loading="lazy" class="md-img"></p>
<p>最終ゴールと結果は以下の通り。</p>
<ul>
<li>【できた👏】GitHub認証でCognitoユーザープールにユーザーが追加される</li>
<li>【できた👏】ログイン中のGitHubユーザー名、メールアドレスをフロントで表示できる</li>
<li>【できなかった😰】GitHubアクセストークンをフロントで保持<br>
（できるのはCognitoが発行するトークンのみ）</li>
</ul>
<p>GitHubが発行するアクセストークンはCognitoで止まり、クライアントには返ってきません。なんとかして取得できないかと上記のLambda関数をカスタムして使おうとしましたが、断念。<br>
Cognitoを用いるのにCognitoが発行するトークンを使わずに、GitHubが発行するアクセストークンでクライアントからGitHubAPIに直接リクエストを送る（Cognitoを通さずに！）こと自体が間違っているというか、ユースケースとしてほぼあり得ない、想定されていないのかなと思います。<br>
Cognitoが主に解決するのはアプリケーション独自または外部IdPを用いた認証により発行したトークンを用いて<strong>AWSリソースへのアクセス</strong>を可能にすることなので、今回はアクセス先がAWSリソースではなく外部（GitHub）であるためトークン周りがややこしくなっていました。<br>
またGitHubAPIの利用がメインとなりGitHub以外のアカウント連携を想定していないことから、この複雑さを乗り越えるほどCognitoを用いる強いメリットはないと考えました。<br>
もしCognitoを使うならGitHubにより認証されたユーザーがIDプール経由で他のAWSサービス（APIサーバー、リソースサーバーにあたるもの）にアクセスできるようにする構成かなと思います。</p>
<h2 id="oauth%E3%81%A8oidc">
<a class="header-anchor-link" href="#oauth%E3%81%A8oidc" aria-hidden="true"></a> OAuthとOIDC</h2>
<p><strong>OAuth2.0</strong>は認可のためのプロトコルです。<br>
<a href="https://datatracker.ietf.org/doc/html/rfc6749" target="_blank" rel="nofollow noopener noreferrer">RFC6749</a><br>
<strong>OpenID Connect</strong>（OIDC）はOAuth2.0を拡張して認証もできるようにしたもの。<br>
<a href="https://www.openid.or.jp/document/" target="_blank" rel="nofollow noopener noreferrer">OpenIDファウンデーションジャパン</a></p>
<h3 id="oauth2.0">
<a class="header-anchor-link" href="#oauth2.0" aria-hidden="true"></a> OAuth2.0</h3>
<p>RFC6749でOAuth2.0のいくつかの認可フロー、エンドポイントが定義されています。<br>
<strong>【認可フロー】</strong></p>
<ul>
<li>認可コードフロー</li>
<li>インプリシットフロー</li>
<li>リソースオーナー・パスワード・クレデンシャルズフロー</li>
<li>クライアント・クレデンシャルズフロー</li>
<li>リフレッシュトークンフロー</li>
</ul>
<p><strong>【エンドポイント】</strong>※認可サーバーのエンドポイント</p>
<ul>
<li>認可エンドポイント</li>
<li>トークンエンドポイント</li>
</ul>
<p>厳密には、エンドポイントは他にもあります。<br>
フローによって各エンドポイントを使ったり使わなかったり。</p>
<p>今回は認可コードフローのみ簡単に図解してみます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--BBaPa1LD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/25b5918bd803d03dfa76325f.png%3Fsha%3D20441f22ceeeefda6e8f69d74cf623a391268005" alt="OAuth2.png" loading="lazy" class="md-img"><br>
<em>OAuth2.0 認可コードフローの流れ</em></p>
<p>少し分かりづらいですが、③と④の過程では認可サーバーとユーザーの間でのみやり取りが行われてアプリケーションを介しません。<br>
こちらの記事がとても参考になりました。全フローが細かく解説されています。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__af9baddf50b1b" src="https://embed.zenn.studio/card#zenn-embedded__af9baddf50b1b" data-content="https%3A%2F%2Fqiita.com%2FTakahikoKawasaki%2Fitems%2F200951e5b5929f840a1f" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/TakahikoKawasaki/items/200951e5b5929f840a1f" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/TakahikoKawasaki/items/200951e5b5929f840a1f</a></p>
<h3 id="openid-connect%EF%BC%88oidc%EF%BC%89">
<a class="header-anchor-link" href="#openid-connect%EF%BC%88oidc%EF%BC%89" aria-hidden="true"></a> OpenID Connect（OIDC）</h3>
<p>OIDCは認可プロトコルであるOAuth2.0を「認証」のために拡張した仕様です。<br>
上記図の認可サーバーはIDプロバイダーと呼ばれ、認証サーバーに当たります。<br>
大きく違うのは、二点です。</p>
<ol>
<li>上記図④でユーザーの本人確認（認証）を必要とする（ID/PW、OTP…など）</li>
<li>上記図⑧でアクセストークンを発行する際に「IDトークン」も発行、さらにアプリケーションでIDトークンの検証が行われます。また、検証に使用する公開鍵を認証サーバーのJWKSエンドポイント（<strong>JWKS</strong>＝<strong>J</strong>son <strong>W</strong>eb <strong>K</strong>ey <strong>S</strong>et）から取得します。</li>
</ol>
<p>アクセストークンはリソースへのアクセスを認可したという証明書のようなもので、これさえあればリソースへのアクセスが可能です。<br>
IDトークンにはユーザーの認証情報（OIDCの仕様として定義あり）がクレームとして含まれています。そのためIDトークンの検証を行うことで、アプリケーションは認証結果を保持することができます。この認証結果を用いてリソースへのアクセスを行うのがOIDCです。</p>
<p>かなり簡略化して図解したものがこちらです。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--ataFACwT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/3ab16bc08dcfa166591eff01.png%3Fsha%3D372727908971f836c78508f4ecfed30b3057c73a" alt="OIDC.png" loading="lazy" class="md-img"><br>
<em>OIDCの流れ</em></p>
<p>OAuthは認可、OIDCは認証のプロトコルだという違いを言葉では理解していましたが、具体的に何が「認証」としているのか疑問でした。OIDCでは<strong>IDトークン</strong>を発行し、これを<strong>検証</strong>するというフェーズが認可プロトコルOAuthとの大きな違いでありOIDCを「認証」たらしめている部分です。</p>
<h2 id="cognito%E3%81%A3%E3%81%A6%E4%BD%95%E3%81%97%E3%81%A6%E3%82%8B%E3%81%AE%EF%BC%9F">
<a class="header-anchor-link" href="#cognito%E3%81%A3%E3%81%A6%E4%BD%95%E3%81%97%E3%81%A6%E3%82%8B%E3%81%AE%EF%BC%9F" aria-hidden="true"></a> Cognitoって何してるの？</h2>
<h3 id="%E5%A4%96%E9%83%A8id%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%83%BC%E3%81%A8%E3%81%AE%E9%80%A3%E6%90%BA">
<a class="header-anchor-link" href="#%E5%A4%96%E9%83%A8id%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%83%BC%E3%81%A8%E3%81%AE%E9%80%A3%E6%90%BA" aria-hidden="true"></a> 外部IDプロバイダーとの連携</h3>
<p>「外部IDプロバイダー経由でのフェデレーションサインイン」を提供しています。<br>
Cognitoを外部IDプロバイダーと接続することで、アプリケーションと一つ以上の外部IDプロバイダーのブリッジとして機能します。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fe9d19de7667a" src="https://embed.zenn.studio/card#zenn-embedded__fe9d19de7667a" data-content="https%3A%2F%2Fdocs.aws.amazon.com%2Fja_jp%2Fcognito%2Flatest%2Fdeveloperguide%2Fcognito-user-pools-identity-federation.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pools-identity-federation.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pools-identity-federation.html</a></p>
<p>コンソール画面の<strong>ユーザープール＞サインインエクスペリエンス＞フェデレーテッドアイデンティティプロバイダーのサインイン</strong>からアイデンティティプロバイダーを追加することができます。（Facebook/Google/Amazon/Apple/SAML/OIDCのいずれか）</p>
<h3 id="api%E3%82%A8%E3%83%B3%E3%83%89%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AE%E6%8F%90%E4%BE%9B">
<a class="header-anchor-link" href="#api%E3%82%A8%E3%83%B3%E3%83%89%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AE%E6%8F%90%E4%BE%9B" aria-hidden="true"></a> APIエンドポイントの提供</h3>
<p>Cognito自身もまたOIDCの仕様に準拠したAPIエンドポイントを提供しています。<br>
ユーザープールにドメインを割り当てることで各エンドポイントが有効になります。<br>
これらのエンドポイントはアプリケーションにとってOAuth2.0、OIDC、SAMLの各フローにおけるエンドポイントであり、外部IDプロバイダーにとってもまたリダイレクト先のエンドポイントとなります。<br>
これらのエンドポイントを利用することで、Cognitoがアプリケーションと外部IDプロバイダーとの橋渡しの役割を担っていると言えるのだと思います。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__aecd3bff974e8" src="https://embed.zenn.studio/card#zenn-embedded__aecd3bff974e8" data-content="https%3A%2F%2Fdocs.aws.amazon.com%2Fja_jp%2Fcognito%2Flatest%2Fdeveloperguide%2Ffederation-endpoints.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/federation-endpoints.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/federation-endpoints.html</a></p>
<p>もちろんCognitoの機能はこれだけではないですし、またブリッジとしてのシンプルな役割だけでなく様々なフローに拡張して利用できるためユースケースに応じてアーキテクチャを検討していく必要があります。</p>
<h2 id="%E3%81%A4%E3%81%BE%E3%81%A5%E3%81%8D%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88">
<a class="header-anchor-link" href="#%E3%81%A4%E3%81%BE%E3%81%A5%E3%81%8D%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88" aria-hidden="true"></a> つまづきポイント</h2>
<h3 id="%E3%81%A9%E3%81%93%E3%81%AB%E4%BD%95%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E3%81%8B">
<a class="header-anchor-link" href="#%E3%81%A9%E3%81%93%E3%81%AB%E4%BD%95%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E3%81%8B" aria-hidden="true"></a> どこに何を設定するか</h3>
<p>実装したいアーキテクチャ通りに設定できていなかった。<br>
構成とエンドポイントについて理解していなかったため、NextAuth、GitHub（OAuthアプリ）の設定を間違えていてうまくいきませんでした。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>正しい設定（初歩の初歩）</p>
<ul>
<li>NextAuth<br>
クライアントID、クライアントシークレットなどは<strong>Cognito</strong>のものを指定</li>
<li>GitHub（OAuthApp）<br>
コールバックURLは<strong>Cognito</strong>のユーザープールのドメイン、エンドポイントを指定</li>
</ul>
</div></aside>
<p>Cognitoの役割と動き、全体の構成をしっかり理解していればシンプルなことですが、ハマりました。当たり前ですが一つでも誤りがあると動かないですね。<br>
またGitHubとCognitoで設定するコールバックURLも公式に記載しているエンドポイントを正しく指定できていなかったのでハマりポイントでした😰</p>
<h3 id="%E4%BD%99%E8%A8%88%E3%81%AA%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8B%E3%81%AA%E3%81%84">
<a class="header-anchor-link" href="#%E4%BD%99%E8%A8%88%E3%81%AA%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8B%E3%81%AA%E3%81%84" aria-hidden="true"></a> 余計なコードを書かない</h3>
<p>NextAuthの設定ファイルに余計にオプションを書いてしまっていて、クライアント側の挙動がおかしくなっていました。まずは最低限、オプションは必要に応じて、ですね。コード量は少ない方がいい。<br>
とはいえおかげでその他オプションの挙動について勉強にはなりました。</p>
<h2 id="%E5%8F%8D%E7%9C%81">
<a class="header-anchor-link" href="#%E5%8F%8D%E7%9C%81" aria-hidden="true"></a> 反省</h2>
<ul>
<li>答えは公式ドキュメントに書いてある。</li>
<li>やりたいことの構成を理解する。まずはゼロから、最低限のステップを踏んでいく。</li>
</ul>
<p>できない！にハマると公式ドキュメントを読んでいるのに何故か余計なコードや設定を足してしまう。引きずられる前に、さっと気づいて、一旦リセットして0から組み直すスピード感をつけたいです。 認証まわりは本当にややこしくて、ハマりやすい。 結果としてできませんでしたが、頑張ってみようとOIDCとして使えるようラップしたソースコードを読み解く過程でOIDCについての理解が深まりました。Cognitoの仕様についても学べたのでよかったです。</p>
<p>間違いなどありましたらご指摘いただけるとうれしいです！</p>


AWS Cognitoと学ぶOAuthとOpenID Connect

やろうとしたこと、やったこと

Discussion