edpaget/zooniverse_oauth.html

## zooniverse_oauth.html
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>SoundCloud OAuth 2 User Agent Authentication Flow Demo</title>
    <script type="text/javascript" charset="utf-8" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(function () {
        var extractToken = function(hash) {
          var match = hash.match(/access_token=(\w+)/);
          return !!match && match[1];
        };

        var setting =
          {
            'host':     "panoptes-staging.zooniverse.org"
          , 'clientId': YOUR_CLIENT_ID
          };

        var authHost     = "https://" + setting.host;
        var resourceHost = "https://" + setting.host + "/api";

        var endUserAuthorizationEndpoint = authHost + "/oauth/authorize";

        var token = extractToken(document.location.hash);
        if (token) {
          $('div.authenticated').show();

          $('span.token').text(token);

          $.ajax({
              url: resourceHost + '/users/me'
            , beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', "OAuth " + token);
                xhr.setRequestHeader('Accept',        "application/vnd.api+json; version=1");
              }
            , success: function (response) {
                var container = $('span.user');
                if (response) {
                  container.text(response.users.login);
                } else {
                  container.text("An error occurred.");
                }
              }
          });
        } else {
          $('div.authenticate').show();

          var authUrl = endUserAuthorizationEndpoint +
            "?response_type=token" +
            "&client_id="    + setting.clientId +
            "&redirect_uri=" + window.location;

          $("a.connect").attr("href", authUrl);
        }
      });
    </script>
    <style>
      .hidden {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="authenticate hidden">
      <a class="connect" href="">Connect</a>
    </div>

    <div class="authenticated hidden">
      <p>
        You are using token
        <span class="token">[no token]</span>.
      </p>

      <p>
        Your Zooniverse username is
        <span class="user">[no username]</span>.
      </p>
    </div>
  </body>
</html>
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>SoundCloud OAuth 2 User Agent Authentication Flow Demo</title>
	<script type="text/javascript" charset="utf-8" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(function () {
	var extractToken = function(hash) {
	var match = hash.match(/access_token=(\w+)/);
	return !!match && match[1];
	};

	var setting =
	{
	'host': "panoptes-staging.zooniverse.org"
	, 'clientId': YOUR_CLIENT_ID
	};

	var authHost = "https://" + setting.host;
	var resourceHost = "https://" + setting.host + "/api";

	var endUserAuthorizationEndpoint = authHost + "/oauth/authorize";

	var token = extractToken(document.location.hash);
	if (token) {
	$('div.authenticated').show();

	$('span.token').text(token);

	$.ajax({
	url: resourceHost + '/users/me'
	, beforeSend: function (xhr) {
	xhr.setRequestHeader('Authorization', "OAuth " + token);
	xhr.setRequestHeader('Accept', "application/vnd.api+json; version=1");
	}
	, success: function (response) {
	var container = $('span.user');
	if (response) {
	container.text(response.users.login);
	} else {
	container.text("An error occurred.");
	}
	}
	});
	} else {
	$('div.authenticate').show();

	var authUrl = endUserAuthorizationEndpoint +
	"?response_type=token" +
	"&client_id=" + setting.clientId +
	"&redirect_uri=" + window.location;

	$("a.connect").attr("href", authUrl);
	}
	});
	</script>
	<style>
	.hidden {
	display: none;
	}
	</style>
	</head>

	<body>
	<div class="authenticate hidden">
	<a class="connect" href="">Connect</a>
	</div>

	<div class="authenticated hidden">
	<p>
	You are using token
	<span class="token">[no token]</span>.
	</p>

	<p>
	Your Zooniverse username is
	<span class="user">[no username]</span>.
	</p>
	</div>
	</body>
	</html>