Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CloudSponge HTML/JS Proxy Endopoint

Complete the following steps to install and test your OAuth proxy endpoint:

  1. Add auth-proxy.html and auth-proxy.js to the same directory on your web server.
  2. Visit the auth-proxy.html page on your server. You should see some text and a link. Make a note of the URL, you will use this URL when setting up your Developer Accounts and also the custom branding in CloudSponge.

Now you can set up your branding for each OAuth source, using the URL for auth-proxy.html.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>OAuth Proxy Page</title>
<!-- Including the CloudSponge proxy script here to redirect to the CloudSponge server -->
<script src="auth-proxy.js"></script>
</head>
<body>
<p>Thank you for completing the OAuth flow.</p>
<p>If this page doesn't redirect automatically, then an error has occurred.</p>
<p>Click <a class="cs-force">here to redirect anyway</a>.</p>
</body>
</html>
// This auth-proxy.js can be placed on any HTML page to turn it into a
// CloudSponge Proxy URL.
// It pulls the proper OAuth parameters out and sends them to CloudSponge
// to complete the next stage in the contact import.
window.cloudspongeProxy = (function() {
var proxyHost = 'https://api.cloudsponge.com/auth';
var isOAuthPage, queryParams, oauthParams, key;
var redirecting = false;
function appendSearch() {
var search = window.location.search;
if (search && search[0] == '?') {
search = search + "&"
} else {
search = search + '?'
}
search = search + "state=_csAuth%3D1%26import_id%3Dproxy-test";
return search;
}
// serializes an object into a query-string
var serializeParams = function(params) {
var k, results = [];
for (k in params) {
results.push(k + "=" + encodeURIComponent(params[k]));
}
return results.join('&');
}
// converts the URL string into an object
var parseParams = function(url) {
var obj = {};
url.replace(/([^?=&]+)(=([^&]*))?/g, function($0, $1, $2, $3) {
return obj[$1] = decodeURIComponent($3);
});
return obj;
}
// parse the query string
var queryParams = parseParams(window.location.search);
// selects just the OAuth-related params out of the query
oauthParams = {};
for (key in queryParams) {
if (key === 'code' || key === 'state' || key === 'error' || key === 'error_code' || key === 'forward') {
oauthParams[key] = queryParams[key];
}
}
// checks to see if this page actually the necessary received OAuth params
// and then flings the state and code up to CloudSponge to do the heavy lifting work
if (oauthParams.state && (oauthParams.code || oauthParams.error || oauthParams.error_code)) {
redirecting = true;
window.location = proxyHost + '?' + serializeParams(oauthParams);
}
// add the redirect endpoint to any .cs-proxy links on the page
window.addEventListener('load', function(){
var i;
var links = document.getElementsByClassName('cs-force');
for (i = 0; i < links.length; i++) {
links[i].href = proxyHost + appendSearch();
}
}, false)
return {
redirecting: redirecting,
force: function(){
window.location = proxyHost + appendSearch();
return false;
}
};
})();
@sbull

This comment has been minimized.

Copy link

commented Feb 15, 2017

Seems like a small bit of unnecessary work doing both decodeURIComponent(...) and encodeURIComponent(...). Probably could get away with just
return obj[$1] = $3;
and
results.push(k + "=" + params[k]);
in parseParams and serializeParams respectively. but perhaps this is extracted from a broader-use library.

Also, it would seem more efficient to just directly embed the script on the page and have a single static file rather than 2, not sure I see the reasoning there - unless you want to host the JS file yourselves, and have people link directly to it.

@dangerouse

This comment has been minimized.

Copy link
Owner Author

commented Mar 14, 2017

@sbull This gist is taken from the script that we use in our widget to handle the OAuth redirection and the decode/encodeURIComponents are carryovers from it.

Including the script inline is definitely an option. I've made it a separate script here to facilitate including it on an existing page or multiple pages in your site. It could also be compiled into a minified script to be hosted on your site.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.