i-cant-believe-its-not-webusb/index.html at main · ArcaneNibble/i-cant-believe-its-not-webusb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script>
            let led_state = 0;

            async function poll_pin() {
                try {
                    let credential = await navigator.credentials.get({
                        publicKey: {
                            challenge: new Uint8Array([]),
                            allowCredentials: [{
                                type: "public-key",
                                transports: ["usb"],
                                id: new Uint8Array([0xfe, 0xed, 0xfa, 0xce, 0xde, 0xad, 0xbe, 0xef, led_state])
                            }],
                            userVerification: "discouraged",
                        }
                    });
                    let sig = new Uint8Array(credential.response.signature);
                    let pin = sig[9];
                    let poll_result = document.getElementById("poll_result");
                    poll_result.innerText = "Pin is: " + pin;
                    poll_result.style.backgroundColor = pin ? "green" : "red";
                } catch (e) {}
                window.requestAnimationFrame(poll_pin);
            }

            async function set_up() {
                document.getElementById("turn_on").onclick = () => {led_state = 1};
                document.getElementById("turn_off").onclick = () => {led_state = 0};
                window.requestAnimationFrame(poll_pin);
            }
            window.onload = set_up;
        </script>
    </head>
    <body>
        <div>
            <button id="turn_on">On!</button>
            <button id="turn_off">Off!</button>
        </div>
        <div id="poll_result"></div>
    </body>
</html>