Your first EOS dApp — Simple Scatter
In our previous articles we learned how to setup an EOS node in The Setup and create and deploy a smart contract in The Contract. In the next several articles we will focus on adding a UI to our contract. Before we can really interact with our contract via the web dApp, we need to understand how to manage our EOS account identity and provide signatures for our actions.
Scatter
Scatter is a suite of products that are built to enable users to safely interact with the EOS blockchain in an easy an secure way. Scatter has a desktop, mobile, and browser plugin available for signing transactions and storing sensitive EOS keys. The browser plugin is similar to Metamask, if you are familiar with that and operates in much the same way. We will be using the browser plugin for this article.
Installation
You will need a Chrome browser to install the Scatter extension. Make sure that you have a recent version of chrome and click Download Chrome Extension from here.
Once you have the extension installed, click on it in the upper right-hand corner of the screen. You should see a popover dialog like this. Create a password — This is an initial password meant to protect and encrypt your information locally. This is not your mnemonic — that will be on the subsequent screen. Click Create New Scatter.
Next, you will come to a mnemonic screen with a series of words(hidden in screenshot). Write these words down somewhere as you will need them in order to reload your accounts locally or if you forget your password. It is important to note that your accounts loaded into Scatter only exist locally and nothing is ever sent over the network. The password and mnemonic are only applicable to this plugin on this computer and you can use the same accounts across multiple devices with different passwords and mnemonics. The mnemonic that we are setting here is NOT your private key to your EOS active or owner account — it is simply a security precaution for locally securing your account data.
The next screen you will come to is a disclaimer screen — click Skip Basic Setup and then click the Identities button in the following screen. If you do not have a user in the list click the blue New button and then Save. You shouldn’t have to enter any information for this part.
A Simple Test
Now that you have Scatter installed and a user created, go to the following url to test it out: https://ajose01.github.io/EOS_meetup_demo/
This is from a great article on Scatter if you care to read that as well.
Once you open the demo url, you are greeted with the following. Click the Unlock button and it will open the Scatter plugin.
Here we see the request from the scatter javascript code to the plugin to authenticate with an account. The identity is being requested from the ajose01.github.io site and you can see that we have one account that we can use to authorize with. Click the Select Identity button and then the Accept button.
Next we see the fruits of our labor — we have managed a simple authentication from the dApp with our locally managed Scatter wallet.
What We Learned
- What Scatter is and how to install it
- How Scatter stores and secures our account information
- How to add a simple user to scatter
- How the authentication flow happens in Scatter
What We DIDN’T Learn
- How to add active/owner keys to a user’s account
- How to edit/add user personal information
- How to tell Scatter about your local node or the Jungle testnet
- How to use the scatter js library in your dApp
Summary
This was just an introduction to Scatter and I hope that it has proven useful to you. In the next article, we will dive into some of the topics in the What We DIDN’T Learn section.
