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

Add cross-origin-auth support to Passwordless #482

Merged
merged 1 commit into from
Aug 9, 2017
Merged

Add cross-origin-auth support to Passwordless #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
257 changes: 134 additions & 123 deletions example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<title>Auth0.js Demo Examples</title>
<link rel="stylesheet" type="text/css" href="//cdn.auth0.com/styleguide/1/index.css">
<script src="/webpack-dev-server.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/auth0.js"></script>
<script src="/cordova-auth0-plugin.js"></script>

<style>
.row {
margin:10px 0;
}
pre {
margin: 0 0 10px 0;
min-height: 300px;
}
code {
min-height: 300px;
}
h2 {
margin: 20px 0;
}
code span {
color:red;
}
code details {
padding: 5px;
border-radius: 4px;
}
code details p {
margin: 5px 0 0 0;
}
code details.error {
background: rgba(255,0,0,0.1);
}
#clear-console {
cursor: pointer;
}
</style>
<script type="text/javascript">

<head>
<title>Auth0.js Demo Examples</title>
<link rel="stylesheet" type="text/css" href="//cdn.auth0.com/styleguide/1/index.css">
<script src="/webpack-dev-server.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/auth0.js"></script>
<script src="/cordova-auth0-plugin.js"></script>

<style>
.row {
margin: 10px 0;
}

pre {
margin: 0 0 10px 0;
min-height: 300px;
}

code {
min-height: 300px;
}

h2 {
margin: 20px 0;
}

code span {
color: red;
}

code details {
padding: 5px;
border-radius: 4px;
}

code details p {
margin: 5px 0 0 0;
}

code details.error {
background: rgba(255, 0, 0, 0.1);
}

