本文へスキップ
このページは英語からの機械翻訳を使用しており、誤りや不明瞭な表現が含まれている可能性があります。最も正確な情報については、オリジナルの英語版をご覧ください。頻繁な更新のため、一部のコンテンツはオリジナルの英語になっている可能性があります。Crowdinでの取り組みに参加して、このページの翻訳改善にご協力ください。 (Crowdin translation page, Contributing guide)

Web3AuthをdAppに統合する

はじめに​

Web3Authは、dAppsやウォレットにプラグインされるウォレットインフラストラクチャである。 Web3ウォレットとアプリケーションのためのプラグイン可能な認証インフラストラクチャとして機能します。 Web3Authの優れたユーザーエクスペリエンスにより、メインストリームと暗号化ネイティブの両方が、数分で参加できる可能性がある。 Web3ウォレットとアプリケーションのためのプラグイン可能な認証インフラストラクチャとして機能します。 Web3Authの優れたユーザーエクスペリエンスにより、メインストリームと暗号化ネイティブの両方が、数分で参加できる可能性がある。

ウォレット・インフラストラクチャとして、あらゆるソーシャル・ログイン、ウェブおよびモバイルのネイティブ・プラットフォーム、ウォレット、その他の鍵管理方法をすぐにサポートする。 このガイドが終わる頃には、Web3AuthをKaia Network上に構築された分散型ウェブアプリケーションに統合していることでしょう。 ウォレット・インフラストラクチャとして、あらゆるソーシャル・ログイン、ウェブおよびモバイルのネイティブ・プラットフォーム、ウォレット、その他の鍵管理方法をすぐにサポートする。 このガイドが終わる頃には、Web3AuthをKaia Network上に構築された分散型ウェブアプリケーションに統合していることでしょう。 Web3Authを他のプラットフォーム（Android、iOS、React Native、Flutter、Unity）に統合するには、こちらのガイドを参照してください。

簡単に始めるために、このチュートリアルの完全なコードはGitHubにあります。 レポジトリをクローンするか、ダウンロードすることでフォローすることができる。 レポジトリをクローンするか、ダウンロードすることでフォローすることができる。

前提条件​

インストール​

dAppでWeb3Authを利用するには、まず必要なライブラリとSDKをインストールする必要があります。 したがって、ethers.jsとWeb3Auth Web SDKをセットアップする必要がある。 dAppでWeb3Authを利用するには、まず必要なライブラリとSDKをインストールする必要があります。 したがって、ethers.jsとWeb3Auth Web SDKをセットアップする必要がある。 Web3Authは、ethers.js、web3.js、またはkaia sdkライブラリのいずれかと一緒に使用して、カイアブロックチェーンと通信することができます。 このガイドではethers.jsを使用します。 このガイドではethers.jsを使用します。


npm install --save @web3auth/modal @web3auth/base @web3auth/ethereum-provider @web3auth/default-evm-adapter
npm install --save ethers

Web3Authとプロバイダーインスタンスを初期化する​

必要なライブラリのインストールに成功したら、次は Web3Auth インスタンスを初期化する。Web3Auth provider インスタンスを useState() フックに設定し、init() 関数を useEffect() フックに設定する。

Web3Authとその他の依存パッケージをインポートする。

Reactフック（useStateとuseEffect）とユーティリティ関数をインポートする：

  • useStateと useEffect：状態管理と副作用のための React フック。
  • RPC：ethers.js を使用したイーサリアム互換ブロックチェーンとのインタラクションのための etherRPC.ts からのカスタムユーティリティ関数。

Web3AuthダッシュボードからクライアントIDを貼り付けます。

チェーンコンフィグを設定するWeb3Authを使用するには、選択したチェーン（Kaia）のチェーン設定を行う必要があります。

コンストラクタを使用して Web3Auth を初期化し、Web3Auth のすべての設定を渡します。

UseState() フックに Web3Auth の provider インスタンス、userInfo を設定し、useEffect() フックに init() 関数を設定する。

App.tsx
etherRPC.ts
package.json
vite.config.ts

