<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Title
</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue">
</script>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
message: 'Hello Vue!',
touchIDOptions: {
publicKey: {
rp: {
name: "chat-system"
},
user: {
name: "",
id: "",
displayName: ""
},
pubKeyCredParams: [
{
type: "public-key",
alg: -7
}
],
challenge: "",
authenticatorSelection: {
userVerification: "preferred"
},
}
},
},
methods: {
base64ToArrayBuffer: function(base64) {
const binaryString = window.atob(base64);
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
return bytes.buffer;
},
base64ToArray(base64) {
const binaryString = window.atob(base64);
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
},
touchIDRegistered: async
function(userName, userId, certificate) {
const hasTouchID = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
if (hasTouchID && window.confirm("检测到您的设备支持指纹登录，是否启用?")) {
this.touchIDOptions.publicKey.challenge = this.base64ToArrayBuffer(window.btoa(certificate));
this.touchIDOptions.publicKey.user.name = userName;
this.touchIDOptions.publicKey.user.id = this.base64ToArrayBuffer(window.btoa(userId));
const publicKeyCredential = await navigator.credentials.create(this.touchIDOptions);
if (publicKeyCredential && "rawId" in publicKeyCredential) {
const rawId = publicKeyCredential["rawId"];
const touchId = this.arrayBufferToBase64(rawId);
const response = publicKeyCredential["response"];
const clientDataJSON = this.arrayBufferToString(response["clientDataJSON"]);
}
}
},
authLogin: async function() {
{
console.log("授权登录成功，其他代码省略")
const hasTouchID = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
if (hasTouchID) {
let data = {
"certificate": "1212asdfghjklasdfghjkl1212",
"id": "asdfghjklasdfghjklasdfghjkl",
"status": "no",
"username": "codercoder"
}
if (data.status == "no") {
console.log("未注册!!!!!!")
await this.touchIDRegistered(data.username, data.id, data.certificate);
} else {
}
console.log("保存touchid")
localStorage.setItem("touchId", data);
return;
}
return;
};
}
},
created: function() {
this.authLogin()
}
})
</script>
</html>
|