Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updating to Auth0 lock v.11.0.1 (OIDC conformance) #8

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Updating to Auth0 lock v.11.0.1 (OIDC conformance) #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
20f4e25
Updated user-controller.js to for Auth0lock v.11.0.1 OIDC conformant …
Jan 8, 2018
b46b00b
Modified lambda function to receive both idToken and accessToken. idT…
Jan 8, 2018
24a9384
updated the mapping template to pass both idToken and accessToken
Jan 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
224 changes: 90 additions & 134 deletions chapter-5/Listing 5.1 - 5.6 - Website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
50 changes: 33 additions & 17 deletions chapter-5/Listing 5.1 - 5.6 - Website/js/user-controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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'));
}
});
},
Expand All @@ -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();
Expand All @@ -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();
})
});
}
}
}
3 changes: 2 additions & 1 deletion chapter-5/Listing 5.10 - Mapping template for the token copy.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{
"authToken" : "$input.params('Authorization')"
"authToken" : "$input.params('Authorization')",
"accessToken": "$input.params('AccessToken')"
}
18 changes: 12 additions & 6 deletions chapter-5/Listing 5.7 - 5.9 - User Profile/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
Expand All @@ -46,3 +51,4 @@ exports.handler = function(event, context, callback){
}
})
};