このページは英語からの機械翻訳を使用しており、誤りや不明瞭な表現が含まれている可能性があります。最も正確な情報については、オリジナルの英語版をご覧ください。頻繁な更新のため、一部のコンテンツはオリジナルの英語になっている可能性があります。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にあります。レポジトリをクローンするか、ダウンロードすることでフォローすることができる。レポジトリをクローンするか、ダウンロードすることでフォローすることができる。

前提条件

動作中のreactプロジェクト（npm create vite@最新のプロジェクト名 -- --template react-ts を実行する）。
必要なウォレット（Coinbase Wallet、Metamask）をインストールします。
RPCエンドポイント：サポートされているエンドポイント・プロバイダーの1つから取得できます。
FaucetからKAIAをテスト: 口座に十分なKAIAを入金してください。
Web3Auth Dashboard](https://dashboard.web3auth.io/)からクライアントIDを取得します。

インストール

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 リポジトリを参照してください。

はじめに​

前提条件​

インストール​

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

ウォレットを接続する​

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

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

ウォレットの切断​

ユーザー情報の取得​

署名メッセージ​

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

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

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

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

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

次のステップ​