<p>ritou です。</p>
<p>今回もOAuthのClient実装における基本的なところをおさえておきましょう。</p>
<h2 id="%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%AE%E7%A8%AE%E9%A1%9E">
<a class="header-anchor-link" href="#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%AE%E7%A8%AE%E9%A1%9E" aria-hidden="true"></a> リソースアクセスの種類</h2>
<p>OAuth 2.0に限った話ではありませんが、「リソースオーナーの代わりとしてのリソースアクセス」は次のような2種類に分類できます。というか今回はこうします。</p>
<ul>
<li>
<strong>リソースオーナーのセッションと同期しながら行われる</strong>リソースアクセス</li>
<li>
<strong>リソースオーナーが関与しない、非同期で行われる</strong>リソースアクセス</li>
</ul>
<p><strong>「画像編集の対象ファイルを、SNSに投稿済みの画像から選択！ってやるとその場でユーザーの許可を得てから一覧がバーっと出てくるやつ」</strong> が前者、<strong>「ブログの日時指定投稿時に同時にSNSにも投稿」</strong> みたいなのが後者です。</p>
<p>OAuthのClient実装っていう時には、このどちらか一方、もしくは両方を実装していく必要があるわけですが、<strong>それぞれの特徴を意識しておけば実装する際に迷わないかもしれんよ</strong>っていうのが今回の記事の内容です。</p>
<h3 id="%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%8A%E3%83%BC%E3%81%AE%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8%E5%90%8C%E6%9C%9F%E3%81%97%E3%81%AA%E3%81%8C%E3%82%89%E8%A1%8C%E3%82%8F%E3%82%8C%E3%82%8B%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9">
<a class="header-anchor-link" href="#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%8A%E3%83%BC%E3%81%AE%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8%E5%90%8C%E6%9C%9F%E3%81%97%E3%81%AA%E3%81%8C%E3%82%89%E8%A1%8C%E3%82%8F%E3%82%8C%E3%82%8B%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9" aria-hidden="true"></a> リソースオーナーのセッションと同期しながら行われるリソースアクセス</h3>
<p>処理の流れはこんな感じ。</p>
<ol>
<li>画像編集アプリにアクセス</li>
<li>編集対象の画像を選択する際に <strong>「Instagramに投稿済みの画像から選ぶ」</strong> を選択</li>
<li><strong>画像編集アプリがOAuthのClientとなり、認可サーバー(AS)/リソースサーバー(RS) である Instagram からトークンを取得</strong></li>
<li><strong>取得したトークンを用いてInstagramから画像を選択し、表示</strong></li>
<li>画像編集アプリを閉じたタイミングでトークンを破棄</li>
</ol>
<p>ここでは、<strong>画像編集アプリはリソースオーナーであるユーザーのセッション内だけでリソースアクセスを行っています。</strong></p>
<p>もうちょい書くと</p>
<ul>
<li>
<strong>リソースオーナーの関与するセッション上でアクセストークンなどを取得</strong> する</li>
<li><strong>リソースアクセスが一度の場合は使い捨て、同一セッション内で利用する場合はセッションに紐づけて保存してその後のリソースアクセスで利用</strong></li>
<li><strong>リソースアクセス失敗時は再度認可リクエストからやり直し</strong></li>
</ul>
<p>というような特徴があります。</p>
<p>当然ながらトークン類が漏洩しないようにセッションの仕組みも安全になっている必要はありますが、<strong>DB等を用いて内部のユーザーIDとトークン類の紐付けを永続的に保持する仕組みは必須ではありません。</strong><br>
よりセキュアにサービスを実装するためには必要以上の情報を保存しておかないことも重要です。</p>
<p>シーケンス図はこんな感じ。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/409hr60jdi92jdntth9c7m2co5ti" alt loading="lazy" class="md-img"></p>
<h2 id="%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%8A%E3%83%BC%E3%81%8C%E9%96%A2%E4%B8%8E%E3%81%97%E3%81%AA%E3%81%84%E3%80%81%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%81%A7%E8%A1%8C%E3%82%8F%E3%82%8C%E3%82%8B%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9">
<a class="header-anchor-link" href="#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%8A%E3%83%BC%E3%81%8C%E9%96%A2%E4%B8%8E%E3%81%97%E3%81%AA%E3%81%84%E3%80%81%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%81%A7%E8%A1%8C%E3%82%8F%E3%82%8C%E3%82%8B%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9" aria-hidden="true"></a> リソースオーナーが関与しない、非同期で行われるリソースアクセス</h2>
<p>非同期の方はと言うと...</p>
<ol>
<li>ブログサービスがFacebook連携機能を起動</li>
<li><strong>ブログサービスがOAuthのClienとなり、AS/RS である Facebook からトークンを取得</strong></li>
<li><strong>DBなどで取得したトークンと内部のユーザーIDを紐づける</strong></li>
<li>ブログサービスで<strong>新規投稿や日時指定投稿が完了したタイミングで紐づけられたトークンを用いて Facebook に投稿</strong> する</li>
</ol>
<p>この場合、<strong>トークンの取得とリソースアクセスのタイミングが必ずしも一致しません。</strong></p>
<ul>
<li>
<strong>リソースオーナーの関与するセッション上でアクセストークンなどを取得</strong> する</li>
<li>トークンはDBなどにユーザーと紐づけて保存、<strong>リソースアクセスを行うタイミングで参照して利用</strong>
</li>
<li><strong>リソースアクセス失敗時はリソースオーナーへの通知などを行い、再びリソースオーナーから許可を得るまではリソースアクセスを停止</strong></li>
</ul>
<p>というような特徴となります。</p>
<p>シーケンス図、あんまり意味ない事に気づいたので省略します。</p>
<h3 id="%E6%B7%B7%E5%9C%A8%E3%81%99%E3%82%8B%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3">
<a class="header-anchor-link" href="#%E6%B7%B7%E5%9C%A8%E3%81%99%E3%82%8B%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3" aria-hidden="true"></a> 混在するパターン</h3>
<p>もちろん、両方が混在するパターンもありえるでしょう。</p>
<p>その場合、</p>
<ul>
<li>用途によって<strong>トークン取得のフローをわけ、セッションに保存するものとDBに保存するもので実装を分ける</strong> : それぞれ単独での実装を組み合わせる</li>
<li>
<strong>DBに保存しちゃえばどこでも使えて便利</strong> : 非同期を想定した実装に寄せる</li>
</ul>
<p>と言うような選択肢があるでしょう。</p>
<p>前者の方が "要件に応じて必要最小限のものを保存する" みたいなところで望ましい気はしますが、実装が必要はやや冗長もしくは複雑になる可能性はあるでしょう。<br>
後者でも、同期/非同期それぞれで取得したトークンを別々で保存するか、たくさんの "scope" を認可リクエストに指定してトークンを取得するかのキメが必要になるでしょう。</p>
<p>大きいところは大丈夫だと思いますが、認可サーバー/リソースサーバーによっては同一Clientからのアクセス要求の捌き方が異なる場合があります。最初に <code>scope=a b</code> が指定された認可リクエストでアクセストークンを取得した後、 <code>scope=c</code> の認可リクエストを送って再びアクセストークンを取得した時に、たまーに最初に取得したアクセストークンのscopeも <code>c</code> となってしまうような実装を見たことがあります。<br>
認可サーバー、リソースサーバーの挙動を確認した上でどのような実装にするかを検討することも大事でしょう。</p>
<h2 id="%E4%BB%95%E6%A7%98">
<a class="header-anchor-link" href="#%E4%BB%95%E6%A7%98" aria-hidden="true"></a> 仕様</h2>
<p>ここからは主に非同期なリソースアクセスに必要なリフレッシュトークン周りの仕様を紹介します。</p>
<h3 id="oauth-2.0">
<a class="header-anchor-link" href="#oauth-2.0" aria-hidden="true"></a> OAuth 2.0</h3>
<ul>
<li>アクセストークンと一緒にリフレッシュトークンも発行しても良い</li>
<li>
<code>grant_type=refresh_token</code> でアクセストークンを更新</li>
</ul>
<h3 id="oidc">
<a class="header-anchor-link" href="#oidc" aria-hidden="true"></a> OIDC</h3>
<p><a href="https://openid-foundation-japan.github.io/openid-connect-core-1_0.ja.html#OfflineAccess" target="_blank" rel="nofollow noopener noreferrer">Final: OpenID Connect Core 1.0 incorporating errata set 1 - 11.  Offline Access</a></p>
<p><code>offline_access</code> と言う scope を指定することでリフレッシュトークンを要求できる。</p>
<h3 id="google">
<a class="header-anchor-link" href="#google" aria-hidden="true"></a> Google</h3>
<p><a href="https://developers.google.com/identity/protocols/oauth2/web-server" target="_blank" rel="nofollow noopener noreferrer">Using OAuth 2.0 for Web Server Applications  |  Google Identity Platform</a></p>
<p>認可リクエストに <code>access_type=offline</code> を指定するとリフレッシュトークンを要求できる。</p>
<h3 id="facebook">
<a class="header-anchor-link" href="#facebook" aria-hidden="true"></a> Facebook</h3>
<p><a href="https://developers.facebook.com/docs/facebook-login/access-tokens/refreshing" target="_blank" rel="nofollow noopener noreferrer">長期トークン - Facebookログイン - ドキュメンテーション - Facebook for Developers</a></p>
<p><code>grant_type=fb_exchange_token</code> を指定することで、有効期限の短いアクセストークンから有効期限の長いアクセストークンを取得できる。</p>
<div class="code-block-container"><pre><code>curl -i -X GET "https://graph.facebook.com/{graph-api-version}/oauth/access_token?  
    grant_type=fb_exchange_token&amp;          
    client_id={app-id}&amp;
    client_secret={app-secret}&amp;
    fb_exchange_token={your-access-token}" 
