昨日は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() }