Last active
July 24, 2022 18:38
-
-
Save dangerouse/ff9b5a5d0c070734542d to your computer and use it in GitHub Desktop.
CloudSponge HTML-only Proxy Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| // 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; | |
| } | |
| }; | |
| })(); | |
| </script> | |
| </head> | |
| <body> | |
| <p>Thank you for completing the OAuth flow.</p> | |
| <p>Click <a class="cs-force">here to verify that your Proxy URL is set up correctly</a>.</p> | |
| </body> | |
| </html> |
To zoom out a bit for you, the gist does the following activities as it loads:
- reads and decodes the query string from the current page’s URL (window.location.search)selects only the OAuth-related params from the query (code, state, error, error_code, forward)
- if the minimum OAuth params were specified, it automatically redirects the page to
https://api.cloudsponge.com/authand includes the OAuth params. At this point, the window starts to load a new page and the script execution ends. - otherwise, it waits for the page to complete loading to add a click handler to test the OAuth flow
- finally, it returns a global object (currently unused) which enables other scripts on the page force the redirection functionality.
The gist is set up so that it can be added to any page on your site and it will only redirect if the page loads at the end of the OAuth flow.
To install on Wordpress, upload a copy of this file to the root folder of your Wordpress instance. Then test it out by visiting https://example.com/solo-auth-proxy.html.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
KWSdYI_yqH6YFJoLvFmyVw