Go to Qiita Advent Calendar 2024 Top
LoginSignup
36
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@Yuki_BB3(Yuki Yoshida)

cognitoを使ってログイン画面を作ってみた！ 〜ログイン画面作成〜（作業メモ）

Posted at

cognitoを使ってログイン画面を作ってみた！ 〜ユーザーの作成〜（作業メモ）で書ききらなかった続き。
例によって参考はこちらの記事：AWS SDK for JavaScriptでCognito User Poolsを使ったログイン画面を作ってみた | Developers.IO

ディレクトリ構成

ディレクトリ構成
.
└── www
    ├── js
    │   ├── amazon-cognito-identity.min.js
    │   ├── aws-cognito-sdk.min.js
    │   ├── jsbn.js
    │   ├── jsbn2.js
    │   ├── mypage.js
    │   └── sjcl.js
    ├── login.css
    ├── login.html
    ├── mypage.css
    ├── mypage.html
    └── signup.html

ログイン画面の作成

サンプルのレイアウトはこちらを利用しました。
cssも作成して置いておいて下さい。

サンプルのTHML情報をテンプレートに埋め込んだだけ。
前回取得したIdentity pool ID（loginAppって名前で作ったやつ）、cognito-identityで作成したApp client idを使用します

login.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <link rel="stylesheet" type="text/css" href="./login.css">
    <!-- aws sdk //-->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.3.8.min.js"></script>
    <!-- aws cognito sdk (public beta!!) //-->
    <script src="./js/jsbn.js"></script>
    <script src="./js/jsbn2.js"></script>
    <script src="./js/sjcl.js"></script>
    <script src="./js/moment.js"></script>
    <script src="./js/aws-cognito-sdk.min.js"></script>
    <script src="./js/amazon-cognito-identity.min.js"></script>
    <!-- jquery //-->
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"
            integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
    <!-- bootstrap3 //-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
          integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
            integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
            crossorigin="anonymous"></script>
</head>
<body>

<script type="text/javascript">
    AWS.config.region = 'ap-northeast-1'; // Region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: '＜loginAppのIdentity pool ID＞'
    });
    // Initialize the Amazon Cognito credentials provider
    AWSCognito.config.region = 'ap-northeast-1'; // Region
    AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: '＜loginAppのIdentity pool ID＞'
    });
    var data = { UserPoolId: '＜作成したuser-identityのPool Id＞',
        ClientId: '＜cognito-identityのApp client id＞',
        Paranoia : 7
    };

    var userPool;
    var cognitoUser;
</script>

<!-- header -->
<hgroup class="heading">
    <h1 class="major">Login Form </h1>
</hgroup>

<!-- form starts here -->
<form class="sign-up">
    <h1 class="sign-up-title">Sign up in seconds</h1>
    <input type="text" class="sign-up-input" id="name" placeholder="What's your username?" autofocus>
    <input type="password" class="sign-up-input" id="password" placeholder="Choose a password">
    <button type="submit" value="Log in" class="sign-up-button" id="login-button">Login</button>
</form>

<div class="about">
    <p class="about-links">
        <a href="http://www.cssflow.com/snippets/sign-up-form" target="_parent">View Article</a>
        <a href="http://www.cssflow.com/snippets/sign-up-form.zip" target="_parent">Download</a>
    </p>
    <p class="about-author">
        &copy; 2013 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> -
        <a href="http://www.cssflow.com/mit-license" target="_blank">MIT License</a><br>
        Original PSD by <a href="http://dribbble.com/shots/1037950-Sign-up-freebie" target="_blank">Dylan Opet</a>
    </p>
</div>

