Permalink
Fetching contributors…
Cannot retrieve contributors at this time
355 lines (301 sloc) 11.4 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bit6 Web Demo">
<meta name="author" content="Bit6">
<title>Bit6 OAuth 0.9.9</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Digits SDK -->
<script id="digits-sdk" src="https://cdn.digits.com/1/sdk.js" async></script>
</head>
<body>
<div class="container">
<!-- Welcome page -->
<div id="welcome">
<div class="intro">
<h1>Bit6 OAuth with SDK</h1>
<p class="lead">Sign in with 3rd party OAuth providers using Bit6 SDK</p>
</div>
<button type="button" class="btn btn-primary" id="googleButton">Google</button>
<button type="button" class="btn btn-primary" id="facebookButton">Facebook</button>
<button type="button" class="btn btn-primary" id="zendeskButton">Zendesk</button>
<button type="button" class="btn btn-primary" id="deskcomButton">Desk.com</button>
<button type="button" class="btn btn-primary" id="digitsButton">Digits</button>
<button type="button" class="btn btn-default" id="restartButton">Restart</button>
<div style="margin-top: 20px">
<p>Bit6 auth result
<pre id="authResult"></pre>
</div>
</div><!-- /#welcome -->
<!-- Bootstrap core JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../common/bit6.min.js"></script>
<script>
// GOOGLE SUPPORT
function prepareGoogle(bx, conf, qparams) {
var clientId = conf.client_id;
var redirectUri = window.location.href.split('?')[0];
// If we have been redirected back by Google
// we will have code as a query param
var code = getGoogleAuthCode(qparams);
if (code) {
var opts = {
redirectUri: redirectUri,
code: code,
};
bx.session.oauth('google', opts, function(err) {
console.log('Bit6 google err:', err);
});
}
// When button clicked, start Google oauth process
$('#googleButton').click(function() {
startGoogleAuth(clientId, redirectUri);
});
}
function getGoogleAuthCode(qparams) {
// Got OAuth2 code, let's hit our Google auth endpoint
// Second check is to see that it is a Google code and not FB for example
if (!qparams.code || !qparams.session_state) {
return null;
}
return qparams.code;
}
function startGoogleAuth(clientId, redirectUri) {
var authEndpoint = 'https://accounts.google.com/o/oauth2/auth';
var scope = ['openid', 'profile', 'email'];
var arr = [
['client_id', clientId],
['redirect_uri', redirectUri],
['scope', scope.join(' ')],
['response_type', 'code']
];
var qs = arr.map(function(p){return p[0]+'='+encodeURIComponent(p[1]);}).join('&');
// Redirect to Google endpoint
window.location.href = authEndpoint + '?' + qs;
}
// FACEBOOK SUPPORT
function prepareFacebook(bx, conf, qparams) {
var clientId = conf.client_id;
var redirectUri = window.location.href.split('?')[0];
// If we have been redirected back by Facebook
// we will have code as a query param
var code = getFacebookAuthCode(qparams);
if (code) {
var opts = {
redirectUri: redirectUri,
code: code,
};
bx.session.oauth('facebook', opts, function(err) {
console.log('Bit6 fb err:', err);
});
}
// When button clicked, start FB oauth process
$('#facebookButton').click(function() {
startFacebookAuth(clientId, redirectUri);
});
}
function getFacebookAuthCode(qparams) {
// Got OAuth2 code, let's hit our FB auth endpoint
// Second check is to see that it is a FB code and not Google
if (!qparams.code || qparams.session_state || qparams.state) {
return null;
}
return qparams.code;
}
function startFacebookAuth(clientId, redirectUri) {
var authEndpoint = 'https://www.facebook.com/dialog/oauth';
var scope = ['public_profile', 'user_friends', 'email'];
var arr = [
['client_id', clientId],
['redirect_uri', redirectUri],
['scope', scope.join(',')],
['response_type', 'code']
];
var qs = arr.map(function(p){return p[0]+'='+encodeURIComponent(p[1]);}).join('&');
// Redirect to Facebook endpoint
window.location.href = authEndpoint + '?' + qs;
}
// ZENDESK SUPPORT
function prepareZendesk(bx, conf, qparams) {
var clientId = conf.client_id;
var subdomain = conf.subdomain;
var redirectUri = window.location.href.split('?')[0];
// If we have been redirected back by Zendesk
// we will have code as a query param
var code = getZendeskAuthCode(qparams);
if (code) {
var opts = {
redirectUri: redirectUri,
code: code
};
bx.session.oauth('zendesk', opts, function(err) {
console.log('Bit6 zd err:', err);
});
}
// When button clicked, start the Zendesk oauth process
$('#zendeskButton').click(function() {
startZendeskAuth(clientId, subdomain, redirectUri);
});
}
function getZendeskAuthCode(qparams) {
// Got OAuth2 Zendesk code
if (!qparams.code || !qparams.state || 'zendesk' != qparams.state) {
return null;
}
return qparams.code;
}
function startZendeskAuth(clientId, subdomain, redirectUri) {
// Subdomain depends on the Zendesk Account!
var authEndpoint = 'https://' + subdomain + '.zendesk.com/oauth/authorizations/new';
var scope = ['read', 'write'];
var arr = [
['client_id', clientId],
['redirect_uri', redirectUri],
['scope', scope.join(' ')],
['response_type', 'code'],
// So that we know it's a response from Zendesk
// This param is really for CRSF protection...
['state', 'zendesk']
];
var qs = arr.map(function(p){return p[0]+'='+encodeURIComponent(p[1]);}).join('&');
// Redirect to Zendesk endpoint
window.location.href = authEndpoint + '?' + qs;
}
// DESK.COM SUPPORT
function prepareDeskcom(bx, conf, qparams) {
var redirectUri = window.location.href.split('?')[0] + '?state=deskcom';
// Check if we have been redirected back from Desk.com
var opts = getDeskcomTokenAndVerifier(qparams);
if (opts) {
bx.session.oauth('deskcom', opts, function(err) {
console.log('Bit6 desk err:', err);
});
}
// When button clicked, start Desk.com oauth1 process
$('#deskcomButton').click(function() {
startDeskcomAuth(bx, redirectUri);
});
}
function getDeskcomTokenAndVerifier(qparams) {
// Should be something like:
// oauth_token=JMiSUgT0oky4DZo1SHgU&oauth_verifier=3e062bBcclfeQ1xbO8QX
if (!qparams || !qparams.oauth_token || !qparams.oauth_verifier) {
return null;
}
return qparams;
}
function startDeskcomAuth(bx, redirectUri) {
var opts = {
redirectUri: redirectUri
};
bx.session.oauth1_redirect('deskcom', opts, function(err, result) {
console.log('Bit6 got Desk.com oauth1 redirect', result, err);
if (result && result.redirect) {
window.location.href = result.redirect;
}
});
}
// DIGITS SUPPORT
function prepareDigits(bx, conf, qparams) {
$('#digitsButton').click(function() {
if (Digits.isInitialized()) {
startDigitsAuth(bx);
}
else {
Digits.init({ consumerKey: conf.consumer_key })
.done(function() {
console.log('Digits init ok');
startDigitsAuth(bx);
})
.fail(function() {
console.log('Digits init failed');
});
}
});
}
function startDigitsAuth(bx) {
Digits.logIn()
.done(function(loginResponse) {
console.log('Digits login:', loginResponse);
bx.session.oauth('digits', loginResponse, function(err) {
console.log('Bit6 digits err:', err);
});
})
.fail(function(err) {
console.log('Digits login err', err);
});
}
$(function() {
// Reload the page without any query params
$('#restartButton').click(function() {
window.location.href = window.location.href.split('?')[0];
});
// Parse query params - used to extract OAuth2 codes
// Split host/path and query
var qparams = {};
var x = window.location.href.split('?');
if (x.length == 2) {
// Split query on &
x = x[1].split('&');
x.map(function(s) {
var kv = s.split('=');
qparams[kv[0]] = kv[1];
});
console.log('location.href query params', qparams);
}
// Prod env
var apikey = '4oap-2lvnm';
var env = 'prod';
var t = window.location.href;
// Dev env
if (t.indexOf('dev') > 0) {
apikey = '3y9-26ufj';
env = 'dev';
// Otherwise Zendesk does not work
if (window.location.protocol.indexOf('https') < 0) {
window.location.href = 'https://bit6-demo-dev.firebaseapp.com/auth/';
}
}
// Local env
else if (t.indexOf('localhost') > 0) {
apikey = '3y9-26ufj';
env = 'local';
}
// Init Bit6 SDK
var bx = new bit6.Client({apikey: apikey, env: env});
console.log('Bit6', bx);
// Listen to auth complete event
bx.session.on('auth', function() {
// Show Bit6 auth data
$('#authResult').html(JSON.stringify(bx.session.save(), null, 4));
});
// Get supported Auth methods and their configs
bx.session.getAuthInfo( function(err, info) {
if (err) {
return alert('getAuthInfo err=', err);
}
console.log('authInfo:', info);
if (info.google) {
prepareGoogle(bx, info.google, qparams);
}
if (info.facebook) {
prepareFacebook(bx, info.facebook, qparams);
}
if (info.zendesk) {
prepareZendesk(bx, info.zendesk, qparams);
}
if (info.deskcom) {
prepareDeskcom(bx, info.deskcom, qparams);
}
if (info.digits) {
prepareDigits(bx, info.digits, qparams);
}
});
});
</script>
</body>
</html>