dgbrokaw/auth-demo.html Secret

## auth-demo.html
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GM Login Demo</title>
  <script src="gm-dino-auth.js"></script>
</head>

<body>

<!-- Link that opens a pop-up with google logins. The pop-up will close when an account is chosen and switch focus back to this page. -->

<p>User data:<span id='user-data'></span></p>

<a id='gm-login' href="/auth/google" onclick="window.open(this.href, 'Authorize Graspable Math','left=20,top=20,width=500,height=500,toolbar=1'); return false;">Log In</a>

<button onclick='get_data()'>get user data</button>
<button onclick='set_data()'>set user data</button>

<script>
var el = document.getElementById('user-data');
function get_data() {
  if (!isLoggedIn()) {
    el.innerHTML = 'user is not logged in!';
    return;
  }
  getGameData(function(error, data) {
    if (error) el.innerHTML = JSON.stringify(error);
    else el.innerHTML = JSON.stringify(data);
  });
}
function set_data() {
  if (!isLoggedIn()) {
    el.innerHTML = 'user is not logged in!';
    return;
  }
  setGameData({ points: 100, level_1_stars: 2 }, function(error) {
    if (error) el.innerHTML = JSON.stringify(error);
    else el.innerHTML = 'success!';
  });
}
</script>
</body>
</html>

## gm-dino-auth.js
// Called when the user chooses a google account from the pop-up.
loginCallBack = function() {
  window.gm_logged_in = true;
}

function isLoggedIn() {
  return window.gm_logged_in;
}

function queryUserData(callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/user');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (callback && xhr.readyState == 4) {
      if (xhr.status == 200) callback(null, JSON.parse(xhr.responseText));
      else callback({status: xhr.status, response: xhr.responseText});
    }
  };
  xhr.send();
}

// Write user data to the server. Will only affect the data fields that are passed,
// keeping other fields at their current value on the server. The callback is called
// with an error object or null as the first argument.
function setGameData(data, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('POST', '/api/save_the_baby_dinos');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (callback && xhr.readyState == 4) {
      if (xhr.status == 200) callback(null, data);
      else callback({status: xhr.status, response: xhr.responseText});
    }
  };
  xhr.send(JSON.stringify(data));
}

// Gets game user data. Will call callback with (error, data). Error will be null
// if everything went fine.
function getGameData(callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/save_the_baby_dinos');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (callback && xhr.readyState == 4) {
      if (xhr.status == 200) callback(null, JSON.parse(xhr.responseText));
      else callback({status: xhr.status, response: xhr.responseText});
    }
  };
  xhr.send();
}

queryUserData(function(error, data) {
  if (!error) window.gm_logged_in = true;
})
	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GM Login Demo</title>
	<script src="gm-dino-auth.js"></script>
	</head>

	<body>

	<!-- Link that opens a pop-up with google logins. The pop-up will close when an account is chosen and switch focus back to this page. -->

	<p>User data:<span id='user-data'></span></p>

	<a id='gm-login' href="/auth/google" onclick="window.open(this.href, 'Authorize Graspable Math','left=20,top=20,width=500,height=500,toolbar=1'); return false;">Log In</a>

	<button onclick='get_data()'>get user data</button>
	<button onclick='set_data()'>set user data</button>

	<script>
	var el = document.getElementById('user-data');
	function get_data() {
	if (!isLoggedIn()) {
	el.innerHTML = 'user is not logged in!';
	return;
	}
	getGameData(function(error, data) {
	if (error) el.innerHTML = JSON.stringify(error);
	else el.innerHTML = JSON.stringify(data);
	});
	}
	function set_data() {
	if (!isLoggedIn()) {
	el.innerHTML = 'user is not logged in!';
	return;
	}
	setGameData({ points: 100, level_1_stars: 2 }, function(error) {
	if (error) el.innerHTML = JSON.stringify(error);
	else el.innerHTML = 'success!';
	});
	}
	</script>
	</body>
	</html>
	// Called when the user chooses a google account from the pop-up.
	loginCallBack = function() {
	window.gm_logged_in = true;
	}

	function isLoggedIn() {
	return window.gm_logged_in;
	}

	function queryUserData(callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', '/api/user');
	xhr.setRequestHeader('Content-Type', 'application/json');
	xhr.onreadystatechange = function() {
	if (callback && xhr.readyState == 4) {
	if (xhr.status == 200) callback(null, JSON.parse(xhr.responseText));
	else callback({status: xhr.status, response: xhr.responseText});
	}
	};
	xhr.send();
	}

	// Write user data to the server. Will only affect the data fields that are passed,
	// keeping other fields at their current value on the server. The callback is called
	// with an error object or null as the first argument.
	function setGameData(data, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('POST', '/api/save_the_baby_dinos');
	xhr.setRequestHeader('Content-Type', 'application/json');
	xhr.onreadystatechange = function() {
	if (callback && xhr.readyState == 4) {
	if (xhr.status == 200) callback(null, data);
	else callback({status: xhr.status, response: xhr.responseText});
	}
	};
	xhr.send(JSON.stringify(data));
	}

	// Gets game user data. Will call callback with (error, data). Error will be null
	// if everything went fine.
	function getGameData(callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', '/api/save_the_baby_dinos');
	xhr.setRequestHeader('Content-Type', 'application/json');
	xhr.onreadystatechange = function() {
	if (callback && xhr.readyState == 4) {
	if (xhr.status == 200) callback(null, JSON.parse(xhr.responseText));
	else callback({status: xhr.status, response: xhr.responseText});
	}
	};
	xhr.send();
	}

	queryUserData(function(error, data) {
	if (!error) window.gm_logged_in = true;
	})