6.S974 2018 Lab 1

Your task: write a Blockstack application that allows two different users to read each others' Blockstack/Gaia files. E-Mail rtm@mit.edu a copy of the JavaScript and HTML that you write.

The due date is Tuesday September 11th at the start of class.

If you are familiar with JavaScript and the browser you can probably do this lab just by looking at the Blockstack documentation. Otherwise it might be wise to have a look at Blockstack's four tutorials; below are some hints about this route.

The goal of this lab to get some hands-on experience with decentralized applications, and to acquire a common point of reference for class discussion. It's also preparation for Lab 2.

Please feel free to ask and answer questions on Piazza.

Tutorial Hints

Follow the Hello, Blockstack tutorial directions. You'll download a tiny (but complete) Blockstack application written in Javascript, run a little web server, and view/run the app in your browser.

You'll need to create a Blockstack ID. Once you're looking at the Hello tutorial app in your browser, Click on Sign In with Blockstack, then Sign In With Blockstack Web App, then Create a new Blockstack ID. Blockstack will show you 12 words that form a secret recovery key for your ID; write them down. Your Blockstack ID will look like xxx.id.blockstack.

You don't need to buy an ID using Bitcoin (though you can if you want); Blockstack seems happy to let you create a free ID.

The "Blockstack browser" refers to some software provided by Blockstack; it is possible to run it on your local machine, but it's easier to use the version that Blockstack exposes on their web site here.

Note that login requests go via Blockstack's web site. What happens during login? What entity is checking that you are authentic? What secret information does the app JavaScript code in the browser learn when you log in via the app? You can learn more about this here.

You'll find your browser's JavaScript Console to be convenient: it displays error messages, and you can send it debug printouts. For example, after the call to isUserSignedInt() in app.js you can display the app's private key with

    console.log("ud: %o", blockstack.loadUserData())

The remaining three tutorials use more complex programming environments such as CodeSandbox, Vue, and React. It's fine if you want to use those environments; it's also fine to just play with the Blockstack API calls by adding code to the first tutorial's app.js.

For the second tutorial, you may find it useful to look at Blockstack's storage API documentation.

If you are hacking your own app.js, you should delete the line in index.html that mentionins app.css, because it makes text unreadable.

Here's how to create a button and some text fields, which you'll find convenient to drive getFile() and putFile() calls. Put this somewhere in index.html:

<input type=text id=filename>
<a href="#" class="btn btn-primary btn-lg" id="getFile">getFile</a>
<a href="#" class="btn btn-primary btn-lg" id="putFile">putFile</a>
<br>
<textarea id=content>
</textarea>

Add the following to app.js to attach a javascript action to the getFile button. This code attaches to the getFile button, reads the file name from the filename field, and puts the resulting content in the content textarea. Of course there are no files in Gaia as yet, so you'll have to also write code for putFile.

  document.getElementById('getFile').addEventListener('click', function(event) {
    event.preventDefault()
    var filename = document.getElementById('filename').value
    document.getElementById('content').value = ''
    blockstack.getFile(filename, { decrypt : false }).then(function(file) {
      document.getElementById('content').value = file
    }, function() {
      console.log('getFile failed for %s', filename)
    })
  })

Look at the Gaia documentation to find out where the data is stored, and what the authentication and privacy mechanisms are.

You can probably just read (but not execute) the third tutorial, since it doesn't use any new Blockstack API calls. It's worth reading for the explanations.

The fourth tutorial talks about how different users can read each others' files, which Blockstack calls "multi-player storage". This is a critical capability for multi-user decentralized applications.

You'll want to create a second Blockstack ID. It may be best to create and use the second ID in a different browser, since it's awkward to switch between IDs in the same browser (e.g. one ID in Chrome, the other ID in Firefox).

It turns out that the Blockstack library that comes with the first tutorial is hard to make work with multi-player storage. Fetch blocktack.js, put it in the same directory as app.js, and change the mention of bundle.js in index.html to blockstack.js.

To enable an application to use multi-player storage (i.e. create public files), you need to change the call in app.js to redirectToSignIn so that it supplies the publish_data option, as in the call in the tutorial code.

To read someone a file owned by a specific id:

  getFile(filename, { decrypt : false, username : id })

A user ID will look something like rtm.id.blockstack

You may need to log out of the application and log back in order for the publish_data option to take effect.