import {
CHAIN_NAMESPACES,
IProvider,
IAdapter,
WEB3AUTH_NETWORK,
} from '@web3auth/base'
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider'
import { Web3Auth, Web3AuthOptions } from '@web3auth/modal'
import { getDefaultExternalAdapters } from '@web3auth/default-evm-adapter'
import './App.css'
import { useEffect, useState } from 'react'
import RPC from './etherRPC'
const clientId =
'BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ'
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: '0x3e9', // Kairos Testnet
rpcTarget: 'https://public-en-kairos.node.kaia.io',
displayName: 'Kairos Testnet',
blockExplorerUrl: 'https://kairos.kaiascan.io',
ticker: 'KLAY',
tickerName: 'KLAY',
}
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
})
const web3AuthOptions: Web3AuthOptions = {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider,
}
const web3auth = new Web3Auth(web3AuthOptions)
const adapters = await getDefaultExternalAdapters({ options: web3AuthOptions })
adapters.forEach((adapter: IAdapter<unknown>) => {
web3auth.configureAdapter(adapter)
})
interface UserInfo {
email: string;
name: string;
profileImage: string;
[key: string]: unknown;
}
function App() {
const [provider, setProvider] = useState<IProvider | null>(null);
const [loggedIn, setLoggedIn] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(true);
const [address, setAddress] = useState<string>("");
const [balance, setBalance] = useState<string>("");
const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
useEffect(() => {
const init = async () => {
try {
await web3auth.initModal()
setProvider(web3auth.provider)
if (web3auth.connected) {
setLoggedIn(true)
await updateUserInfo()
}
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
init()
}, [])
const updateUserInfo = async () => {
if (web3auth.provider) {
const user = await web3auth.getUserInfo()
// @ts-ignore
setUserInfo(user)
const accounts = await RPC.getAccounts(web3auth.provider)
setAddress(accounts)
const balance = await RPC.getBalance(web3auth.provider)
setBalance(balance)
}
}
}

ウォレットを接続する​

App.tsxファイルのApp関数内で、web3Authインスタンスのconnect()メソッドを呼び出し、ウォレットの接続を開始します。


function App() {
const [provider, setProvider] = (useState < IProvider) | (null > null)
const [loggedIn, setLoggedIn] = useState < boolean > false
const login = async () => {
if (!web3auth) {
console.log('web3auth not initialized yet')
return
}
const web3authProvider = await web3auth.connect()
setProvider(web3authProvider)
if (web3auth.connected) {
setLoggedIn(true)
await updateUserInfo()
}
}
return (
<div className="App">
<button onClick={login}>Login</button>
</div>
)
}

ユーティリティ機能の設定​

このガイドでは、ユーティリティ関数 truncateAddress() を使用します。 truncateAddress()関数は、有効なアドレスを受け取り、渡されたアドレスをより読みやすい形式で返す。 以下のステップは、プロジェクトでutils関数をセットアップして使用する方法を示しています。 truncateAddress()関数は、有効なアドレスを受け取り、渡されたアドレスをより読みやすい形式で返す。 以下のステップは、プロジェクトでutils関数をセットアップして使用する方法を示しています。

ステップ 1：ルートフォルダ src に utils.ts ファイルを作成する。

新しく作成したutils.tsファイルに以下のコードを貼り付ける：


export const truncateAddress = (address) => {
if (!address) return 'No Account'
const match = address.match(
/^(0x[a-zA-Z0-9]{2})[a-zA-Z0-9]+([a-zA-Z0-9]{4})$/
)
if (!match) return address
return `${match[1]}…${match[2]}`
}

ステップ 2：App.tsx`ファイルに関数をインポートします。


import { truncateAddress } from './utils'

アカウントとバランスの取得​

Web3Auth インスタンスで connect() メソッドを呼び出してウォレットとの接続に成功したら、プロバイダと署名者オブジェクトを使用してユーザーアカウントとその残高を取得できます。


function App() {
const [provider, setProvider] = useState<IProvider | null>(null);
const [address, setAddress] = useState<string>("");
const [balance, setBalance] = useState<string>("");
const getAccounts = async () => {
if (!provider) {
console.log('provider not initialized yet')
return
}
const address = await RPC.getAccounts(provider)
setAddress(address)
console.log('Address:', address)
}
const getBalance = async () => {
if (!provider) {
console.log('provider not initialized yet')
return
}
const balance = await RPC.getBalance(provider)
setBalance(balance)
console.log('Balance:', balance)
}
return (
<div className="App">
<div>
<button onClick={getAccounts}>Get Account</button>
<h2>
{' '}
Address: <span>
{' '}
{`${truncateAddress(address)}` || 'Not available'}
</span>
</h2>
</div>
<div>
<button onClick={getBalance}>Get Balance</button>
<h2>
Balance: <span> {balance || 'Not available'}</span>
</h2>
</div>
</div>
)
}

ウォレットの切断​

ウォレットとの接続を解除するには、Web3Auth インスタンスの logout() メソッドを使用します。 また、以前に保存された接続データをクリアするために、ステートをリフレッシュすることも良い習慣のひとつである。 また、以前に保存された接続データをクリアするために、ステートをリフレッシュすることも良い習慣のひとつである。


function App() {
const logout = async () => {
if (!web3auth) {
console.log('web3auth not initialized yet')
return
}
await web3auth.logout()
setProvider(null)
setLoggedIn(false)
setAddress('')
setBalance('')
setUserInfo(null)
console.log('Logged out')
}
return (
<div className="App">
<button onClick={logout}>Logout</button>
</div>
)
}

ユーザー情報の取得​

Web3Authのユニークな機能は、ソーシャルログインである。 ユーザーがソーシャルプラットフォームを使ってログインすると、Web3Authインスタンスはログインしたユーザーに関する情報を返します。 ログインしているユーザー情報を取得するには、Web3Authインスタンスの getUserInfo() メソッドを呼び出すだけです。 ユーザーがソーシャルプラットフォームを使ってログインすると、Web3Authインスタンスはログインしたユーザーに関する情報を返します。 ログインしているユーザー情報を取得するには、Web3Authインスタンスの getUserInfo() メソッドを呼び出すだけです。


const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
const getUserInfo = async () => {
if (!web3auth) {
console.log('web3auth not initialized yet')
return
}
const user = await web3auth.getUserInfo()
// @ts-ignore
setUserInfo(user)
console.log('User Info:', user)
}
return (
<div className="App">
<button onClick={getUserInfo}>Get User Info</button>
<div>
<h2>User Info:</h2>
<pre>
{userInfo ? JSON.stringify(userInfo, null, 2) : 'Not available'}
</pre>
</div>
</div>
)

署名メッセージ​

プロバイダーと署名者オブジェクトを初期化すると、ユーザーは任意の文字列に署名できる。


// add to the existing useState hook.
const [signedMessage, setSignedMessage] = useState<string>("");
const signMessage = async () => {
if (!provider) {
console.log("provider not initialized yet");
return;
}
const originalMessage = "YOUR_MESSAGE";
const signedMessage = await RPC.signMessage(provider, originalMessage);
setSignedMessage(signedMessage);
console.log("Signed Message:", signedMessage);
};
return (
<div className="App">
<button onClick={signMessage}>Sign Message</button>
{signedMessage && (
<div>
<h2 className="text-wrap text-center text-sm font-semibold">
Signed Message: <span className="font-normal">{signedMessage}</span>
</h2>
</div>
)}
</div>
)

ネイティブ・トランザクションの送信​

あるユーザーから別のユーザーへKAIAを送信するなど、ネイティブ・トランザクションを実行できる。


// add to the existing useState hook.
const [txHash, setTxHash] = useState<string>("");
const sendKaiaTx = async () => {
if (!provider) {
console.log("provider not initialized yet");
return;
}
console.log("Sending Transaction...");
const destination = "0x75Bc50a5664657c869Edc0E058d192EeEfD570eb";
const amount = "0.1";
const receipt = await RPC.sendKaiaTx(provider, destination, amount);
setTxHash(receipt.hash);
console.log("Transaction Receipt:", receipt);
};
return (
<div className="App">
<button onClick={sendKaiaTx}>Send Kaia</button>
{txHash && (
<div>
<h2>
Transaction Hash:{' '}
<a
href={`${chainConfig.blockExplorerUrl}/tx/${txHash}`}
target="_blank"
rel="noopener noreferrer"
>
{txHash}
</a>
</h2>
</div>
)}
</div>
)

スマートコントラクトとの連携​

デプロイされたスマートコントラクトは、そのアプリケーション・バイナリ・インターフェース（ABI）とコントラクト・アドレスを指定して対話することができる。 以下のステップは、プロジェクトでコントラクトアドレスとABIを設定し、使用する方法を示しています。 以下のステップは、プロジェクトでコントラクトアドレスとABIを設定し、使用する方法を示しています。

ステップ 1：ルートフォルダ src に constants.ts ファイルを作成する。

新しく作成したconstants.tsファイルに以下のコードを貼り付ける：


export const contractABI = [
{
"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"
}
] as const;
export const contractAddress = "0x3b01E4025B428fFad9481a500BAc36396719092C";

ステップ 2：etherRPC.ts`ファイルにcontractABIとcontractAddressをインポートする。


import { contractAddress, contractABI } from "./constants"；

1. コントラクトへの書き込み​


// add to existing useState hook
const [contractTxHash, setContractTxHash] = useState<string>("");
const setContractValue = async () => {
if (!provider) {
console.log("provider not initialized yet");
return;
}
console.log("setting contract value...");
const value = "100";
const tx = await RPC.setContractValue(provider, value);
setContractTxHash(tx.hash);
console.log("Transaction Receipt:", tx);
}
return (
<div className="App">
<button onClick={setContractValue}>Write to Contract</button>
{contractTxHash && (
<div>
<h2>
Contract Tx Hash: <span>{contractTxHash}</span>
</h2>
</div>
)}
</div>
)

2. コントラクトを読む​


// add to existing useState hook
const [contractMessage, setContractMessage] = useState<string>("");
const getContractValue = async () => {
if (!provider) {
console.log("provider not initialized yet");
return;
}
console.log("getting value from contract...");
const message = await RPC.getContractValue(provider);
setContractMessage(message);
console.log("contract message:", message);
}
return (
<button onClick={getContractValue}>Read From Contract</button>
{contractMessage && (
<div>
<h2 className="text-wrap text-center text-sm font-semibold">Read Message: <span className="font-normal">{contractMessage}</span></h2>
</div>
)}
)

トラブルシューティング​

トラブルシューティングページ](https://web3auth.io/docs/troubleshooting)では、様々なバンドルに共通する課題や問題の解決策を調べることができます。

次のステップ​

Web3Auth に関するより詳細なガイドについては、Web3Auth Docs および Web3Auth Github リポジトリ を参照してください。

ページを改善してください。