5-2. Auth Component

src/components/Auth.js:

Auth 컴포넌트

1) Background 2) Auth component overview 3) Auth component feature: User can input private key to login. 4) Auth component feature: User can import a keystore file and input password to log in. 5) Auth component feature: User can logout and clear the wallet instance information from the browser.

1) Background

In a blockchain-based app, we usually interact with smart contracts. There are 2 types of interactions with a contract.\ 1) Read data from a contract. 2) Write data to a contract.

It is cost-free to read data from contracts. On the other hand, there is a cost for writing data to contract.

cf) Sending a transaction Writing data to contracts or blockchain is called 'sending a transaction'.\ For example, if you send 5 KLAY to your friend, you could think of it as writing data to the blockchain that I sent 5 KLAY to my friend. Calling a contract method is the same. 즉 변수 X를 100으로 설정하겠다는 데이터를 스마트 컨트랙트에 기록한다고 볼 수 있습니다. 이처럼 블록체인이나 스마트 컨트랙트에 데이터를 기록하는 것과 관련된 모든 것은 트랜잭션 보내기랍니다.

To write data to contract, you should have a Klaytn account which has KLAY to pay for the transaction fee. Auth component helps you log in to your app.

2) Auth component overview

'Auth.js' 컴포넌트는 본 튜토리얼의 애플리케이션에서 가장 긴 코드입니다. 그러므로 코드를 세분화하여 하나씩 살펴보도록 할게요.

이 컴포넌트는 다음과 같은 사용자 인터페이스를 제공합니다.

Main features are: 1) User can input private key to login.\ 2) User can import a keystore file and input password to login. 3) User can logout and clear the wallet instance information from the browser.

3) Auth component feature: User can input private key to login.

개인키로 로그인하려면 integrateWallet 메서드가 필요합니다.

integrateWallet = (privateKey) => {
  const walletInstance = cav.klay.accounts.privateKeyToAccount(privateKey)
  cav.klay.accounts.wallet.add(walletInstance)
  sessionStorage.setItem('walletInstance', JSON.stringify(walletInstance))
  this.reset()
}

integateWallet 함수는 privateKey를 인자로 받아서 지갑 인스턴스를 생성합니다.

Line 1: const walletInstance = cav.klay.accounts.privateKeyToAccount(privateKey) It stores the wallet instance made by privateKeyToAccount API to the walletInstance variable.

Line 2: cav.klay.accounts.wallet.add(walletInstance) To send a transaction, you should add a wallet instance to caver through cav.klay.accounts.wallet.add(walletInstance).

Line 3: sessionStorage.setItem('walletInstance', JSON.stringify(walletInstance)) sessionStorage.setItem is a browser API used for storing a value to the browser's session storage. Since we want not to lose our logged-in status even we refresh our tutorial app page, we stored our wallet instance to the session storage as a JSON string.

cf) Items in the session storage disappears when the user closes the browser tab.

Line 4: this.reset() It resets the current component's state to the initial state to clear your input.

caver-js의 privateKeyToAccount API에 대한 자세한 안내는 caver.klay.accounts.privateKeyToAccount를 참고해주세요.

4) Auth component feature: User can import keystore file and input password to login.

키스토어와 비밀번호로 로그인하려면 handleImport와 handleLogin 메서드가 필요합니다.

/**
 * handleImport method takes a file, read
 */
handleImport = (e) => {
  const keystore = e.target.files[0]
  // 'FileReader'는 파일의 내용을 읽어오는 데에 사용됩니다.
  // 'onload' 핸들러와 'readAsText' 메서드를 사용할 것입니다.
  // * FileReader.onload
  // - 이 이벤트는 읽기 작업이 완료될 때마다 발생합니다.
  // * FileReader.readAsText()
  // - 내용을 읽어오기 시작합니다.
  const fileReader = new FileReader()
  fileReader.onload = (e) => {
    try {
      if (!this.checkValidKeystore(e.target.result)) {
        // If key store file is invalid, show message "Invalid keystore file."
        this.setState({ keystoreMsg: 'Invalid keystore file.' })
        return
      }

      // If key store file is valid,
      // 1) set e.target.result keystore
      // 2) show message "It is valid keystore. input your password."
      this.setState({
        keystore: e.target.result,
        keystoreMsg: 'It is valid keystore. input your password.',
      }, () => document.querySelector('#input-password').focus())
    } catch (e) {
      this.setState({ keystoreMsg: 'Invalid keystore file.' })
      return
    }
  }
  fileReader.readAsText(keystore)
}

To import a file from user, we use FileReader browser API. e.target.files[0] contains meta information for the file. To read the content of the file, we call fileReader.readAsText(keystore) API. After calling fileReader.readAsText(keystore), fileReader.onload function fires to take the content of the file as e.target.result. After importing the keystore file, we get password input.

cf) Keystore contains an encrypted private key. We need the matching password to decrypt the keystore to get the actual private key. WARNING Don't expose your keystore file to another person!

<input> 부분에 비밀번호를 입력하세요. 입력된 값은 handleChange 메서드를 통해 password에 저장됩니다.

<input
  id="input-password"
  className="Auth__passwordInput"
  name="password"
  type="password"
  onChange={this.handleChange}
/>

키스토어 파일과 비밀번호가 모두 준비되었네요. We can now decrypt the keystore file to extract the private key through cav.klay.accounts.decrypt(keystore, password) API. This API returns a wallet instance containing the private key. 개인키를 가져오면, 앞서 사용한 방법 그대로 integrateWallet 메서드를 사용할 수 있습니다.

handleLogin = () => {
  const { accessType, keystore, password, privateKey } = this.state

  // Access type2: access through private key
  if (accessType == 'privateKey') {
    this.integrateWallet(privateKey)
    return
  }

  // Access type1: access through keystore + password
  try {
    const { privateKey: privateKeyFromKeystore } = cav.klay.accounts.decrypt(keystore, password)
    this.integrateWallet(privateKeyFromKeystore)
  } catch (e) {
    this.setState({ keystoreMsg: `Password doesn't match.` })
  }
}

비밀번호를 사용하여 키스토어 파일을 복호화하는 방법에 대한 자세한 안내는 caver.klay.accounts.decrypt를 참고해주세요.

5) Auth component feature: User can logout, remove wallet instance information from browser.

'logout' means removing the wallet instance from the browser and caver. cav.klay.accounts.wallet.clear() removes all wallet instances from caver. sessionStorage.removeItem('walletInstance') removes the wallet instance from the browser's session storage.

/**
 * removeWallet 메서드는 다음 항목들을 제거합니다.
 * 1) caver.klay.accounts의 지갑 인스턴스
 * 2) 세션 스토리지의 'walletInstance' 값
 */
removeWallet = () => {
  cav.klay.accounts.wallet.clear()
  sessionStorage.removeItem('walletInstance')
  this.reset()
}

caver-js의 지갑 인스턴스를 지우는 방법에 대한 자세한 안내는 caver.klay.accounts.wallet.clear를 참고해주세요.