パスキー認証情報を作成する

https://zenn.dev/a10a/articles/963e5326523ff8

パスキー認証情報作成スクリプトの呼び出し

static/index.html

<script type="module">
  import { createCredentials } from "/scripts/auth.js";

  window.addEventListener("load", async () => {
    createCredentials();
  });
</script>

router/router.go

r.Get("/scripts/*", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
	subFsys, err := fs.Sub(fsys, "static")
	if err != nil {
		w.WriteHeader(http.StatusInternalServerError)
		w.Write([]byte(err.Error()))

		return
	}

	http.FileServer(http.FS(subFsys)).ServeHTTP(w, r)
}))

パスキー認証情報の作成

static/scripts/auth.js

navigator.credentials.createの引数については以下参照

https://developer.mozilla.org/ja/docs/Web/API/CredentialsContainer/create

export async function createCredentials() {
  const credentails = await navigator.credentials.create({
    publicKey: {
      rp: {
        name: "a10a server",
      },
      user: {
        id: decodeBase64Url("some-user-id"),
        name: "[e-mail]",
        displayName: "[e-mail]",
      },
      challenge: decodeBase64Url("some-challenge"),
      pubKeyCredParams: [
        {
          type: "public-key",
          alg: -7,
        },
        {
          type: "public-key",
          alg: -257,
        },
      ],
    },
  });

  console.log({ credentails });
}