</code></pre></div><h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<ul>
<li>リソースアクセスを同期/非同期で行われる2種類に分類、それぞれの実装のポイントを紹介した</li>
<li>リフレッシュトークンを要求したりアクセストークンの有効期限を伸ばすあたりの仕様が、認可サーバー/リソースサーバーによっても微妙に異なるので気をつけましょう</li>
</ul>
<hr>
<p>本投稿も含めて、最近、OAuthの主にClient実装に関する基本的な知見をZennに書いています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__b7b1972bb7208" src="https://embed.zenn.studio/tweet#zenn-embedded__b7b1972bb7208" data-content="https%3A%2F%2Ftwitter.com%2Fritou%2Fstatus%2F1349326168219025409" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/ritou/status/1349326168219025409" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/ritou/status/1349326168219025409</a></p>
<p>あなたの疑問はみんなの疑問です。<br>
質問、知りたいことがありましたらマシュマロにて匿名にて受け付けております。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__ca40085cabbad" src="https://embed.zenn.studio/tweet#zenn-embedded__ca40085cabbad" data-content="https%3A%2F%2Ftwitter.com%2Fritou%2Fstatus%2F1350240815159808003" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/ritou/status/1350240815159808003" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/ritou/status/1350240815159808003</a></p>
<p>これまでの記事もご覧ください。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1a5502cf4946e" src="https://embed.zenn.studio/card#zenn-embedded__1a5502cf4946e" data-content="https%3A%2F%2Fzenn.dev%2Fritou" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/ritou" style="display:none" target="_blank">https://zenn.dev/ritou</a></p>
<p>ではまた！！！</p>


OAuthのリソースアクセスの分類と必要な実装

リソースオーナーのセッションと同期しながら行われるリソースアクセス

リソースオーナーが関与しない、非同期で行われるリソースアクセス

Discussion