ahmetgeymen · December 28, 2020 00:18 · MarioEPrieto · May 15, 2024 · ahmetgeymen · May 16, 2024
diff --git a/index.html b/index.html
 <html>
 <title>OAuth Authorization Code + PKCE in Vanilla JS</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

 <!--
 MIT License

 Copyright (c) 2019 Aaron Parecki

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 -->

 <script>
 // Configure your application and authorization server details
 var config = {
    client_id: "",
    redirect_uri: "http://localhost:8080/",
    authorization_endpoint: "",
    token_endpoint: "",
    requested_scopes: ""
 };
 </script>

 <div class="flex-center full-height">
    <div class="content">
        <a href="#" id="start">Click to Sign In</a>
        <div id="token" class="hidden">
            <h2>Access Token</h2>
            <div id="access_token" class="code"></div>
        </div>
        <div id="error" class="hidden">
            <h2>Error</h2>
            <div id="error_details" class="code"></div>
        </div>
    </div>
 </div>  

 <script>

 //////////////////////////////////////////////////////////////////////
 // OAUTH REQUEST

 // Initiate the PKCE Auth Code flow when the link is clicked
 document.getElementById("start").addEventListener("click", async function(e){
    e.preventDefault();
    
    // Create and store a random "state" value
    var state = generateRandomString();
    localStorage.setItem("pkce_state", state);

    // Create and store a new PKCE code_verifier (the plaintext random secret)
    var code_verifier = generateRandomString();
    localStorage.setItem("pkce_code_verifier", code_verifier);

    // Hash and base64-urlencode the secret to use as the challenge
    var code_challenge = await pkceChallengeFromVerifier(code_verifier);

    // Build the authorization URL
    var url = config.authorization_endpoint 
        + "?response_type=code"
        + "&client_id="+encodeURIComponent(config.client_id)
        + "&state="+encodeURIComponent(state)
        + "&scope="+encodeURIComponent(config.requested_scopes)
        + "&redirect_uri="+encodeURIComponent(config.redirect_uri)
        + "&code_challenge="+encodeURIComponent(code_challenge)
        + "&code_challenge_method=S256"
        ;

    // Redirect to the authorization server
    window.location = url;
 });


 //////////////////////////////////////////////////////////////////////
 // OAUTH REDIRECT HANDLING

 // Handle the redirect back from the authorization server and
 // get an access token from the token endpoint

 var q = parseQueryString(window.location.search.substring(1));

 // Check if the server returned an error string
 if(q.error) {
    alert("Error returned from authorization server: "+q.error);
    document.getElementById("error_details").innerText = q.error+"\n\n"+q.error_description;
    document.getElementById("error").classList = "";
 }

 // If the server returned an authorization code, attempt to exchange it for an access token
 if(q.code) {

    // Verify state matches what we set at the beginning
    if(localStorage.getItem("pkce_state") != q.state) {
        alert("Invalid state");
    } else {

        // Exchange the authorization code for an access token
        sendPostRequest(config.token_endpoint, {
            grant_type: "authorization_code",
            code: q.code,
            client_id: config.client_id,
            redirect_uri: config.redirect_uri,
            code_verifier: localStorage.getItem("pkce_code_verifier")
        }, function(request, body) {

            // Initialize your application now that you have an access token.
            // Here we just display it in the browser.
            document.getElementById("access_token").innerText = body.access_token;
            document.getElementById("start").classList = "hidden";
            document.getElementById("token").classList = "";

            // Replace the history entry to remove the auth code from the browser address bar
            window.history.replaceState({}, null, "/");

        }, function(request, error) {
            // This could be an error response from the OAuth server, or an error because the 
            // request failed such as if the OAuth server doesn't allow CORS requests
            document.getElementById("error_details").innerText = error.error+"\n\n"+error.error_description;
            document.getElementById("error").classList = "";
        });
    }

    // Clean these up since we don't need them anymore
    localStorage.removeItem("pkce_state");
    localStorage.removeItem("pkce_code_verifier");
 }


 //////////////////////////////////////////////////////////////////////
 // GENERAL HELPER FUNCTIONS

 // Make a POST request and parse the response as JSON
 function sendPostRequest(url, params, success, error) {
    var request = new XMLHttpRequest();
    request.open('POST', url, true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    request.onload = function() {
        var body = {};
        try {
            body = JSON.parse(request.response);
        } catch(e) {}

        if(request.status == 200) {
            success(request, body);
        } else {
            error(request, body);
        }
    }
    request.onerror = function() {
        error(request, {});
    }
    var body = Object.keys(params).map(key => key + '=' + params[key]).join('&');
    request.send(body);
 }

 // Parse a query string into an object
 function parseQueryString(string) {
    if(string == "") { return {}; }
    var segments = string.split("&").map(s => s.split("=") );
    var queryString = {};
    segments.forEach(s => queryString[s[0]] = s[1]);
    return queryString;
 }


 //////////////////////////////////////////////////////////////////////
 // PKCE HELPER FUNCTIONS

 // Generate a secure random string using the browser crypto functions
 function generateRandomString() {
    var array = new Uint32Array(28);
    window.crypto.getRandomValues(array);
    return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
 }

 // Calculate the SHA256 hash of the input text. 
 // Returns a promise that resolves to an ArrayBuffer
 function sha256(plain) {
    const encoder = new TextEncoder();
    const data = encoder.encode(plain);
    return window.crypto.subtle.digest('SHA-256', data);
 }

 // Base64-urlencodes the input string
 function base64urlencode(str) {
    // Convert the ArrayBuffer to string using Uint8 array to conver to what btoa accepts.
    // btoa accepts chars only within ascii 0-255 and base64 encodes them.
    // Then convert the base64 encoded to base64url encoded
    //   (replace + with -, replace / with _, trim trailing =)
    return btoa(String.fromCharCode.apply(null, new Uint8Array(str)))
        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
 }

 // Return the base64-urlencoded sha256 hash for the PKCE challenge
 async function pkceChallengeFromVerifier(v) {
    hashed = await sha256(v);
    return base64urlencode(hashed);
 }

 </script>

 <style>
 body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  font-family: arial, sans-serif;
 }
 @media(max-width: 400px) {
  body {
    padding: 10px;
  }
 }
 .full-height {
  min-height: 100vh;
 }
 .flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
 }
 .content {
  max-width: 400px;
 }
 h2 {
  text-align: center;
 }
 .code {
  font-family: "Courier New", "Courier", monospace;
  width: 100%;
  padding: 4px;
  border: 1px #ccc solid;
  border-radius: 4px;
  word-break: break-all;
 }
 .hidden {
  display: none;
 }
 </style>

 </html>
	<html>
	<title>OAuth Authorization Code + PKCE in Vanilla JS</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

	<!--
	MIT License

	Copyright (c) 2019 Aaron Parecki

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:

	The above copyright notice and this permission notice shall be included in all
	copies or substantial portions of the Software.

	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
	SOFTWARE.
	-->

	<script>
	// Configure your application and authorization server details
	var config = {
	client_id: "",
	redirect_uri: "http://localhost:8080/",
	authorization_endpoint: "",
	token_endpoint: "",
	requested_scopes: ""
	};
	</script>

	<div class="flex-center full-height">
	<div class="content">
	<a href="#" id="start">Click to Sign In</a>
	<div id="token" class="hidden">
	<h2>Access Token</h2>
	<div id="access_token" class="code"></div>
	</div>
	<div id="error" class="hidden">
	<h2>Error</h2>
	<div id="error_details" class="code"></div>
	</div>
	</div>
	</div>

	<script>

	//////////////////////////////////////////////////////////////////////
	// OAUTH REQUEST

	// Initiate the PKCE Auth Code flow when the link is clicked
	document.getElementById("start").addEventListener("click", async function(e){
	e.preventDefault();

	// Create and store a random "state" value
	var state = generateRandomString();
	localStorage.setItem("pkce_state", state);

	// Create and store a new PKCE code_verifier (the plaintext random secret)
	var code_verifier = generateRandomString();
	localStorage.setItem("pkce_code_verifier", code_verifier);

	// Hash and base64-urlencode the secret to use as the challenge
	var code_challenge = await pkceChallengeFromVerifier(code_verifier);

	// Build the authorization URL
	var url = config.authorization_endpoint
	+ "?response_type=code"
	+ "&client_id="+encodeURIComponent(config.client_id)
	+ "&state="+encodeURIComponent(state)
	+ "&scope="+encodeURIComponent(config.requested_scopes)
	+ "&redirect_uri="+encodeURIComponent(config.redirect_uri)
	+ "&code_challenge="+encodeURIComponent(code_challenge)
	+ "&code_challenge_method=S256"
	;

	// Redirect to the authorization server
	window.location = url;
	});


	//////////////////////////////////////////////////////////////////////
	// OAUTH REDIRECT HANDLING

	// Handle the redirect back from the authorization server and
	// get an access token from the token endpoint

	var q = parseQueryString(window.location.search.substring(1));

	// Check if the server returned an error string
	if(q.error) {
	alert("Error returned from authorization server: "+q.error);
	document.getElementById("error_details").innerText = q.error+"\n\n"+q.error_description;
	document.getElementById("error").classList = "";
	}

	// If the server returned an authorization code, attempt to exchange it for an access token
	if(q.code) {

	// Verify state matches what we set at the beginning
	if(localStorage.getItem("pkce_state") != q.state) {
	alert("Invalid state");
	} else {

	// Exchange the authorization code for an access token
	sendPostRequest(config.token_endpoint, {
	grant_type: "authorization_code",
	code: q.code,
	client_id: config.client_id,
	redirect_uri: config.redirect_uri,
	code_verifier: localStorage.getItem("pkce_code_verifier")
	}, function(request, body) {

	// Initialize your application now that you have an access token.
	// Here we just display it in the browser.
	document.getElementById("access_token").innerText = body.access_token;
	document.getElementById("start").classList = "hidden";
	document.getElementById("token").classList = "";

	// Replace the history entry to remove the auth code from the browser address bar
	window.history.replaceState({}, null, "/");

	}, function(request, error) {
	// This could be an error response from the OAuth server, or an error because the
	// request failed such as if the OAuth server doesn't allow CORS requests
	document.getElementById("error_details").innerText = error.error+"\n\n"+error.error_description;
	document.getElementById("error").classList = "";
	});
	}

	// Clean these up since we don't need them anymore
	localStorage.removeItem("pkce_state");
	localStorage.removeItem("pkce_code_verifier");
	}


	//////////////////////////////////////////////////////////////////////
	// GENERAL HELPER FUNCTIONS

	// Make a POST request and parse the response as JSON
	function sendPostRequest(url, params, success, error) {
	var request = new XMLHttpRequest();
	request.open('POST', url, true);
	request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
	request.onload = function() {
	var body = {};
	try {
	body = JSON.parse(request.response);
	} catch(e) {}

	if(request.status == 200) {
	success(request, body);
	} else {
	error(request, body);
	}
	}
	request.onerror = function() {
	error(request, {});
	}
	var body = Object.keys(params).map(key => key + '=' + params[key]).join('&');
	request.send(body);
	}

	// Parse a query string into an object
	function parseQueryString(string) {
	if(string == "") { return {}; }
	var segments = string.split("&").map(s => s.split("=") );
	var queryString = {};
	segments.forEach(s => queryString[s[0]] = s[1]);
	return queryString;
	}


	//////////////////////////////////////////////////////////////////////
	// PKCE HELPER FUNCTIONS

	// Generate a secure random string using the browser crypto functions
	function generateRandomString() {
	var array = new Uint32Array(28);
	window.crypto.getRandomValues(array);
	return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
	}

	// Calculate the SHA256 hash of the input text.
	// Returns a promise that resolves to an ArrayBuffer
	function sha256(plain) {
	const encoder = new TextEncoder();
	const data = encoder.encode(plain);
	return window.crypto.subtle.digest('SHA-256', data);
	}

	// Base64-urlencodes the input string
	function base64urlencode(str) {
	// Convert the ArrayBuffer to string using Uint8 array to conver to what btoa accepts.
	// btoa accepts chars only within ascii 0-255 and base64 encodes them.
	// Then convert the base64 encoded to base64url encoded
	// (replace + with -, replace / with _, trim trailing =)
	return btoa(String.fromCharCode.apply(null, new Uint8Array(str)))
	.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
	}

	// Return the base64-urlencoded sha256 hash for the PKCE challenge
	async function pkceChallengeFromVerifier(v) {
	hashed = await sha256(v);
	return base64urlencode(hashed);
	}

	</script>

	<style>
	body {
	padding: 0;
	margin: 0;
	min-height: 100vh;
	font-family: arial, sans-serif;
	}
	@media(max-width: 400px) {
	body {
	padding: 10px;
	}
	}
	.full-height {
	min-height: 100vh;
	}
	.flex-center {
	align-items: center;
	display: flex;
	justify-content: center;
	}
	.content {
	max-width: 400px;
	}
	h2 {
	text-align: center;
	}
	.code {
	font-family: "Courier New", "Courier", monospace;
	width: 100%;
	padding: 4px;
	border: 1px #ccc solid;
	border-radius: 4px;
	word-break: break-all;
	}
	.hidden {
	display: none;
	}
	</style>

	</html>