<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
認可基盤の開発に関わる機会があったので、OAuth2.0の仕組みを理解するために調べたことをまとめました。 
私はセキュリティについての知識がかなり浅いので、誤った情報が含まれているかもしれません。もし間違いがあれば教えていただけると幸いです！！！
<h1 id="%E3%82%A2%E3%83%97%E3%83%AA%E9%96%93%E3%81%AE%E9%80%A3%E6%90%BA" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AA%E9%96%93%E3%81%AE%E9%80%A3%E6%90%BA" aria-hidden="true"></a> アプリ間の連携</h1>
みなさん、こんな画面見たことないですか？？ 
<img src="https://storage.googleapis.com/zenn-user-upload/128dd484e5a6-20240921.png" loading="lazy" class="md-img"> 
これはconnpassの画面ですが、「GitHubと連携」をクリックすると、GitHubの画面に飛びます。 
<img src="https://storage.googleapis.com/zenn-user-upload/e84d7ab7780c-20240921.png" loading="lazy" class="md-img"> 
この画像では、connpass側がGitHubのuserのメールアドレス情報をreadする権限を求めていることがわかります。 
このように、アプリケーション間でユーザー情報を共有するための仕組みに使われているのがOAuth2.0です。
<h1 id="oauth2.0%E3%81%A8%E3%81%AF" data-line="12" class="code-line">
<a class="header-anchor-link" href="#oauth2.0%E3%81%A8%E3%81%AF" aria-hidden="true"></a> OAuth2.0とは</h1>
OAuth2.0は、異なるアプリケーション間でユーザー情報を共有するための認可フレームワークです。 
ユーザーが自分のパスワードなどの認証情報を第三者アプリケーションと共有することなく、自分のデータや機能へのアクセスを許可できます。
<h2 id="%E8%AA%8D%E8%A8%BC%E3%81%A8%E8%AA%8D%E5%8F%AF" data-line="16" class="code-line">
<a class="header-anchor-link" href="#%E8%AA%8D%E8%A8%BC%E3%81%A8%E8%AA%8D%E5%8F%AF" aria-hidden="true"></a> 認証と認可</h2>
まず、認証(Authentication) と 認可(Authorization) の違いを押さえておきます。
<ul data-line="19" class="code-line">
<li data-line="19" class="code-line">
認証: ユーザーが誰であるかを確認するプロセス。例として、ユーザー名とパスワードを入力してログインするなどがあります。</li>
<li data-line="20" class="code-line">
認可: ユーザーがどのリソースや機能にアクセスできるかを決定するプロセス。</li>
</ul>
OAuth2.0は主に認可を扱うプロトコルであり、ユーザーの認証自体は他の方法で行われます。（例：OAuth2.0の拡張であるOpenID Connectでは認証も行える）
<aside class="msg message">!<div class="msg-content">
OpenID Connectの説明はここではしません。余裕があれば別途記事で書く予定です！
</div></aside>
<h1 id="oauth2.0%E3%81%AE%E7%99%BB%E5%A0%B4%E4%BA%BA%E7%89%A9" data-line="27" class="code-line">
<a class="header-anchor-link" href="#oauth2.0%E3%81%AE%E7%99%BB%E5%A0%B4%E4%BA%BA%E7%89%A9" aria-hidden="true"></a> OAuth2.0の登場人物</h1>
connpassとGitHubの例で登場人物を4人紹介します。
<ol data-line="30" class="code-line">
<li data-line="30" class="code-line">
リソースオーナー(Resource Owner)
<ul data-line="31" class="code-line">
<li data-line="31" class="code-line">
例：ユーザー(あなた)</li>
<li data-line="32" class="code-line">
役割：リソース(例：GitHubのプロフィール情報やメールアドレス)へのアクセス権を持つ主体</li>
</ul>
</li>
<li data-line="33" class="code-line">
クライアント(Client)
<ul data-line="34" class="code-line">
<li data-line="34" class="code-line">
例：connpass</li>
<li data-line="35" class="code-line">
役割：リソースオーナーのリソースにアクセスするアプリケーション</li>
</ul>
</li>
<li data-line="36" class="code-line">
リソースサーバー(Resource Server)
<ul data-line="37" class="code-line">
<li data-line="37" class="code-line">
例：GitHubのAPIサーバー</li>
<li data-line="38" class="code-line">
役割：リソースオーナーのデータを保管し、適切な認可が与えられたクライアントにそのデータを提供するサーバー</li>
</ul>
</li>
<li data-line="39" class="code-line">
認可サーバー(Authorization Server)
<ul data-line="40" class="code-line">
<li data-line="40" class="code-line">
例：GitHubの認証・認可を管理するサーバー</li>
<li data-line="41" class="code-line">
役割：リソースオーナーを認証し、クライアントにアクセストークンを発行するサーバー</li>
</ul>
</li>
</ol>
<h1 id="oauth2.0%E3%81%AE%E6%B5%81%E3%82%8C" data-line="43" class="code-line">
<a class="header-anchor-link" href="#oauth2.0%E3%81%AE%E6%B5%81%E3%82%8C" aria-hidden="true"></a> OAuth2.0の流れ</h1>
OAuth2.0の流れはざっくり以下のようになります。
<iframe id="zenn-embedded__1e213fab7928b" src="https://embed.zenn.studio/mermaid#zenn-embedded__1e213fab7928b" data-content="sequenceDiagram%0A%20%20%20%20participant%20User%20as%20%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%EF%BC%88%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%8A%E3%83%BC%EF%BC%89%0A%20%20%20%20participant%20connpass%20as%20connpass%EF%BC%88%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%EF%BC%89%0A%20%20%20%20participant%20AuthServer%20as%20GitHub%E8%AA%8D%E5%8F%AF%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%EF%BC%88%E8%AA%8D%E5%8F%AF%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%EF%BC%89%0A%20%20%20%20participant%20ResourceServer%20as%20GitHub%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%EF%BC%88%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%EF%BC%89%0A%0A%20%20%20%20User-%3E%3Econnpass%3A%20%E3%80%8CGitHub%E3%81%A8%E9%80%A3%E6%90%BA%E3%80%8D%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%0A%20%20%20%20connpass-%3E%3EAuthServer%3A%20%E8%AA%8D%E5%8F%AF%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%82%92%E9%80%81%E4%BF%A1%0A%20%20%20%20AuthServer-%3E%3EUser%3A%20GitHub%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E7%94%BB%E9%9D%A2%E3%82%92%E8%A1%A8%E7%A4%BA%0A%20%20%20%20User-%3E%3EAuthServer%3A%20%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E6%83%85%E5%A0%B1%E5%85%A5%E5%8A%9B%3Cbr%3E%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%82%92%E8%A8%B1%E5%8F%AF%0A%20%20%20%20AuthServer-%3E%3Econnpass%3A%20%E8%AA%8D%E5%8F%AF%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%BF%94%E5%8D%B4%0A%20%20%20%20connpass-%3E%3EAuthServer%3A%20%E8%AA%8D%E5%8F%AF%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%0A%20%20%20%20AuthServer-%3E%3Econnpass%3A%20%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E8%BF%94%E5%8D%B4%0A%20%20%20%20connpass-%3E%3EResourceServer%3A%20%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%A7%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E6%83%85%E5%A0%B1%E3%82%92%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%0A%20%20%20%20ResourceServer-%3E%3Econnpass%3A%20%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E6%83%85%E5%A0%B1%E3%82%92%E8%BF%94%E5%8D%B4%0A%20%20%20%20connpass-%3E%3EUser%3A%20%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E6%8F%90%E4%BE%9B" frameborder="0" scrolling="no" loading="lazy"></iframe><h2 id="%E5%90%84%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%82%92%E3%81%96%E3%81%A3%E3%81%8F%E3%82%8A%E8%AA%AC%E6%98%8E" data-line="64" class="code-line">
<a class="header-anchor-link" href="#%E5%90%84%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%82%92%E3%81%96%E3%81%A3%E3%81%8F%E3%82%8A%E8%AA%AC%E6%98%8E" aria-hidden="true"></a> 各ステップをざっくり説明</h2>
<ol data-line="66" class="code-line">
<li data-line="66" class="code-line">
ユーザーが「GitHubと連携」をクリック
<ul data-line="68" class="code-line">
<li data-line="68" class="code-line">ユーザー（リソースオーナー）がconnpass（クライアント）のウェブサイトで「GitHubと連携」ボタンをクリックします。</li>
<li data-line="69" class="code-line">この操作により、connpassはGitHubの認可サーバーへの認可リクエストを開始します。</li>
</ul>
</li>
<li data-line="71" class="code-line">
connpassがGitHubの認可サーバーにリダイレクト
<ul data-line="73" class="code-line">
<li data-line="73" class="code-line">connpassはユーザーのブラウザをGitHubの認可エンドポイントにリダイレクトします。</li>
<li data-line="74" class="code-line">この時、connpassが要求する権限（スコープ）やコールバックURLなどが含まれます。</li>
</ul>
</li>
<li data-line="76" class="code-line">
GitHub認可サーバーがログイン画面を表示
<ul data-line="78" class="code-line">
<li data-line="78" class="code-line">GitHubの認可サーバーは、ユーザーにログイン画面を表示します。</li>
<li data-line="79" class="code-line">ユーザーはGitHubの認証情報を入力してログインします。</li>
</ul>
</li>
<li data-line="81" class="code-line">
ユーザーがアクセスを許可
<ul data-line="83" class="code-line">
<li data-line="83" class="code-line">ログイン後、GitHubはconnpassが要求した権限をユーザーに確認します。</li>
</ul>
</li>
<li data-line="85" class="code-line">
GitHubが認可コードをconnpassに返却
<ul data-line="87" class="code-line">
<li data-line="87" class="code-line">ユーザーがアクセスを許可すると、GitHubは認可コードをconnpassに返し、ユーザーをconnpassにリダイレクトします。</li>
<li data-line="88" class="code-line">この時に先ほどのコールバックURLを使用します。</li>
</ul>
</li>
<li data-line="90" class="code-line">
connpassがアクセストークンをリクエスト
<ul data-line="92" class="code-line">
<li data-line="92" class="code-line">connpassは受け取った認可コードを使用して、GitHubの認可サーバーにアクセストークンをリクエストします。</li>
</ul>
</li>
<li data-line="94" class="code-line">
GitHubがアクセストークンを返却
<ul data-line="96" class="code-line">
<li data-line="96" class="code-line">GitHubの認可サーバーはリクエストを受け取り、情報が正しければアクセストークンをconnpassに返します。</li>
<li data-line="97" class="code-line">アクセストークンは、リソースサーバーへのアクセスに使用されます。</li>
</ul>
</li>
<li data-line="99" class="code-line">
connpassがリソースサーバーからユーザー情報を取得
<ul data-line="101" class="code-line">
<li data-line="101" class="code-line">connpassは取得したアクセストークンを使用して、GitHubのリソースサーバーにAPIリクエストを送信します。</li>
<li data-line="102" class="code-line">画像の例では、GitHubのメールアドレスを取得しています。</li>
</ul>
</li>
<li data-line="104" class="code-line">
connpassがサービスを提供
<ul data-line="106" class="code-line">
<li data-line="106" class="code-line">取得したユーザー情報を使用して、connpassとGitHubの連携が完了し、connpassが提供するサービスをユーザーに提供します。</li>
</ul>
</li>
</ol>
<aside class="msg message">!<div class="msg-content">
補足情報
<ul data-line="111" class="code-line">
<li data-line="111" class="code-line">
コールバックURL（<code>redirect_uri</code>）について
<ul data-line="112" class="code-line">
<li data-line="112" class="code-line">コールバックURLは事前にクライアント（connpass）が事前にGitHubの開発者設定で登録するURLです。</li>
<li data-line="113" class="code-line">認可サーバー（GitHub）は、認可コードをこの登録されたコールバックURLにリダイレクトします。</li>
<li data-line="114" class="code-line">これにより、認可コードが信頼できるクライアント（登録されたコールバックURLを持つ）にのみ送信されることが保証されます。</li>
<li data-line="115" class="code-line">攻撃者が不正なコールバックURLを指定して認可コードを盗むことを防ぎます。</li>
</ul>
</li>
<li data-line="117" class="code-line">
<code>state</code>パラメータの利用
<ul data-line="118" class="code-line">
<li data-line="118" class="code-line">
<code>state</code>はクライアントがランダムに生成する文字列で、セッションや一時ストレージに保存されます。</li>
<li data-line="119" class="code-line">認可サーバーからリダイレクトされてきた<code>state</code>と一致するか確認することで、CSRF（クロスサイトリクエストフォージェリ）攻撃を防ぎます。</li>
</ul>
</li>
<li data-line="121" class="code-line">
リフレッシュトークン
<ul data-line="122" class="code-line">
<li data-line="122" class="code-line">必要に応じて、長期間のアクセスが必要な場合はリフレッシュトークンを使用します。</li>
</ul>
</li>
</ul>
</div></aside>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="125" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
OAuth2.0の仕組みをざっくり説明していくことで、自分の理解を深めることができました！ 
この記事がOAuth2.0の理解に少しでも役立てば幸いです！
<h1 id="%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B" data-line="129" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B" aria-hidden="true"></a> 参考記事</h1>
<ul data-line="130" class="code-line">
<li data-line="130" class="code-line"><a href="https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be</a></li>
<li data-line="131" class="code-line"><a href="https://zenn.dev/mryhryki/articles/2020-12-28-oauth2-flow" target="_blank">https://zenn.dev/mryhryki/articles/2020-12-28-oauth2-flow</a></li>
</ul>

アプリ間の連携ってどうやってるんだ？OAuth2.0の仕組みをざっくり理解する

zenn-content

Discussion