Web3Auth는 dApp이나 지갑에 연결되는 지갑 인프라입니다. 웹3.0 지갑과 애플리케이션에 접속 가능한 인증 인프라 역할을 합니다. Web3Auth의 뛰어난 사용자 편의성을 통해 주류 사용자 및 암호화폐 네이티브 모두를 단 몇 분 만에 온보딩할 수 있습니다.
지갑 인프라로서 Web3Auth는 모든 소셜 로그인, 웹 및 모바일 네이티브 플랫폼, 지갑 및 기타 키 관리 기능을 기본으로 지원합니다. 본 가이드를 통해 여러분은 클레이튼 네트워크에 구축된 탈중앙화 웹 애플리케이션에 Web3Auth를 통합할 수 있게 됩니다. 이 외 다른 플랫폼(Android, iOS, React Native, Flutter, Unity)에 Web3Auth를 통합하려면 이 가이드를 참조하세요.
dApp에서 Web3Auth를 사용하려면 먼저 필요한 라이브러리와 SDK를 설치해야 합니다. 따라서 ethers.js와 Web3Auth 웹 SDK를 설정해야 합니다. Web3Auth를 ethers.js 또는 web3.js 라이브러리와 함께 사용하여 Klaytn 블록체인과 통신할 수 있습니다. 본 가이드에서는 ethers.js를 사용하도록 하겠습니다.
Web3Auth 인스턴스에서 connect() 메서드를 호출하여 지갑을 성공적으로 연결했다면 공급자(provider) 및 서명자(signer) 객체를 사용하여 사용자 계정과 잔액을 가져올 수 있습니다.
const [web3auth,setWeb3auth] =useState(null);const [provider,setProvider] =useState(null);const [address,setAddress] =useState("");const [balance,setBalance] =useState("");constconnectWallet=async() => {if (!web3auth) {console.log("web3auth not initialized yet");return; }constweb3authProvider=awaitweb3auth.connect();setProvider(web3authProvider);// this guide uses ethers version 6.3.0.constethersProvider=newethers.BrowserProvider(web3authProvider);// for ethers version below 6.3.0.// const provider = new ethers.providers.Web3Provider(web3authProvider);constethersProvider=newethers.BrowserProvider(web3authProvider);constsigner=awaitethersProvider.getSigner();// Get user's Ethereum public addressconstaddress=signer.address;// Get user's balance in etherconstbalance=ethers.formatEther(awaitethersProvider.getBalance(address) // balance is in wei );setAddress(address);setBalance(balance);return ( <divclassName="App"> <buttononClick={connectWallet}>Connect Wallet</button> <div>Wallet Address: ${truncateAddress(address)} Balance: ${balance}</div> </div> );}
지갑 연결 해제하기
지갑 연결을 끊으려면 Web3Auth 인스턴스에서 logout() 메서드를 사용하면 됩니다. 또한 상태 새로고침을 하여 이전에 저장된 연결 데이터를 모두 지우는 것도 좋은 방법 중 하나입니다.
functionApp() {constdisconnect=async () => {if (!web3auth) {console.log("web3auth not initialized yet");return; }awaitweb3auth.logout();refreshState();}// refresh stateconstrefreshState= () => {setAddress();setBalance();// make sure to add every other useState modifier function declared here.}return ( <divclassName="App"> <buttononClick={disconnect}>Disconnect</button> </div> );}
체인 전환하기
Web3Auth를 사용하여 체인을 전환하려면 먼저 addChain() 메서드를 호출하여 연결된 어댑터에 원하는 체인 구성을 추가한 다음 switchChain() 메서드를 호출해야 합니다.
Web3Auth의 고유한 기능 중 하나는 소셜 로그인입니다. 사용자가 소셜 플랫폼을 사용하여 로그인하면 Web3Auth 인스턴스는 로그인한 사용자에 대한 몇 가지 정보를 반환합니다. 로그인한 사용자 정보를 가져오는 방법은 Web3Auth 인스턴스에서 getUserInfo() 메서드를 호출하는 것만큼 간단합니다.
// add to the existing useState hook.const [userData,setUserData] =useState({});constgetUserInfo=async () => {if (!web3auth) {console.log("web3auth not initialized yet");return; }constuser=awaitweb3auth.getUserInfo();setUserData(user);};return ( <divclassName="App"> <buttononClick={getUserInfo}>Get User Info</button> <div> { userData ?`User Email: ${userData.email}, User Name: ${userData.name}`:""} </div> </div> );
메시지 서명하기
공급자(Provider) 및 서명자(Signer) 객체를 초기화하면 사용자는 임의의 문자열에 서명할 수 있습니다.
// add to the existing useState hook.const [signedMessage,setSignedMessage] =useState("");constsignMessage=async(e) => {e.preventDefault();if (!provider) {console.log("provider not initialized yet");return; }// this guide uses ethers version 6.3.0.constethersProvider=newethers.BrowserProvider(provider);// for ethers version below 6.3.0.// const provider = new ethers.providers.Web3Provider(provider);constsigner=awaitethersProvider.getSigner();constoriginalMessage=e.target.message.value;constresult=awaitsigner.signMessage(originalMessage);setSignedMessage(result) }return ( <divclassName="App"> <formonSubmit={signMessage}> <inputtype="text"name="message"placeholder="Set message"required/> <inputtype="submit"value="Sign Message"/> </form> <div>SignedMessage: ${signedMessage}</div> </div> );
네이티브 트랜잭션 보내기
한 사용자에서 다른 사용자로 KLAY를 보내는 것과 같은 네이티브 트랜잭션을 수행할 수 있습니다.
// add to the existing useState hook.const [txHash,setTxHash] =useState();constsendKlay=async () => {if (!provider) {console.log("provider not initialized yet");return; }constdestination="paste recipient address";// this guide uses ethers version 6.3.0.constethersProvider=newethers.BrowserProvider(provider);// for ethers version below 6.3.0.// const provider = new ethers.providers.Web3Provider(provider);constsigner=awaitethersProvider.getSigner();// Submit transaction to the blockchain and wait for it to be minedconsttx=awaitsigner.sendTransaction({ to: destination, value:ethers.parseEther("0.1"), maxPriorityFeePerGas:"5000000000",// Max priority fee per gas maxFeePerGas:"6000000000000",// Max fee per gas })constreceipt=awaittx.wait();setTxHash(receipt.hash)}return ( <divclassName="App"> <buttononClick={sendKlay}>Send Klay</button> <div>Send-Klay Tx Hash : {txHash ? <a href={`https://baobab.scope.klaytn.com/tx/${txHash}`} target="_blank">Klaytnscope</a> : ' ' } </div>
</div>);
스마트 컨트랙트로 작업하기
컨트랙트 배포하기
애플리케이션 바이너리 인터페이스(ABI)와 컨트랙트 바이트 코드가 주어지면 스마트 컨트랙트를 배포할 수 있습니다.
// add to the existing useState hook.const [contractAddress,setContractAddress] =useState(null);constdeployContract=async () => {if (!provider) {console.log("provider not initialized yet");return; }// this guide uses ethers version 6.3.0.constethersProvider=newethers.BrowserProvider(provider);// for ethers version below 6.3.0.// const provider = new ethers.providers.Web3Provider(provider);constsigner=awaitethersProvider.getSigner();// paste your contractABIconstcontractABI= [ {"inputs": [ {"internalType":"uint256","name":"_initNum","type":"uint256" } ],"stateMutability":"nonpayable","type":"constructor" }, {"inputs": [],"name":"retrieve","outputs": [ {"internalType":"uint256","name":"","type":"uint256" } ],"stateMutability":"view","type":"function" }, {"inputs": [ {"internalType":"uint256","name":"num","type":"uint256" } ],"name":"store","outputs": [],"stateMutability":"nonpayable","type":"function" } ]// Paste your contract byte code const contractBytecode = '608060405234801561001057600080fd5b506040516102063803806102068339818101604052810190610032919061007a565b80600081905550506100a7565b600080fd5b6000819050919050565b61005781610044565b811461006257600080fd5b50565b6000815190506100748161004e565b92915050565b6000602082840312156100905761008f61003f565b5b600061009e84828501610065565b91505092915050565b610150806100b66000396000f3fe608060405234801561001057600080fd5b50600436106100365760003560e01c80632e64cec11461003b5780636057361d14610059575b600080fd5b610043610075565b60405161005091906100a1565b60405180910390f35b610073600480360381019061006e91906100ed565b61007e565b005b60008054905090565b8060008190555050565b6000819050919050565b61009b81610088565b82525050565b60006020820190506100b66000830184610092565b92915050565b600080fd5b6100ca81610088565b81146100d557600080fd5b50565b6000813590506100e7816100c1565b92915050565b600060208284031215610103576101026100bc565b5b6000610111848285016100d8565b9150509291505056fea26469706673582212200370e757ac1c15a024febfa9bf6999504ac6616672ad66bd654e87765f74813e64736f6c63430008120033'
constcontractFactory=newContractFactory(contractABI, contractBytecode, signer);constcontract=awaitcontractFactory.deploy(400);// get contract addresssetContractAddress(contract.target)}return ( <divclassName="App"> <buttononClick={deployContract}>Deploy Contract</button> <div>Contract Address: {contractAddress ? contractAddress :''} </div> </div> );
Web3Auth 공급자 및 서명자 객체를 사용하면 블록체인에 배포된 스마트 컨트랙트에 쓰기 및 읽기와 같은 컨트랙트 상호 작용을 할 수 있습니다.
컨트랙트 작성하기
// add to existing useState hookconst [contractTx,setContractTx] =useState();constwriteToContract=async (e) => {e.preventDefault();if (!provider) {console.log("provider not initialized yet");return; }// this guide uses ethers version 6.3.0.constethersProvider=newethers.BrowserProvider(provider);// for ethers version below 6.3.0.// const provider = new ethers.providers.Web3Provider(provider);constsigner=awaitethersProvider.getSigner();// Paste your contractABIconstcontractABI= [ {"inputs": [ {"internalType":"uint256","name":"_initNum","type":"uint256" } ],"stateMutability":"nonpayable","type":"constructor" }, {"inputs": [],"name":"retrieve","outputs": [ {"internalType":"uint256","name":"","type":"uint256" } ],"stateMutability":"view","type":"function" }, {"inputs": [ {"internalType":"uint256","name":"num","type":"uint256" } ],"name":"store","outputs": [],"stateMutability":"nonpayable","type":"function" } ]// Paste your contract addressconstcontractAddress="0x3b01E4025B428fFad9481a500BAc36396719092C";constcontract=newethers.Contract(contractAddress, contractABI, signer);constvalue=e.target.store_value.value;// Send a transaction to smart contract to update the valueconsttx=awaitcontract.store(value);// Wait for the transaction to finishconstreceipt=awaittx.wait();constresult=receipt.hash;setContractTx(result) }return ( <divclassName="App"> <formonSubmit={writeToContract}> <inputname="store_value"placeholder="Set contract value"required/> <inputtype="submit"value="Store"/> </form> <div>Write-to-contract Tx Hash: ${contractTx}</div> </div>);
컨트랙트 읽기
// add to existing useState hookconst [contractMessage,setContractMessage] =useState();constreadFromContract=async () => {if (!provider) {console.log("provider not initialized yet");return; }// this guide uses ethers version 6.3.0.constethersProvider=newethers.BrowserProvider(provider);// for ethers version below 6.3.0.// const provider = new ethers.providers.Web3Provider(provider);// paste your contract ABIconstcontractABI= [ {"inputs": [ {"internalType":"uint256","name":"_initNum","type":"uint256" } ],"stateMutability":"nonpayable","type":"constructor" }, {"inputs": [],"name":"retrieve","outputs": [ {"internalType":"uint256","name":"","type":"uint256" } ],"stateMutability":"view","type":"function" }, {"inputs": [ {"internalType":"uint256","name":"num","type":"uint256" } ],"name":"store","outputs": [],"stateMutability":"nonpayable","type":"function" } ]// paste your contract addressconstcontractAddress="0x3b01E4025B428fFad9481a500BAc36396719092C"; constcontract=newethers.Contract(contractAddress, contractABI, ethersProvider)// Reading a message from the smart contractconstcontractMessage=awaitcontract.retrieve();setContractMessage(contractMessage.toString()) }return ( <buttononClick={readFromContract}>Read From Contract</button> <div>Read-from-contract Message: ${contractMessage}</div> )
문제 해결
Polyfill node core module error
BREAKING CHANGES: webpack<5 used to include polyfills for node.js core modules by default.
이 오류는 Webpack 5 버전을 사용할 때 발생합니다. 이 버전에서는 NodeJS 폴리필이 더 이상 기본적으로 지원되지 않습니다. 이 문제를 해결하려면 해당 가이드를 참조하세요.