michaelfm1211/authenticated.html

## authenticated.html
<!DOCTYPE html>
<html>
<head>
	<title>Authenticated</title>
</head>
<body>
	<script type="text/javascript">
			const url_string = window.location.href;
			const url_string_mod = url_string.split("#");
			elt usm = "";
			for (var i = 0; i < url_string_mod.length; i++) {
				usm += url_string_mod[i];
				if (i != url_string_mod.length-1){
					usm += "?";
				}
			}
			const url = new URL(usm);
			const ac = url.searchParams.get("access_token");

      // todo for modern times: change this to use the fetch api
			const xhr = new XMLHttpRequest();
			xhr.open('GET', 'https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=' + ac);
			xhr.onreadystatechange = (e) => {
			  console.log(xhr.response); // this line is optional, obviously
			  var udata = JSON.parse(xhr.response);
			  alert("Hello " + udata.name);
			};
			xhr.send(null);
	</script>
</body>
</html>

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Login Boilerplate</title>
</head>
<body>
	<script type="text/javascript">
    // google will redirect here once we're logged in. this page will receive some data via URL params
    const redirect = "https://example.com/authenticated";
    const redirect_enc = encodeURIComponent(redirect_to);

    // scope we're using: https://www.googleapis.com/auth/userinfo.profile
    const scope = "https://www.googleapis.com/auth/userinfo.profile";
    const scope_enc = encodeURIComponent(endpoint);

    // your client ID given by GCP
    const clientID = "314350026427-mj8e6g87mg3fifnv2gn4h98r19mrek2f.apps.googleusercontent.com";

    // see https://developers.google.com/identity/protocols/OAuth2UserAgent for instructions
		const auth_link = "https://accounts.google.com/o/oauth2/v2/auth?scope=" +
        scope_enc +
        "&include_granted_scopes=true&state=state_parameter_passthrough_value&redirect_uri=" +
        redirect_enc +
        "&response_type=token&client_id=" + clientID;
		window.location = auth_link;
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Authenticated</title>
	</head>
	<body>
	<script type="text/javascript">
	const url_string = window.location.href;
	const url_string_mod = url_string.split("#");
	elt usm = "";
	for (var i = 0; i < url_string_mod.length; i++) {
	usm += url_string_mod[i];
	if (i != url_string_mod.length-1){
	usm += "?";
	}
	}
	const url = new URL(usm);
	const ac = url.searchParams.get("access_token");

	// todo for modern times: change this to use the fetch api
	const xhr = new XMLHttpRequest();
	xhr.open('GET', 'https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=' + ac);
	xhr.onreadystatechange = (e) => {
	console.log(xhr.response); // this line is optional, obviously
	var udata = JSON.parse(xhr.response);
	alert("Hello " + udata.name);
	};
	xhr.send(null);
	</script>
	</body>
	</html>