fiddle のセットアップ

  1. https://jsfiddle.net: にアクセスして、SDK の Cognit oリソースとの統合をテストするための新しい fiddle を作成します。

  2. これらの依存関係とライブラリをリソースセクションに追加して、新しいフィドルをセットアップしてください

https://www.w3schools.com/w3css/4/w3.css
https://demowebapp.s3-us-west-2.amazonaws.com/amazon-cognito-identity.js
https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js
https://code.jquery.com/jquery-3.4.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js
https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.850.0/aws-sdk.min.js

handson

3.このサンプルコードを使用して、HTML レイアウト、サインアップタブを作成します。

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openTab('signup')">Sign-up</button>
  <button class="w3-bar-item w3-button" onclick="openTab('signin')">Sign-in</button>
  <button class="w3-bar-item w3-button" onclick="openTab('managemfa')">Manage MFA</button>
  <button class="w3-bar-item w3-button" onclick="openTab('callapis')">Call APIs</button>
  <button class="w3-bar-item w3-button" onclick="openTab('accesss3')">Access S3</button>
</div>

4.ヘルパー JS 関数と設定をフィドルに追加してください。必ず前の演習で使った user-pool-id と app-client-id を指定してください

/**
 * Configure user pool and client
 */
var poolData = {
  UserPoolId: "___TYPE_YOUR_USER_POOL_ID___",
  ClientId: "___TYPE_YOUR_APP_CLIENT_ID___"
};

var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var cognitoUser;

/**
 * Helpers
 */
function openTab(tabName) {
  var i;
  var x = document.getElementsByClassName("tab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}

function parseJwt (token) {
  var base64Url = token.split('.')[1];
  var base64 = base64Url.replace('-', '+').replace('_', '/');
  return JSON.parse(window.atob(base64));
}