java - 検証コードをフロントエンドからバックエンドに分離する際の問題

Question

＃＃＃前提＃＃＃

検証コードを取得するためのインターフェイスが https://api.b.com/captcha の下にあるとします。

私が想像した検証コードを更新する方法

私の想像では、認証コードの更新機能は、URL の後にタイムスタンプを追加することで実装されます。たとえば、URL を次のように変更します。

https://api.b.com/captcha?149...

検証コードを検証する従来の方法

従来の検証コードは主にセッションを通じて実行される必要があり、フロントエンドはセッション ID を Cookie に記録します。

バックエンドは、このセッション ID とそれに対応する検証コードも Redis に記録します。

フロントエンドには認証コードをクリックして更新する機能があり、クリックするたびに新しい認証コードが生成され、セッションIDに対応する認証コードの値がその都度redis上で更新されます。

検証方法は、redis のセッション ID 値がフロントエンド値と一致するかどうかをクエリすることで完了します。

現在発生している問題

現在、フロントエンドとバックエンドを分離するプロジェクトに取り組んでいます。

次に、解決方法がわからない Cookie のクロスドメインの問題があります。

シナリオは次のとおりです。フロントエンド プロジェクトは www.a.com のドメイン名の下にあり、バックエンド プロジェクトは api.b.com のドメイン名の下にあります。

フロントエンドとバックエンドは異なるドメイン名の下にあるため (実際、2 つのプロジェクトを同じドメイン名の下に置くことも可能ですが、これは学習目的ではありません)、Cookie を使用することはできません。つまり、「セッション ID は利用できなくなりました」というメッセージが表示されます。そうなると、従来の方法はもう不可能になりそうです。

PS: フロントエンド サーバーは nginx を使用し、バックエンドは spring-boot を使用します。

＃＃＃私の考え＃＃＃

アイデア 1

単純なトークンを生成したいのですが、トークンにはユーザーの識別に使用される uuid のみが含まれています。このトークンの uuid と redis の uuid を比較して、検証コードの値が正しいかどうかを判断します。したがって、次のような結果を返します

リーリー

なぜ Base64 でトランスコードされた画像を送信するかというと、主にフロントエンドの img タグが Base64 をサポートしているためです。これを直接表示しても問題ありません (古いブラウザを考慮していないプロジェクトではありません)。

しかし、このようにするのはあまり合理的とは思えません。この方法では、認証コードのアドレスにアクセスすると、認証コードの画像が表示されなくなります。デバッグや検証コードのスタイルを確認するのに不便ですが、実際には特に不便ではなく、img の src を設定するために js を書かなければならないだけで、かなり愚かに感じます。

アイデア 2

応答のヘッダーにトークンを入れます。 js はレスポンスヘッダーの内容を読み取ることができます。その後、アドレスを通じて確認コードの画像を直接表示することもできます。でも、くそー、それは愚かな気もします。認証コードを更新するのに想像していた方法が使えないからです。後でタイムスタンプを追加して変更するだけです。

3 つのアイデア

確認コードは気にしません。これをフロントエンド サーバーに実行させます。ログインするときに、フロントエンド サーバーで確認コードを確認します。その後、バックエンドはアカウントのパスワードが正しいかどうかのみ確認します。そしてトークンを返します。他の API にアクセスするたびにトークンを持参するだけです。

やり方がまったく思いつきませんし、関連する情報も見つからないので(検索方法が間違っているのかもしれません)、ご協力をお願いします。

注意深く確認したところ、この問題はシングル サインオンの問題であるはずですよね?

Answer 1

解決しなければならないのは、ドメイン間で Cookie を運ぶという問題です。まず、ドメイン全体で cors テクノロジーを使用していることを確認します。cors は HTTP Cookie と HTTP 認証情報に基づいて ID 資格情報を送信できます。 XMLHttpRequest の withCredentials フラグを true に設定すると、Cookie がサーバーに送信されます。

リーリー

フロントエンドリクエストに withCredential を追加するだけでなく、サーバーの応答ヘッダーも追加する必要がありますAccess-Control-Allow-Credentials: true。さらに、応答ヘッダーでは Access-Control-Allow-Origin の値を「*」に設定できず、特定のソース http://foo.example に設定する必要があります。