passkey test (#116)
Co-authored-by: Trent Larson <trent@trentlarson.com> Reviewed-on: #116 Co-authored-by: trentlarson <trent@trentlarson.com> Co-committed-by: trentlarson <trent@trentlarson.com>
This commit is contained in:
@@ -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,130 @@
|
||||
Go to Shared Page
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h2 class="text-xl font-bold mb-4">Passkeys</h2>
|
||||
See console for results.
|
||||
<br/>
|
||||
Active DID: {{ activeDid }}
|
||||
{{ credIdHex ? "has passkey ID" : "has no passkey ID" }}
|
||||
<div>
|
||||
Register
|
||||
<button
|
||||
@click="register()"
|
||||
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
|
||||
>
|
||||
Simplewebauthn
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
Create
|
||||
<button
|
||||
@click="createJwtSimplewebauthn()"
|
||||
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
|
||||
>
|
||||
Simplewebauthn
|
||||
</button>
|
||||
<button
|
||||
@click="createJwtNavigator()"
|
||||
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
|
||||
>
|
||||
Navigator
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="jwt">
|
||||
Verify
|
||||
<button
|
||||
@click="verifySimplewebauthn()"
|
||||
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
|
||||
>
|
||||
Simplewebauthn
|
||||
</button>
|
||||
<button
|
||||
@click="verifyWebCrypto()"
|
||||
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
|
||||
>
|
||||
WebCrypto
|
||||
</button>
|
||||
<button
|
||||
@click="verifyP256()"
|
||||
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
|
||||
>
|
||||
p256 - broken
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
@click="verifyMyJwt()"
|
||||
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
|
||||
>
|
||||
Verify Mine
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Buffer } from "buffer/";
|
||||
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 { accountsDB, db } from "@/db/index";
|
||||
import {
|
||||
createPeerDid,
|
||||
PeerSetup,
|
||||
registerCredential,
|
||||
verifyJwtP256,
|
||||
verifyJwtSimplewebauthn,
|
||||
verifyJwtWebCrypto,
|
||||
} from "@/libs/didPeer";
|
||||
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
|
||||
|
||||
const inputFileNameRef = ref<Blob>();
|
||||
|
||||
const TEST_PAYLOAD = {
|
||||
vc: {
|
||||
credentialSubject: {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "GiveAction",
|
||||
description: "pizza",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@Component({ components: { QuickNav } })
|
||||
export default class Help extends Vue {
|
||||
// for file import
|
||||
fileName?: string;
|
||||
|
||||
// for passkeys
|
||||
credIdHex?: string;
|
||||
activeDid?: string;
|
||||
jwt?: string;
|
||||
peerSetup?: PeerSetup;
|
||||
userName?: string;
|
||||
|
||||
async mounted() {
|
||||
await db.open();
|
||||
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
|
||||
this.activeDid = (settings?.activeDid as string) || "";
|
||||
this.userName = settings?.firstName as string;
|
||||
|
||||
await accountsDB.open();
|
||||
const account: { identity?: string } | undefined = await accountsDB.accounts
|
||||
.where("did")
|
||||
.equals(this.activeDid)
|
||||
.first();
|
||||
if (this.activeDid) {
|
||||
if (account) {
|
||||
this.credIdHex = account.passkeyCredIdHex as string;
|
||||
} else {
|
||||
alert("No account found for DID " + this.activeDid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async uploadFile(event: Event) {
|
||||
inputFileNameRef.value = event.target.files[0];
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/File
|
||||
@@ -214,5 +322,100 @@ export default class Help extends Vue {
|
||||
showFileNextStep() {
|
||||
return !!inputFileNameRef.value;
|
||||
}
|
||||
|
||||
public async register() {
|
||||
const cred = await registerCredential(this.userName);
|
||||
const publicKeyBytes = cred.publicKeyBytes;
|
||||
this.activeDid = createPeerDid(publicKeyBytes as Uint8Array);
|
||||
this.credIdHex = cred.credIdHex as string;
|
||||
|
||||
await accountsDB.open();
|
||||
await accountsDB.accounts.add({
|
||||
dateCreated: new Date().toISOString(),
|
||||
did: this.activeDid,
|
||||
passkeyCredIdHex: this.credIdHex,
|
||||
publicKeyHex: Buffer.from(publicKeyBytes).toString("hex"),
|
||||
});``
|
||||
}
|
||||
|
||||
public async createJwtSimplewebauthn() {
|
||||
this.peerSetup = new PeerSetup();
|
||||
this.jwt = await this.peerSetup.createJwtSimplewebauthn(
|
||||
this.activeDid as string,
|
||||
TEST_PAYLOAD,
|
||||
this.credIdHex as string,
|
||||
);
|
||||
console.log("simple jwt4url", this.jwt);
|
||||
}
|
||||
|
||||
public async createJwtNavigator() {
|
||||
this.peerSetup = new PeerSetup();
|
||||
this.jwt = await this.peerSetup.createJwtNavigator(
|
||||
this.activeDid as string,
|
||||
TEST_PAYLOAD,
|
||||
this.credIdHex as string,
|
||||
);
|
||||
console.log("lower jwt4url", this.jwt);
|
||||
}
|
||||
|
||||
public async verifyP256() {
|
||||
const decoded = await verifyJwtP256(
|
||||
this.credIdHex as Base64URLString,
|
||||
this.activeDid as string,
|
||||
this.peerSetup.authenticatorData as ArrayBuffer,
|
||||
this.peerSetup.challenge as Uint8Array,
|
||||
this.peerSetup.clientDataJsonBase64Url as Base64URLString,
|
||||
this.peerSetup.signature as Base64URLString,
|
||||
);
|
||||
console.log("decoded", decoded);
|
||||
}
|
||||
|
||||
public async verifySimplewebauthn() {
|
||||
const decoded = await verifyJwtSimplewebauthn(
|
||||
this.credIdHex as Base64URLString,
|
||||
this.activeDid as string,
|
||||
this.peerSetup.authenticatorData as ArrayBuffer,
|
||||
this.peerSetup.challenge as Uint8Array,
|
||||
this.peerSetup.clientDataJsonBase64Url as Base64URLString,
|
||||
this.peerSetup.signature as Base64URLString,
|
||||
);
|
||||
console.log("decoded", decoded);
|
||||
}
|
||||
|
||||
public async verifyWebCrypto() {
|
||||
const decoded = await verifyJwtWebCrypto(
|
||||
this.credIdHex as Base64URLString,
|
||||
this.activeDid as string,
|
||||
this.peerSetup.authenticatorData as ArrayBuffer,
|
||||
this.peerSetup.challenge as Uint8Array,
|
||||
this.peerSetup.clientDataJsonBase64Url as Base64URLString,
|
||||
this.peerSetup.signature as Base64URLString,
|
||||
);
|
||||
console.log("decoded", decoded);
|
||||
}
|
||||
public async verifyMyJwt() {
|
||||
const jwt =
|
||||
"eyJ0eXAiOiJKV0FOVCIsImFsZyI6IkVTMjU2In0.eyJBdXRoZW50aWNhdGlvbkRhdGFCNjRVUkwiOiJTWllONVlnT2pHaDBOQmNQWkhaZ1c0X2tycm1paGpMSG1Wenp1b01kbDJNRkFBQUFBQSIsIkNsaWVudERhdGFKU09OQjY0VVJMIjoiZXlKMGVYQmxJam9pZDJWaVlYVjBhRzR1WjJWMElpd2lZMmhoYkd4bGJtZGxJam9pWlhsS01sbDVTVFpsZVVwcVkyMVdhMXBYTlRCaFYwWnpWVE5XYVdGdFZtcGtRMGsyWlhsS1FWa3lPWFZrUjFZMFpFTkpOa2x0YURCa1NFSjZUMms0ZG1NeVRtOWFWekZvVEcwNWVWcDVTWE5KYTBJd1pWaENiRWxxYjJsU01td3lXbFZHYW1SSGJIWmlhVWx6U1cxU2JHTXlUbmxoV0VJd1lWYzVkVWxxYjJsalIydzJaVzFGYVdaWU1ITkpiV3hvWkVOSk5rMVVZM2hQUkZVMFRtcHJOVTFEZDJsaFdFNTZTV3B2YVZwSGJHdFBia0pzV2xoSk5rMUljRXhVVlZweFpHeFdibGRZU2s1TlYyaFpaREJTYW1GV2JFbGhWVVUxVkZob1dXUkZjRkZYUnpWVFZFVndNbU5YT1U1VWEwWk1ZakJTVFZkRWJIZFRNREZZVkVkSmVsWnJVbnBhTTFab1RWaEJlV1ZzWTNobFJtaFRZekp3WVZVeFVrOWpNbG95VkZjMVQyVlZNVlJPTWxKRFRrZHpNMVJyUm05U2JtUk5UVE5DV1ZGdVNrTlhSMlExVjFWdk5XTnRhMmxtVVNJc0ltOXlhV2RwYmlJNkltaDBkSEE2THk5c2IyTmhiR2h2YzNRNk9EQTRNQ0lzSW1OeWIzTnpUM0pwWjJsdUlqcG1ZV3h6WlgwIiwiaWF0IjoxNzE4NTg2OTkyLCJpc3MiOiJkaWQ6cGVlcjowektNRmp2VWdZck0xaFh3RGNpWUhpQTlNeFh0SlBYblJMSnZxb01OQUtvRExYOXBLTVdMYjNWRHNndWExcDJ6VzF4WFJzalpTVE5zZnZNbk55TVM3ZEI0azdOQWhGd0wzcFhCckJYZ3lZSjlyaSJ9.MEUCIQDJyCTbMPIFnuBoW3FYnlgtDEIHZ2OrkCEvqVnHU7kJDQIgVxjBjfW1TwQfcSOYwK8Z7AdCWGJlyxtLEsrnPif7caE";
|
||||
const pieces = jwt.split(".");
|
||||
console.log("pieces", typeof pieces[1], pieces);
|
||||
const payload = JSON.parse(Buffer.from(pieces[1], "base64").toString());
|
||||
const authData = Buffer.from(payload["AuthenticationDataB64URL"], "base64");
|
||||
const clientJSON = Buffer.from(
|
||||
payload["ClientDataJSONB64URL"],
|
||||
"base64",
|
||||
).toString();
|
||||
const clientData = JSON.parse(clientJSON);
|
||||
const challenge = clientData.challenge;
|
||||
const signatureB64URL = pieces[2];
|
||||
const decoded = await verifyJwtWebCrypto(
|
||||
this.credIdHex as Base64URLString,
|
||||
this.activeDid as string,
|
||||
authData,
|
||||
challenge,
|
||||
payload["ClientDataJSONB64URL"],
|
||||
signatureB64URL,
|
||||
);
|
||||
console.log("decoded", decoded);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user