外部APIを使用するWEBアプリケーションの実装方法について

前提

SpotifyApiを利用したフロント（react）とバックエンド（django）からなるWEBアプリケーションの作成をしようとしており，その中でOauth2.0のAuthentication Code Flowを使ってSpotifyの個人データ（今のところお気に入りに登録している楽曲のみ）を扱おうと考えています．
その際のAPIを使用する場合の実装について，不明点がいくつかあり投稿させていただきました．

調べたことと疑問点

rfcの記載(http://openid-foundation-japan.github.io/rfc6749.ja.html#anchor1)ではuser-agentでAuthorization Code（以下AC）をClientでAuthorization Token(以下AT)を受け取っています．以下の図は上記リンクの該当部分です．

SpotifyのAuthentication Code Flowの説明(https://developer.spotify.com/documentation/general/guides/authorization/code-flow/では，以下の図のようにAPPLICATIONで一括りとなっており，フロントやバックエンドの区別などの言及はありませんでした．

以上を踏まえた上で質問は以下の通りです．

今回のケースだとフロント側でACを受け取るところ（図のA，B，C）まで行い，バックエンド側でATを取得（図のD，E）し，バックエンドとSpotifyのAPIサーバーでATを使った通信をするという解釈で良いでしょうか？rfcの記載でいうとuser-agentがフロント，clientがバックエンドとなる？
また，その場合バックエンドでATとSpotifyのAPIサーバーから得た個人データをDB上で扱うことになると思うのですが，ATや個人のデータをアプリ開発者のような第三者が保有してしまうのは問題にならないのでしょうか？悪意のある開発者がATや個人データを所有できることになってしまうのではと思いました．

この2点についてご教授のほどよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

Q1.
user-agentは純粋に「ブラウザ」、clientがアプリケーション「Django」か「React(フロント)」かはあなたの設計による選択、という読み方じゃないかと。

AuthServer(Spotify)からしたら、認可を与えたいアプリがバックかフロントかは関係なく、ただ利用者に「このアプリさんにあなたの情報渡してもいい？」って許可を取るためにSpotifyのログインと連携許可的な画面表示が必要で、そのためにブラウザ経由してるだけで、user-agentがACを受け取ってる、というのは微妙に違います。SpotifyはclientへのリダイレクトURLをLocationヘッダに設定したHTTP 302レスポンスをブラウザに返し、ブラウザは自動的にclientにACをリダイレクトします。

※僕はSPAからのOAuthをやったこと無いですが、JSアプリで認可レスポンスを受け取るには「インプリシットフロー」というやり方があったものの、現在はセキュリティー的に非推奨らしく、認可コードフロー(つまりclientはDjangoにして、リダイレクトによってAC受け取る)が推奨されているようです。

Q2.