-
-
Save timothycarambat/e7e014a6fd08f33e753bcf2f9e31239e to your computer and use it in GitHub Desktop.
| <html> | |
| <head> | |
| <title>Web3 Metamask Login</title> | |
| <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> | |
| </head> | |
| <body class="flex w-screen h-screen justify-center items-center"> | |
| <div class="flex-col space-y-2 justify-center items-center"> | |
| <button id='loginButton' onclick="" class="mx-auto rounded-md p-2 bg-purple-500 text-white"> | |
| Login with MetaMask | |
| </button> | |
| <p id='userWallet' class='text-lg text-gray-600 my-2'></p> | |
| </div> | |
| <script> | |
| window.userWalletAddress = null | |
| const loginButton = document.getElementById('loginButton') | |
| const userWallet = document.getElementById('userWallet') | |
| function toggleButton() { | |
| if (!window.ethereum) { | |
| loginButton.innerText = 'MetaMask is not installed' | |
| loginButton.classList.remove('bg-purple-500', 'text-white') | |
| loginButton.classList.add('bg-gray-500', 'text-gray-100', 'cursor-not-allowed') | |
| return false | |
| } | |
| loginButton.addEventListener('click', loginWithMetaMask) | |
| } | |
| async function loginWithMetaMask() { | |
| const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }) | |
| .catch((e) => { | |
| console.error(e.message) | |
| return | |
| }) | |
| if (!accounts) { return } | |
| window.userWalletAddress = accounts[0] | |
| userWallet.innerText = window.userWalletAddress | |
| loginButton.innerText = 'Sign out of MetaMask' | |
| loginButton.removeEventListener('click', loginWithMetaMask) | |
| setTimeout(() => { | |
| loginButton.addEventListener('click', signOutOfMetaMask) | |
| }, 200) | |
| } | |
| function signOutOfMetaMask() { | |
| window.userWalletAddress = null | |
| userWallet.innerText = '' | |
| loginButton.innerText = 'Sign in with MetaMask' | |
| loginButton.removeEventListener('click', signOutOfMetaMask) | |
| setTimeout(() => { | |
| loginButton.addEventListener('click', loginWithMetaMask) | |
| }, 200) | |
| } | |
| window.addEventListener('DOMContentLoaded', () => { | |
| toggleButton() | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Thanks for the code, it was really helpful!
@qkrrkgus14 In fact, neither login nor logout is secure because you can log in with any wallet just by knowing the address and configuring it directly in the console, something like
window.userWalletAddress = " 0xSOME ADDRES"; userWallet.innerText = window.userWalletAddress;
But the code used to use this to do other things is very interesting.
How can I connect metamask from my web page through a button, can someone guide me please
I put the button in all my pages but when i connect and go to another page it still says connect.
@lmy-dawson replace this "window.userWalletAddress = ..." with this "localStorage.setItem("userWalletAddress", "wallet")"
and this "... = window.userWalletAddress" with this "localStorage.getItem("userWalletAddress")"
same problem @dynamo-foundation got like, did some one know how to fix ?
Thanks very much
@alwsyoung You have to open the server in your archive console, if you put this: python -m http.server
Then you go to chrome, firefox... etc and search localhost:8000
Its like emulate the web conection, if you think that, you are trying to conect metamask with nothing.
It does not work! i can't connect metamask, nothing happends
my task is when we click on metamask wallet button metamask extention will open ...
i am fresher i dont know how to do it please help me
This is grate intro , but unsecured as hell... I just create extension that creates window. , not taking that data are added to windows params , but they are requested over script received over body (unclean playground to test it out : https://gist.github.com/shivergard/a9c0c0d18303e9b304876ded604f77f8)
is there are any secure sample around ?
hey @qkrrkgus14 it looks like this code handles logout when a metamask user disconnects. Then the button could be pressed again and they'll be prompted to connect to the server again. It actually handles a logout in a pretty robust way.
There are some great html eth donation tutorials involving metamask. Almost everything ethereum can do with your browser is going to happen in js or some other functional languages. HTML and react just organize how transactions and accounts and other metadata is displayed. You cannot send eth with html but I agree that using html as the home for a transactions is a simple and straightforward place to learn