Interaktion mit Moonbeam über MetaMask
Einführung
Entwickler können die Ethereum-Kompatibilitätsfunktionen von Moonbeam nutzen, um Tools wie MetaMask in ihre DApps zu integrieren. Auf diese Weise können sie die injizierte Bibliothek, die MetaMask bereitstellt, zur Interaktion mit der Blockchain nutzen.
Derzeit kann MetaMask so konfiguriert werden, dass es sich mit zwei Netzwerken verbindet: einem Moonbeam-Entwicklungsknoten oder dem Moonbase Alpha TestNet.
Wenn Sie MetaMask bereits installiert haben, können Sie MetaMask einfach mit dem Moonbase Alpha TestNet verbinden:
Hinweis
MetaMask wird ein Popup-Fenster anzeigen, in dem Sie um die Erlaubnis gebeten werden, Moonbase Alpha als benutzerdefiniertes Netzwerk hinzuzufügen. Sobald Sie die Berechtigungen genehmigen, wird MetaMask Ihr aktuelles Netzwerk zu Moonbase Alpha wechseln.
Erfahren Sie, wie Sie einen “Connect MetaMask”-Button in Ihre Dapp integrieren, so dass sich Benutzer mit einem einfachen Klick auf einen Button mit Moonbase Alpha verbinden können.
MetaMask mit Moonbeam verbinden
Sobald Sie MetaMask installiert haben, können Sie es mit Moonbeam verbinden, indem Sie auf das Logo oben rechts klicken und die Einstellungen öffnen.
Navigieren Sie anschließend zur Registerkarte Netzwerke und klicken Sie auf die Schaltfläche “Netzwerk hinzufügen”.
Navigieren Sie anschließend zur Registerkarte Netzwerke und klicken Sie auf die Schaltfläche “Netzwerk hinzufügen”.
Schritt-für-Schritt-Tutorials
Für den Fall, dass Sie an detaillierteren, schrittweisen Anleitungen zur Konfiguration von MetaMask auf Moonbeam interessiert sind, können Sie zu unseren spezifischen Tutorials gehen:
- MetaMask auf einem Moonbeam-Entwicklungsknoten
- MetaMask auf einer Moonbase Alpha
MetaMask in eine DApp einbinden
Mit der Veröffentlichung von MetaMask’s Custom Networks API, können Benutzer aufgefordert werden, Moonbeams Testnet, Moonbase Alpha, hinzuzufügen.
Dieser Abschnitt wird Sie durch den Prozess des Hinzufügens eines “Connect to Moonbase Alpha”-Buttons führen, der die Benutzer auffordert, ihre MetaMask-Accounts mit Moonbase Alpha zu verbinden. Ihre Benutzer müssen sich nicht mehr um die Netzwerkkonfigurationen von Moonbase Alpha und das Hinzufügen eines benutzerdefinierten Netzwerks zu MetaMask kümmern. Um von Ihrer dApp aus mit Moonbeam zu interagieren, müssen die Nutzer nur noch auf ein paar Schaltflächen klicken, um sich mit Moonbase Alpha zu verbinden und loszulegen.
MetaMask injiziert eine globale Ethereum-API in Webseiten, die Benutzer unter window.ethereum besuchen, was den Webseiten erlaubt, die Blockchain-Daten der Benutzer zu lesen und abzufragen. Sie werden den Ethereum-Anbieter verwenden, um Ihre Benutzer durch den Prozess des Hinzufügens von Moonbase Alpha als benutzerdefiniertes Netzwerk zu führen. Im Allgemeinen müssen Sie Folgendes tun:
- Prüfen, ob der Ethereum-Provider existiert und ob er MetaMask ist
- Die Account-Adresse des Benutzers anfordern
- Moonbase Alpha als neue Kette hinzufügen
Diese Anleitung ist in zwei Abschnitte unterteilt. Im ersten Teil wird das Hinzufügen eines Buttons behandelt, mit dem MetaMask ausgelöst wird, um sich mit Moonbase Alpha zu verbinden. Im zweiten Teil der Anleitung wird die Logik für die Verbindung des Benutzers mit MetaMask erstellt. Auf diese Weise können Sie, wenn Sie auf die Schaltfläche klicken, die Funktionalität tatsächlich testen, während Sie durch die Anleitung gehen.
Überprüfen der Voraussetzungen
Um die Schaltfläche “Connect MetaMask” hinzuzufügen, benötigen Sie ein JavaScript-Projekt und die MetaMask-Browsererweiterung, die zum lokalen Testen installiert ist.
Es wird empfohlen, das Paket detect-provider von MetaMask zu verwenden, um den in window.ethereum injizierten Provider zu erkennen. Das Paket übernimmt die Erkennung des Providers für die MetaMask-Erweiterung und MetaMask Mobile. Um das Paket in Ihrem JavaScript-Projekt zu installieren, führen Sie aus:
npm install @metamask/detect-provider
Hinzufügen einer Schaltfläche
Sie beginnen mit dem Hinzufügen einer Schaltfläche, die zur Verbindung von MetaMask mit der Moonbase Alpha verwendet wird. Sie möchten mit der Schaltfläche beginnen, damit Sie beim Erstellen der Logik im nächsten Schritt den Code testen können, während Sie sich durch die Anleitung arbeiten.
Die Funktion, die wir im nächsten Abschnitt der Anleitung erstellen, wird configureMoonbaseAlpha heißen. Die Schaltfläche sollte also bei einem Klick configureMoonbaseAlpha aufrufen.
<button onClick={configureMoonbaseAlpha()}>Connect to Moonbase Alpha</button>
Logik hinzufügen
Nun, da Sie die Schaltfläche erstellt haben, müssen Sie die Funktion configureMoonbaseAlpha hinzufügen, die beim Klicken verwendet wird.
Ermitteln Sie den Provider in window.ethereum und prüfen Sie, ob es sich um MetaMask handelt. Wenn Sie eine einfache Lösung wünschen, können Sie direkt auf window.ethereum zugreifen. Oder Sie können das Paket detect-provider von MetaMask verwenden, das den Anbieter für MetaMask Extension und MetaMask Mobile für Sie erkennt.
import detectEthereumProvider from ‘@metamask/detect-provider’;
const configureMoonbaseAlpha = async () => {
const provider = await detectEthereumProvider({ mustBeMetaMask: true });
if (provider) {
// Logic will go here
} else {
console.error(“Please install MetaMask”);
}
}
Fordern Sie die Konten des Benutzers an, indem Sie die Methode eth_requestAccounts aufrufen. Dadurch wird MetaMask eingeblendet und der Benutzer wird aufgefordert, die Konten auszuwählen, mit denen er sich verbinden möchte. Hinter den Kulissen werden die Berechtigungen durch den Aufruf von wallet_requestPermissions überprüft. Derzeit sind die einzigen Berechtigungen für eth_accounts. Sie überprüfen also letztlich, ob Sie Zugriff auf die Adressen des Benutzers haben, die von eth_accounts zurückgegeben werden. Wenn Sie mehr über das Berechtigungssystem erfahren möchten, lesen Sie EIP-2255.
import detectEthereumProvider from ‘@metamask/detect-provider’;
const configureMoonbaseAlpha = async () => {
const provider = await detectEthereumProvider({ mustBeMetaMask: true });
if (provider) {
try {
await provider.request({ method: “eth_requestAccounts”});
} catch(e) {
console.error(e);
}
} else {
console.error(“Please install MetaMask”);
}
}
Fügen Sie Moonbase Alpha als eine neue Kette hinzu, indem Sie wallet_addEthereumChain aufrufen. Dadurch wird der Benutzer aufgefordert, die Erlaubnis zu erteilen, Moonbase Alpha als benutzerdefiniertes Netzwerk hinzuzufügen.
import detectEthereumProvider from ‘@metamask/detect-provider’;
const configureMoonbaseAlpha = async () => {
const provider = await detectEthereumProvider({ mustBeMetaMask: true });
if (provider) {
try {
await provider.request({ method: “eth_requestAccounts”});
await provider.request({
method: “wallet_addEthereumChain”,
params: [
{
chainId: “0x507”, // Moonbase Alpha’s chainId is 1287, which is 0x507 in hex
chainName: “Moonbase Alpha”,
nativeCurrency: {
name: ‘DEV’,
symbol: ‘DEV’,
decimals: 18
},
rpcUrls: [“https://rpc.testnet.moonbeam.network"],
blockExplorerUrls: [“https://moonbase-blockscout.testnet.moonbeam.network/"]
},
]
})
} catch(e) {
console.error(e);
}
} else {
console.error(“Please install MetaMask”);
}
}
Nach erfolgreichem Hinzufügen des Netzwerks wird der Benutzer außerdem aufgefordert, anschließend zur Moonbase Alpha zu wechseln.
Jetzt sollten Sie also eine Schaltfläche haben, die, wenn Sie darauf klicken, die Benutzer durch den gesamten Prozess der Verbindung ihrer MetaMask-Konten mit Moonbase Alpha führt.
Bestätigen der Verbindung
Es ist möglich, dass Sie eine Logik haben, die sich darauf verlässt, dass Sie wissen, ob ein Benutzer mit der Moonbase Alpha verbunden ist oder nicht. Vielleicht möchten Sie die Schaltfläche deaktivieren, wenn der Benutzer bereits verbunden ist. Um zu bestätigen, dass ein Benutzer mit der Moonbase Alpha verbunden ist, können Sie eth_chainId aufrufen, das die aktuelle Ketten-ID des Benutzers zurückgibt:
const chainId = await provider.request({
method: ‘eth_chainId’
})
// Moonbase Alpha’s chainId is 1287, which is 0x507 in hex
if (chainId === “0x507”){
// At this point, you might want to disable the “Connect” button
// or inform the user that they are already connected to the
// Moonbase Alpha testnet
}
Auf Kontoänderungen hören
Um sicherzustellen, dass Ihr Projekt oder Ihre dApp mit den neuesten Kontoinformationen auf dem Laufenden bleibt, können Sie den Ereignis-Listener accountsChanged hinzufügen, den MetaMask bereitstellt. MetaMask gibt dieses Ereignis aus, wenn sich der Rückgabewert von eth_accounts ändert. Wenn eine Adresse zurückgegeben wird, handelt es sich um das letzte Konto Ihres Benutzers, das Zugriffsrechte gewährt hat. Wenn keine Adresse zurückgegeben wird, bedeutet das, dass der Benutzer keine Konten mit Zugriffsberechtigungen bereitgestellt hat.
provider.on(“accountsChanged”, (accounts) => {
if (accounts.length === 0) {
// MetaMask is locked or the user doesn’t have any connected accounts
console.log(‘Please connect to MetaMask.’);
}
})
Überwachen von Kettenänderungen
Um Ihr Projekt oder Ihre dApp über alle Änderungen an der angeschlossenen Kette auf dem Laufenden zu halten, sollten Sie das Ereignis “chainChanged” abonnieren. MetaMask gibt dieses Ereignis jedes Mal aus, wenn sich die angeschlossene Kette ändert.
provider.on(“chainChanged”, () => {
// MetaMask recommends reloading the page unless you have good reason not to
window.location.reload();
})
MetaMask empfiehlt, die Seite jedes Mal neu zu laden, wenn sich die Kette ändert, es sei denn, es gibt einen guten Grund, dies nicht zu tun, da es wichtig ist, immer mit den Änderungen der Kette synchron zu sein.
Original article: https://docs.moonbeam.network/integrations/wallets/metamask/
