Complete the following steps to install and test your OAuth proxy endpoint:
auth-proxy.html and auth-proxy.js to the same directory on your web server.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 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.
Seems like a small bit of unnecessary work doing both
decodeURIComponent(...)andencodeURIComponent(...). Probably could get away with justreturn obj[$1] = $3;and
results.push(k + "=" + params[k]);in
parseParamsandserializeParamsrespectively. 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.