ふらっとAWS Cognitoを使って認証画面を作った話 #AWS

はじめに

そういえば・・・と、AWS Cognitoをあまり使ったことが無かったなぁと思ったので、AWS Cognitoを使って認証画面を作ってみることにしました。

AWS Amplifyを使えば楽に作ることができますが、今回はスクラッチで作ろうと思います。
スクラッチで作る理由は以下2つ。

1人で作るならAWS Amplifyで良いのですが、フロントエンド、バックエンドで分業するとAWS Cognito単体を使うことになりそう。
スクラッチで作ると、どうやって認証の仕組みを作れば良いか個人的な学びになりそう。

というわけで、作成してきます。

AWS 構成図

AWSの構成図を書くと認証の仕組みは、大体このようなイメージ。

Lambda@Edgeを使って、Cookieに保存してあるidTokenを参照してプライベートページの閲覧許可を出しています。
idTokenの取得は、APIで行います。

実装

API Lambdaの処理

認証だけであれば、AWS Cognitoのユーザープールだけで問題なさそう。（フェデレーティッドアイデンティティ（IDプール）は使わない）
amazon-cognito-identity-jsを使って、ユーザープールからidToken, accessToken, refreshTokenを取得します。

export const handler: APIGatewayProxyHandlerV2 = async event => {
  try {
   return await new SignIn().handler(event)
  } catch (error: unknown) {
   return {
      isBase64Encoded: false,
      500,
      body: 'Internal Server Error',
      headers: {
        'content-type': 'application/json',
      },
    }
  }
}

export default class SignIn {
  public async handler(event: APIGatewayProxyEventV2): Promise<ApiResponse> {
    if (!event.body) throw new Error('event.body is empty')
    const data: {
      Username: string
      Password: string
    } = JSON.parse(event.body)

    const authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails({
      Username: data.Username,
      Password: data.Password,
    })

    const userPool = new AmazonCognitoIdentity.CognitoUserPool({
      UserPoolId: process.env.USER_POOL_ID ?? '',
      ClientId: process.env.CLIENT_ID ?? '',
    })

    const cognitoUser = new AmazonCognitoIdentity.CognitoUser({
      Username: data.Username,
      Pool: userPool,
    })

    const cognitoUserAuth: AmazonCognitoIdentity.CognitoUserSession = await new Promise((resolve, reject) =>
      cognitoUser.authenticateUser(authenticationDetails, {
        // 認証成功
        onSuccess: result => {
          resolve(result)
        },

        // 認証失敗
        onFailure: (error: unknown) => {
          if (error instanceof Error) {
            reject(new Error(error.message))
          }
        },

        // 仮パスワードでユーザがログインした場合
        newPasswordRequired: (userAttributes, requiredAttributes) => {
          cognitoUser.completeNewPasswordChallenge(data.Password, userAttributes, {
            // 認証成功
            onSuccess: result => {
              resolve(result)
            },

            // 認証失敗
            onFailure: error => {
              if (error instanceof Error) {
                reject(new Error(error.message))
              }
            },
          })
        },
      }),
    )

    const idToken = cognitoUserAuth.getIdToken().getJwtToken() // IDトークン
    const accessToken = cognitoUserAuth.getAccessToken().getJwtToken() // アクセストークン
    const refreshToken = cognitoUserAuth.getRefreshToken().getToken() // 更新トークン

    Log.debug(`{ "idToken": "${idToken}", "accessToken":" ${accessToken}", "refreshToken": "${refreshToken}" }`)

    return {
      isBase64Encoded: false,
      200,
      body: `{ "idToken": "${idToken}", "accessToken":" ${accessToken}", "refreshToken": "${refreshToken}" }`,
      headers: {
        'content-type': 'application/json',
      },
    }
  }
}

idToken, accessToken, refreshTokenの違いですが、最初この違いがわかりませんでした。

ざっくり言えば以下の通りらしい。

idToken（IDトークン）：認証したユーザー情報の参照・認証に使用する。
accessToken（アクセストークン）：ユーザー情報の更新に使用する。
refreshToken（リフレッシュトークン）：新しいIDトークン、アクセストークンを取得のに使用する。

今回は認証だけしたいので、idTokenだけ使うことにしました。

Lambda@Edgeの処理

トークンの検証ですが、以下に記載してある通りのことをやります。

aws-jwt-verifyを使うと楽です。
JWTのベストプラクティスにそって検証してくれるので、検証はライブラリを使うのが良さそう。

export const handler: CloudFrontRequestHandler = async (event, context, callback) => {
  const userPoolId = process.env.USER_POOL_ID ?? ''
  const tokenUse = 'id'
  const clientId = process.env.CLIENT_ID ?? ''

  const verifier = CognitoJwtVerifier.create({
    userPoolId,
    tokenUse,
    clientId,
  })

  const request = event.Records[0].cf.request

  Log.info('headers', request)
  try {
    for (const cookie of request.headers['cookie']) {
      const values = cookie.value.split(';')
      for (const value of values) {
        if (value.split('idToken=')[1]) {
          const payload = await verifier.verify(value.split('idToken=')[1])
          // 認証成功
          callback(null, request)
          return undefined
        }
      }
    }
    throw new Error('Token not valid!')
  } catch (error: unknown) {
    // 認証失敗
    const response = {
      status: '302',
      statusDescription: 'Found',
      headers: {
        location: [
          {
            key: 'Location',
            value: `https://${request.headers.host[0].value}`,
          },
        ],
      },
    }
    callback(null, response)
    return undefined
  }
}

なお、認証に失敗した場合は、リダイレクトさせます。

余談：自力でトークン（JWT）を検証する

ちなみに、トークン（JWT）の検証は以下サイトを使って自力で確認することもできます。

Algorithmは「RS256」にします。
JWTを検証するドキュメントのステップ2に書いてあるような簡易プログラムを作成します。

import * as Axios from 'axios'
const jwkToPem = require('jwk-to-pem')

interface PublicKey {
  alg: string
  e: string
  kid: string
  kty: string
  n: string
  use: string
}
interface PublicKeys {
  keys: PublicKey[]
}
interface PublicKeyMeta {
  instance: PublicKey
  pem: string
}
interface MapOfKidToPublicKey {
  [key: string]: PublicKeyMeta
}

(async () => {
  const url = 'https://cognito-idp.ap-northeast-1.amazonaws.com/${プールID}/.well-known/jwks.json'
  const publicKeys = await Axios.default.get<PublicKeys>(url)
  const key = publicKeys.data.keys.reduce((agg, current) => {
    const pem = jwkToPem(current)
    console.log(pem)
    agg[current.kid] = { instance: current, pem }
    return agg
  }, {} as MapOfKidToPublicKey)
  console.log(key)
})()

ここで欲しいのは、Cognito側で作成したJSON形式の公開鍵をPEM形式に変換したPublic Keyです。
それをconsole.logに出力しています。

あとは上記サイトで、idTokenとPEM形式にした公開鍵（Public Key）を入力すればトークン（JWT）の検証ができます。（Private Keyの箇所は空欄で大丈夫です）

こうやって各トークンのPayloadに何が格納されているかが見えるので、これはこれで面白いですね。

さいごに

AWS Amplifyを使えばササッとできるところを、APIを作り、Lambda@Edgeを作り、S3&CloudFrontを作り...etc...

結構、大変でした。
タイトルに「ふらっと」って書いてますが、「ふらっと」やることじゃないですね。

しかし、これはこれで自分なりに学びになったし、良かったと思います。
Cognitoを使った認証方法の1例として、参考にしいただければ幸いです。（もっと色々な方法で認証できるし、他の方法もあるはず！）

では