242 lines
10 KiB
HTML
242 lines
10 KiB
HTML
|
<!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="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||
|
|
<script src="/auth0.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var auth0 = new Auth0({
|
||
|
|
domain: 'mdocs.auth0.com',
|
||
|
|
callbackURL: window.location.href,
|
||
|
|
clientID: '0HP71GSd6PuoRYJ3DXKdiXCUUdGmBbup',
|
||
|
|
callbackOnLocationHash: true
|
||
|
|
});
|
||
|
|
|
||
|
|
var pwdless = new Auth0({
|
||
|
|
domain: 'pwdlessdemo.auth0.com',
|
||
|
|
callbackURL: window.location.href,
|
||
|
|
clientID: 'Gcs1jSu5FAFpDrPe0jrqGpfbTEkzCk15',
|
||
|
|
callbackOnLocationHash: true
|
||
|
|
});
|
||
|
|
|
||
|
|
// callback redirect?
|
||
|
|
var result = auth0.parseHash(window.location.hash);
|
||
|
|
if (result && result.idToken) {
|
||
|
|
// This will execute on redirect callback
|
||
|
|
auth0.getUserInfo(result.accessToken, function (err, profile) {
|
||
|
|
window.location.hash = "";
|
||
|
|
if (err) {
|
||
|
|
return alert('error fetching profile: ' + JSON.stringify(err));
|
||
|
|
}
|
||
|
|
alert('hello ' + profile.name);
|
||
|
|
});
|
||
|
|
} else if (result && result.error) {
|
||
|
|
alert('error at login: ' + result.error)
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12">
|
||
|
|
<h2>Login with Social Connection</h2>
|
||
|
|
<a href="#login" class='login-google btn btn-xs'>login with google</a>
|
||
|
|
<a href="#login-popup" class='login-google-popup btn btn-xs'>login with google on popup</a>
|
||
|
|
<a href="#login-popup-all-connections" class='login-popup btn btn-xs'>login with popup</a>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$('.login-google').click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
auth0.login({
|
||
|
|
connection: 'google-oauth2'
|
||
|
|
}, function(err) {
|
||
|
|
if (err) alert("something went wrong: " + err.message);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
$('.login-google-popup').click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
auth0.login({
|
||
|
|
connection: 'google-oauth2',
|
||
|
|
popup: true,
|
||
|
|
popupOptions: {
|
||
|
|
width: 450,
|
||
|
|
height: 600
|
||
|
|
}
|
||
|
|
}, function(err, result) {
|
||
|
|
if (err) {
|
||
|
|
return alert("something went wrong: " + (err.message || err.error));
|
||
|
|
}
|
||
|
|
|
||
|
|
auth0.getUserInfo(result.accessToken, function (err, profile) {
|
||
|
|
if (err) {
|
||
|
|
return alert('error fetching profile: ' + JSON.stringify(err));
|
||
|
|
}
|
||
|
|
alert('hello ' + profile.name);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.login-popup').click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
auth0.login({
|
||
|
|
popup: true,
|
||
|
|
popupOptions: {
|
||
|
|
width: 450,
|
||
|
|
height: 800,
|
||
|
|
location: 'no',
|
||
|
|
toolbar: 'no'
|
||
|
|
}
|
||
|
|
}, function(err, result) {
|
||
|
|
if (err) {
|
||
|
|
return alert("something went wrong: " + (err.message || err.error));
|
||
|
|
}
|
||
|
|
|
||
|
|
auth0.getUserInfo(result.accessToken, function (err, profile) {
|
||
|
|
if (err) {
|
||
|
|
return alert('error fetching profile: ' + JSON.stringify(err));
|
||
|
|
}
|
||
|
|
alert('hello ' + profile.name);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12">
|
||
|
|
<h2>Login with Database Connection</h2>
|
||
|
|
<input class="login-username" value="johnfoo@gmail.com" />
|
||
|
|
<input type="password" class="login-password" value="1234" />
|
||
|
|
<input type="button" class="login-db" value="login" />
|
||
|
|
<script type="text/javascript">
|
||
|
|
$('.login-db').click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
auth0.login({
|
||
|
|
connection: 'tests',
|
||
|
|
username: $('.login-username').val(),
|
||
|
|
password: $('.login-password').val(),
|
||
|
|
sso: false
|
||
|
|
}
|
||
|
|
, function (err, result) {
|
||
|
|
if (err) return alert('Something went wrong: ' + err.message);
|
||
|
|
auth0.getUserInfo(result.accessToken, function (err, profile) {
|
||
|
|
if (err) {
|
||
|
|
return alert('error fetching profile: ' + JSON.stringify(err));
|
||
|
|
}
|
||
|
|
alert('hello ' + profile.name);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12">
|
||
|
|
<h2>Signup Database Connection</h2>
|
||
|
|
<input class="signup-username" value="johnfoo@gmail.com" />
|
||
|
|
<input type="password" class="signup-password" value="1234" />
|
||
|
|
<input type="button" class="signup-db" value="signup" />
|
||
|
|
<script type="text/javascript">
|
||
|
|
$('.signup-db').click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
auth0.signup({
|
||
|
|
connection: 'tests',
|
||
|
|
username: $('.signup-username').val(),
|
||
|
|
password: $('.signup-password').val(),
|
||
|
|
sso: true,
|
||
|
|
popup: true,
|
||
|
|
auto_login: false
|
||
|
|
}, function (err) {
|
||
|
|
if (err) return alert('Something went wrong: ' + err.message);
|
||
|
|
return alert('success signup without login!')
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12">
|
||
|
|
<h2>Validate User in Database Connection</h2>
|
||
|
|
<input class="validate-username" value="johnfoo@gmail.com" />
|
||
|
|
<input type="password" class="validate-password" value="1234" />
|
||
|
|
<input type="button" class="validate-db" value="validate" />
|
||
|
|
<script type="text/javascript">
|
||
|
|
$('.validate-db').click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
auth0.validateUser({
|
||
|
|
connection: 'tests',
|
||
|
|
username: $('.validate-username').val(),
|
||
|
|
password: $('.validate-password').val()
|
||
|
|
}, function (err, result) {
|
||
|
|
if (err) return alert('Something went wrong: ' + err.message);
|
||
|
|
var message = result ? 'Valid user/pass' : 'Invalid user/pass';
|
||
|
|
alert(message);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12">
|
||
|
|
<h2>Passwordless authentication with Email</h2>
|
||
|
|
<input class="email-input" value="" placeholder="email" />
|
||
|
|
<input type="button" class="request-email-link" value="request code" />
|
||
|
|
<script type="text/javascript">
|
||
|
|
$('.request-email-link').click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
pwdless.startPasswordless({ email: $('.email-input').val() }, function (err, result) {
|
||
|
|
if (err) return alert("something went wrong: " + err.message);
|
||
|
|
alert('Passwordless flow started');
|
||
|
|
console.log(result);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12">
|
||
|
|
<h2>Passwordless authentication with SMS</h2>
|
||
|
|
<input class="phone-input" value="" placeholder="phone number" />
|
||
|
|
<input type="button" class="request-sms-code" value="request code" />
|
||
|
|
<script type="text/javascript">
|
||
|
|
$('.request-sms-code').click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
pwdless.startPasswordless({
|
||
|
|
phoneNumber: $('.phone-input').val()
|
||
|
|
}, function (err, result) {
|
||
|
|
if (err) return alert("something went wrong: " + err.message);
|
||
|
|
alert('Passwordless flow started');
|
||
|
|
console.log(result);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<input class="sms-code-input" value="" placeholder="sms passcode" />
|
||
|
|
<input type="button" class="submit-sms-code" value="submit code" />
|
||
|
|
<script type="text/javascript">
|
||
|
|
$('.submit-sms-code').click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
pwdless.login({
|
||
|
|
username: $('.phone-input').val(),
|
||
|
|
password: $('.sms-code-input').val(),
|
||
|
|
connection: 'sms',
|
||
|
|
sso: false
|
||
|
|
}, function (err, result) {
|
||
|
|
if (err) return alert("something went wrong: " + err.message);
|
||
|
|
pwdless.getUserInfo(result.accessToken, function (err, profile) {
|
||
|
|
if (err) {
|
||
|
|
return alert('error fetching profile: ' + JSON.stringify(err));
|
||
|
|
}
|
||
|
|
alert('hello ' + profile.name);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|