github/webauthn-json

Usage of this library with Flask

Artur-Galstyan opened this issue · 4 comments

Artur-Galstyan commented

Hi there!

I want to use this library with Flask, but I am unable to do so. Could you give a minimum viable example of how to include this library if one wasn’t using Typescript or Node JS?

Essentially, I want to be able to use this library in a single html file with a script tag in there. But after several hours of trying, I couldn’t figure it out.

Any help?

lgarron commented

Essentially, I want to be able to use this library in a single html file with a script tag in there.

Does the example help?
https://github.com/github/webauthn-json/blob/main/src/dev/demo/index.ts

As far as I can tell, you're referring to the Python project Flask. This library predates most backend libraries and we only use Ruby, so unfortunately we're not equipped to provide advice on Python backend implementation details.

However, @MasterKale maintains https://github.com/duo-labs/py_webauthn , which may work for you.

MasterKale commented

@Artur-Galstyan You can get started with a template as simple as this which uses this project's UMD build:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script
    src="https://unpkg.com/@github/webauthn-json@2.0.0-alpha4/dist/browser-global/webauthn-json.browser-global.js"
    integrity="sha384-KpXiQogRMy9zGl2pk218HI3w/hStndlWnUnMHWejGsg7Nx0Gf2NS+3kuN1vAQwjA"
    crossorigin="anonymous"
  ></script>
  <title>@github/webauthn-json</title>
</head>
<body>
  <script>
    const { supported } = webauthnJSON;

    alert(`WebAuthn supported: ${supported()}`);
  </script>
</body>
</html>

If you're only targeting evergreen (i.e. modern) browsers you can leverage the ES modules build within <script type="module"> tags for something more streamlined:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@github/webauthn-json</title>
</head>
<body>
  <script type="module">
    import { supported } from 'https://unpkg.com/@github/webauthn-json@2.0.0-alpha4/dist/esm/webauthn-json.js';
    
    alert(`WebAuthn supported: ${supported()}`);
  </script>
</body>
</html>
Artur-Galstyan commented

Thanks for your replies, I will give that a try and then close this issue if I succeed 👍

Artur-Galstyan commented

Thanks a lot for your help @MasterKale . I got it to like like this:

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
<script type="module">
    import {
        create,
        parseCreationOptionsFromJSON,
    } from 'https://unpkg.com/@github/webauthn-json@2.0.0-alpha4/dist/esm/webauthn-json.browser-ponyfill.js';

    // IMPORT FROM webauthn-json.browser-ponyfill.js IS IMPORTANT
    async function register() {

        let username = $('#username').val()

        let request = await fetch("register", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ username: username })
        })

        let json = await request.json()

        // when using webauthn_py, the publicKey key needs to be added too.
        const options = parseCreationOptionsFromJSON({
            publicKey: json
        });
        const response = await create(options);

        console.log(response.toJSON())
    }

    window.register = register

</script>

<button onclick="register()">
    Register
</button>

Although I have several other questions regarding webauthn, as far as this issue is concerned, we can close it :) Thanks for your help.

  • 👍1