oauth-playground-server/src/main/resources/templates/OAuthResource/loginPasswordless.html

{#include base}
    {#title}Login passwordless{/title}
    {#add-header}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script charset="UTF-8" src="/js/webauthn-debug.js" type="text/javascript"></script>
    <style>


        .code {
            white-space: pre;
        }

        .step {
            display: none;
        }
    </style>
    {/add-header}

<div class="container">
    <input id="userName" placeholder="User name"/><br/>
    <button class="nextBtn" id="login">Login</button>
    <button class="nextBtn" id="register">Register</button>
</div>

<div class="container step" id="server1-request">
    The interaction starts with an AJAX call.
    <div class="code">POST <span id="server1-url"></span>
        <div id="server1-call"></div>
    </div>
    <button class="nextBtn">Request challenge</button>
</div>

<div class="container step" id="server1-response">
    The server prepares a challenge for the browser to sign.
    <div class="code" id="server1-response-body"></div>
    <button class="nextBtn">Continue</button>
</div>

<div class="container step" id="navigator-request">
    The challenge is passed to the browser call:
    <div class="code" id="navigator-call"></div>
    <button class="nextBtn">Call Webauthn API</button>
</div>

<div class="container step" id="navigator-response">
    Which responds:
    <div class="code" id="navigator-response-body"></div>
    The <strong>response.clientDataJSON</strong> are base64 encoded:
    <div class="code" id="navigator-clientDataJSON"></div>
    <button class="nextBtn">Finish the interaction</button>
</div>
</div>

<div id="result"></div>
<div id="trace"></div>

<form action="#" method="POST">
    <input name="sessionId" type="hidden" value="somesessionid">
    <div id="form-generated"></div>
</form>

<script type="text/javascript">
    function tryDecodeBase64(str) {
        try {
            return atob(str);
        } catch (e) {
            return e + "";
        }
    }

    function tracer(stage, params) {
        console.log(stage, params)

        switch (stage) {
            case "register-request":
                return traceRegisterRequest(params);
            case "register-response":
                return traceRegisterResponse(params);
            case "credentials-create-request":
                return traceCredentialsCreateRequest(params);
            case "credentials-create-response":
                return traceCredentialsCreateResponse(params);
            case "login-request":
                return traceLoginRequest(params);
            case "login-response":
                return traceLoginResponse(params);
            case "credentials-get-request":
                return traceCredentialsGetRequest(params);
            case "credentials-get-response":
                return traceCredentialsGetResponse(params);
            default:
                return traceGeneric(stage, params);
        }
    }

    function continueButton(where, result) {
        const button = $("button", $(where)).show();
        if (button.length) {
            return new Promise((resolve, reject) => {
                button.click(() => {
                    resolve(result);
                    $(button).hide();
                });
            });
        } else {
            return Promise.resolve(result);
        }
    }

    function traceRegisterRequest(params) {
        $(".step").hide();
        $("#server1-request").show();
        $("#server1-url").html(params.url)
        $("#server1-call").html(JSON.stringify(params.body, null, 2));
        return continueButton("#server1-request", params);
    }

    function traceRegisterResponse(params) {
        $("#server1-response").show();
        $("#server1-response-body").html(JSON.stringify(params, null, 2));
        return continueButton("#server1-response", params);
    }

    function traceLoginRequest(params) {
        $(".step").hide();
        $("#server1-request").show();
        $("#server1-url").html(params.url)
        $("#server1-call").html(JSON.stringify(params.body, null, 2));
        return continueButton("#server1-request", params);
    }

    function traceLoginResponse(params) {
        $("#server1-response").show();
        $("#server1-response-body").html(JSON.stringify(params, null, 2));
        return continueButton("#server1-response", params);
    }

    function traceCredentialsCreateRequest(challenge) {
        $("#navigator-request").show();
        $("#navigator-call").html("navigator.credentials.create({ publicKey: ... });");
        return continueButton("#navigator-request", challenge);
    }

    function traceCredentialsCreateResponse(response) {
        $("#navigator-response").show();
        $("#navigator-response-body").html(JSON.stringify(response, null, 2));
        $("#navigator-clientDataJSON").html(JSON.stringify(JSON.parse(tryDecodeBase64(response.response.clientDataJSON)), null, 2));
        return continueButton("#navigator-response", response);
    }

    function traceCredentialsGetRequest(challenge) {
        $("#navigator-request").show();
        $("#navigator-call").html("navigator.credentials.get({ publicKey: ... });");
        return continueButton("#navigator-request", challenge);
    }

    function traceCredentialsGetResponse(response) {
        $("#navigator-response").show();
        $("#navigator-response-body").html(JSON.stringify(response, null, 2));
        $("#navigator-clientDataJSON").html(JSON.stringify(JSON.parse(tryDecodeBase64(response.response.clientDataJSON)), null, 2));
        return continueButton("#navigator-response", response);
    }

    function traceGeneric(stage, params) {
        const content = JSON.stringify(params);
        const trace = $("<div class='container'></div>").attr("id", stage).html(content).appendTo("#trace");
        return continueButton(trace, params);
    }

    function form(action, fields) {
        const $form = $("form").attr("action", action);
        const $fields = $("#form-generated", $form).empty()
        for ([key, value] of Object.entries(fields)) {
            console.log(key);
            $("<input type='hidden'>").attr("name", key).val(value).appendTo($fields)
        }
        $form.submit();
    }

    const webAuthn = new WebAuthn({
        callbackPath: '/q/webauthn/callback',
        registerPath: '/q/webauthn/register',
        loginPath: '/q/webauthn/login',
        // loginCallbackPath: '/webauthn/login',
        // registerCallbackPath: '/webauthn/register',
        debuggingFunction: tracer
    });

    const result = document.getElementById('result');

    const loginButton = document.getElementById('login');

    loginButton.onclick = () => {
        var userName = document.getElementById('userName').value;
        result.replaceChildren();
        webAuthn.loginOnly({ name: userName })
            .then(body => {
                form("/webauthn/login", {
                    'webAuthnId': body.id,
                    'webAuthnRawId': body.rawId,
                    'webAuthnResponseClientDataJSON': body.response.clientDataJSON,
                    'webAuthnResponseAuthenticatorData': body.response.authenticatorData,
                    'webAuthnResponseSignature': body.response.signature,
                    'webAuthnResponseUserHandle': body.response.userHandle,
                    'webAuthnType': body.type
                });
            })
            .catch(err => {
                result.append("Login failed: " + err);
                console.error(err);
            });
        return false;
    };

    const registerButton = document.getElementById('register');

    registerButton.onclick = () => {
        var userName = document.getElementById('userName').value;
        // var firstName = document.getElementById('firstName').value;
        // var lastName = document.getElementById('lastName').value;
        result.replaceChildren();


        webAuthn.registerOnly({ name: userName, displayName: userName /*firstName + " " + lastName*/})
            .then(body => {
                form("/webauthn/register", {
                    'webAuthnId': body.id,
                    'webAuthnRawId': body.rawId,
                    'webAuthnResponseAttestationObject': body.response.attestationObject,
                    'webAuthnResponseClientDataJSON': body.response.clientDataJSON,
                    'webAuthnType': body.type
                });
            })
            .catch(err => {
                result.append("Registration failed: " + err);
                console.error(err);
            });
        return false;
    };
</script>
{/include}