ひとまず動くwebサイトを作りたい(Cognito編)

-
ひとまず動くwebサイトを作りたい(Cognito編):


webサイト作ってみたい！

ひとまず動くwebサイトを作りたい(CloudFront編)の続きになります


今回の設計図

実際のサイト


スクリーンショット 2018-12-31 15.23.23.png


前回書けなかったCognitoを使ったユーザー登録機能周りについて書いていこうと思います。

基本的に以下のサイトを参考にしました
AWS SDK for JavaScriptでCognito User Poolsを使ったログイン画面を作ってみた


作っているサイト


私もネイル

ネイルモデルを探すネイリストと無料でネイルを受けたい人をマッチングするサービスです


道のり


  1. Cognitoでサインアップ画面の作成
  2. ログイン画面の作成
  3. ログイン状態の確認
  4. プロフィールの更新


Cognitoの設定＋サインアップ画面の作成

ひとまず色々後から修正できるのでひとまずデフォルトで作成
チュートリアル: ユーザープールの作成

サインアップ画面は以下のhtmlとjsで作成

signup.html
<!-- sigupの情報送信用画面（signup後は見えない） --> 
<div id="signup_form"> 
  <h1>ユーザー登録</h1> 
  <form> 
    <div class="form-group"> 
      <label>ユーザー名</label> 
      <input type="text" class="form-control" placeholder="hogehoge" id="username" required> 
    </div> 
    <div class="form-group"> 
      <label>生年月日</label> 
      <input type="date" class="form-control" id="birth_date" required> 
    </div> 
    <div class="form-group"> 
      <label>メールアドレス</label> 
      <input type="email" class="form-control" placeholder="mail" id="email" required> 
    </div> 
    <div class="form-group"> 
      <label>パスワード</label> 
      <input type="password" class="form-control" placeholder="password" id="password" required> 
    </div> 
 
    <button type="button" id="signup" class="btn btn-primary">登録</button> 
  </form> 
</div> 
 
<!-- sigup後の認証コード用画面（最初は見えない） --> 
<div style="display: none" id="verification"> 
  <h2>VARIFICATION</h2> 
  <form> 
    <div class="form-group"> 
      <label>Verification Code</label> 
      <input type="text" id="verification-code" class="form-control"> 
      <input type="hidden" id="username"> 
      <button type="button" id="submit" class="btn btn-primary">Submit</button> 
  </form> 
</div>
signup.js
var poolData = { 
    UserPoolId: 'ap-northeast-1_**********', 
    ClientId: '*************************' 
}; 
 
jQuery(document).ready(function ($) { 
    AWS.config.region = 'ap-northeast-1'; // Region 
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({ 
        IdentityPoolId: 'ap-northeast-1:*********-****-****-****-*************' 
    }); 
 
    // Cognito User Pool Id 
    AWSCognito.config.region = 'ap-northeast-1'; 
    AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({ 
        IdentityPoolId: 'ap-northeast-1:*********-****-****-****-*************' 
    }); 
 
    //ユーザ登録時,signupボタンが押される時のfunction 
    $('#signup').click(function () { 
 
        var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData); 
 
        var attributeList = []; 
 
        //サインアップ時に追加する項目を追加 
        //ここのNameはuser poolの属性とあっている必要がある 
        // ex) birth_dateとした場合エラーになる 
        var dataEmail = { 
            Name: 'email', 
            Value: $('#email').val() 
        }; 
        var birthDate = { 
            Name : 'birthdate', 
            Value : $('#birth_date').val() 
        }; 
 
        var attributeEmail = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail); 
        var attributeBirthDate = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(birthDate); 
        attributeList.push(attributeEmail); 
        attributeList.push(attributeBirthDate); 
 
        var dataName = { 
            Name: 'name', 
            Value: $('#username').val() 
        }; 
 
        attributeList.push(dataName); 
 
        userPool.signUp($('#username').val(), $('#password').val(), attributeList, null, function (err, result) { 
            if (err) { 
                alert(err); 
                console.log(err); 
                return; 
            } 
            else { 
                var cognitoUser = result.user; 
                //認証用画面を表示する 
                $("#verification").show(); 
                //サインアップ用画面を隠す 
                $("#signup_form").hide(); 
                $("#username").val(cognitoUser.getUsername()); 
            } 
        }); 
    }); 
 
    //ユーザ認証時、submitボタンが押される時のfunction 
    $('#submit').click(function () { 
 
        var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData); 
 
        var userData = { 
            Username: $('#username').val(), 
            Pool: userPool 
        }; 
 
        var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData); 
        cognitoUser.confirmRegistration($('#verification-code').val(), true, function (err, result) { 
            if (err) { 
                alert(err); 
                return; 
            } 
            console.log('call result: ' + result); 
            //認証完了後指定画面に遷移させる 
            location.href = "index.html"; 
        }); 
    }); 
});
ここで注意しないといけないのがユーザープールに送信する属性データの名前である

