CognitoのWebサイトログインをES6で書く

12265 ワード
es2015 AWS cognito CognitoUserPools es6 AWS テキストリンク

こういう人向けの記事

  • Amazon Cognitoを使いたい
  • Webサイトにログイン機能を実装したい
  • ES2015（ES6）で書きたい
  • WebpackとかBabelとか使いたい
  • ReactとかAngularとか使いたい

Cognitoの素晴らしい点

  • 機能がめちゃくちゃ充実（ユーザー認証まわりの機能ほぼ揃ってる）
  • 開発コスト大幅削減（自分で作ろうとしたら数週間〜数ヶ月かかる）
  • 運用コストゼロ（自動スケール、障害対応不要）
  • 他社より安い（5万MAUまで無料、以降も比較的安い）
  • AWSコンソール上でユーザー情報一覧を閲覧できる
  • 何もしなくても日々進化してくれる

Cognitoの残念な点

  • CognitoのJavaScript対応はまだまだ発展途上
  • 不条理な仕様、ハマりどころが多々あることを覚悟する
  • ES6、Promise等々を使うなら公式READMEに書かれてるコードはそのまま使えないので注意

日々進化してるのでそのうち解消されるはず

事前準備

以下作業が必要。他のQiitaやブログで紹介されているので割愛。

  • AWS CLIをインストール
  • AWSコンソールでCognitoのアイデンティティプール（認証情報が保存されるDB的な）を作成
  • AWSコンソールでCognitoのユーザープール（ユーザー情報が保存されるDB的な）を作成
  • そのユーザープールにアプリクライアントを追加（※注：Webブラウザで使用する場合には クライアントシークレットを生成する のチェックを外す）

AWS CLIでユーザーを作る

Web画面上でユーザーを作ると別途JS側からパスワード再設定しなければならないので、CLIで作る。

aws cognito-idp sign-up --client-id ＜アプリクライアントID＞ --username ＜ユーザー名（メアド認証の場合はメアド）＞ --password ＜パスワード＞ --user-attributes Name=email,Value=＜メアド＞
aws cognito-idp admin-confirm-sign-up --user-pool-id ＜ユーザープールID＞ --username ＜ユーザー名（メアド認証の場合はメアド）＞

必要なパッケージをインストール

AWS SDKとAWS Cognito SDKはともに amazon-cognito-identity-js をnpm installするだけで内包される。
amazon-cognito-identity-js はAWS公式JavaScriptライブラリ。
Promise.promisify() を使わない方は bluebird は入れなくてもOK。

npm i -S bluebird
npm i -S amazon-cognito-identity-js
npm i -D webpack json-loader

ログイン機能を実装

以下コードはサーバーサイドではなくフロントエンドです。
View（HTML/CSS）のコードは割愛しますが、ReactでもAngularでも何でもOK。

UserUtil.js
import Promise from 'bluebird'
import AWS from 'aws-sdk'
import {
  CognitoUserPool,
  CognitoUserAttribute,
  CognitoUser,
  AuthenticationDetails,
} from 'amazon-cognito-identity-js'

const REGION = '＜リージョン＞'
const IDENTITY_POOL_ID = '＜アイデンティティプールID＞'
const USER_POOL_ID = '＜ユーザープールID＞'
const APP_CLIENT_ID = '＜アプリクライアントID＞'
const userPool = new CognitoUserPool({
  UserPoolId: USER_POOL_ID,
  ClientId: APP_CLIENT_ID,
})
export function signIn(Username, Password) {
  const authenticationDetails = new AuthenticationDetails({Username, Password})
  const cognitoUser = new CognitoUser({
    Username,
    Pool: userPool
  })
  return new Promise((resolve, reject)=>{
    cognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: (result)=>{
        resolve(getAccessToken(result))
      },
      onFailure: (err)=>{
        reject(err)
      },
      newPasswordRequired: ()=>{
        reject('Change your password')
      }
    })
  })
}

export function getSession() {
  const cognitoUser = userPool.getCurrentUser()
  if ( !cognitoUser ) return Promise.reject('Current user not found')
  return Promise.promisify(::cognitoUser.getSession)()
    .then((result)=>{
      if ( !result ) return Promise.reject('Session not found')
      return getAccessToken(result)
    })
}

export function getAccessToken(result) {
  return result.getAccessToken().getJwtToken()
}
index.js
import * as UserUtil from './UserUtil'

// ログイン
export function signIn() {
  const Username = '＜ブラウザで入力されたユーザー名＞'
  const Password = '＜ブラウザで入力されたパスワード＞'
  UserUtil
    .signIn(Username, Password)
    .then((accessToken)=>{
      // ログイン成功時の処理
    })
    .catch((err)=>{
      // ログイン失敗時の処理
    })
}

// ログイン後のセッション取得
export function getSession() {
  UserUtil
    .getSession()
    .then((accessToken)=>{
      // セッション取得成功時の処理
    })
    .catch((err)=>{
      // セッション取得失敗時の処理
    })
}

参考にさせていただいたページ

http://qiita.com/Yuki_BB3/items/ee8330830951acd907de
https://github.com/aws/amazon-cognito-identity-js

Halcon演算子
pythonに現れるSyntaxError:unexpected EOF while parsingの解決方法