はじめに

今回は、Vue.js 3を用いてCognitoをamazon-cognito-identity-jsとaws-sdkで使用し、EmailからOTP(ワンタイムパスワード)認証させる方法について記載します。

Pluginを作成する

https://blog.u-chan-chi.com/post/vue-cognito/ の記事を参考に、Vue.js 3用にPluginを作成します。
大まかな点は変更ありませんが、installの部分についてはVue 3で破壊的な変更があったため、以下のように記載し直してください。

plugins/cognito.js


static install = (app, options) => {
    const cognito = new Cognito();
    cognito.configure(options);
    app.provide('cognito', cognito);
  }

main.js


app.use(Cognito, config)

Cognitoを作成する

https://dev.classmethod.jp/articles/cognito-custom-auth-non-password/ などの記事を参考にUserPoolとIdPoolを作成してください。

作成が完了したら、アプリクライアントの設定から認証フローを「ALLOW_CUSTOM_AUTH」に設定してください。

Lambdaを作成する

https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/user-pool-lambda-challenge.html に記載のある通り、3つのLambdaを作成する必要があります。

具体的な実装内容としては、https://devnote.tech/ja/2023/08/email-mfa-using-cognito-user-pool-custom-authentication-challenges/ の記事の内容などを参考にします。

Lambdaトリガーを設定する

作成した3つのLambda関数をCognitoのユーザープールのプロパティからLambdaトリガーを設定していきます。

トリガーする際は、「認証チャレンジの定義」「認証チャレンジの作成」「認証チャレンジレスポンスの検証」にそれぞれ作成した関数を割り当てていきます。

※「カスタム認証」ではなく、「認証」のLambdaトリガーを選択してしまうと、Lambdaに入るRequest値が変わってしまうので、間違えないように注意してください。

Custom認証を使用する際のハマったポイント

上記の設定を行い、SESへのアクセス権やCognitoのLambdaトリガーなどを問題なく、行ったがログイン実行時にCognitoがLambdaをトリガーせず、認証用のメールが飛ばない状態となってしまった。
以下のようにsignIn関数内で、AuthenticationFlowTypeを設定することでCustom認証を行えるように設定することが出来ました。

参考: https://aws.amazon.com/jp/blogs/mobile/customizing-your-user-pool-authentication-flow/#:~:text=Client%20SDK%20considerations

plugins/cognito.js

signIn (username, password) {
    const userData = { Username: username, Pool: this.userPool }
    const cognitoUser = new CognitoUser(userData)
    cognitoUser.setAuthenticationFlowType('CUSTOM_AUTH') // ここがポイント！
    const authenticationData = { Username: username, Password: password }
    const authenticationDetails = new AuthenticationDetails(authenticationData)
    return new Promise((resolve, reject) => {
      cognitoUser.authenticateUser(authenticationDetails, {
        onFailure: (err) => {
          //　割愛
        },
        newPasswordRequired: (userAttributes, requiredAttributes) => {
         // 割愛
        },
        customChallenge: () => {
         // 割愛
        }
      })
    })
  }

もし、私と同じように正しく設定していてもLambdaが発火しない場合は上記の設定を確認してみてください。

まとめ

今回はVue.js 3にamplifyを使用せずにAWS Cognitoの認証にEmailでのOTP認証を行う方法について記載しました。
aws-sdkのみでの方法はVue.js 2での記載の資料が多いため読み替えに手間取りました。Vue3でamplifyを使用できない要件の際の参考になれば幸いです。
また、EmailでOTPを行うのがAWSの公式サポートではないため、早く公式サポートになればいいなと思います。
メールの内容をカスタムしたりとまだまだ楽しめそうなポイントは多いので、深掘りしていきたいです！