（signup.jsの中のemail,birthdateなどの名前である）

ユーザープールの設定から確認できるデフォルト属性を使う分には問題ないが、

それ以外を使う場合はカスタム属性として事前に追加しておく必要がある



スクリーンショット 2019-01-03 23.23.24.png



ログイン画面の作成

ログイン画面は以下のhtmlとjsで作成

login.html
<form> 
  <div class="form-group"> 
    <label>ユーザー名</label> 
    <input type="text" class="form-control" id="username" required> 
  </div> 
  <div class="form-group"> 
    <label>パスワード</label> 
    <input type="password" class="form-control" placeholder="password" id="password" required> 
  </div> 
  <button type="button" id="login" class="btn btn-primary">ログイン</button> 
</form>
login.js
// Region 
AWS.config.region = 'ap-northeast-1'; 
AWSCognito.config.region = 'ap-northeast-1'; 
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({ 
    IdentityPoolId: 'ap-northeast-1:*********-****-****-****-*************' 
}); 
 
jQuery(document).ready(function ($) { 
    $('#login').click(function () { 
 
        var authenticationData = { 
            Username: $('#username').val(), 
            Password: $('#password').val() 
        }; 
        var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData); 
        var poolData = { 
            UserPoolId: 'ap-northeast-1_***********', 
            ClientId: '**************************' 
        }; 
        var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData); 
        var userData = { 
            Username: $('#username').val(), 
            Pool: userPool 
        }; 
        var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData); 
 
        cognitoUser.authenticateUser(authenticationDetails, { 
            onSuccess: function (result) { 
                console.log('access token + ' + result.getIdToken().getJwtToken()); 
 
                AWS.config.credentials = new AWS.CognitoIdentityCredentials({ 
                    IdentityPoolId: 'ap-northeast-1:*********-****-****-****-*************', 
                    Logins: { 
                        'cognito-idp.ap-northeast-1.amazonaws.com/ap-northeast-1_********': result.getIdToken().getJwtToken() 
                    } 
                }); 
                AWS.config.credentials.get(function (err) { 
                    if (err) { 
                        console.log('error in authetication AWS' + err); 
                        window.location.href = 'index.html'; 
                    } 
                    else { 
                        // Using authenticated credentials $('#accessKey').val(AWS.config.credentials.accessKeyId); 
                        $('#master-account').val($('#username').val()); 
                    } 
                }); 
            }, 
 
            onFailure: function (err) { 
                alert(err); 
            }, 
        }); 
    }); 
});


ログイン状態の維持

  • ログインしていない場合はlogin.htmlに遷移
  • ログイン指定ればユーザー名の表記＋ログアウトボタンの作成
after_login.html
<div id="loginUser"></div> 
<div id="logout"> 
  <div id="logoutButton"></div> 
</div>
session.js
AWSCognito.config.region = 'ap-northeast-1'; // Region 
 
var data = { 
  UserPoolId: 'ap-northeast-1_**********', 
  ClientId: '*************************' 
}; 
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data); 
var cognitoUser = userPool.getCurrentUser(); 
 
$(window).load(check_session()); 
 
//$(window).load( 
function check_session() { 
  if (cognitoUser != null) { 
    cognitoUser.getSession(function(err, sessresult) { 
      if (sessresult) { 
        console.log('You are now logged in : ' + cognitoUser.username); 
        cognitoUser.getUserAttributes(function(err, attrresult) { 
          if (err) { 
            alert(err); 
            return; 
          } 
          $("#loginUser").html(cognitoUser.username + "さん"); 
          $("#logoutButton").html("<p class='copyright text-muted'>logout</p>"); 
 
          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: 'ap-northeast-1:*********-****-****-****-*************', 
            Logins: { 
              'cognito-idp.ap-northeast-1.amazonaws.com/ap-northeast-1_********': sessresult.getIdToken().getJwtToken() 
            } 
          }); 
        }); 
      } else { 
        var url = "login.html"; 
        $(location).attr("href", url); 
      } 
    }); 
  } else { 
    var url = "login.html"; 
    $(location).attr("href", url); 
  } 
} 
 
 
$(document).on("click", "#logout", function($) { 
  cognitoUser.signOut(); 
  location.reload(); 
})


