Recuperer une adresse publique metamask et l'injecter en ajax sur Mysql avec php

**laurentvoanh** · 24/08/2022, 03h17

Bonjour,

J'ai un petit script qui se connecte à Metamask à travers la pop up de signature.

Celui ci, une fois Metamask connecté au site m'affiche mon adresse de wallet, coté navigateur client.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Web3 Metamask login
    </title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex w-screen h-screen justify-center items-center">
    <div class = 'flex-col sace-y-2 justify-center items-center'>
    <button id='loginButton' onclick= '' class="rounded-md p-2 bg-purple-500 p-2 text-white">
        Login with Metamask
    </button>
    <p id='userWallet' class='text-lg text-gray-800 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>

Je souhaiterai :

1. Que l'adresse de wallet récupérée s'affiche dans un champ de formulaire caché pour stocker l'adresse.
2. J'ajoute par exemple le "choix de pseudo" dans un champ de formulaire visible.
3. Et j'ajoute le bouton "envoyer", pour stocker en php mysql le pseudo et le wallet.

Comment faire la partie 1.

4. Mais dans l'idéal je voudrais stocker l'adresse de wallet et l'envoyer dirrectement en ajax dans la base de donné.

Est ce possible ?

Bien à vous.

**mathieu** · 24/08/2022, 08h32

l'adresse est dans quelle variable dans ce code ?

**laurentvoanh** · 24/08/2022, 15h10

Je ne sais pas justement ou elle est car je suis novice en javascript, d'ou mon reflexe immédiat de le mettre en variable, je sais qu'avec ce code, l'adresse du wallet s'affiche juste sous le bouton.

Je fais ce projet aussi pour le rendre open source sous le titre : SECURE METAMASK LOGIN AJAX PHP MYSQL, un truc du genre. Car ce qui existe dans le domaine actuellement est trop complexe.

Recuperer une adresse publique metamask et l'injecter en ajax sur Mysql avec php

AJAX

Vue hybride

Discussions similaires

Partager

Partager