ALBとCognitoを使用してログインした後の画面に、ログアウト機能とログアウト後にログイン画面にリダイレクトする機能を追加したい。

Question

前提

AWSのEC2にwebサーバーを構築し、ALB経由でアクセスしています。今回、ALBにCognitoの認証機能を追加し、認証を通ったユーザーのみwebページを表示できるようにしました。

実現したいこと

アクセスしたwebページにログアウトボタンを設置し、ボタンを押下した際にログアウトが行われログイン画面にリダイレクトされるような処理を追加したいです。

発生している問題・エラーメッセージ

ブラウザからcgiを呼び出して、セッションcookieの削除とログアウトエンドポイントのurlへリダイレクトを実施しました。ログアウトエンドポイントからサインインエンドポイントへのリダイレクトは成功しているのですが、画面がログイン画面に切り替わりません。また、再読み込みをするとセッションcookieが復活してしまいます。

ソースコード

javascriptのsignOut関数をbuttonのonClickに紐づけて、ボタンが押されるとperlで作成したcgiが動作するような仕組みにしました。

// サインアウト関数
async function signOut() {
    try {
        // GETパラメータを作成
        const params = {
            client_id: client_id,
            redirect_uri: 'https://{ドメイン}/oauth2/idpresponse',
            response_type: 'code',
            scope: 'openid',
        };
        const query = new URLSearchParams(params);

        // CGIを呼び出し
        const url = `https://{ドメイン}/cgi/logout.cgi?${query}`;
        await fetch(url, {
            mode: 'no-cors',
        });
   } catch(e) {
       // エラー処理
   }
}

use CGI;

# ログアウトエンドポイント
my $logoutEndpoint = 'https://example.auth.ap-northeast-1.amazon.com/logout';

my $_q = new CGI();

# GETパラメータ作成
my %paramHash = (
  client_id => $_Q->param('client_id'),
  redirect_uri => $_Q->param('redirect_uri'),
  response_type => $_Q->param('response_type'),
  scope => $_Q->param('scope')
);
my $uri = createGetParametar($logoutEndpoint, \%paramHash);

# 削除Cookie
my $deleteSessionCookie0 = $_Q->cookie(
  -name=>'AWSELBAuthSessionCookie-0',
  -value=>'',
  -expires=>'-1d'
);
my $deleteSessionCookie1 = $_Q->cookie(
  -name=>'AWSELBAuthSessionCookie-1',
  -value=>'',
  -expires=>'-1d'
);

# 応答出力
print $_Q->header(-cookie=>[$deleteSessionCookie0,$deleteSessionCookie1], -location=>$uri);

# GETパラメータ付与関数
sub createGetParametar{
  my $url = @_[0];
  my %paramHash = %{@_[1]};
  my @paramArr = ();
  while(my($key, $value) = each(%paramHash)){
    my $elem = "$key=$value";
    push(@paramArr, $elem);
  }
  return $url . '?' . join('&', @paramArr);
}

試したこと

ログアウトcgiを実行して、https通信でセッションcookieを削除してログインエンドポイントにリダイレクトした際に、このタイミングなのかは不明なのですがcognitoとXSRF-TOKENという名前のcookieが生成されていました。この2つは認可エンドポイントにリクエストした際に、cookieとしてセットされているようなのですが、セッションcookieを削除するまでブラウザの開発者ツールに表示されていませんでした。試しに、cognitoという名前のcookieを削除して再読み込みしたところ、ログイン画面が表示されました。

セッションCookieとcognito、XSRF-TOKENのドメインがそれぞれ自分独自のドメイン、cognitoユーザープールのドメインになっていることを確認しました。もしかしたら、ドメインが違うためにただ表示されていないだけの可能性もあるのかなと思いました。

もし何か知りたい情報があれば、できる限りご提供させていただきます。
お力添えのほど、何卒よろしくお願いいたします。

Comments

[yuma.inaura]

プログラムはどんなコードなんでしょうか？

[Johner-doest]

ソースコード追加させていただきました。

Answer 1

解決方法

リダイレクトをfetchした結果からではなく、window.location.hrefによるリダイレクトでフロントエンドから実行した。

await fetch(url)
    .then((res) => {
        window.location.href
            = `https://example.auth.ap-northeast-1.amazon.com/logout?${クエリパラメータ}`;
    })

ハマった原因

• リダイレクトということで、サーバーサイドからのレスポンスによるものだと固執していた。リダイレクトするならフロントエンドだけでも良かった。ただし、Cookieの削除は必要になるのでサーバー側の処理は必要。
• 修正前のコードだと、modeをno-corsにすることでcorsを無効にしているつもりだったが、corsエラーは発生しないが、取得結果が失敗しているということに気づかなかった。ステータスコードが0、レスポンスbodyが空になっていた。

確認した方がいいと思うこと

• リダイレクトの手段、それによる違いを確認する。今回はwidnow.location.hrefを使用したが、他にも方法があるのかfetchだとなぜできなかったのか。

補足情報(2022/01/16追記)

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