Integration af wallets
Implementér logik til walletforbindelser, så brugere kan forbinde deres MetaMask eller andre wallets med Deres DApp for at signere transaktioner.
Integration af wallets er en gratis Grundlæggende udvikling af Web3- og DApp-programmer-lektion på CoddyKit. Dette er lektion 2 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Grundlæggende udvikling af Web3- og DApp-programmer, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Grundlæggende udvikling af Web3- og DApp-programmer-kurset indeholder 3 lektioner i alt.
Porten til Web3
Decentraliserede applikationer (DApps) skal give brugerne mulighed for at interagere med blockchainen. Wallets som MetaMask fungerer som denne vigtige bro, idet de håndterer kryptografiske nøgler sikkert og signerer transaktioner.
Når du forbinder en wallet, kan din DApp:
- Læse brugerens blockchain-adresse.
- Anmode brugeren om godkendelse af transaktioner.
- Interagere med smartkontrakter på brugerens vegne.
Din DApps blockchain-grænseflade
Når en Web3-wallet (f.eks. MetaMask) er installeret i brugerens browser, indsætter den et særligt objekt i browserens JavaScript-miljø: window.ethereum.
Dette window.ethereum-objekt er din DApps primære grænseflade til kommunikation med blockchainen og brugerens wallet. Det leverer en API til at sende forespørgsler og lytte efter hændelser.
Findes der en wallet?
Før din DApp forsøger at oprette forbindelse, bør den altid kontrollere, om window.ethereum findes. Hvis det ikke findes, har brugeren sandsynligvis ikke installeret en Web3-wallet, eller også er den ikke aktiveret.
Du kan derefter bede brugeren om at installere en, som regel MetaMask, der er den mest udbredte.
if (window.ethereum) {
console.log("MetaMask detected!");
} else {
console.log("Please install MetaMask to use this DApp.");
}Anmodning om tilladelse til forbindelse
For at hente brugerens blockchain-adresse og aktivere signering af transaktioner skal din DApp udtrykkeligt anmode om adgang. Det gør du ved at bruge metoden eth_requestAccounts via objektet window.ethereum.
Denne handling åbner et pop op-vindue i brugerens wallet, hvor brugeren bliver bedt om at godkende forbindelsen. Hvis brugeren godkender, returneres et array med kontoadresser, typisk kun én.
Oprettelse af en forbindelsesfunktion
Lad os oprette en enkel JavaScript-funktion til at forbinde brugerens wallet. Denne kode forudsætter, at den kører i et browsermiljø, hvor window.ethereum muligvis er tilgængeligt.
async function connectWallet() {
if (window.ethereum) {
try {
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
console.log('Connected account:', accounts[0]);
alert(`Wallet connected! Account: ${accounts[0]}`);
return accounts[0];
} catch (error) {
if (error.code === 4001) {
console.log('User rejected connection.');
alert('Connection rejected by user.');
} else {
console.error('Connection error:', error);
}
}
} else {
console.log('MetaMask not detected. Please install it!');
alert('MetaMask not detected. Please install it to use this DApp.');
}
return null;
}
// In a real DApp, you'd call this function, e.g., on a button click:
// connectWallet(); // Uncomment to try connecting immediatelyVisning af den tilsluttede konto
Når brugeren har oprettet forbindelse til sin wallet, returnerer metoden eth_requestAccounts et array med brugerens tilsluttede konti. Den første konto, accounts[0], er typisk den adresse, brugeren har valgt.
Det er god praksis at vise denne adresse i din DApps brugergrænseflade for at bekræfte forbindelsen over for brugeren. Du kan også hente den aktuelt valgte adresse ved hjælp af window.ethereum.selectedAddress, efter at der er oprettet forbindelse.
Hold dig opdateret: Kontoændringer
Brugere kan når som helst skifte tilsluttet konto, skifte netværk eller endda frakoble deres wallet. Din DApp skal reagere på disse ændringer for at bevare en ensartet tilstand og give en god brugeroplevelse.
Objektet window.ethereum udsender hændelser i disse situationer. Hændelsen accountsChanged er afgørende for at registrere, når brugeren skifter konto eller frakobler sin wallet.
Reaktion på kontohændelser
Her kan du se, hvordan du opsætter en hændelseslytter, der opdaterer din DApp, når brugeren ændrer sin aktive konto i MetaMask. Denne kode køres typisk, efter at din DApp er blevet initialiseret.
if (window.ethereum) {
window.ethereum.on('accountsChanged', (accounts) => {
if (accounts.length === 0) {
console.log('User disconnected all accounts.');
alert('Wallet disconnected!');
// Update UI to 'Not Connected' or prompt to connect
} else {
console.log('Switched account to:', accounts[0]);
alert(`Account changed to: ${accounts[0]}`);
// Update UI with new account address
}
});
console.log("Listening for 'accountsChanged' events.");
} else {
console.log("MetaMask not detected, cannot listen for account changes.");
}Tilpasning til netværksændringer
DApps fungerer ofte på bestemte blockchain-netværk (f.eks. Ethereum Mainnet og Sepolia Testnet). Brugere kan skifte netværk via deres wallets grænseflade.
Din DApp bør lytte efter hændelsen chainChanged for at reagere på disse netværksskift. Hvis brugeren skifter til et netværk, der ikke understøttes, kan du bede brugeren om at skifte tilbage eller deaktivere DApp-funktionaliteten, indtil det sker.
Tip til robust wallet-integration
Overvej følgende bedste praksis, når du bygger en robust og brugervenlig DApp:
- Bed om installation: Hvis
window.ethereummangler, skal du give brugerne et tydeligt link til at installere MetaMask. - Feedback til brugeren: Vis altid indlæsningsstatus eller forbindelsesstatus i din brugergrænseflade.
- Fejlhåndtering: Fang fejl fra
eth_requestAccounts, især når brugeren afviser (error.code === 4001). - Opret forbindelse igen ved indlæsning: Overvej at kontrollere
ethereum.selectedAddress, når siden indlæses, så forbindelsen automatisk kan genoprettes, hvis brugeren tidligere har givet tilladelse.
Hurtig kontrol: Wallet-forbindelse
Når du bygger en DApp, er interaktion med brugerens wallet grundlæggende. Overvej de første trin, en DApp skal udføre for at oprette forbindelse til brugerens MetaMask-wallet.
Opsummering: Integration af wallets
I denne lektion lærte du, hvordan du integrerer en Web3-wallet som MetaMask i din DApp. Vi gennemgik, hvordan du kontrollerer, om objektet window.ethereum findes, anmoder om kontoadgang med eth_requestAccounts og håndterer vigtige hændelser som accountsChanged.
Det er afgørende at mestre wallet-integration, når du bygger interaktive og funktionelle decentraliserede applikationer, fordi det giver brugerne mulighed for at forbinde deres identitet og signere transaktioner på blockchainen.
Lær Grundlæggende udvikling af Web3- og DApp-programmer med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 29
- Lektioner
- 105
Ofte stillede spørgsmål
Er lektionen “Integration af wallets” gratis?
Ja — alle 3 lektioner i læringssporet Grundlæggende udvikling af Web3- og DApp-programmer, inklusive “Integration af wallets”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Grundlæggende udvikling af Web3- og DApp-programmer-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Integration af wallets”?
Implementér logik til walletforbindelser, så brugere kan forbinde deres MetaMask eller andre wallets med Deres DApp for at signere transaktioner. Du øver dig i Grundlæggende udvikling af Web3- og DApp-programmer med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Grundlæggende udvikling af Web3- og DApp-programmer?
Der kræves ingen tidligere erfaring. Grundlæggende udvikling af Web3- og DApp-programmer på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 3.
Hvor lang tid tager lektionen “Integration af wallets”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Grundlæggende udvikling af Web3- og DApp-programmer-lektion?
Ja. Alle Grundlæggende udvikling af Web3- og DApp-programmer-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- React- og Web3-frameworks
- Integration af wallets
- Håndtering af transaktioner og events