AWS Cognito ユーザPoolからログイン処理を行う

個人開発したアプリの宣伝
目的地が設定できる手帳のような使い心地のTODOアプリを公開しています。
Todo with Location

Todo with Location

  • Yoshiko Ichikawa
  • Productivity
  • Free

スポンサードリンク

昨日はsignup処理を記述したので、今回はsignin処理を記述します。

AWS CognitoユーザPoolの作成とSignupの実装 - 追憶行


Signin処理の実装

import {
  CognitoUserPool, CognitoUserAttribute, AuthenticationDetails, CognitoUser
} from 'amazon-cognito-identity-js'

export default {
  authenticate: function (email, password) {
    var authenticationData = {
      Username: email,
      Password: password
    }
    var authenticationDetails = new AuthenticationDetails(authenticationData)

    var poolData = {
      UserPoolId: appConfig.UserPoolId,
      ClientId: appConfig.UserPoolClientId
    }
    var userPool = new CognitoUserPool(poolData)

    var userData = {
      Username: email,
      Pool: userPool
    }

    var cognitoUser = new CognitoUser(userData)
    return new Promise((resolve, reject) => {
      cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: function (result) {
          resolve(result)
        },
        onFailure: function (err) {
          reject(err)
        },
        newPasswordRequired: function (userAttributes, requireAttributes) {
          var attributesData = {
            name: email
          }
          cognitoUser.completeNewPasswordChallenge('Password1', attributesData, this)
        }
      })
    })
  }
}

authenticateメソッドの引数はユーザから入力された認証情報を受け取ります。例ではemailとpassword。

new AuthenticationDetailsはユーザからの認証情報の入力を受け取りCognitoに渡す為のインスタンスを生成する。

new CognitoUserはどのユーザPoolのユーザに対して認証を行うかの指定。cognitoUser.authenticateUserメソッドで対象ユーザの認証情報が正しいかを検証します。

newPasswordRequiredは強制パスワード変更?仮パスワードでのログイン時の記述。お作法的にコールバックを指定する必要があるらしい。


ログイン状態の確認

認証後、ログイン中であるか否かの確認もCognito APIを通して確認することができます。

import {
  CognitoUserPool, CognitoUserAttribute, AuthenticationDetails, CognitoUser
} from 'amazon-cognito-identity-js'

export default {
  authenticate: function (email, password) {
  // ... 略
  },

  loggedIn: function () {
    var poolData = {
      UserPoolId: appConfig.UserPoolId,
      ClientId: appConfig.UserPoolClientId
    }
    var userPool = new CognitoUserPool(poolData)
    var cognitoUser = userPool.getCurrentUser()

    if (cognitoUser != null) {
      cognitoUser.getSession(function (err, session) {
        if (err) {
          return false
        }
        console.log(session)
        cognitoUser.getUserAttributes(function (err, attributes) {
          if (err) {
            return false
          } else {
            console.log(attributes)
          }
        })
      })
      return true
    } else {
      return false
    }
  }
}

userPool.getCurrentUser()を通して(多分、cognitoドメインのcookieで管理されている)、ログイン中のユーザにアクセスできるインスタンスを取得し、cognitoUser.getSession()cognitoUser.getUserAttributesを通してユーザ情報にアクセスできる。

整理すると、

  • userPool.getCurrentUser() : ログイン中のユーザインスタンスの取得
  • cognitoUser.getSession(): セッショントークンへのアクセス
  • cognitoUser.getUserAttributes(): ユーザ属性のアクセス

あとは、必要に応じて、router側で認可のロジックを記述すればよい。


認可の実装例
export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/',
      name: 'root',
      component: Home,
      beforeEnter: requireAuth
    }
  ]
})

function requireAuth (to, from, next) {
  if (!yourAuthModule.loggedIn()) {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
}


Signout処理

同様にCognito APIのsignOutメソッドを使用しログアウトを行います。

  logout: function () {
    var poolData = {
      UserPoolId: appConfig.UserPoolId,
      ClientId: appConfig.UserPoolClientId
    }
    var userPool = new CognitoUserPool(poolData)
    userPool.getCurrentUser().signOut()
  }