Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Amazon Cognito User Poolsを使って、webサイトにユーザ認証基盤を作る

More than 3 years have passed since last update.

概要

AWS Summit 2016 Chicago にてAmazon Cognitoの新機能として発表された「User Pools」を使ってwebサイトにユーザ認証基盤を作ります。User Poolsはサインインやサインアップ、セッション管理など、よくあるユーザ管理機能をマネージドで提供してくれるサービスです。

[New] Amazon Cognito 向け User Pools

User Poolsの作成

[新機能] Amazon Cognito に待望のユーザー認証基盤「User Pools」が追加されました!
作成方法についてはClassmethodさんのブログに詳しく乗ってますので参考にしてください。

JavaScriptからUser Poolsの認証機能を使う時の注意点として、以下のAppsの作成でGenerate client secretのチェックを外してください。JavaScriptからはclient secretが使用できないためです。
スクリーンショット 2016-04-23 16.34.07.png

identitypoolの作成

identitypoolを作ります。認証プロバイダーに先ほど作ったUser Poolを指定します。
Unauthenticated identitiesも有効化してください。
スクリーンショット 2016-04-23 16.38.59.png

Step2に進んでロールを付与します。特にAWSのリソースにアクセスする必要がなければ、下記のデフォルトのままのロールで問題無いです。
スクリーンショット 2016-04-23 16.44.47.png

JavaScriptで認証機構をサイトに埋め込む

amazon-cognito-identity-jsを使ってwebサイトに認証基盤を埋め込んでいきます。

サインアップ

以下の様なサインアップ用のフォームを作ります。
スクリーンショット 2016-04-23 16.49.43.png

以下がJavaScriptのコードです。Sendボタンを押せばサインアップの処理が走ります。

<script type="text/javascript">
jQuery(document).ready(function($){ 
  AWS.config.region = 'us-east-1'; // Region
  AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: 'us-east-1:a3132b33-a05d-4a9f-9ddd-39d8c9dba547'
  });

        // Cognito User Pool Id
  AWSCognito.config.region = 'us-east-1';
  AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: 'us-east-1:a3132b33-a05d-4a9f-9ddd-39d8c9dba547'
  });

  $("#signup").on( "click", function(){


    var poolData = { 
                UserPoolId : 'us-east-1_Ab129faBb',
                ClientId : '7lhlkkfbfb4q5kpp90urffao'
            };

    var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);

    var attributeList = [];

    var dataEmail = {
        Name : 'email',
        Value : $('#email').val()
    };

    var attributeEmail = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail);

    attributeList.push(attributeEmail);

    userPool.signUp($('#email').val(), $('#password').val(), attributeList, null, function(err, result){
        if (err) {
            console.log(err);
            return;
        }
        cognitoUser = result.user;
        console.log('user name is ' + cognitoUser.getUsername());
        console.log('call result: ' + result);
    });
  });
});

</script>

以下のようにUser Poolにユーザが登録されています。
スクリーンショット 2016-04-23 16.59.54.png

アクティベーション用のコードを書いたメールも届いています。
スクリーンショット 2016-04-23 16.59.07.png

ユーザのアクティベーション

以下の様なアクティベーション用のフォームを作ります。
スクリーンショット 2016-04-23 17.08.16.png

以下がJavaScriptのコード。Sendボタン押せばアクティベーションを実行します。

<script type="text/javascript">
jQuery(document).ready(function($){ 
  AWS.config.region = 'us-east-1'; // Region
  AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: 'us-east-1:a3132b33-a05d-4a9f-9ddd-39d8c9dba547'
  });

  // Cognito User Pool Id
  AWSCognito.config.region = 'us-east-1';
  AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: 'us-east-1:a3132b33-a05d-4a9f-9ddd-39d8c9dba547'
  });


  $("#send").on( "click", function(){
    var poolData = { 
                UserPoolId : 'us-east-1_Ab129faBb',
                ClientId : '7lhlkkfbfb4q5kpp90urffao'
            };
    var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);

    var userData = {
        Username : $('#email').val(),
        Pool : userPool
       };
    var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
        cognitoUser.confirmRegistration($('#key').val(), true, function(err, result) {
        if (err) {
            alert(err);
            return;
        }
        console.log('call result: ' + result);
    });
  });
});

</script>

StatusがComfirmedとなればアクティベーション完了です。
スクリーンショット 2016-04-23 17.11.19.png

ログイン

ログイン用のフォームを作ります
スクリーンショット 2016-04-23 17.14.05.png

コードは以下。
これでaccesstokenがCognitoから返却されるので、それを引き回すことでマイページなどが作れます。

<script type="text/javascript">
jQuery(document).ready(function($){ 
    AWS.config.region = 'us-east-1'; // Region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'us-east-1:a3132b33-a05d-4a9f-9ddd-39d8c9dba547'
    });

        // Cognito User Pool Id
    AWSCognito.config.region = 'us-east-1';
    AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'us-east-1:a3132b33-a05d-4a9f-9ddd-39d8c9dba547'
    });

  $("#login").on( "click", function(){
    var authenticationData = {
        Username : $('#email').val(),
        Password : $('#password').val()
    };
    var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);
    var poolData = { 
        UserPoolId : 'us-east-1_Ab129faBb',
        ClientId : '7lhlkkfbfb4q5kpp90urffao'
    };
    var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
    var userData = {
        Username : $('#email').val(),
        Pool : userPool
       };
    var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
    cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: function (result) {
            console.log('access token + ' + result.getAccessToken().getJwtToken());
        },

        onFailure: function(err) {
            alert(err);
        },

    }); 
  });
});

</script>

まとめ

ユーザの管理機能がサーバ側のコードを1行も書くこと無く実現できちゃうのはまじでスゴイです。
しかもセキュア。

ログイン・ログアウト機能をサーバレスアーキテクチャで実装する
会員登録機能をサーバレスアーキテクチャで実装する

先週こんな記事を書いたんですが、もう無意味なものになっちゃいました。
それだけAWSのアップデートが早いってことですね!

horike37
CEO of Serverless Operations, Inc Serverless Framework Core Maintainer
https://serverless.co.jp
serverless-operations
AWSクラウド技術の豊富な知見を活かし、サーバーレスによる開発や運用の支援、コンサルティングまで行う会社です
https://serverless.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away