0
課題

Cognitoでアプリケーションロードバランサー(以後ALB)に実装した認証機能で、ログアウトしてログイン画面にリダイレクトする挙動を実装したいが、CORSエラーが発生している。

前提

ALBでEC2のインスタンスにリクエストを振り分けています。今回、ALBにCognitoで認証機能を実装しました。未ログインの状態でインスタンスにアクセスするとCognitoで作成されたログイン画面が表示され、ログイン情報を入力すると表示したい画面が表示されるようになりました。
その後、ログアウト機能を実装するためにサーバーサイドプログラムでブラウザに保存されたセッションCookieの削除とログアウトエンドポイントへのリダイレクトレスポンスをレスポンスする機能を実装しました。

実現したいこと

ログインした後の画面に、ログアウトボタンを配置しボタンを押下することでサーバーサイドのプログラムを呼び出し、ログアウトしてさらにログイン画面を表示したい。

考えられる問題

ログアウトエンドポイントにリダイレクトしようとすると、CORSエラーが発生します。これはCognitoのドメインとログイン後の画面のドメインが違うためだと思われます。fetch APIでサーバーサイドプログラムを呼び出しているのでno-corsを使用したのですが、その場合だとレスポンスデータが返されないためno-corsを使用しないで、Access-Control-Allow-Originのような形で設定する必要があるのかなと思ったのですが、そういったことを取り上げているサイトがなかったので質問させていただきました。

2 件の回答 2

1

fetch API で Cognito のログアウトエンドポイントにリクエストを送られていると理解しました。

https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/logout-endpoint.html

fetch API でリクエストを送るのではなく、location.href() に適切なパラメータを付けた URL を渡して、リダイレクトするようにしてください。パラメータの1つである redirect_uri がログアウト後に表示させたい URL になります。

ログアウトしてさらにログイン画面を表示したい

まずは基本的に動作を理解するために、redirect_uri には認証が不要なページの URL を指定してログアウトを実装できるか確認されるといいと思います。その上で、ログイン画面を自動的に表示させたいのであれば、認証が必要なアプリの URL に自動的にリダイレクトさせれば、ALB が自動的に Cognito のログイン画面 (Hosted UI) にリダイレクトしてくれます。

1
  • 回答ありがとうございました。 fetch APIではなくwindow.location.hrefにurlを入力することで遷移させるように変更したところ、無事logoutエンドポイントにリダイレクトされたのちにログイン画面が表示されるようになりました。 リダイレクトするということで、サーバー側からリダイレクトのステータスコードによって遷移しようと試していたことが今回の問題にはまってしまっていた原因だったのかと思います。 勧めていただきました通り、ログアウト→ログイン画面ではなくログアウト→ログアウト後画面の順で試したところどういう順序でログアウトがされているかということについても理解が進みました。本当にありがとうございました。
    – user55996
    Commented 2023年1月6日 0:55
0

Yoshi様に回答してもらったのち、調べてみたところホストされたUIを使用している場合、ajaxなどの非同期処理を行った際にCORSエラーが発生するのは現時点(2022/01/16)での仕様ということでした。
ホストされたUIの場合、CORSの設定を行うことができない状態ですがこの問題が解決される時期等は不明とのことです。
現状は、ブラウザから直接リクエストを送信する方法でCORSエラーを回避するしかないようです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。