Profile

AWS Serverless Web App

The next big step is to confirm that we can integrate what we have in temp.html, the ability to get user information from the database, with our ability to sign in a user. What we want is that after the user has signed in, go to a web page and automatically call the API to show the user info from the database.

To do this, we will take the sign-out.html code and copy it. We will remove the function that signs the user out, but keep the bit that confirms we sign the user in. Once we confirm we sign the user in, we will copy the function from sign-in.html that returns the user’s email address. We will call this function, grab the email address, and pass it as a parameter into the function from temp.html that calls the API. This will then hopefully return the user info from the database.

Tasks:

  • copy sign-out.html
  • remove sign-out code
  • copy over getUserAttributes() function from sign-in.html
  • copy over getUser() function from temp.html
  • show profile results in div
profile.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!--Cognito JavaScript-->
    <script src="js/amazon-cognito-identity.min.js"></script>
    <script src="js/config.js"></script>
  </head>

  <body>
  <div class="container">
    <div>
      <h1>Profile</h1>
    </div>
    <div id='profile'>
      <p></p>
    </div>
  <div>

    <br>
    <div id='home'>
      <p>
        <a href='./index.html'>Home</a>
      </p>
    </div>

  <script>

    async function getUser(email_address) {
      // get the user info from API Gate

      const api_url = 'https://gonvpjbyuf.execute-api.us-east-1.amazonaws.com/prod/user-profile?user_email=' + email_address;
      const api_response = await fetch(api_url);
      const api_data = await(api_response).json();
      console.log(api_data);

      const div_user_info = document.getElementById('profile');
      div_user_info.innerHTML = api_data['body'];
      }

    var data = {
      UserPoolId : _config.cognito.userPoolId,
        ClientId : _config.cognito.clientId
      };
      var userPool = new AmazonCognitoIdentity.CognitoUserPool(data);
      var cognitoUser = userPool.getCurrentUser();

      window.onload = function(){
        if (cognitoUser != null) {
          cognitoUser.getSession(function(err, session) {
            if (err) {
              alert(err);
              return;
            }
            //console.log('session validity: ' + session.isValid());

            cognitoUser.getUserAttributes(function(err, result) {
              if (err) {
                console.log(err);
                return;
              }
              // user email address
              console.log(result[2].getValue());
              getUser(result[2].getValue())
            });

          });
        } else {
          console.log("Already signed-out")
        }
      }
    </script>

  </body>
</html>

Warning

The above code is a really bad way to write this. Anyone can look at the html and see the line: const api_url = 'https://gonvpjbyuf.execute-api.us-east-1.amazonaws.com/prod/user-profile?user_email=' + email_address; and then just place any email address they want in. Once they find a valid email address, they will then get full access to all the user’s info. I know it is un-secure but for now we are going to leave it 😊.