1

Please explain how authentication for "protected" operations (such as withdrawal of money from a wallet) is handled in web3.js when it is run inside a customer's browser.

Please also explain how it interacts with any browser plugins.

Also, is it recommended for every user of a site which may do "protected" operations in user-side web3.js to install some particular browser plugins? If yes, why?

3

Using plugins like metamask is good, but not essential.

Pros:

  • You allow users to manage their accounts themselves.
  • Users no longer need to trust their private keys with any third party.

Cons:

  • Users might accidentally loose access to their account and no one can help them.
  • Using plugins will make a site not so mobile friendly.
  • It creates a dependency for your site.

How authentication for "protected" operations (such as withdrawal of money from a wallet) is handled in web3.js when it is run inside a customer's browser.

Prepare the transaction on the frontend side and then get that txn signed from user by using his private key.

const Web3 = require('web3')
const Tx = require('ethereumjs-tx')

// connect to  node
const web3 = new Web3(new Web3.providers.HttpProvider('http://rinkeby.infura.io'));
const addressFrom = '0x004ec07dxxxxxxxxxxxxxxxxxxxxxx386F32E'
const privKey = 'xxxx__valid_private_key_in_hexForm_xxxxx'
function sendSigned(txData, cb) {
  const privateKey = new Buffer(privKey, 'hex')
  const transaction = new Tx(txData)
  transaction.sign(privateKey)
  const serializedTx = transaction.serialize().toString('hex')
  // console.log("\nRaw txn: "+'0x' + serializedTx);
  web3.eth.sendSignedTransaction('0x' + serializedTx, function(err,hash){
    if(err){
      console.log("Error Occured: ",err);
    }
    else{
        console.log("Hash: ",hash)}
    waitForReceipt(hash);
  })
}
web3.eth.getTransactionCount(addressFrom).then( txCount => {
      console.log("nonce="+txCount);
      // construct the transaction data
      var txData = {
      nonce: web3.utils.toHex(txCount),
      gasLimit: web3.utils.toHex(51334),
      gasPrice: web3.utils.toHex(100),
      to: addressTo,
      from: addressFrom,
      value: 0x10000
    }
    console.log('Sending Transction')
    // fire away!
    console.log('Txn Number '+i);
    sendSigned(txData, function(err, result) {
      if (err) return console.log('error', err)
      console.log('sent', result)
    })
  })

Please also explain how it interacts with any browser plugins.

Browser plugins inject some js code(web3.min.js) and you can place script in your site to enable detecting if that code is injected. Using the already set script, you can prepare txns using the account on user side and get them signed in the plugin itself. Also, plugin may allow broadcasting a signed txn to any network.

For Metamask:

It injects web3 in the page and any time you make a call that requires a private key to sign something (sendTransaction, sign), MetaMask will automatically prompt the user for permission, and then forward the signed request on to the blockchain (or return it to you, if it was a call to sign).

More details at Developer's documentation and how to detect metamask is given here:

window.addEventListener('load', function() {

  // Checking if Web3 has been injected by the browser (Mist/MetaMask)
  if (typeof web3 !== 'undefined') {
    // Use Mist/MetaMask's provider
    web3js = new Web3(web3.currentProvider);
  } else {
    console.log('No web3? You should consider trying MetaMask!')
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    web3js = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
  }

  // Now you can start your app & access web3 freely:
  startApp()

})

Also, is it recommended for every user of a site which may do "protected" operations in user-side web3.js to install some particular browser plugins? If yes, why?

As indicated in the pros and cons at the start, you can decide which suits you better. If you did not knew, Exchanges do not allow users to manage private keys of their address but wallets like MEW, wallet.ethereum.org, wallet.parity.io allow users to manage their own private keys and users themselves are responsible for any loss occurred due to loss of their keys, as no one can help retrieve them.

  • "Prepare the transaction on the frontend side and then get that txn signed from user by using his private key." How I can allow the user to sign? How does this happen? – porton Mar 29 '18 at 4:15
  • Yes, this does happen. By using plugin, signing and sending txn is done by plugin. You may see this question to see how to send signed txn. – Ayushya Mar 29 '18 at 6:12
  • You gave a link how to sign with private key manually entered by the user. Please explain (I mean give code example) also how sign using the plugins. – porton Mar 29 '18 at 16:29
  • Sorry, but you haven't give an example how to sign using a plugin. – porton Mar 29 '18 at 18:08
  • That's dependent on plugin being used. If you are talking about metamask, it has developer's document – Ayushya Mar 29 '18 at 19:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.