プロフィールの更新

プロフィール情報を更新できる状態にする
updateAttributesを使っていて、

サインアップの時と同様attributeのNameに気をつける

update_profile.html
<form> 
  <div class="form-group"> 
    <label class="control-label">プロフィール</label> 
    <textarea class="form-control" placeholder="プロフィール" id="profile" rows="3"></textarea> 
  </div> 
  <div class="modal-footer"> 
    <button type="button" id="updateProfile" class="btn btn-primary">登録</button> 
  </div> 
</form>
update_profile.js
var data = { 
  UserPoolId: 'ap-northeast-1_*********', 
  ClientId: '**********************' 
}; 
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data); 
var cognitoUser = userPool.getCurrentUser(); 
 
$('#updateProfile').click(function(e) { 
  if (cognitoUser != null) { 
    cognitoUser.getSession(function(err, sessionResult) { 
      if (sessionResult) { 
        var attributeList = []; 
        var attribute = { 
          Name: 'profile', 
          Value: $("#profile").val() 
        }; 
        attribute = new AmazonCognitoIdentity.CognitoUserAttribute(attribute); 
        attributeList.push(attribute); 
 
        cognitoUser.updateAttributes(attributeList, function(err, result) { 
          if (err) { 
            alert(err); 
            return; 
          } 
        }); 
        alert('success'); 
      } 
    }); 
 
  } 
});


次はlambda周りについて

cognito周りのログインができたので次は認証後のlambdaについて書いていこうと思います

最近seoが謎すぎて検索に乗せる方法がわからないので、

誰か詳しい方教えていただけるとめっちゃ助かります。。。笑

手探りでやっている状態なのでどしどしご指摘をいただけると嬉しいです！

また思い出しながら書いていったので間違った内容があればすみません。。

コメント

コメントを投稿

このブログの人気の投稿

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 IT 気になる、記になる… ｢iOS 15｣の新機能の一部は｢iPhone XS｣以降でしか利用出来ないものも https://taisy0.com/2021/06/15/141888.html tomac 2021-06-15 13:11:47 IT ITmedia 総合記事一覧 [ITmedia Mobile] ソースネクストの「ポケトーク」に新機能　グループ翻訳とWeb会議への字幕付与に対応 https://www.itmedia.co.jp/mobile/articles/2106/15/news164.html itmediamobile 2021-06-15 22:10:00 AWS AWS Architecture Blog Field Notes: Benchmark...
続きを読む

投稿時間:2021-04-30 23:37:32 RSSフィード2021-04-30 23:00 分まとめ(42件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 IT 気になる、記になる… Microsoft、Android向け｢Microsoft Edge｣のDevビルドをGoogle Play ストアで公開 https://taisy0.com/2021/04/30/139961.html android 2021-04-30 13:46:02 python Pythonタグが付けられた新着投稿 - Qiita Raspberrypi + Pythonで、今日のゴミの日を取得して、LINE通知とアレクサにお知らせしてもらう https://qiita.com/xxxyahho/items/e7b2552f8ff794d7bf07 cronで日回一ヶ月間動かしてみて様子見。 2021-04-30 22:27:31 python Pythonタグが付けられた新着投稿 - ...
続きを読む

投稿時間:2023-02-05 02:09:04 RSSフィード2023-02-05 02:00 分まとめ(9件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 python Pythonタグが付けられた新着投稿 - Qiita pythonの-mオプションの動作を調べる https://qiita.com/Ryku/items/d9cebcb9e0a9e36281c6 pythonmmym 2023-02-05 01:18:33 python Pythonタグが付けられた新着投稿 - Qiita 【Python】pythonでwifi接続をしてみた。【pywifi】 https://qiita.com/shinfx/items/f7250730c0d8dabb5962 pywifi 2023-02-05 01:10:24 js JavaScriptタグが付けられた新着投稿 - Qiita 【Julia】Electron.jlを使ってカウンタ...
続きを読む