-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
fe39369
commit 8368762
Showing
5 changed files
with
127 additions
and
224 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,72 +1,20 @@ | ||
<html> | ||
<title>OAuth Authorization Code + PKCE in Vanilla JS</title> | ||
<title>SPA PKCE ProConnect</title> | ||
<meta | ||
name="viewport" | ||
content="width=device-width, initial-scale=1, user-scalable=no" | ||
/> | ||
<link rel="stylesheet" href="https://unpkg.com/mvp.css" /> | ||
|
||
<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">Cliquez pour vous connecter</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> | ||
<main> | ||
<header> | ||
<h1>SPA PKCE ProConnect</h1> | ||
<p>Cette application utilise OAuth Authorization Code + PKCE.</p> | ||
<p> | ||
<a href="#" id="login"><b>Cliquez pour vous connecter</b></a> | ||
</p> | ||
</header> | ||
</main> | ||
|
||
<script type="module" src="/src/main.ts"></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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,6 +7,7 @@ | |
"preview": "vite preview" | ||
}, | ||
"devDependencies": { | ||
"vite": "^5.4.8" | ||
"oauth4webapi": "2.17.0", | ||
"vite": "5.4.8" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,174 +1,128 @@ | ||
////////////////////////////////////////////////////////////////////// | ||
// 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 = ""; | ||
} | ||
// | ||
// Inspired by | ||
// from https://github.com/panva/oauth4webapi/blob/v2.17.0/examples/public.ts | ||
// | ||
|
||
import * as oauth from "oauth4webapi"; | ||
|
||
// Prerequisites | ||
|
||
let issuer = new URL("https://fca.integ01.dev-agentconnect.fr/api/v2"); // Authorization server's Issuer Identifier URL | ||
let algorithm = "oidc" as const; | ||
let client_id = "74b409f6-a364-4a9b-bd6f-42b549e99d72"; | ||
|
||
document.getElementById("login")?.addEventListener("click", login); | ||
|
||
/** | ||
* Value used in the authorization request as redirect_uri pre-registered at the Authorization | ||
* Server. | ||
*/ | ||
let redirect_uri!: string; | ||
|
||
// End of prerequisites | ||
|
||
const as = await oauth | ||
.discoveryRequest(issuer, { algorithm }) | ||
.then((response) => oauth.processDiscoveryResponse(issuer, response)); | ||
|
||
const client: oauth.Client = { | ||
client_id, | ||
token_endpoint_auth_method: "none", | ||
}; | ||
|
||
const code_challenge_method = "S256"; | ||
/** | ||
* The following MUST be generated for every redirect to the authorization_endpoint. You must store | ||
* the code_verifier and nonce in the end-user session such that it can be recovered as the user | ||
* gets redirected from the authorization server back to your application. | ||
*/ | ||
const code_verifier = oauth.generateRandomCodeVerifier(); | ||
const code_challenge = await oauth.calculatePKCECodeChallenge(code_verifier); | ||
let state: string | undefined; | ||
|
||
async function login() { | ||
// redirect user to as.authorization_endpoint | ||
const authorizationUrl = new URL(as.authorization_endpoint!); | ||
authorizationUrl.searchParams.set("client_id", client.client_id); | ||
authorizationUrl.searchParams.set("redirect_uri", redirect_uri); | ||
authorizationUrl.searchParams.set("response_type", "code"); | ||
authorizationUrl.searchParams.set("scope", "api:read"); | ||
authorizationUrl.searchParams.set("code_challenge", code_challenge); | ||
authorizationUrl.searchParams.set( | ||
"code_challenge_method", | ||
code_challenge_method, | ||
); | ||
|
||
// 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 = ""; | ||
} | ||
); | ||
/** | ||
* We cannot be sure the AS supports PKCE so we're going to use state too. Use of PKCE is | ||
* backwards compatible even if the AS doesn't support it which is why we're using it regardless. | ||
*/ | ||
if (as.code_challenge_methods_supported?.includes("S256") !== true) { | ||
state = oauth.generateRandomState(); | ||
authorizationUrl.searchParams.set("state", state); | ||
} | ||
|
||
// Clean these up since we don't need them anymore | ||
localStorage.removeItem("pkce_state"); | ||
localStorage.removeItem("pkce_code_verifier"); | ||
// now redirect the user to authorizationUrl.href | ||
window.location.href = authorizationUrl.href; | ||
} | ||
|
||
////////////////////////////////////////////////////////////////////// | ||
// GENERAL HELPER FUNCTIONS | ||
// one eternity later, the user lands back on the redirect_uri | ||
// Authorization Code Grant Request & Response | ||
async function handle_authorization_code_grant_response() { | ||
let access_token: string; | ||
const currentUrl: URL = new URL(location.href); | ||
const params = oauth.validateAuthResponse(as, client, currentUrl, state); | ||
if (oauth.isOAuth2Error(params)) { | ||
console.error("Error Response", params); | ||
throw new Error(); // Handle OAuth 2.0 redirect error | ||
} | ||
|
||
// 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" | ||
const response = await oauth.authorizationCodeGrantRequest( | ||
as, | ||
client, | ||
params, | ||
redirect_uri, | ||
code_verifier, | ||
); | ||
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 {}; | ||
let challenges: oauth.WWWAuthenticateChallenge[] | undefined; | ||
if ((challenges = oauth.parseWwwAuthenticateChallenges(response))) { | ||
for (const challenge of challenges) { | ||
console.error("WWW-Authenticate Challenge", challenge); | ||
} | ||
throw new Error(); // Handle WWW-Authenticate Challenges as needed | ||
} | ||
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( | ||
"" | ||
const result = await oauth.processAuthorizationCodeOAuth2Response( | ||
as, | ||
client, | ||
response, | ||
); | ||
} | ||
if (oauth.isOAuth2Error(result)) { | ||
console.error("Error Response", result); | ||
throw new Error(); // Handle OAuth 2.0 response body error | ||
} | ||
|
||
// 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); | ||
console.log("Access Token Response", result); | ||
({ access_token } = result); | ||
} | ||
|
||
// 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(/=+$/, ""); | ||
} | ||
// Protected Resource Request | ||
async function handle_protected_resource_request() { | ||
let access_token!: string; | ||
const response = await oauth.protectedResourceRequest( | ||
access_token, | ||
"GET", | ||
new URL("https://rs.example.com/api"), | ||
); | ||
|
||
let challenges: oauth.WWWAuthenticateChallenge[] | undefined; | ||
if ((challenges = oauth.parseWwwAuthenticateChallenges(response))) { | ||
for (const challenge of challenges) { | ||
console.error("WWW-Authenticate Challenge", challenge); | ||
} | ||
throw new Error(); // Handle WWW-Authenticate Challenges as needed | ||
} | ||
|
||
// Return the base64-urlencoded sha256 hash for the PKCE challenge | ||
async function pkceChallengeFromVerifier(v) { | ||
hashed = await sha256(v); | ||
return base64urlencode(hashed); | ||
console.log("Protected Resource Response", await response.json()); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters