robur/webauthn
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webauthn/bin/template.ml

182 lines
6.7 KiB
OCaml
Raw Normal View History

WIP
2021-09-28 11:30:14 +00:00
let page s b =
Printf.sprintf {|
<html>
<head>
<title>WebAuthn Demo</title>
<script type="text/javascript" src="/static/base64.js"></script>
<script>
function bufferEncode(value) {
return base64js.fromByteArray(value)
.replace(/\+/g, "-")
.replace(/\//g, "_")
.replace(/=/g, "");
}
</script>
<script>%s</script>
</head><body>%s</body></html>|} s b
let overview notes authenticated_as users =
let authenticated_as =
match authenticated_as with
| None -> "<h2>Not authenticated</h2>"
| Some user -> Printf.sprintf {|<h2>Authenticated as %s</h2>
<form action="/logout" method="post"><input type="submit" value="Log out"/></form>
|} user
and links =
{|<h2>Register</h2><ul>
<li><a href="/register">register</a></li>
</ul>
|}
and users =
String.concat ""
("<h2>Users</h2><ul>" ::
demo-app: use userid instead of username as keys into hashtables pass challenge as output of Webauthn instead of input (to support multiple challenges)
2021-10-05 13:09:35 +00:00
Hashtbl.fold (fun id (name, keys) acc ->
Display credential IDs as base64
2021-10-04 08:42:04 +00:00
let credentials = List.map (fun (_, cid, _) ->
Base64.encode_string ~pad:false ~alphabet:Base64.uri_safe_alphabet cid)
keys
in
demo-app: use userid instead of username as keys into hashtables pass challenge as output of Webauthn instead of input (to support multiple challenges)
2021-10-05 13:09:35 +00:00
(Printf.sprintf "<li>%s [<a href=/authenticate/%s>authenticate</a>] (%s)</li>" name id (String.concat ", " credentials)) :: acc)
WIP
2021-09-28 11:30:14 +00:00
users [] @ [ "</ul>" ])
in
page "" (String.concat "" (notes @ [authenticated_as;links;users]))
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
let register_view origin user =
WIP
2021-09-28 11:30:14 +00:00
let script = Printf.sprintf {|
Attestation type, rework session variables * Allow the user to select attestation type * Rework session variables and challenge tracking
2021-10-04 15:19:34 +00:00
function makePublicKey(challengeData, attestation) {
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
let challenge = Uint8Array.from(window.atob(challengeData.challenge), c=>c.charCodeAt(0));
let user_id = Uint8Array.from(window.atob(challengeData.user.id), c=>c.charCodeAt(0));
return {
challenge: challenge,
rp: {
id: "%s",
name: "WebAuthn Demo from robur.coop"
},
user: {
id: user_id,
displayName: challengeData.user.displayName,
name: challengeData.user.name
},
pubKeyCredParams: [
{
type: "public-key",
alg: -7
}
],
Attestation type, rework session variables * Allow the user to select attestation type * Rework session variables and challenge tracking
2021-10-04 15:19:34 +00:00
attestation: attestation,
cleanup authentication flow, similar to registration flow
2021-10-04 14:36:00 +00:00
excludeCredentials: challengeData.excludeCredentials.map(id => ({ type: "public-key",
id: Uint8Array.from(window.atob(id), c=>c.charCodeAt(0))}))
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
};
}
Attestation type, rework session variables * Allow the user to select attestation type * Rework session variables and challenge tracking
2021-10-04 15:19:34 +00:00
function do_register(username, attestation) {
cleanup authentication flow, similar to registration flow
2021-10-04 14:36:00 +00:00
fetch("/registration-challenge/"+username)
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
.then(response => response.json())
.then(function (challengeData) {
Attestation type, rework session variables * Allow the user to select attestation type * Rework session variables and challenge tracking
2021-10-04 15:19:34 +00:00
let publicKey = makePublicKey(challengeData, attestation);
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
navigator.credentials.create({ publicKey })
.then(function (credential) {
let response = credential.response;
let attestationObject = new Uint8Array(response.attestationObject);
let clientDataJSON = new Uint8Array(response.clientDataJSON);
WIP
2021-09-28 11:30:14 +00:00
cleanup authentication flow, similar to registration flow
2021-10-04 14:36:00 +00:00
let body =
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
JSON.stringify({
provide a webauthn.mli, adapt the demo application
2021-10-05 15:56:20 +00:00
attestationObject: bufferEncode(attestationObject),
clientDataJSON: bufferEncode(clientDataJSON),
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
});
WIP
2021-09-28 11:30:14 +00:00
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
let headers = {'Content-type': "application/json; charset=utf-8"};
WIP
2021-09-28 11:30:14 +00:00
demo-app: use userid instead of username as keys into hashtables pass challenge as output of Webauthn instead of input (to support multiple challenges)
2021-10-05 13:09:35 +00:00
let request = new Request('/register_finish/'+challengeData.user.id, { method: 'POST', body: body, headers: headers } );
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
fetch(request)
.then(function (response) {
if (!response.ok && response.status != 403) {
cleanup authentication flow, similar to registration flow
2021-10-04 14:36:00 +00:00
alert("bad response: " + response.status);
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
return
};
response.json().then(function (success) {
alert(success ? "Successfully registered!" : "Failed to register :(");
window.location = "/";
});
});
}).catch(function (err) {
cleanup authentication flow, similar to registration flow
2021-10-04 14:36:00 +00:00
alert("exception: " + err);
demo-app: use userid instead of username as keys into hashtables pass challenge as output of Webauthn instead of input (to support multiple challenges)
2021-10-05 13:09:35 +00:00
window.location = "/";
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
});
WIP
2021-09-28 11:30:14 +00:00
});
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
}
function doit() {
let username = document.getElementById("username").value;
Attestation type, rework session variables * Allow the user to select attestation type * Rework session variables and challenge tracking
2021-10-04 15:19:34 +00:00
let attestation = document.getElementById("attestation").value;
return do_register(username, attestation);
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
}
|} origin
WIP
2021-09-28 11:30:14 +00:00
and body =
Printf.sprintf {|
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
<p>Welcome.</p>
<form method="post" id="form" onsubmit="return false;">
<label for="username" >Desired username</label><input name="username" id="username" value="%s"/>
Attestation type, rework session variables * Allow the user to select attestation type * Rework session variables and challenge tracking
2021-10-04 15:19:34 +00:00
<label for="attestation">Attestation type</label><select name="attestation" id="attestation">
<option value="direct">direct</option>
<option value="indirect">indirect</option>
<option value="none">none</option>
</select>
Rework registration flow The registration page comes with a form where the user selects a username. When the user clicks "register" a javascript function is called that reads the user form input value and makes a GET request to /challenge/:user where it receives a challenge and a user object as JSON. The WebAuthn registration process continues using those challenge parameters. The user then receives an alert() with a string explaining the registration status and is then redirected to the front page where a flash message is displayed as well.
2021-10-04 08:43:32 +00:00
<button id="button" type="button" onclick="doit()">Register</button>
</form>
WIP
2021-09-28 11:30:14 +00:00
|} user
in
page script body
works as initial version
2021-09-29 14:34:09 +00:00
let authenticate_view challenge credentials user =
WIP
2021-09-28 11:30:14 +00:00
let script =
Printf.sprintf {|
cleanup authentication flow, similar to registration flow
2021-10-04 14:36:00 +00:00
let request_options = {
works as initial version
2021-09-29 14:34:09 +00:00
challenge: Uint8Array.from(window.atob("%s"), c=>c.charCodeAt(0)),
allowCredentials: %s.map(x => { x.id = Uint8Array.from(window.atob(x.id), c=>c.charCodeAt(0)); return x }),
};
navigator.credentials.get({ publicKey: request_options })
.then(function (assertion) {
let response = assertion.response;
let authenticatorData = new Uint8Array(assertion.response.authenticatorData);
let clientDataJSON = new Uint8Array(assertion.response.clientDataJSON);
let signature = new Uint8Array(assertion.response.signature);
let userHandle = assertion.response.userHandle ? new Uint8Array(assertion.response.userHandle) : null;
cleanup authentication flow, similar to registration flow
2021-10-04 14:36:00 +00:00
let body =
works as initial version
2021-09-29 14:34:09 +00:00
JSON.stringify({
provide a webauthn.mli, adapt the demo application
2021-10-05 15:56:20 +00:00
authenticatorData: bufferEncode(authenticatorData),
clientDataJSON: bufferEncode(clientDataJSON),
signature: bufferEncode(signature),
userHandle: userHandle ? bufferEncode(userHandle) : null,
works as initial version
2021-09-29 14:34:09 +00:00
});
let headers = {'Content-type': "application/json; charset=utf-8"};
Attestation type, rework session variables * Allow the user to select attestation type * Rework session variables and challenge tracking
2021-10-04 15:19:34 +00:00
let username = window.location.pathname.substring("/authenticate/".length);
provide a webauthn.mli, adapt the demo application
2021-10-05 15:56:20 +00:00
let request = new Request('/authenticate_finish/'+assertion.id+'/'+username, { method: 'POST', body: body, headers: headers } );
works as initial version
2021-09-29 14:34:09 +00:00
fetch(request)
.then(function (response) {
if (!response.ok) {
cleanup authentication flow, similar to registration flow
2021-10-04 14:36:00 +00:00
alert("bad response: " + response.status);
window.location = "/";
return
works as initial version
2021-09-29 14:34:09 +00:00
};
cleanup authentication flow, similar to registration flow
2021-10-04 14:36:00 +00:00
response.json().then(function (success) {
alert(success ? "Successfully authenticated!" : "Failed to authenticate :(");
window.location = "/";
});
works as initial version
2021-09-29 14:34:09 +00:00
});
}).catch(function (err) {
cleanup authentication flow, similar to registration flow
2021-10-04 14:36:00 +00:00
alert("exception: " + err);
demo-app: use userid instead of username as keys into hashtables pass challenge as output of Webauthn instead of input (to support multiple challenges)
2021-10-05 13:09:35 +00:00
window.location = "/";
works as initial version
2021-09-29 14:34:09 +00:00
});
|} challenge
(Yojson.to_string (`List
(List.map (fun credential_id ->
(`Assoc ["id", `String credential_id; "type", `String "public-key"]))
credentials)))
WIP
2021-09-28 11:30:14 +00:00
and body =
Printf.sprintf {|
works as initial version
2021-09-29 14:34:09 +00:00
<p>Touch your token to authenticate as %S.</p>
WIP
2021-09-28 11:30:14 +00:00
|} user
in
page script body
Copy permalink