From 20f4e258933aafaebde1b5da5300f676fdf48fe0 Mon Sep 17 00:00:00 2001
From: Maxim Makatchev <maxi@cmu.edu>
Date: Sun, 7 Jan 2018 17:42:46 -0800
Subject: [PATCH 1/3] Updated user-controller.js to for Auth0lock v.11.0.1 OIDC
 conformant API. Passing both idToken and accessToken to AWS, since jwt
 requires idToken and OIDC conformant GET /usernfo requires accessToken.

---
 .../Listing 5.1 - 5.6 - Website/index.html    | 224 +++++++-----------
 .../js/user-controller.js                     |  50 ++--
 2 files changed, 123 insertions(+), 151 deletions(-)
diff --git a/chapter-5/Listing 5.1 - 5.6 - Website/index.html b/chapter-5/Listing 5.1 - 5.6 - Website/index.html
index 07dad63..b68dcf5 100755
--- a/chapter-5/Listing 5.1 - 5.6 - Website/index.html	
+++ b/chapter-5/Listing 5.1 - 5.6 - Website/index.html	
@@ -1,149 +1,105 @@
 <!doctype html>
-<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
-<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
-<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
-<!--[if gt IE 8]><!-->
 <html class="no-js" lang="">
-<!--<![endif]-->
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title></title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="apple-touch-icon" href="apple-touch-icon.png">
-
-  <link rel="stylesheet" href="css/bootstrap.min.css">
-  <style>
-    body {
-      padding-top: 50px;
-      padding-bottom: 20px;
-    }
-  </style>
-  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
-  <link rel="stylesheet" href="css/main.css">
-
-  <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
-</head>
-
-<body>
-  <!--[if lt IE 8]>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="apple-touch-icon" href="apple-touch-icon.png">
+
+        <link rel="stylesheet" href="css/bootstrap.min.css">
+        <style>
+            body {
+                padding-top: 50px;
+                padding-bottom: 20px;
+            }
+        </style>
+        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
+        <link rel="stylesheet" href="css/main.css">
+
+        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
+    </head>
+    <body>
+        <!--[if lt IE 8]>
             <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
-  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
-    <div class="container">
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="#">Project name</a>
-      </div>
-      <div id="navbar" class="navbar-collapse collapse">
-        <div class="navbar-form navbar-right">
-          <button id="user-profile" class="btn btn-default">
-            <img id="profilepicture" />&nbsp;<span id="profilename"></span>
+    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
           </button>
-
-          <button id="auth0-login" class="btn btn-success">Sign in</button>
-          <button id="auth0-logout" class="btn btn-success">Sign Out</button>
+          <a class="navbar-brand" href="#">Project name</a>
         </div>
+        <div id="navbar" class="navbar-collapse collapse">
+          <div class="navbar-form navbar-right">
+            <button id="user-profile" class="btn btn-default">
+              <img id="profilepicture" />&nbsp;<span id="profilename"></span>
+            </button>
+            <button id="auth0-login" class="btn btn-success">Sign in</button>
+            <button id="auth0-logout" class="btn btn-success">Sign out</button>
+          </div>
+        </div><!--/.navbar-collapse -->
       </div>
-      <!--/.navbar-collapse -->
-    </div>
-  </nav>
-
-  <!-- Main jumbotron for a primary marketing message or call to action -->
-  <div class="jumbotron">
-    <div class="container">
-      <h1>Hello, world!</h1>
-      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
-      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
-    </div>
-  </div>
-
-  <div class="container">
-    <!-- Example row of columns -->
-    <div class="row">
-      <div class="col-md-4">
-        <h2>Heading</h2>
-        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
-      </div>
-      <div class="col-md-4">
-        <h2>Heading</h2>
-        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
-      </div>
-      <div class="col-md-4">
-        <h2>Heading</h2>
-        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
+    </nav>
+
+    <!-- Main jumbotron for a primary marketing message or call to action -->
+    <div class="jumbotron">
+      <div class="container">
+        <h1>Hello, world!</h1>
+        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
       </div>
     </div>
 
-    <hr>
-
-    <footer>
-      <p>&copy; Company 2016</p>
-    </footer>
-  </div>
-  <!-- /container -->
-
-  <div id="user-profile-modal" class="modal fade" tabindex="-1" role="dialog">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-          <h4 class="modal-title">User Profile Information (from Auth0 via Lambda)</h4>
-        </div>
-        <div class="modal-body">
-          <b>Raw JSON from Auth0:</b>
-          <pre id="user-profile-raw-json"></pre>
+    <div class="container">
+      <!-- Example row of columns -->
+      <div class="row">
+        <div class="col-md-4">
+          <h2>Heading</h2>
+          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+        <div class="col-md-4">
+          <h2>Heading</h2>
+          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
+       </div>
+        <div class="col-md-4">
+          <h2>Heading</h2>
+          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
         </div>
       </div>
-      <!-- /.modal-content -->
-    </div>
-    <!-- /.modal-dialog -->
-  </div>
-  <!-- /.modal -->
-
-
-  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
-  <script>
-    window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
-  </script>
-
-  <script src="js/vendor/bootstrap.min.js"></script>
-  <script src="https://cdn.auth0.com/js/lock-9.min.js"></script>
-
-  <script src="js/user-controller.js"></script>
-  <script src="js/config.js"></script>
-  <script src="js/main.js"></script>
-
-  <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
-  <script>
-    (function(b, o, i, l, e, r) {
-      b.GoogleAnalyticsObject = l;
-      b[l] || (b[l] =
-        function() {
-          (b[l].q = b[l].q || []).push(arguments)
-        });
-      b[l].l = +new Date;
-      e = o.createElement(i);
-      r = o.getElementsByTagName(i)[0];
-      e.src = '//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e, r)
-    }(window, document, 'script', 'ga'));
-    ga('create', 'UA-XXXXX-X', 'auto');
-    ga('send', 'pageview');
-  </script>
-</body>
 
+      <hr>
+
+      <footer>
+        <p>&copy; Company 2015</p>
+      </footer>
+    </div> <!-- /container -->        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
+
+        <script src="js/vendor/bootstrap.min.js"></script>
+        <script src="https://cdn.auth0.com/js/lock/11.0.1/lock.min.js"></script>
+        
+        <script src="js/user-controller.js"></script>
+        <script src="js/config.js"></script>
+
+        <script src="js/main.js"></script>
+
+        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+        <script>
+            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+            e.src='//www.google-analytics.com/analytics.js';
+            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
+        </script>
+    </body>
 </html>
