はじめに

前回の記事では、AWS Cognitoを用いたOIDC（OpenID Connect）に関する設定方法について解説しました。前回はCognitoのマネージドログイン（ホスト型UI）を使用しましたが、今回はその仕組みを外し、直接OIDCのログインを行う方法を説明します。

注意点

IDトークンの署名検証

取得したIDトークンは、そのまま使用せず、必ず署名検証を行ってください。

ユーザー情報の適切な管理

取得したユーザー情報はセキュリティを考慮し、適切に扱う必要があります。
不要なデータの保存や漏洩を防ぐため、ログへの出力などには特に注意してください。

リダイレクトURLの変更

今回の実装ではCognitoのマネージドログインを使用せず、oidc-client-ts を利用してログイン処理を行います。

そのため、CognitoのリダイレクトURLを適切に設定する必要があります。

CognitoのリダイレクトURLは適切に設定しないと認証フローが正常に動作しません。
OIDCプロバイダー（Google, LINE, Facebookなど）を使用する場合でも、認証後にCognitoがリダイレクトするため、AWS Cognitoのアプリクライアント設定で正しいURLを登録する必要があります。

設定例

本番環境: https://example.com/callback
ローカル環境: http://localhost:3000/callback

TypeScriptによる実装

以下のTypeScriptコードでは、Cognitoを利用したOIDC認証を行い、ユーザー情報を取得する方法を実装しています

必要なライブラリ

oidc-client-ts を使用します。

import type { UserManagerSettings, User } from "oidc-client-ts";
import { UserManager } from "oidc-client-ts";

// `UserManager` の設定

const cognitoAuthConfig: UserManagerSettings = {
  authority: `https://cognito-idp.${AWS_REGION}.amazonaws.com/${COGNITO_USER_POOL_ID}`,
  client_id: COGNITO_CLIENT_ID,
  redirect_uri: REDIRECT_URI,
  response_type: "code",
  scope: "openid", //設定したスコープを指定
};


const userManager = new UserManager(cognitoAuthConfig);

/**
 * ユーザー情報を取得
 */
const getUser = async () => {
  try {
    const user = await userManager.getUser();
    return user;
  } catch (error) {
    console.error("ユーザー情報の取得に失敗しました:", error);
    return null;
  }
};
/**
 * ログイン処理 (リダイレクト方式)
 * @param identity_provider - ログインするIDプロバイダー(Cognitoで設定したプロバイダー名)
 */
const login = async (identity_provider: string) => {
  await userManager.signinRedirect({
    extraQueryParams: {
      identity_provider,
    },
  });
};

/**
 * ログイン状態を確認
 */
const checkLoginStatus = async () => {
  const user = await userManager.getUser();
  if (user && user.id_token) {
    return
  } else {
    await userManager.signinRedirectCallback();
  }
};


/**
 * ログアウト処理
 */
const logout = async () => {
  await userManager.signoutRedirect();
};

export function useUserManager() {
  return {
    getUser,
    login,
    logout,
    checkLoginStatus,
  };
}

リダイレクトURL

REDIRECT_URIはCognitoに設定するURLと合わせてください。

ログイン処理

identity_provider には、Cognitoに設定したプロバイダー名（例: Google や Facebook など）を指定します。

ログイン状態の確認

checkLoginStatus(): ユーザーのログイン状態を確認し、未ログインの場合はログイン画面へリダイレクトします。

ユーザー情報の取得

getUser(): ログイン済みのユーザー情報を取得します。

ログアウト処理

logout(): Cognitoからのログアウト処理を行います。

まとめ

本記事では、AWS Cognitoを用いたOIDC認証の設定から、ログイン・ユーザー情報の取得・ログアウトまでの基本的な実装方法を紹介しました。Cognitoの設定でGoogleなどもIDプロバイダーとして追加すれば、複数の認証方法をサポートできます。