feat: add test html
This commit is contained in:
parent
7d7f54261b
commit
e3d2ceb808
245
static/index.html
Normal file
245
static/index.html
Normal file
@ -0,0 +1,245 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Web3 Login process with MetaMask</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/ethers@5.6.4/dist/ethers.umd.min.js"
|
||||
type="application/javascript"
|
||||
></script>
|
||||
<script>
|
||||
function web3_check_metamask() {
|
||||
if (!window.ethereum) {
|
||||
console.error(
|
||||
"It seems that the MetaMask extension is not detected. Please install MetaMask first.",
|
||||
);
|
||||
alert(
|
||||
"It seems that the MetaMask extension is not detected. Please install MetaMask first.",
|
||||
);
|
||||
return false;
|
||||
} else {
|
||||
alert("✅ MetaMask extension has been detected!");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
async function web3_metamask_hash(pubKey) {
|
||||
const z = await (
|
||||
await fetch("http://127.0.0.1:8080/api/auth/challenge", {
|
||||
body: `{ "pubKey": "${pubKey}"\n}`,
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
method: "POST",
|
||||
})
|
||||
).json();
|
||||
return z.message;
|
||||
}
|
||||
|
||||
async function login_api(pubKey, sig) {
|
||||
res = await (await fetch("http://127.0.0.1:8080/api/auth/authenticate", {
|
||||
body: JSON.stringify({ pubKey: pubKey, signature: sig }),
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
method: "POST",
|
||||
})).json();
|
||||
updateStatus(JSON.stringify(res), "text-green-600");
|
||||
response = await (await fetch("http://127.0.0.1:8080/api/hello", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${res.authorizationToken}`,
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
method: "GET",
|
||||
})).json();
|
||||
console.log(response);
|
||||
}
|
||||
|
||||
async function web3_metamask_login() {
|
||||
// Check first if the user has the MetaMask installed
|
||||
if (web3_check_metamask()) {
|
||||
console.log("Initate Login Process");
|
||||
updateStatus("Initiating login process...", "text-blue-600");
|
||||
|
||||
// Get the Ethereum provider
|
||||
const provider = new ethers.providers.Web3Provider(window.ethereum);
|
||||
// Get Ethereum accounts
|
||||
await provider.send("eth_requestAccounts", []);
|
||||
console.log("Connected!!");
|
||||
updateStatus("Connected to MetaMask!", "text-green-600");
|
||||
|
||||
// Get the User Ethereum address
|
||||
const address = await provider.getSigner().getAddress();
|
||||
console.log(address);
|
||||
document.getElementById("address").textContent = address;
|
||||
|
||||
// Get custom message from input or use hashed string
|
||||
const customMessage = document
|
||||
.getElementById("messageInput")
|
||||
.value.trim();
|
||||
const messageToSign = customMessage || await web3_metamask_hash(address);
|
||||
console.log("Message to sign: " + messageToSign);
|
||||
|
||||
// Request the user to sign it
|
||||
updateStatus(
|
||||
"Please sign the message in MetaMask...",
|
||||
"text-orange-600",
|
||||
);
|
||||
const signature = await provider
|
||||
.getSigner()
|
||||
.signMessage(messageToSign);
|
||||
// Got the signature
|
||||
console.log("The signature: " + signature);
|
||||
document.getElementById("signature").textContent = signature;
|
||||
updateStatus("Message signed successfully!", "text-green-600");
|
||||
|
||||
// TODO
|
||||
// you can then send the signature to the webserver for further processing and verification
|
||||
console.log({address, signature})
|
||||
await login_api(address, signature);
|
||||
}
|
||||
}
|
||||
|
||||
function updateStatus(message, className) {
|
||||
const statusEl = document.getElementById("status");
|
||||
statusEl.textContent = message;
|
||||
statusEl.className = `text-sm font-medium ${className}`;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
|
||||
<div class="container mx-auto px-4 py-8 max-w-2xl">
|
||||
<div class="bg-white rounded-xl shadow-lg p-8">
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-800 mb-2">
|
||||
Web3 MetaMask Login
|
||||
</h1>
|
||||
<p class="text-gray-600">
|
||||
Connect your wallet and sign messages securely
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- MetaMask Detection Section -->
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-700 mb-3">
|
||||
1. MetaMask Detection
|
||||
</h2>
|
||||
<button
|
||||
onclick="web3_check_metamask();"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-200 ease-in-out transform hover:scale-105"
|
||||
>
|
||||
Detect MetaMask
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Message Input Section -->
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-700 mb-3">
|
||||
2. Custom Message (Optional)
|
||||
</h2>
|
||||
<div class="mb-4">
|
||||
<label
|
||||
for="messageInput"
|
||||
class="block text-sm font-medium text-gray-600 mb-2"
|
||||
>
|
||||
Enter a custom message to sign (leave empty for random hash):
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="messageInput"
|
||||
placeholder="Enter your custom message here..."
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition duration-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Login Section -->
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-700 mb-3">
|
||||
3. Wallet Login
|
||||
</h2>
|
||||
<button
|
||||
onclick="web3_metamask_login();"
|
||||
class="bg-gradient-to-r from-orange-500 to-red-600 hover:from-orange-600 hover:to-red-700 text-white font-medium py-3 px-8 rounded-lg transition duration-200 ease-in-out transform hover:scale-105 shadow-md"
|
||||
>
|
||||
🦊 Login with MetaMask
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Status Section -->
|
||||
<div class="bg-white border border-gray-200 rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-700 mb-3">Status</h3>
|
||||
<div id="status" class="text-sm text-gray-500">
|
||||
Ready to connect...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Section -->
|
||||
<div class="bg-white border border-gray-200 rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-700 mb-4">
|
||||
Connection Details
|
||||
</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-600 mb-1"
|
||||
>Wallet Address:</label
|
||||
>
|
||||
<div
|
||||
id="address"
|
||||
class="bg-gray-50 p-3 rounded border text-sm font-mono break-all text-gray-700"
|
||||
>
|
||||
Not connected
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-600 mb-1"
|
||||
>Message Signature:</label
|
||||
>
|
||||
<div
|
||||
id="signature"
|
||||
class="bg-gray-50 p-3 rounded border text-sm font-mono break-all text-gray-700 max-h-32 overflow-y-auto"
|
||||
>
|
||||
No signature yet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Section -->
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg
|
||||
class="h-5 w-5 text-blue-400"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h4 class="text-sm font-medium text-blue-800">How it works</h4>
|
||||
<p class="text-sm text-blue-700 mt-1">
|
||||
First detect MetaMask, then optionally enter a custom message,
|
||||
and finally connect your wallet to sign the message securely.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user