diff --git a/chapter-5/Listing 5.1 - 5.6 - Website/js/user-controller.js b/chapter-5/Listing 5.1 - 5.6 - Website/js/user-controller.js
index eca1097..ef743b3 100644
--- a/chapter-5/Listing 5.1 - 5.6 - Website/js/user-controller.js	
+++ b/chapter-5/Listing 5.1 - 5.6 - Website/js/user-controller.js	
@@ -30,11 +30,33 @@ var userController = {
     this.data.config = config;
     this.data.auth0Lock = new Auth0Lock(config.auth0.clientId, config.auth0.domain);
 
-    var idToken = localStorage.getItem('userToken');
+    this.data.auth0Lock.on("authenticated", function(authResult) {
+      
+      console.log("authResult: " + JSON.stringify(authResult));
 
-    if (idToken) {
+      // Call getUserInfo using the token from authResult
+  
+       this.getUserInfo(authResult.accessToken, function(error, profile) {
+        if (error) {
+          // Error callback
+          alert('There was an error getting user info');
+        } else {
+          // Save the JWT token.
+          console.log('saving user token');
+
+          localStorage.setItem('accessToken', authResult.accessToken);
+          localStorage.setItem('idToken', authResult.idToken);
+          that.configureAuthenticatedRequests();
+          that.showUserAuthenticationDetails(profile);
+        }
+      });
+    });
+
+    var accessToken = localStorage.getItem('accessToken');
+
+    if (accessToken) {
       this.configureAuthenticatedRequests();
-      this.data.auth0Lock.getProfile(idToken, function(err, profile) {
+      this.data.auth0Lock.getUserInfo(accessToken, function(err, profile) {
         if (err) {
           return alert('There was an error getting the profile: ' + err.message);
         }
@@ -47,7 +69,8 @@ var userController = {
   configureAuthenticatedRequests: function() {
     $.ajaxSetup({
       'beforeSend': function(xhr) {
-        xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('userToken'));
+        xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('idToken'));
+        xhr.setRequestHeader('AccessToken', localStorage.getItem('accessToken'));
       }
     });
   },
@@ -73,21 +96,11 @@ var userController = {
         }
       };
 
-      that.data.auth0Lock.show(params, function(err, profile, token) {
-        if (err) {
-          // Error callback
-          alert('There was an error');
-        } else {
-          // Save the JWT token.
-          localStorage.setItem('userToken', token);
-          that.configureAuthenticatedRequests();
-          that.showUserAuthenticationDetails(profile);
-        }
-      });
+      that.data.auth0Lock.show(params);
     });
 
     this.uiElements.logoutButton.click(function(e) {
-      localStorage.removeItem('userToken');
+      localStorage.removeItem('accessToken');
 
       that.uiElements.logoutButton.hide();
       that.uiElements.profileButton.hide();
@@ -98,9 +111,12 @@ var userController = {
       var url = that.data.config.apiBaseUrl + '/user-profile';
 
       $.get(url, function(data, status) {
+
+        alert(JSON.stringify(data));
+
         $('#user-profile-raw-json').text(JSON.stringify(data, null, 2));
         $('#user-profile-modal').modal();
       })
     });
   }
-}
+}
\ No newline at end of file

From b46b00bf48601b18dfdcbec62bd99e48a9e1f668 Mon Sep 17 00:00:00 2001
From: Maxim Makatchev <maxi@cmu.edu>
Date: Sun, 7 Jan 2018 17:46:20 -0800
Subject: [PATCH 2/3] Modified lambda function to receive both idToken and
 accessToken. idToken is needed for jwt verification and access token to
 access OIDC conformant Auth0 API /userinfo

---
 .../Listing 5.7 - 5.9 - User Profile/index.js  | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/chapter-5/Listing 5.7 - 5.9 - User Profile/index.js b/chapter-5/Listing 5.7 - 5.9 - User Profile/index.js
index 1ccb154..4010e5c 100644
--- a/chapter-5/Listing 5.7 - 5.9 - User Profile/index.js	
+++ b/chapter-5/Listing 5.7 - 5.9 - User Profile/index.js	
@@ -3,6 +3,7 @@
  * Serverless Architectures on AWS
  * http://book.acloud.guru/
  * Last Updated: Feb 11, 2017
+ * Modified by Maxim Makatchev on January 7, 2018
  */
 
 'use strict';
@@ -16,28 +17,32 @@ exports.handler = function(event, context, callback){
     	return;
     }
 
-    var token = event.authToken.split(' ')[1];
+    var id_token = event.authToken.split(' ')[1];
+    var access_token = event.accessToken;
 
     var secretBuffer = new Buffer(process.env.AUTH0_SECRET);
-    jwt.verify(token, secretBuffer, function(err, decoded){
+    jwt.verify(id_token, secretBuffer, function(err, decoded){
     	if(err){
     		console.log('Failed jwt verification: ', err, 'auth: ', event.authToken);
-    		callback('Authorization Failed');
+    		callback('Authorization Failed: ' + id_token + ", error: " + err + ", auth: " + event.authToken);
     	} else {
 
         var body = {
-          'id_token': token
+          'id_token': id_token,
+          'access_token': access_token
         };
 
         var options = {
-          url: 'https://'+ process.env.DOMAIN + '/tokeninfo',
-          method: 'POST',
+          url: 'https://'+ process.env.DOMAIN + '/userinfo',
+          method: 'GET',
           json: true,
           body: body
         };
 
         request(options, function(error, response, body){
+          console.log("Response0: " + JSON.stringify(response));
           if (!error && response.statusCode === 200) {
+            console.log("Response1: " + JSON.stringify(response));
             callback(null, body);
           } else {
             callback(error);
@@ -46,3 +51,4 @@ exports.handler = function(event, context, callback){
     	}
     })
 };
+

From 24a93848aa78ce566f26c6a485f5b9bacf60a329 Mon Sep 17 00:00:00 2001
From: Maxim Makatchev <maxi@cmu.edu>
Date: Sun, 7 Jan 2018 17:48:37 -0800
Subject: [PATCH 3/3] updated the mapping template to pass both idToken and
 accessToken

---
 .../Listing 5.10 - Mapping template for the token copy.txt     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/chapter-5/Listing 5.10 - Mapping template for the token copy.txt b/chapter-5/Listing 5.10 - Mapping template for the token copy.txt
index b2e72e3..4a887b6 100644
--- a/chapter-5/Listing 5.10 - Mapping template for the token copy.txt	
+++ b/chapter-5/Listing 5.10 - Mapping template for the token copy.txt	
@@ -1,3 +1,4 @@
 {
-    "authToken" : "$input.params('Authorization')" 
+    "authToken" : "$input.params('Authorization')",
+    "accessToken": "$input.params('AccessToken')"
 }
