MetaMask-API – Erstellen Sie eine Web-App-Benutzerregistrierung und -Anmeldung
In diesem Artikel wird kurz erläutert, wie Sie neuen Benutzern ermöglichen, sich mithilfe der Metamask-API für ein Konto in Ihrer Web-App anzumelden.
Das Kryptowährungs-Wallet ist der wichtigste Kontaktpunkt, der Interessenten und Kunden in der Web3-App verbindet. Darüber hinaus handelt es sich um einen trendigen, modischen Ansatz, um neue Anmeldungen anzusprechen und mehr Verkäufe zu erzielen.
In diesem Artikel möchte ich kurz erläutern, wie Sie es neuen Benutzern ermöglichen, sich mithilfe der Metamask-API für ein Konto in Ihrer Web-App anzumelden. Am Ende dieses Artikels können sich Ihre Besucher mit der MetaMask-Wallet anmelden und Sie können die Benutzer mithilfe des öffentlichen Schlüssels der Wallet identifizieren.
Inhaltsverzeichnis: Web-App-Registrierung neuer Benutzer, Anmeldung mit Metamask API, Javascript
- MetaMask-Javascript-Code im Frontend
- Flask-Routencode im Backend zum Speichern des öffentlichen Schlüssels
- Vollständiges Javascript- und Python-Skript des Benutzerregistrierungs- und Anmeldesystems
MetaMask-Javascript-Code im Frontend
Als Erstes müssen Entwickler das Ethereum-Provider-Detektor-Skript zwischen den Header einfügen
< script src = "https://cdn.jsdelivr.net/npm/@metamask/detect-provider" ></ script >
Dann müssen wir ein Javascript schreiben, um die Zugriffsanforderung für das Metamask-Konto auszulösen, wenn der Benutzer auf die Schaltfläche „Registrieren“ oder „Anmelden“ klickt.
< section >
< form action = "/login" method = "GET" onsubmit = " return false ;" >
< button id = "connect-button" type = "button" > Connect with MetaMask </ button >
</ form >
</ section >
< script >
const connectButton = document . querySelector ( '#connect-button' );
In diesem Fall gibt es zwei Szenarien. Die MetaMask-Erweiterung wurde im Browser installiert oder nicht. Daher müssen wir in diesem Klickereignis eine if-Bedingung hinzufügen.
connectButton . addEventListener ( 'click' , async () => {
// Check if MetaMask is installed
if ( typeof window . ethereum === 'undefined' ) {
alert ( 'Please install MetaMask to continue.' );
Return ;
}
Im nächsten Schritt müssen wir MetaMask aufrufen und die Kontoadresse abrufen, um eine neue Benutzer-ID in einer Datenbank zu erstellen oder zu identifizieren, wenn sich der Benutzer anmeldet.
const accounts = await window . ethereum . request ({ method: 'eth_requestAccounts' });
const metamaskAddress = accounts [ 0 ];
Zu guter Letzt senden wir den öffentlichen Schlüssel des Kontos an die Web-App-Datenbank. Da MetaMask den Parameter args.get verwendet. Hier ist also das Codebeispiel wie folgt:
window . location . href = '/login?metamask_address=' + metamaskAddress ;
} catch ( error ) {
console . error ( error );
Flask-Routencode im Backend zum Speichern des öffentlichen Schlüssels
Sobald der Benutzer die Verbindung mit Ihrer Web-App bestätigt, antwortet sein öffentlicher Wallet-Schlüssel an Ihren App-Server. Hier ist das Codebeispiel zum Erfassen des Schlüssels für die Benutzerauthentifizierung von nun an.
@ app .route ( '/login' , methods =[ 'GET' , 'POST' ])
def login ():
metamask_address = request . args . get ( 'metamask_address' )
return render_template ( 'masklogin.html' , metamask_address = metamask_address )
Bezüglich der Einrichtung der neuen Benutzerdatenbank gibt es hier zwei Artikel, in denen einer ausführlicher auf die Verwendung von SQL eingeht und der andere MongoDB erklärt. Weitere Einzelheiten finden Sie hier.
https://www.easy2digital.com/automation/data/python-tutorial-66-flask-application-database-using-mongodb-atlas-and-python-to-better-big-data-management/
Vollständiges Javascript- und Python-Skript des Benutzerregistrierungs- und Anmeldesystems
Wenn Sie sich für das Web3.0-Tutorial 9 – MetaMask API – Erstellen einer Web-App-Benutzeranmeldung und -Anmeldung interessieren,MetaMask API – Erstellen einer Web-App-Benutzeranmeldung und -Anmeldung, Bitte abonnieren Sie unseren Newsletter , indem Sie die Nachricht „Web3.0 Tutorial 9“ hinzufügen. . Wir senden Ihnen das Skript umgehend in Ihr Postfach.
Ich wünsche Ihnen viel Spaß beim Lesen des Web3.0-Tutorials 8 – Erstellung von Kryptowährungs-Zahlungsmethoden mit Infura, Metamask und Web3. Wenn ja, unterstützen Sie uns bitte, indem Sie eine der unten aufgeführten Maßnahmen ergreifen, da dies unserem Kanal immer weiterhilft.
- Unterstützen Sie meinen Kanal und spenden Sie über PayPal ( paypal.me/Easy2digital )
- Abonnieren Sie meinen Kanal und aktivieren Sie die Benachrichtigungsglocke des Easy2Digital-Youtube-Kanals .
- Folgen und liken Sie meine Easy2Digital-Facebook-Seite
- Teilen Sie den Artikel in Ihrem sozialen Netzwerk mit dem Hashtag #easy2digital
- Sie melden sich für unseren wöchentlichen Newsletter an, um die neuesten Artikel, Videos und Rabattcodes von Easy2Digital zu erhalten
- Abonnieren Sie unsere monatliche Mitgliedschaft über Patreon, um exklusive Vorteile zu genießen ( www.patreon.com/louisludigital )
