mheadd/civic-id-example.html

## civic-id-example.html
<!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="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>CivicID Example using jQuery</title>

    <!-- Bootstrap & Bootswatch CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/journal/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      body {
        margin-top: 40px;
      }
    </style>

  </head>

  <body role="document">

    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">CivicID Example using jQuery</a>
        </div>
      </div>
    </div>

    <div class="container theme-showcase" role="main">

      <div class="page-header">
        <h1>Generate an API Token with Civic ID</h1>
        <p id="login"></p>
      </div>

      <div id="result">
        <button type="button" value="" class="btn btn-lg btn-danger">Fetching token...</button>
      </div>

      </div> <!-- /container -->


    <!--  Required JavaScript libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">

      // Constants.
      var LOGIN_URL_BASE = 'https://auth.accela.com/oauth2/authorize';
      var TOKEN_URL_BASE = 'https://apis.accela.com/oauth2/token';

      // User preference.
      var environment = 'TEST';
      var agency_name = 'Islandton';

      // Required app settings.
      var client_id = '';
      var client_secret = '';

      // Desired scope to request token for.
      var scope = '';

      // Variable to hold the redirect URL for the Civic ID process.
      var redirect_uri;

      // Utility function to parse query string parameters.
      function getParams() {
        var paramstring = window.location.href.substr(window.location.href.indexOf('?')+1);
        param_pairs = paramstring.split('&');
        params = {};
        for(var i=0; i<param_pairs.length; i++) {
          var split_pairs = param_pairs[i].split('=');
          params[split_pairs[0]] = split_pairs[1];
        }
        return params;
      }

      // Function to display Civic ID response with token.
      function renderToken(response) {
        $(".btn-danger").hide();
        $("#result").append("<div class=\"well\"><pre>" + JSON.stringify(response, null, 2) + "</pre></div>");
      }

      // Function to display an error.
      function handleError(response) {
        $(".btn-danger").hide();
        $("#result").append("<div class=\"well\">An error occured.</div>");
        console.log(response);
      }

      $(document).ready(function() {

        $(".btn-danger").hide();

        // Get any querystring parmeters.
        var params = getParams();

        // If no code parameter, assume first visit and prompt to login.
        if(params.code == undefined) {
          redirect_uri = window.location.href;
          var login_url = LOGIN_URL_BASE + '?client_id=' + client_id + '&agency_name=' + agency_name + '&environment=' + environment + '&redirect_uri=' + redirect_uri + '&scope=' + scope + '&response_type=code';
          $("#login").append('<a href="' + login_url + '">Log in with Civic ID</a>');
        }

        // Otherwise, assume user is being redirected back from Civic ID login and request token.
        else {
          redirect_uri = window.location.href.substr(0,window.location.href.indexOf('?')-1);
          data = 'grant_type=authorization_code&client_id=' + client_id + '&client_secret=' + client_secret + '&redirect_uri=' + redirect_uri + '&code=' + params.code;

          // HTTP POST to generate token.
          $.ajax({
            url: TOKEN_URL_BASE,
            beforeSend: function() {
              $(".btn-danger").show();
            },
            headers: {
              "Content-type": "application/x-www-form-urlencoded",
              "x-accela-appid": client_id
            },
            type: "POST",
            data: data,
            success: renderToken,
            error: handleError
          });
        }

      });
    </script>
  </body>
</html>
	<!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="">
	<meta name="author" content="">
	<link rel="shortcut icon" href="../../assets/ico/favicon.ico">

	<title>CivicID Example using jQuery</title>

	<!-- Bootstrap & Bootswatch CSS -->
	<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/journal/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
	body {
	margin-top: 40px;
	}
	</style>

	</head>

	<body role="document">

	<!-- Fixed navbar -->
	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="index.html">CivicID Example using jQuery</a>
	</div>
	</div>
	</div>

	<div class="container theme-showcase" role="main">

	<div class="page-header">
	<h1>Generate an API Token with Civic ID</h1>
	<p id="login"></p>
	</div>

	<div id="result">
	<button type="button" value="" class="btn btn-lg btn-danger">Fetching token...</button>
	</div>

	</div> <!-- /container -->


	<!-- Required JavaScript libraries -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<script type="text/javascript">

	// Constants.
	var LOGIN_URL_BASE = 'https://auth.accela.com/oauth2/authorize';
	var TOKEN_URL_BASE = 'https://apis.accela.com/oauth2/token';

	// User preference.
	var environment = 'TEST';
	var agency_name = 'Islandton';

	// Required app settings.
	var client_id = '';
	var client_secret = '';

	// Desired scope to request token for.
	var scope = '';

	// Variable to hold the redirect URL for the Civic ID process.
	var redirect_uri;

	// Utility function to parse query string parameters.
	function getParams() {
	var paramstring = window.location.href.substr(window.location.href.indexOf('?')+1);
	param_pairs = paramstring.split('&');
	params = {};
	for(var i=0; i<param_pairs.length; i++) {
	var split_pairs = param_pairs[i].split('=');
	params[split_pairs[0]] = split_pairs[1];
	}
	return params;
	}

	// Function to display Civic ID response with token.
	function renderToken(response) {
	$(".btn-danger").hide();
	$("#result").append("<div class=\"well\"><pre>" + JSON.stringify(response, null, 2) + "</pre></div>");
	}

	// Function to display an error.
	function handleError(response) {
	$(".btn-danger").hide();
	$("#result").append("<div class=\"well\">An error occured.</div>");
	console.log(response);
	}

	$(document).ready(function() {

	$(".btn-danger").hide();

	// Get any querystring parmeters.
	var params = getParams();

	// If no code parameter, assume first visit and prompt to login.
	if(params.code == undefined) {
	redirect_uri = window.location.href;
	var login_url = LOGIN_URL_BASE + '?client_id=' + client_id + '&agency_name=' + agency_name + '&environment=' + environment + '&redirect_uri=' + redirect_uri + '&scope=' + scope + '&response_type=code';
	$("#login").append('<a href="' + login_url + '">Log in with Civic ID</a>');
	}

	// Otherwise, assume user is being redirected back from Civic ID login and request token.
	else {
	redirect_uri = window.location.href.substr(0,window.location.href.indexOf('?')-1);
	data = 'grant_type=authorization_code&client_id=' + client_id + '&client_secret=' + client_secret + '&redirect_uri=' + redirect_uri + '&code=' + params.code;

	// HTTP POST to generate token.
	$.ajax({
	url: TOKEN_URL_BASE,
	beforeSend: function() {
	$(".btn-danger").show();
	},
	headers: {
	"Content-type": "application/x-www-form-urlencoded",
	"x-accela-appid": client_id
	},
	type: "POST",
	data: data,
	success: renderToken,
	error: handleError
	});
	}

	});
	</script>
	</body>
	</html>