Browse Source

move all passkey testing to /test

pull/116/head
Trent Larson 5 months ago
parent
commit
bad859ea7c
  1. 52
      src/views/StartView.vue
  2. 101
      src/views/TestView.vue

52
src/views/StartView.vue

@ -70,7 +70,6 @@ import { accountsDB } from "@/db/index";
import { generateRandomBytes } from "@/libs/crypto";
import {
createPeerDid,
JWK,
PeerSetup,
registerCredential,
verifyJwt,
@ -80,14 +79,7 @@ import {
components: {},
})
export default class StartView extends Vue {
authenticatorData?: ArrayBuffer;
credId?: Base64URLString;
numAccounts = 0;
publicKeyJwk?: JWK;
publicKeyBytes?: Uint8Array;
rawId?: Uint8Array;
savedCredentialId = "";
userId?: ArrayBuffer;
async mounted() {
await accountsDB.open();
@ -95,53 +87,15 @@ export default class StartView extends Vue {
}
public async onClickYes() {
this.userId = generateRandomBytes(16).buffer;
const encodedUserId = new TextDecoder("utf-8").decode(this.userId);
console.log("encodedUserId", encodedUserId);
const challenge = generateRandomBytes(32);
const cred = await registerCredential(
this.userId as Uint8Array,
challenge as Uint8Array,
);
console.log("public key", cred);
this.publicKeyJwk = cred.publicKeyJwk;
this.publicKeyBytes = cred.publicKeyBytes;
this.credId = cred.credId as string;
this.rawId = cred.rawId as Uint8Array;
this.savedCredentialId = this.credId;
//this.$router.push({ name: "new-identifier" });
this.$router.push({ name: "new-identifier" });
}
public async onClickNo() {
const did = createPeerDid(this.publicKeyBytes as Uint8Array);
console.log("did", did);
const payload = { a: 1 };
const peerSetup = new PeerSetup();
const jwt = await peerSetup.createJwt(payload, did, this.credId as string);
console.log("jwt", jwt);
const jwt4url = jwt
.replace(/\+/g, "-")
.replace(/\//g, "_")
.replace(/=+$/, "");
console.log("jwt4url", jwt4url);
const signature = jwt4url.split(".")[2];
const decoded = await verifyJwt(
jwt4url,
this.credId as Base64URLString,
this.rawId as Uint8Array,
peerSetup.authenticatorData as ArrayBuffer,
peerSetup.clientDataJsonDecoded,
this.publicKeyBytes as Uint8Array,
signature,
);
console.log("decoded", decoded);
//this.$router.push({ name: "import-account" });
this.$router.push({ name: "import-account" });
}
public onClickDerive() {
//this.$router.push({ name: "import-derive" });
this.$router.push({ name: "import-derive" });
}
}
</script>

101
src/views/TestView.vue

@ -21,8 +21,8 @@
</h1>
</div>
<div class="mb-8">
<h2 class="text-xl font-bold mb-4">Notiwind Alert Test Suite</h2>
<div>
<h2 class="text-xl font-bold mb-4">Notiwind Alerts</h2>
<button
@click="
@ -154,8 +154,8 @@
</button>
</div>
<div>
<h2 class="text-xl font-bold mb-4">Share Image</h2>
<div class="mt-8">
<h2 class="text-xl font-bold mb-4">Image Sharing</h2>
Populates the "shared-photo" view as if they used "share_target".
<input type="file" @change="uploadFile" />
<router-link
@ -169,22 +169,65 @@
Go to Shared Page
</router-link>
</div>
<div class="mt-8">
<h2 class="text-xl font-bold mb-4">Passkeys</h2>
<button
@click="register()"
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
>
Register
</button>
<button
@click="create()"
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
>
Create
</button>
<button
@click="verify()"
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
>
Verify
</button>
</div>
</section>
</template>
<script lang="ts">
import { Base64URLString } from "@simplewebauthn/types";
import { ref } from "vue";
import { Component, Vue } from "vue-facing-decorator";
import QuickNav from "@/components/QuickNav.vue";
import { db } from "@/db/index";
import { generateRandomBytes } from "@/libs/crypto";
import {
createPeerDid,
JWK,
PeerSetup,
registerCredential,
verifyJwt,
} from "@/libs/didPeer";
const inputFileNameRef = ref<Blob>();
@Component({ components: { QuickNav } })
export default class Help extends Vue {
// for file import
fileName?: string;
// for passkeys
authenticatorData?: ArrayBuffer;
credId?: Base64URLString;
jwt?: string;
peerSetup?: PeerSetup;
publicKeyJwk?: JWK;
publicKeyBytes?: Uint8Array;
rawId?: Uint8Array;
savedCredentialId = "";
userId?: ArrayBuffer;
async uploadFile(event: Event) {
inputFileNameRef.value = event.target.files[0];
// https://developer.mozilla.org/en-US/docs/Web/API/File
@ -214,5 +257,55 @@ export default class Help extends Vue {
showFileNextStep() {
return !!inputFileNameRef.value;
}
public async register() {
this.userId = generateRandomBytes(16).buffer;
const encodedUserId = new TextDecoder("utf-8").decode(this.userId);
console.log("encodedUserId", encodedUserId);
const challenge = generateRandomBytes(32);
const cred = await registerCredential(
this.userId as Uint8Array,
challenge as Uint8Array,
);
console.log("public key", cred);
this.publicKeyJwk = cred.publicKeyJwk;
this.publicKeyBytes = cred.publicKeyBytes;
this.credId = cred.credId as string;
this.rawId = cred.rawId as Uint8Array;
this.savedCredentialId = this.credId;
}
public async create() {
const did = createPeerDid(this.publicKeyBytes as Uint8Array);
console.log("did", did);
const payload = { a: 1 };
this.peerSetup = new PeerSetup();
const rawJwt = await this.peerSetup.createJwt(payload, did, this.credId as string);
console.log("raw jwt", rawJwt);
this.jwt = rawJwt
.replace(/\+/g, "-")
.replace(/\//g, "_")
.replace(/=+$/, "");
console.log("jwt4url", this.jwt);
}
public async verify() {
if (!this.jwt || !this.peerSetup) {
alert("Create a JWT first.");
return;
}
const signature = this.jwt.split(".")[2];
const decoded = await verifyJwt(
this.jwt || "",
this.credId as Base64URLString,
this.rawId as Uint8Array,
this.peerSetup.authenticatorData as ArrayBuffer,
this.peerSetup.clientDataJsonDecoded,
this.publicKeyBytes as Uint8Array,
signature,
);
console.log("decoded", decoded);
}
}
</script>

Loading…
Cancel
Save