#clear-console {
cursor: pointer;
}
</style>
<script type="text/javascript">
function HTMLConsole(options) {
this.ele = $(options.selector);
this.data = [];
var _this = this;
var data;
if (data = localStorage.getItem("consoleData")) {
data = JSON.parse(data);
data.forEach(function(d){
data.forEach(function (d) {
_this.dumpCallback(d.error ? d : null, d.error ? null : d);
});
}
Expand Down Expand Up @@ -84,104 +93,105 @@
return '<span>' + value + '</span>';
}

var plainStr = JSON.stringify(o).substr(0,50);
var plainStr = JSON.stringify(o).substr(0, 50);
var str = JSON.stringify(o, replacer, 4);
var html = '<details class="'+ className +'">' +
'<summary>' + plainStr + '</summary>' +
'<p>' + str + '</p>' +
'</details>';
var html = '<details class="' + className + '">' +
'<summary>' + plainStr + '</summary>' +
'<p>' + str + '</p>' +
'</details>';

this.ele.append(html);

this.ele.find('details').removeAttr('open');
this.ele.find('details').last().attr('open', true);
};
</script>
</head>
<body class="container">
</script>
</head>

<div class="row">
<div class="col-xs-12">
<h1>Auth0.JS playground</h1>
</div>
<div class="col-xs-6">
<body class="container">

<div>
<h2>Login with database connection:</h2>
<input class="login-username" value="johnfoo@gmail.com" />
<input class="login-password" value="1234" />
<input type="button" class="login-db" value="login" />
</div>
<div class="row">
<div class="col-xs-12">
<h1>Auth0.JS playground</h1>
</div>
<div class="col-xs-6">

<div>
<h2>Login with passwordless connection:</h2>
<div>
<input class="passwordless-login-username" value="" />
<input type="button" class="passwordless-login-db" value="login" />
</div>
<div>
<input class="passwordless-login-code" value="Code" />
<input type="button" class="passwordless-login-verify" value="verify" />
</div>
</div>
<div>
<h2>Login with database connection:</h2>
<input class="login-username" value="johnfoo@gmail.com" />
<input class="login-password" value="1234" />
<input type="button" class="login-db" value="login" />
</div>

<div>
<h2>Login with passwordless connection:</h2>
<div>
<h2>Login with database connection (popup):</h2>
<input class="popup-login-username" value="johnfoo@gmail.com" />
<input class="popup-login-password" value="1234" />
<input type="button" class="popup-login-db-preload" value="preload" />
<input type="button" class="popup-login-db" value="login" />
<input class="passwordless-login-username" value="" />
<input type="button" class="passwordless-login-db" value="login" />
</div>

<div>
<h2>Login with database connection (client login):</h2>
<input class="client-login-username" value="johnfoo@gmail.com" />
<input class="client-login-password" value="1234" />
<input type="button" class="client-login-db" value="login" />
<input class="passwordless-login-code" value="Code" />
<input type="button" class="passwordless-login-verify" value="verify" />
</div>
</div>

<div>
<h2>Login with /authorize:</h2>
<input type="button" class="login-hosted" value="Hosted login page" />
<input type="button" class="login-facebook" value="Facebook" />
<input type="button" class="login-twitter" value="Twitter" />
<input type="button" class="login-github" value="Github" />
</div>
<div>
<h2>Login with database connection (popup):</h2>
<input class="popup-login-username" value="johnfoo@gmail.com" />
<input class="popup-login-password" value="1234" />
<input type="button" class="popup-login-db-preload" value="preload" />
<input type="button" class="popup-login-db" value="login" />
</div>

<div>
<h2>Login with /authorize (popup):</h2>
<input type="button" class="popup-login-hosted" value="Hosted login page" />
<input type="button" class="popup-login-facebook" value="Facebook" />
<input type="button" class="popup-login-twitter" value="Twitter" />
<input type="button" class="popup-login-github" value="Github" />
</div>
<div>
<h2>Login with database connection (client login):</h2>
<input class="client-login-username" value="johnfoo@gmail.com" />
<input class="client-login-password" value="1234" />
<input type="button" class="client-login-db" value="login" />
</div>

<div>
<h2>Renew authentication:</h2>
<input type="button" class="renew-auth" value="Renew" />
</div>
<div>
<h2>Login with /authorize:</h2>
<input type="button" class="login-hosted" value="Hosted login page" />
<input type="button" class="login-facebook" value="Facebook" />
<input type="button" class="login-twitter" value="Twitter" />
<input type="button" class="login-github" value="Github" />
</div>

<div>
<h2>Login with new Login Ticket flow:</h2>
<input class="login-ticket-username" value="johnfoo@gmail.com" />
<input class="login-ticket-password" value="1234" />
<input type="button" class="login-ticket" value="Login" />
</div>
<div>
<h2>Login with /authorize (popup):</h2>
<input type="button" class="popup-login-hosted" value="Hosted login page" />
<input type="button" class="popup-login-facebook" value="Facebook" />
<input type="button" class="popup-login-twitter" value="Twitter" />
<input type="button" class="popup-login-github" value="Github" />
</div>

<div>
<h2>SSO Logout:</h2>
<input type="button" class="logout" value="Logout" />
</div>
<div>
<h2>Renew authentication:</h2>
<input type="button" class="renew-auth" value="Renew" />
</div>

<div>
<h2>Login with new Login Ticket flow:</h2>
<input class="login-ticket-username" value="johnfoo@gmail.com" />
<input class="login-ticket-password" value="1234" />
<input type="button" class="login-ticket" value="Login" />
</div>
<div class="col-xs-6">
<h2>Console:</h2>
<pre><code id="console"></code></pre>
<div class="text-right"><i id="clear-console" aria-hidden="true" class="icon-budicon-498 icon"></i></div>

<div>
<h2>SSO Logout:</h2>
<input type="button" class="logout" value="Logout" />
</div>

</div>
<div class="col-xs-6">
<h2>Console:</h2>
<pre><code id="console"></code></pre>
<div class="text-right"><i id="clear-console" aria-hidden="true" class="icon-budicon-498 icon"></i></div>
</div>
</div>

<script type="text/javascript">
<script type="text/javascript">
var htmlConsole = new HTMLConsole({
selector: '#console'
});
Expand All @@ -199,12 +209,12 @@ <h2>Console:</h2>
var webAuthPasswordless = new auth0.WebAuth({
domain: 'brucke.auth0.com',
redirectUri: 'https://localhost:3000/example',
clientID: 'k5u3o2fiAA8XweXEEX604KCwCjzjtMU6',
clientID: 'VZUvmnj3pd9yNgq8BjX4YA8Km14jQ0PN',
responseType: 'token'
});

webAuth.parseHash(function(err, data) {
console.log(err,data);
webAuth.parseHash(function (err, data) {
console.log(err, data);
if (err) {
return htmlConsole.dumpCallback(err);
}
Expand Down Expand Up @@ -244,7 +254,7 @@ <h2>Console:</h2>

$('.passwordless-login-verify').click(function (e) {
e.preventDefault();
webAuthPasswordless.passwordlessVerify({
webAuthPasswordless.passwordlessLogin({
connection: 'email',
email: $('.passwordless-login-username').val(),
verificationCode: $('.passwordless-login-code').val()
Expand Down Expand Up @@ -287,7 +297,7 @@ <h2>Console:</h2>
password: $('.client-login-password').val(),
scope: 'openid profile',
audience: 'urn:test'
}, function(err, data) {
}, function (err, data) {
htmlConsole.dumpCallback.bind(htmlConsole)(err, data);
this.webAuth.client.userInfo(data.accessToken, htmlConsole.dumpCallback.bind(htmlConsole));
});
Expand Down Expand Up @@ -344,13 +354,13 @@ <h2>Console:</h2>
e.preventDefault();
webAuth.renewAuth({
usePostMessage: true,
scope:'',
scope: '',
redirectURI: 'https://localhost:3000/example/callback.html'
},
htmlConsole.dumpCallback.bind(htmlConsole)
);
});
$('.login-ticket').click(function (e) {
$('.login-ticket').click(function (e) {
e.preventDefault();
webAuth.login({
username: $('.login-ticket-username').val(),
Expand All @@ -360,6 +370,7 @@ <h2>Console:</h2>
}, htmlConsole.dumpCallback.bind(htmlConsole));
});
$(document.body).append($('<div class="loaded">LOADED</div>'));
</script>
</body>
</script>
</body>

</html>
21 changes: 16 additions & 5 deletions src/web-auth/cross-origin-authentication.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,25 @@ CrossOriginAuthentication.prototype.login = function(options, cb) {
var url = urljoin(this.baseOptions.rootUrl, '/co/authenticate');
var authenticateBody = {
client_id: options.clientID || this.baseOptions.clientID,
credential_type: 'password',
username: options.username || options.email,
password: options.password
username: options.username || options.email
};
if (options.password) {
authenticateBody.password = options.password;
}
if (options.otp) {
authenticateBody.otp = options.otp;
}
var realm = options.realm || this.baseOptions.realm;

if (realm) {
var credentialType =
options.credentialType ||
this.baseOptions.credentialType ||
'http://auth0.com/oauth/grant-type/password-realm';
authenticateBody.realm = realm;
authenticateBody.credential_type = 'http://auth0.com/oauth/grant-type/password-realm';
authenticateBody.credential_type = credentialType;
} else {
authenticateBody.credential_type = 'password';
}
this.request.post(url).withCredentials().send(authenticateBody).end(function(err, data) {
if (err) {
Expand All @@ -58,7 +69,7 @@ CrossOriginAuthentication.prototype.login = function(options, cb) {
};
return cb(errorObject);
}
options = objectHelper.blacklist(options, ['username', 'password']);
options = objectHelper.blacklist(options, ['username', 'password', 'credentialType', 'otp']);
var authorizeOptions = objectHelper
.merge(options)
.with({ loginTicket: data.body.login_ticket });
Expand Down
Loading