246 lines
9.1 KiB
HTML
246 lines
9.1 KiB
HTML
<!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>
|