[Ethereum] How to be sure about “MetaMask web3 Provider” connection

javascriptmetamasksignaturetestrpcweb3js

Note: This question is related to this : "Updated :" How to see "output" of "web3.personal.sign" in "browser"? ("Method personal_sign not supported")

I do following steps to sign a message using web3.personal.sign. However, I am not to MetaMask. (Note: apparently, web3.personal.sign is not supported by testRPC.)
Here are steps that I do:

(1) I open cmd and run testrpc

(2) I click on MetaMask icon and selecting localhost 8545

(3) I select one of private keys generated by testrpc

(4) I select import account from MetaMask and paste this private key in text box of Paste your private key string here

(5) now balance of this address is 100 eth

(6) I insert this address (public key) in web3.personal.sign function to sign the message (Please see the full code below)

(7) I open html file by Google Chrome

(8) I receive this messages : No web3? You should consider trying MetaMask! and Error: Method personal_sign not supported. Here is screen shot: https://ibb.co/i93oRy

Here is the full code for signing a message using web3.personal.sign:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>EthereumJS - Browser Example</title>
</head>

<body>
  <script src="https://rawgit.com/ethereumjs/browser-builds/master/dist/ethereumjs-abi/ethereumjs-abi-0.6.5.js"></script> 
  <script src="https://rawgit.com/ethereum/web3.js/develop/dist/web3.js"></script> 
  <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>

  <script>

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

   // Checking if Web3 has been injected by the browser (Mist/MetaMask)
  if (typeof web3 !== 'undefined') {
    // Use Mist/MetaMask's provider
    web3 = 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)
    web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
  }

//  var Web3 
//  web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));

  function constructPaymentMessage(contractAddress, amount) 
  {
  return ethereumjs.ABI.soliditySHA3(
    ["address", "uint256"],
    [contractAddress, amount],
  );
  }

  var message = constructPaymentMessage("message to be signed", 100);
  console.log(message);

  web3.personal.sign("0x" + message.toString("hex"), "0x01e7D1D50804fDc2fD5A134081076A8E487Ca747", function(err, signature) {
  console.log(signature);
  console.log(err);
  // Be sure to make use of the signature only here.
  // It will not be defined until this callback is invoked.
});

}) 
  </script>
</body>
</html>

Apparently, I am not connected to MetaMask and if so, How can I solve this problem?

Here is screen shot of MetaMask when is opened and connected to localhost 8545 (As you can see the balance of testRPC address is 100 eth) :

enter image description here

Best Answer

A web server is required for a Metamask to interact with your webpage:

Http(s) - Web Server Required

Due to browser security restrictions, we can't communicate with dapps running on file://. Please use a local server for development.

Deploy your page to a local server in order to detect Metamask.

Related Topic