Chapter 10無料公開

Hello NEAR 5 - react login logout via wallet -

masa
masa
2022.08.20に更新

react login logout via wallet概要

前の章で作成したHello NEARのフロントエンドでlogin, logoutの実装を理解します。

コードリーディング

login, logout呼び出しの部分をコードリーディングします。

ログイン

ログイン処理は以下のように記載します。

js
export function login() {
  // Allow the current app to make calls to the specified contract on the
  // user's behalf.
  // This works by creating a new access key for the user's account and storing
  // the private key in localStorage.
  window.walletConnection.requestSignIn(nearConfig.contractName)
}

グローバル変数に設定したwalletConnectionからrequestSignIn関数を呼び出します。

現在のページがWallet認証ページにリダイレクトされます。

また、このサンプルでは設定していませんが、成功時と失敗時のリダイレクトURLを設定することができます。
リンク先に記載してあるので、参考にしてください。

https://docs.near.org/tools/near-api-js/wallet#sign-in

ログアウト

ログアウト処理は以下のように記載します。

js
export function logout() {
  window.walletConnection.signOut()
}

walletConnectionでsignOut関数を呼び出すだけです。

ログイン判定

ログイン状態のチェック処理は以下のように記載します。

js
if (window.walletConnection.isSignedIn()) {
    // user is signed in
}

walletConnectionでisSignedIn関数を呼び出します。

trueが帰ってくればlogin中で、falseが返ってくれば未ログインです。

コントラクト呼び出し

スマートコントラクトの呼び出しは以下のようにします。

js
export async function get_greeting(){
  let greeting = await window.contract.get_greeting()
  return greeting
}

コントラクトオブジェクトから関数を呼び出すだけです。
関数は非同期にして利用します。

まとめ

walletを使ったログイン、ログアウトは既存の認証と比べて非常に簡単なので、驚いた人もいると思います。
web3認証はweb2までの認証と比較すると、簡単で安全なので積極的に利用していきたいですね。

次はスマートコントラクトの実装のコードリーディングをします。