<script type="text/javascript">
    $("#login-button").click(function(event){
        event.preventDefault();
        var authenticationData = {
            Username : $('#name').val(),
            Password : $('#password').val()
        };
        var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);
        userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
        var userData = {
            Username : $('#name').val(),
            Pool : userPool
        };
        cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
        cognitoUser.authenticateUser(authenticationDetails, {
            onSuccess: function (authresult) {
                //console.log('access token + ' + authresult.getIdToken().getJwtToken());

                var url = "mypage.html";

                $('form').fadeOut(700, function(){
                    $(location).attr("href", url);
                });
                $('.wrapper').addClass('form-success');

            },
            onFailure: function(err) {
                alert(err.message);
            },
        });
    });
</script>


</body>
</html>

ログイン後の遷移先「mypage.html」も合わせて準備します。
サンプルと同じこのレイアウトを当ててみます。
cssファイルも準備してください。
mypage.htmlはそのまんま使います（遷移先のマイページって書いてあるソース）。
cssの置き場とか違うので一応載せておきます

mypage.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>MyPage</title>
    <link rel="stylesheet" type="text/css" href="./mypage.css">
</head>
<body>
<div class="wrapper">
    <div class="mypage">
        <h1>mypage</h1>
        <div id="username">Username: XXXXX</div>
        <div id="email">EMail: XXXXX</div>

    </div>
</div>
<script src="js/jsbn.js"></script>
<script src="js/jsbn2.js"></script>
<script src="js/sjcl.js"></script>
<script src="js/aws-cognito-sdk.min.js"></script>
<script src="js/amazon-cognito-identity.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.5.2.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/mypage.js"></script>

</body>
</html>

両方準備したら前回作成したユーザーで試しにログインしてみます。

ログイン画面

スクリーンショット 2016-08-25 11.10.03.png

成功すると

スクリーンショット 2016-08-25 11.18.51.png

ログインが出来ました！！！

ログインセッション

あとは、記事で書かれているようにログインセッションを準備します
./www/js 配下にmypage.jsを準備することでログインセッションを用意できるようです。

mypage.js
AWS.config.region = 'ap-northeast-1'; // Region
AWSCognito.config.region = 'ap-northeast-1'; // Region

var data = { UserPoolId: '＜作成したuser-identityのPool Id＞',
    ClientId: '<cognito-identityのApp client id>'
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
var cognitoUser = userPool.getCurrentUser();

if (cognitoUser != null) {
    cognitoUser.getSession(function(err, sessresult) {
        if (sessresult) {
            console.log('You are now logged in.');
            cognitoUser.getUserAttributes(function(err, attrresult) {
                if (err) {
                    alert(err);
                    return;
                }
                $("#username").html("Username: " + cognitoUser.username);

                for (i = 0; i < attrresult.length; i++) {
                    if (attrresult[i].getName()=="email"){
                        $("#email").html("EMail: " + attrresult[i].getValue());
                    }
                }

                // Add the User's Id Token to the Cognito credentials login map.
                AWS.config.credentials = new AWS.CognitoIdentityCredentials({
                    IdentityPoolId: '＜loginAppのIdentity pool ID＞',
                    Logins: {
                        '＜loginAppのIdentity pool IDのARN（cognito-identity:から末尾まで）＞': sessresult.getIdToken().getJwtToken()
                    }
                });
            });
        } else {
            var url = "login.html";
            $(location).attr("href", url);
        }
    });
} else {
    var url = "login.html";
    $(location).attr("href", url);
}

コレを作成すると、ログインしていないとlogin画面に戻され、ログインすると画面内のユーザー名とメールアドレスの欄がユーザーのものになるようです。

cognitoよくわからなくて触れていなかったのですが、記事のおかげで触ることが出来ました。
記事に書いてあるようにS3と連携していろいろやっていきたい！

S3でBASIC認証かけたい的な話題もよく聞きますが、コレなら簡単に実装できて便利ですねー
ログイン失敗時も一瞬遷移先のページが見えていますが、そのへんは更にクッションページ挟んだりすることでなんとかなりそうWAFとかも挟んでヘッダー情報で弾いたりとかもできるし組み合わせていけば手軽ですねー

クラメソさんの記事はいつも本当に勉強になる。ｱﾘｶﾞﾀﾔｰ

36
44
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
36
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?