diff options
Diffstat (limited to 'web/templates/authentication/webauthn.tmpl')
| -rw-r--r-- | web/templates/authentication/webauthn.tmpl | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/web/templates/authentication/webauthn.tmpl b/web/templates/authentication/webauthn.tmpl new file mode 100644 index 0000000..03a92f8 --- /dev/null +++ b/web/templates/authentication/webauthn.tmpl @@ -0,0 +1,204 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <title>Gentoo Security</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="theme-color" content="#54487a"> + <meta name="description" content="Gentoo CVE Tool"> + + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> + + <link rel="icon" href="https://packages.gentoo.org/favicon.ico" type="image/x-icon"> +</head> + +<body style="border-top: none;background: #fff;"> + +<div class="container vh-100 d-flex"> + <div class="row flex-grow-1"> + <div class="col-12 d-flex align-items-center"> + + <div class="row w-100"> + + <div class="col-12 align-items-center"> + <div class="card border-grey mx-auto" style="max-width: 430px;border-color: lightgrey!important;"> + <div class="card-body"> + <div class="text-center" style="margin-top:10px;margin-bottom:20px;"> + <object data="https://www.gentoo.org/assets/img/logo/gentoo-signet.svg" type="image/svg+xml" style="max-width: 80px;"> + <img src="https://assets.gentoo.org/tyrian/site-logo.png" alt="Gentoo Linux logo"> + </object> + <h4 class="mt-2">WebAuthn Login</h4> + </div> + + <div id="result-success" class="alert alert-success" role="alert" style="margin-left:40px!important;margin-right:40px!important;display:none;"> + Successfully authenticated. + </div> + + <div id="result-error" class="alert alert-danger" role="alert" style="margin-left:40px!important;margin-right:40px!important;display:none;"> + Error during the authentication. + </div> + + <table class="mb-5 mt-5"> + <tbody> + <tr> + <td id="authentication-notice" style="padding-bottom:10px!important;padding-left:20px!important;padding-right:20px!important;"> + <span>2FA using WebAuthn is activated. Please use your authenticator to log in.</span> + </td> + </tr> + + <input style="display: none;" name="cameFrom" id="cameFrom" value="{{ .CameFrom }}" /> + + </tbody> + </table> + + + <div id="start-btn" class="text-right" style="width:100%;"> + <button class="btn btn-primary" style="border-color: #54487A!important;background-color: #54487A!important;" onclick="document.getElementById('start-btn').style.display='none';loginUser();">Start</button> + </div> + + <div id="continue-btn" class="text-right" style="width:100%;display: none;"> + <a href="/" class="btn btn-outline-success">Continue</a> + </div> + + <div id="retry-btn" class="text-right" style="width:100%;display: none;"> + <button class="btn btn-outline-danger" onclick="document.getElementById('start-btn').style.display='none';loginUser();">Retry</button> + </div> + + </div> + </div> + </div> + + <div class="col-12 mt-3 align-items-center"> + <div class="card border-0 text-right text-muted mx-auto" style="max-width: 430px;"> + <span class="" style="font-size: 80%;"> + <a class="mr-4 text-muted" style="text-decoration: none;" data-toggle="collapse" href="#help-notice" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Help</a> + <a class="text-muted" style="text-decoration: none;" data-toggle="collapse" href="#reset-notice" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Lost my Authenticators</a> + </span> + + + + <div class="card-body"> + <div class="collapse mt-2" id="help-notice"> + <div class="card card-body border-0 p-0"> + <small>You've activated 2FA using WebAuthn for your account. Please use one of your registered Authenticators (such as security keys) to log in.</small> + </div> + </div> + + <div class="collapse mt-2" id="reset-notice"> + <div class="card card-body border-0 p-0"> + <small>In case you lost all authenticators that you have registered, please contact the security team and ask an admin to temporarly disabled WebAuthn for your account.</small> + </div> + </div> + </div> + + </div> + </div> + + </div> + </div> + + + + </div> +</div> + + +<script + src="https://code.jquery.com/jquery-3.4.1.min.js" + integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" + crossorigin="anonymous"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> +<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> + + +<script> + + // Base64 to ArrayBuffer + function bufferDecode(value) { + return Uint8Array.from(atob(value), c => c.charCodeAt(0)); + } + + // ArrayBuffer to URLBase64 + function bufferEncode(value) { + return btoa(String.fromCharCode.apply(null, new Uint8Array(value))) + .replace(/\+/g, "-") + .replace(/\//g, "_") + .replace(/=/g, ""); + } + + + function loginUser() { + $.post( + '/login/2fa/webauthn/begin', + JSON.stringify({ + cameFrom: {{ .CameFrom }}, + restrictlogin: "on", + }), + function (data) { + return data + }, + 'json') + .then((credentialRequestOptions) => { + //alert("First step done"); + console.log(credentialRequestOptions); + credentialRequestOptions.publicKey.challenge = bufferDecode(credentialRequestOptions.publicKey.challenge); + credentialRequestOptions.publicKey.allowCredentials.forEach(function (listItem) { + listItem.id = bufferDecode(listItem.id) + }); + + return navigator.credentials.get({ + publicKey: credentialRequestOptions.publicKey + }) + }) + .then((assertion) => { + //alert("Second step done"); + console.log(assertion); + let authData = assertion.response.authenticatorData; + let clientDataJSON = assertion.response.clientDataJSON; + let rawId = assertion.rawId; + let sig = assertion.response.signature; + let userHandle = assertion.response.userHandle; + + $.post( + '/login/2fa/webauthn/finish', + JSON.stringify({ + cameFrom: {{ .CameFrom }}, + restrictlogin: "on", + id: assertion.id, + rawId: bufferEncode(rawId), + type: assertion.type, + response: { + authenticatorData: bufferEncode(authData), + clientDataJSON: bufferEncode(clientDataJSON), + signature: bufferEncode(sig), + userHandle: bufferEncode(userHandle), + }, + }), + function (data) { + return data + }, + 'json') + }) + .then((success) => { + document.getElementById('authentication-notice').style.display='none'; + document.getElementById('retry-btn').style.display='none'; + document.getElementById('result-success').style.display='block'; + document.getElementById('result-error').style.display='none'; + document.getElementById('continue-btn').style.display='inline-block'; + return + }) + .catch((error) => { + document.getElementById('authentication-notice').style.display='none'; + document.getElementById('result-success').style.display='none'; + document.getElementById('result-error').style.display='block'; + document.getElementById('retry-btn').style.display='inline-block'; + return + }) + } + +</script> + + +</body> +</html> |