mirror of https://github.com/lukechilds/docs.git
moxiegirl
6 years ago
92 changed files with 4508 additions and 581 deletions
@ -1,7 +1,9 @@ |
|||
- title: Introduction |
|||
- title: Try a tutorial |
|||
docs: |
|||
- newinternet/hello-blockstack |
|||
- newinternet/multi-player-storage |
|||
|
|||
- title: SDKs |
|||
- title: Work with an SDK |
|||
docs: |
|||
- android/tutorial |
|||
- ios/tutorial |
|||
|
|||
@ -0,0 +1,27 @@ |
|||
# Tutorials |
|||
|
|||
**Note: This data is being digested by blockstack.org. Do not change the formatting of this list unless you first make an adjustment to the code on blockstack.org.** |
|||
|
|||
### Multi-player Storage |
|||
|
|||
- urlSlug: multi-player-storage |
|||
- image: /images/tutorials/multi-player-storage.png |
|||
- description: Build a decentralized micro-blogging app using multi-player Gaia storage. |
|||
|
|||
### Managing Data with Gaia |
|||
|
|||
- urlSlug: managing-data-with-gaia |
|||
- image: /images/tutorials/managing-data-with-gaia.png |
|||
- description: This series will focus on teaching you to think like a Blockstack developer working with Gaia. |
|||
|
|||
### Blockstack Todo |
|||
|
|||
- urlSlug: todo-list |
|||
- image: /images/tutorials/todo-list.png |
|||
- description: Walk through creating a basic Todo application with Blockstack. Learn about Sign In flow and Gaia storage. |
|||
|
|||
### Hello Blockstack |
|||
|
|||
- urlSlug: hello-blockstack |
|||
- image: /images/tutorials/hello-blockstack.jpg |
|||
- description: Build a simple single-page JavaScript application that runs completely client-side without any servers. |
|||
@ -0,0 +1,716 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<!-- Begin Jekyll SEO tag v2.5.0 --> |
|||
<title>Use the Blockstack Authenticator | Blockstack</title> |
|||
<meta name="generator" content="Jekyll v3.8.3" /> |
|||
<meta property="og:title" content="Use the Blockstack Authenticator" /> |
|||
<meta name="author" content="Blockstack" /> |
|||
<meta property="og:locale" content="en_US" /> |
|||
<meta name="description" content="Use the Blockstack Authenticator" /> |
|||
<meta property="og:description" content="Use the Blockstack Authenticator" /> |
|||
<link rel="canonical" href="https://zbabystack.netlify.com/newinternet/browser-introduction.html" /> |
|||
<meta property="og:url" content="https://zbabystack.netlify.com/newinternet/browser-introduction.html" /> |
|||
<meta property="og:site_name" content="Blockstack" /> |
|||
<meta property="og:type" content="article" /> |
|||
<meta property="article:published_time" content="2018-09-05T15:55:10-07:00" /> |
|||
<script type="application/ld+json"> |
|||
{"description":"Use the Blockstack Authenticator","author":{"@type":"Person","name":"Blockstack"},"@type":"BlogPosting","url":"https://zbabystack.netlify.com/newinternet/browser-introduction.html","headline":"Use the Blockstack Authenticator","dateModified":"2018-09-05T15:55:10-07:00","datePublished":"2018-09-05T15:55:10-07:00","mainEntityOfPage":{"@type":"WebPage","@id":"https://zbabystack.netlify.com/newinternet/browser-introduction.html"},"@context":"http://schema.org"}</script> |
|||
<!-- End Jekyll SEO tag --> |
|||
|
|||
<!-- <meta property="og:image" content="https://zbabystack.netlify.com/assets/posts/logo.png"/> --> |
|||
<meta property="og:image" content="/assets/posts/logo.png"/> |
|||
<link rel="stylesheet" href="/assets/css/main.css"> |
|||
<link rel="shortcut icon" type="image/png" href="/assets/img/touch-icon.png" > |
|||
<link rel="alternate" type="application/rss+xml" title="Blockstack" href="/feed.xml"> |
|||
<script src="/assets/js/main.js"></script> |
|||
|
|||
</head> |
|||
|
|||
|
|||
<body> |
|||
|
|||
<header class="uk-background-secondary"> |
|||
<div data-uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky" class="uk-sticky uk-sticky-fixed" style="position: fixed; top: 0px; width: 1904px;"> |
|||
<nav class="uk-navbar-container"> |
|||
<div class="uk-container"> |
|||
<div data-uk-navbar> |
|||
<div class="uk-navbar-left"> |
|||
|
|||
<!-- <a class="uk-navbar-item uk-logo" href="/"><img src="https://zbabystack.netlify.com/assets/posts/logo.png" alt="Docs"></a> --> |
|||
<a class="uk-navbar-item uk-logo" href="/"><img src="/assets/posts/logo.png" alt="Docs"></a> |
|||
|
|||
</div> |
|||
<div class="uk-navbar-right"> |
|||
<ul class="uk-navbar-nav uk-visible@m"> |
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://blockstack.org" target="_blank" >Blockstack.org</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://forum.blockstack.org/" target="_blank" >Forums</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://github.com/blockstack" target="_blank" >GitHub</a></li> |
|||
|
|||
|
|||
</ul> |
|||
|
|||
|
|||
<div> |
|||
<a class="uk-navbar-toggle" uk-search-icon href="#"></a> |
|||
<div class="uk-drop uk-background-default uk-border-rounded" uk-drop="mode: click; pos: left-center; offset: 0"> |
|||
<form class="uk-search uk-search-navbar uk-width-1-1" onsubmit="return false;"> |
|||
<input id="searchBox" class="uk-search-input" type="search" placeholder="Search..." autofocus> |
|||
</form> |
|||
<ul id="searchBox-results" class="uk-position-absolute uk-width-1-1 uk-list"></ul> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<a class="uk-navbar-toggle uk-hidden@m" href="#offcanvas" data-uk-navbar-toggle-icon data-uk-toggle></a> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</nav> |
|||
</div> |
|||
</header> |
|||
|
|||
|
|||
|
|||
|
|||
<div class="uk-section"> |
|||
<div class="uk-container"> |
|||
<div class="uk-grid-large" data-uk-grid> |
|||
|
|||
<div class="sidebar-fixed-width uk-visible@m"> |
|||
<div class="sidebar-docs uk-position-fixed"> |
|||
<!-- --> |
|||
|
|||
|
|||
<h5>Get started</h5> |
|||
|
|||
<ul class="uk-nav uk-nav-default doc-nav"> |
|||
|
|||
|
|||
<!-- --> |
|||
|
|||
<li class="uk-active"><a href="/newinternet/browser-introduction.html">Use the Blockstack Authenticator</a></li> |
|||
|
|||
|
|||
<!-- --> |
|||
|
|||
<li class=""><a href="/newinternet/ids-introduction.html">Get and use a Blockstack ID</a></li> |
|||
|
|||
</ul> |
|||
|
|||
<!-- --> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="uk-width-1-1 uk-width-expand@m"> |
|||
|
|||
<article class="uk-article"> |
|||
|
|||
<h1 class="uk-article-title">Use the Blockstack Authenticator</h1> |
|||
|
|||
|
|||
|
|||
|
|||
<div class="uk-article-meta uk-margin-top uk-margin-medium-bottom"> |
|||
|
|||
|
|||
|
|||
<!-- <img class="avatar avatar-small" alt="Blockstack" width="32" height="32" data-proofer-ignore="true" src="https://avatars2.githubusercontent.com/Blockstack?v=3&s=32" srcset="https://avatars2.githubusercontent.com/Blockstack?v=3&s=32 1x, https://avatars2.githubusercontent.com/Blockstack?v=3&s=64 2x, https://avatars2.githubusercontent.com/Blockstack?v=3&s=96 3x, https://avatars2.githubusercontent.com/Blockstack?v=3&s=128 4x" /> --> |
|||
|
|||
|
|||
|
|||
<!-- Written by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Blockstack</span></span><br> --> |
|||
|
|||
|
|||
<time datetime="2018-09-05T15:55:10-07:00" itemprop="datePublished"> |
|||
|
|||
<a "target="_blank" href="https://github.com/moxiegirl/docs-new/blob/master/_newinternet/browser-introduction.md" class="btn btn-default githubEditButton" role="button"><span data-uk-icon="icon: pencil; ratio: 1.2"></span> Edit this page on Github</a> |
|||
<span style="font-family:Wingdings">w</span> Sep 5, 2018 |
|||
</time> |
|||
|
|||
</div> |
|||
|
|||
<div class="article-content"> |
|||
|
|||
<p class="no_toc">lockstack Authenticator gives users the ability to explore and use the |
|||
decentralized applications (dapps). The decentralized applications are a new way |
|||
to interact with the internet. Dapps give users control of their data. Data |
|||
about them personally, name, birthdate, phone number and data about what they do |
|||
such as visiting a website or buying an item.</p> |
|||
|
|||
<ul id="markdown-toc"> |
|||
<li><a href="#understand-the-blockstack-authenticator" id="markdown-toc-understand-the-blockstack-authenticator">Understand the Blockstack Authenticator</a></li> |
|||
<li><a href="#using-the-authenticator-on-public-computers" id="markdown-toc-using-the-authenticator-on-public-computers">Using the Authenticator on public computers</a></li> |
|||
<li><a href="#install-the-client-edition" id="markdown-toc-install-the-client-edition">Install the client edition</a> <ul> |
|||
<li><a href="#on-mac" id="markdown-toc-on-mac">On Mac</a></li> |
|||
<li><a href="#on-windows" id="markdown-toc-on-windows">On Windows</a></li> |
|||
<li><a href="#on-linux" id="markdown-toc-on-linux">On Linux</a></li> |
|||
</ul> |
|||
</li> |
|||
<li><a href="#uninstall-the-browser" id="markdown-toc-uninstall-the-browser">Uninstall the browser</a> <ul> |
|||
<li><a href="#on-mac-1" id="markdown-toc-on-mac-1">On Mac</a></li> |
|||
<li><a href="#on-windows-1" id="markdown-toc-on-windows-1">On Windows</a></li> |
|||
<li><a href="#on-linux-1" id="markdown-toc-on-linux-1">On Linux</a></li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
|
|||
<h2 id="understand-the-blockstack-authenticator">Understand the Blockstack Authenticator</h2> |
|||
|
|||
<p>Through the Blockstack authemticator application you can create an identity. An identity |
|||
represents you as you interact with others through Dapps. The Blockstack |
|||
authenticator is itself, a smiple Dapp. It allows you to:</p> |
|||
|
|||
<ul> |
|||
<li>create one or more identities</li> |
|||
<li>send and receive bitcoin</li> |
|||
<li>manage the storage of your profile and application data</li> |
|||
<li>find and launch Dapps</li> |
|||
</ul> |
|||
|
|||
<p>There are editorions of the Blockstack Authenticator, the web edition is an |
|||
application you access through your web browser by simply <a href="https://browser.blockstack.org/">visit the |
|||
applications’ address</a> in your computer’s |
|||
browser. You can also install the authenticator as a client application on your |
|||
computer.</p> |
|||
|
|||
<p>If all you want to do is create, manage, and fund an identity and then interact |
|||
with Dapps, you can simply use the web edition. If you have concerns about net |
|||
censorship, hightened security concerns, or develop a Dapp yourself, you may |
|||
want to download and install the authenticator’s client edition.</p> |
|||
|
|||
<h2 id="using-the-authenticator-on-public-computers">Using the Authenticator on public computers</h2> |
|||
|
|||
<p>Before you use the web application, it is important to note that once you log |
|||
into the application with the brower, your session does not expire until you |
|||
choose <strong>Settings > RESET BROWSER</strong>. For this reason, you should be careful |
|||
when using the authenticator on public computers.</p> |
|||
|
|||
<p>If you are in a library, for example, and log into the authenticator, simply |
|||
closing the tab or even rebooting the computer does not log you out. Instead, |
|||
you should be sure to choose <strong>Settings > RESET BROWSER</strong> before leaving the web |
|||
application.</p> |
|||
|
|||
<p>For more informatin about your identity and the authenticator, see <a href="ids-introduction.md">Get and use a Blockstack IDs</a>.</p> |
|||
|
|||
<h2 id="install-the-client-edition">Install the client edition</h2> |
|||
|
|||
<p>Remember, for most users the Blockstack Authenticator web application should |
|||
suffice. You only need to install the client if you have additional, advanced |
|||
concerns about Internet or identity. Though not required, some Dapp developrs |
|||
may find it useful to install the client edition.</p> |
|||
|
|||
<p>The Blockstack Authenticator installer is a <em>multiple-context</em> installer. If you |
|||
run it as a user, the installation is avalable only for that user. If you |
|||
install as administrator, the installation installs for all users. To find an |
|||
installer for your operating system, visit <a href="https://blockstack.org/install">the Blockstack install |
|||
page</a>.</p> |
|||
|
|||
<h3 id="on-mac">On Mac</h3> |
|||
|
|||
<p>Installation requires that you have macOS High Sierra 10.12 or higher. Do the following to install:</p> |
|||
|
|||
<ol> |
|||
<li>Download the OSX installer from from <a href=”https://blockstack.org/install” target=”_blank”>the browser installation page</a>.</li> |
|||
<li> |
|||
<p>Double-click the downloaded DMG file to launch the installer.</p> |
|||
|
|||
<p><img src="images/ubuntu-browser.png" alt="" /></p> |
|||
</li> |
|||
<li>Drag the Blockstack.app to the <code class="highlighter-rouge">Applications</code> folder.</li> |
|||
<li> |
|||
<p>Double-click the Blockstack.app to launch it.</p> |
|||
|
|||
<p>The system displays a notice about opening the file:</p> |
|||
|
|||
<p><img src="images/dmg-notice.png" alt="" /></p> |
|||
</li> |
|||
<li> |
|||
<p>Choose <strong>Open</strong>.</p> |
|||
|
|||
<p>The system opens your default browser with the Blockstack Authenticator |
|||
application, running from your machine (localhost). You’ll also see the |
|||
Blockstack icon in your machine’s</p> |
|||
|
|||
<p><img src="images/browser-on-mac.png" alt="" /></p> |
|||
|
|||
<p>If you have loaded an identity already via the Blockstack web application, |
|||
you are already logged into the local application:</p> |
|||
|
|||
<p><img src="images/browser-on-mac-1.png" alt="" /></p> |
|||
</li> |
|||
</ol> |
|||
|
|||
<h3 id="on-windows">On Windows</h3> |
|||
|
|||
<p>Installation requires that you have Windows 10 or higher. Do the following to |
|||
install:</p> |
|||
|
|||
<ol> |
|||
<li>Download the Windows installer from from <a href=”https://blockstack.org/install” target=”_blank”>the browser installation page</a>.</li> |
|||
<li> |
|||
<p>Double-click the installer package to launch it.</p> |
|||
|
|||
<p><img src="images/windows-installer.png" alt="" /></p> |
|||
</li> |
|||
<li> |
|||
<p>Open the Wiindows <strong>Start</strong> menu and click on the recently added <strong>Blockstack Authenticator</strong>.</p> |
|||
|
|||
<p><img src="images/windows-start.png" alt="" /></p> |
|||
|
|||
<p>The system displays a Windows Security Alert.</p> |
|||
|
|||
<p><img src="images/windows-security.png" alt="" /></p> |
|||
</li> |
|||
<li> |
|||
<p>Choose to <strong>Allow access</strong>.</p> |
|||
|
|||
<p>The system opens in the Blockstack Authenticator application.</p> |
|||
|
|||
<p><img src="images/windows-browser.png" alt="" /></p> |
|||
</li> |
|||
</ol> |
|||
|
|||
<h3 id="on-linux">On Linux</h3> |
|||
|
|||
<p>The Blockstack installation on Linux requires Docker. Before installing |
|||
Blockstack, <a href=“https://docs.docker.com/install/” target=”_blank”>install |
|||
the version of Docker appropriate for your operating system</a>.</p> |
|||
|
|||
<blockquote> |
|||
<p><strong>Note</strong>: The Blockstack script used in this procedure runs <code class="highlighter-rouge">docker</code> commands. Depending on how you installed and configure Dockered on your system, it may or may not be necessary to have <code class="highlighter-rouge">root</code> or <code class="highlighter-rouge">sudo</code> privileges. For this reason, the commands below show the use of <code class="highlighter-rouge">sudo</code> when interacting with the script or the <code class="highlighter-rouge">docker</code> executable. If your installation allows running Docker with lower privileges, you can omit it.</p> |
|||
</blockquote> |
|||
|
|||
<ol> |
|||
<li> |
|||
<p>Download the Linux installer from from <a href=”https://blockstack.org/install” target=”_blank”>the browser installation page</a>.</p> |
|||
|
|||
<p>This downloads a <code class="highlighter-rouge">Blockstack-for-Linux-v0.30.0.sh</code> script to your local drive.</p> |
|||
</li> |
|||
<li> |
|||
<p>Open a terminal and navigate to the directory containing the downloaded script.</p> |
|||
|
|||
<p>When the script downloads, it is not executable.</p> |
|||
</li> |
|||
<li> |
|||
<p>Set the executable bit on the file.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nv">$ </span>chmod u+x Blockstack-for-Linux-v0.309.0.0.sh |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Enter the command without any arguments to see the available subcommands.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nv">$ </span>sudo ./Blockstack-for-Linux-v0.309.0.0.sh |
|||
blockstack docker launcher commands: |
|||
Install-protocol-handler -> install a protocol handler <span class="k">for </span>blockstack:// links |
|||
... |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Use the script to <code class="highlighter-rouge">pull</code> the Blockstack Docker images you need.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nv">$ </span>sudo ./Blockstack-for-Linux-v0.309.0.0.sh pull |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>Depending on your network speed, this can take some time.</p> |
|||
</li> |
|||
<li> |
|||
<p>Use the <code class="highlighter-rouge">docker image ls</code> command to confirm you have the image.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nv">$ </span>sudo docker image Is |
|||
REPOSITORY TAG IMAGE ID CREATED |
|||
quay.io/blockstack/blockstack-browser v0.30.0 ad05fd844f59 2 days ago |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Install the protocol handler</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nv">$ </span> sudo ./Blockstack-for-Linux-vO.30.0.sh install-protocol-handler
|
|||
Registering protocol handler |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Start the Blockstack containers.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nv">$ </span>sudo ./Blockstack-for-Linux-vO.30.0.sh start |
|||
c3092592e59abe3559fdb49d070a7aa5e99165c7d9f2flla20ecaf4e0dfc2f46
|
|||
cd92f61ae473d54398da987f5023f5462b29c03f08584ebb3c9fIbb4cd790c69
|
|||
Registering protocol handler |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>The system launches the Blockstack Authenticator application for you.</p> |
|||
|
|||
<p><img src="images/ubuntu-browser.png" alt="" /></p> |
|||
</li> |
|||
</ol> |
|||
|
|||
<p>Until you stop the Blockstack containers, the application will continue to run |
|||
on your system. To display the status of the Blockstack containers, you can use |
|||
the <code class="highlighter-rouge">docker container ls</code> command.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>sudo docker container ls --format <span class="s1">'{{.ID}}\t{{.Image}}\t{{.Status}}\t{{.Ports}}\t{{.Names}}'</span> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>Use <code class="highlighter-rouge">./Blockstack-for-Linux-vO.30.0.sh stop</code> to stop the Blockstack Authenticator and its containers.</p> |
|||
|
|||
<h2 id="uninstall-the-browser">Uninstall the browser</h2> |
|||
|
|||
<p>If you installed the browser using an installer, follow the instructions for |
|||
your operating system.</p> |
|||
|
|||
<h3 id="on-mac-1">On Mac</h3> |
|||
|
|||
<ol> |
|||
<li> |
|||
<p>Quit the Blockstack application if it is running.</p> |
|||
|
|||
<p><img src="images/quit-blockstack.png" alt="" /></p> |
|||
</li> |
|||
<li> |
|||
<p>Check if you have a Blockstack device and eject it if you do.</p> |
|||
|
|||
<p><img src="images/eject-blockstack.png" alt="" /></p> |
|||
</li> |
|||
<li>Use the Finder to open the <strong>Applications</strong> folder.</li> |
|||
<li>Locate the Blockstack application.</li> |
|||
<li>Open your <code class="highlighter-rouge">Applications</code> folder and locate the <strong>Blockstack.app</strong>.</li> |
|||
<li>Drag the appliation to the trash.</li> |
|||
<li> |
|||
<p>Delete the <code class="highlighter-rouge">/Users/USERNAME/Library/Application Support/Blockstack</code> folder.</p> |
|||
|
|||
<p>From the command line:</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>rm -r /Users/moxiegirl/Library/Application<span class="se">\ </span>Support/Blockstack |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
</ol> |
|||
|
|||
<h3 id="on-windows-1">On Windows</h3> |
|||
|
|||
<ol> |
|||
<li>Open the <strong>Start</strong> menu.</li> |
|||
<li>Click <strong>Settings > System</strong>.</li> |
|||
<li> |
|||
<p>Open for the <strong>Apps & features</strong> item.</p> |
|||
|
|||
<p><img src="images/eject-blockstack.png" alt="" /></p> |
|||
</li> |
|||
<li> |
|||
<p>Locate the <strong>Blockstack Authenticator</strong> and choose <strong>Uninstall</strong>.</p> |
|||
|
|||
<p><img src="images/browser-uninstall.png" alt="" /></p> |
|||
</li> |
|||
</ol> |
|||
|
|||
<h3 id="on-linux-1">On Linux</h3> |
|||
|
|||
<p>Your Blockstack instalaltion relies on Docker containers and their associated |
|||
images. It also includes a supporting protocol handler you must remove. If you |
|||
installed Docker so that you can run Blockstack, you can uninstall Docker as well, |
|||
but that is not explained here.</p> |
|||
|
|||
<p>Do the following to uninstall Blockstack:</p> |
|||
|
|||
<ol> |
|||
<li> |
|||
<p>Stop and remove the Docker containers if they are running.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nv">$ </span>sudo ./Blockstack-for-Linux-vO.30.0.sh stop |
|||
stopping the running blockstack-browser containers |
|||
69a686799d4f |
|||
56fc6189ff97 |
|||
69a686799d4f |
|||
56fc6189ff97 |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Remove the associated Blockstack images.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nv">$ </span>sudo docker image ls |
|||
REPOSITORY TAG IMAGE ID CREATED |
|||
quay.io/blockstack/blockstack-browser v0.30.0 ad05fd844f59 3 days ago |
|||
<span class="nv">$ </span>sudo docker image rm ad05fd844f59
|
|||
Untagged : quay.io/blockstack/blockstack- browser :vO.30.0 |
|||
Untagged: quay.io/blockstack/blockstack-browser@sha256:b20c9514c56b99398fd4946af39e7537b807e85694943ac3b8807dlb3625833b |
|||
Deleted: Sha256:ad05fd844f5948blee06a0a09228df946478393c0a7588cbc65dlb8817f5b34e |
|||
Deleted: Sha256:7c3d0043f2ba01cf285f3fe09701b086c349b6380c2e42f25b31ac65c6626ec8 |
|||
Deleted: sha256:54ea2aa7d7d000e7483f299eeca9e5466fa86231f4cd4cld3c3096d97e61c5df |
|||
Deleted: sha256:38e61054355adefc3c2de031462114a9946cfc0e44444a38a27d0f115aba0da2 |
|||
.... |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Use the script to remove the protocol handler</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nv">$ </span>sudo ./Blockstack-for-Linux-vO.30.0.sh remove-protocol-handler |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Delete the script.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nv">$ </span>rm Blockstack-for-Linux-vO.30.0.sh |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
</ol> |
|||
|
|||
<div class="share uk-text-center"> |
|||
<a href="https://twitter.com/intent/tweet?text=Use the Blockstack Authenticator&url=https://zbabystack.netlify.com/newinternet/browser-introduction.html&via=&related=" rel="nofollow" target="_blank" title="Share on Twitter" onclick="window.open(this.href, 'twitter', 'width=550,height=235');return false;"><span data-uk-icon="icon: twitter; ratio: 1.2"></span></a> |
|||
<a class="uk-margin-small-left" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fzbabystack.netlify.com%2Fnewinternet%2Fbrowser-introduction.html" rel="nofollow" target="_blank" title="Share on Facebook" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"><span data-uk-icon="icon: facebook; ratio: 1.2"></span></a> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<hr class="uk-margin-medium"> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<!-- <div class="uk-margin-large-top"> |
|||
<h3>Related Articles</h3> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<ul class="uk-list"> |
|||
|
|||
</ul> |
|||
</div> |
|||
--> |
|||
|
|||
</article> |
|||
|
|||
<script> |
|||
// Table of contents scroll to |
|||
UIkit.scroll('#markdown-toc a', { |
|||
duration: 400, |
|||
offset: 120 |
|||
}); |
|||
</script> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div id="offcanvas" data-uk-offcanvas="flip: true; overlay: true"> |
|||
<div class="uk-offcanvas-bar"> |
|||
|
|||
<button class="uk-offcanvas-close" type="button" data-uk-close></button> |
|||
|
|||
<ul class="uk-nav uk-nav-default"> |
|||
<!-- <li><a class="uk-logo uk-margin-small-bottom" href="/"><img src="https://zbabystack.netlify.com/assets/posts/logo.png" alt="Docs"></a></li> --> |
|||
<li><a class="uk-logo uk-margin-small-bottom" href="/"><img src="/assets/posts/logo.png" alt="Docs"></a></li> |
|||
|
|||
|
|||
<li><a href="https://blockstack.org" target="_blank" >Blockstack.org</a></li> |
|||
|
|||
|
|||
<li><a href="https://forum.blockstack.org/" target="_blank" >Forums</a></li> |
|||
|
|||
|
|||
<li><a href="https://github.com/blockstack" target="_blank" >GitHub</a></li> |
|||
|
|||
</ul> |
|||
|
|||
<div class="uk-margin-small-top uk-text-center uk-text-muted uk-link-muted"> |
|||
<div data-uk-grid class="uk-child-width-auto uk-grid-small uk-flex-center uk-grid"> |
|||
|
|||
<div class="uk-first-column"> |
|||
<a href="https://twitter.com/" data-uk-icon="icon: twitter" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.facebook.com/" data-uk-icon="icon: facebook" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.instagram.com/" data-uk-icon="icon: instagram" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://vimeo.com/" data-uk-icon="icon: vimeo" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<footer class="uk-section uk-text-center uk-text-muted uk-link-muted"> |
|||
<div class="uk-container uk-container-small"> |
|||
|
|||
<!-- <div> |
|||
<ul class="uk-subnav uk-flex-center"> |
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://blockstack.org" target="_blank" >Blockstack.org</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://forum.blockstack.org/" target="_blank" >Forums</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://github.com/blockstack" target="_blank" >GitHub</a></li> |
|||
|
|||
|
|||
</ul> |
|||
</div> |
|||
<div class="uk-margin-medium"> |
|||
<div data-uk-grid class="uk-child-width-auto uk-grid-small uk-flex-center uk-grid"> |
|||
|
|||
<div class="uk-first-column"> |
|||
<a href="https://twitter.com/" data-uk-icon="icon: twitter" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.facebook.com/" data-uk-icon="icon: facebook" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.instagram.com/" data-uk-icon="icon: instagram" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://vimeo.com/" data-uk-icon="icon: vimeo" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
</div> --> |
|||
<div class="uk-margin-medium uk-text-small copyright">© 2018 Blockstack</div> |
|||
|
|||
</div> |
|||
</footer> |
|||
|
|||
|
|||
|
|||
<script type="text/javascript"> |
|||
/* Create a configuration object */ |
|||
var ss360Config = { |
|||
/* Your site id */ |
|||
siteId: 'blockstack', |
|||
/* A CSS selector that points to your search box */ |
|||
searchBox: {selector: '#searchBox'} |
|||
}; |
|||
</script> |
|||
<script src="https://cdn.sitesearch360.com/sitesearch360-v11.min.js" async></script> |
|||
|
|||
|
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,153 @@ |
|||
<p>Welcome!</p> |
|||
|
|||
<p>In this tutorial, we’re going to walk through the basics of the Blockstack command line interface.</p> |
|||
|
|||
<h3 id="lookups">Lookups</h3> |
|||
|
|||
<p>Now, to perform a name lookup, run this command:</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>blockstack lookup timblee.id |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>You should get a response like this:</p> |
|||
|
|||
<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"profile"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"@type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Person"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"account"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"> |
|||
</span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"@type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Account"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"identifier"</span><span class="p">:</span><span class="w"> </span><span class="s2">"timbl"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"proofType"</span><span class="p">:</span><span class="w"> </span><span class="s2">"http"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"proofUrl"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://gist.github.com/timbl/04e8ac7c81cd2dee2f51a5e8c672188d"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"service"</span><span class="p">:</span><span class="w"> </span><span class="s2">"github"</span><span class="w"> |
|||
</span><span class="p">},</span><span class="w"> |
|||
</span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"@type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Account"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"identifier"</span><span class="p">:</span><span class="w"> </span><span class="s2">"timberners_lee"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"proofType"</span><span class="p">:</span><span class="w"> </span><span class="s2">"http"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"proofUrl"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://twitter.com/timberners_lee/status/740677355950080001"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"service"</span><span class="p">:</span><span class="w"> </span><span class="s2">"twitter"</span><span class="w"> |
|||
</span><span class="p">}</span><span class="w"> |
|||
</span><span class="p">],</span><span class="w"> |
|||
</span><span class="nt">"image"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"> |
|||
</span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"@type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"ImageObject"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"contentUrl"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://s3.amazonaws.com/97p/lUU.jpeg"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"cover"</span><span class="w"> |
|||
</span><span class="p">}</span><span class="w"> |
|||
</span><span class="p">]</span><span class="w"> |
|||
</span><span class="p">},</span><span class="w"> |
|||
</span><span class="nt">"zonefile"</span><span class="p">:</span><span class="w"> </span><span class="s2">"$ORIGIN timblee.id\n$TTL 3600\n_http._tcp URI 10 1 \"https://blockstack.s3.amazonaws.com/timblee.id\"\n"</span><span class="w"> |
|||
</span><span class="p">}</span><span class="w"> |
|||
</span></code></pre> |
|||
</div> |
|||
|
|||
<h3 id="price-estimations">Price Estimations</h3> |
|||
|
|||
<p>Every name costs a certain amount of money to register, and each namespace has it’s own name pricing rules.</p> |
|||
|
|||
<p>As an example, in the <code class="highlighter-rouge">.id</code> namespace 6-letter alphabetic-only names cost 0.001 bitcoins, but with every additional letter the names get 4x cheaper and with every fewer letter the names get 4x more expensive. In addition, names without vowels and names with numbers and special characters get a special discount.</p> |
|||
|
|||
<p>To determine how much a name will cost to order a name (including all transaction fees), use the <code class="highlighter-rouge">price</code> command:</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>blockstack price <YOUR NAME>.id |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>Example response:</p> |
|||
|
|||
<div class="language-json highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"name_price"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"btc"</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.00025"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"satoshis"</span><span class="p">:</span><span class="w"> </span><span class="s2">"25000"</span><span class="w"> |
|||
</span><span class="p">},</span><span class="w"> |
|||
</span><span class="nt">"preorder_tx_fee"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"btc"</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.00047406"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"satoshis"</span><span class="p">:</span><span class="w"> </span><span class="s2">"47406"</span><span class="w"> |
|||
</span><span class="p">},</span><span class="w"> |
|||
</span><span class="nt">"register_tx_fee"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"btc"</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.00046184"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"satoshis"</span><span class="p">:</span><span class="w"> </span><span class="s2">"46184"</span><span class="w"> |
|||
</span><span class="p">},</span><span class="w"> |
|||
</span><span class="nt">"total_estimated_cost"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"btc"</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.00188394"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"satoshis"</span><span class="p">:</span><span class="w"> </span><span class="s2">"188394"</span><span class="w"> |
|||
</span><span class="p">},</span><span class="w"> |
|||
</span><span class="nt">"update_tx_fee"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"btc"</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.00069804"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"satoshis"</span><span class="p">:</span><span class="w"> </span><span class="s2">"69804"</span><span class="w"> |
|||
</span><span class="p">}</span><span class="w"> |
|||
</span><span class="p">}</span><span class="w"> |
|||
</span></code></pre> |
|||
</div> |
|||
|
|||
<h3 id="deposits">Deposits</h3> |
|||
|
|||
<p>Name registrations and name management operations cost money, so before you can do these things, you’ll need to deposit bitcoins in your account.</p> |
|||
|
|||
<p><em>Note that in some cases you’ll need to wait for one or more confirmations (about 10-60 minutes) before the Blockstack CLI will register the funds as fully deposited and allow you to proceed with registering names.</em></p> |
|||
|
|||
<p>To get the Bitcoin address where you should deposit your bitcoins, run the <code class="highlighter-rouge">deposit</code> command:</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>blockstack deposit |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>Example response:</p> |
|||
|
|||
<div class="language-json highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"address"</span><span class="p">:</span><span class="w"> </span><span class="s2">"13aUoeUtQnHUTfRwbksKvyvMRMzN3Qf2iR"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"message"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Send bitcoins to the address specified."</span><span class="w"> |
|||
</span><span class="p">}</span><span class="w"> |
|||
</span></code></pre> |
|||
</div> |
|||
|
|||
<h3 id="registrations">Registrations</h3> |
|||
|
|||
<p>After you get comfortable with looking up names, take the next step and register and manage a name for yourself. Run the following command:</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>blockstack register <YOUR NAME>.id |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>If the name hasn’t been registered yet, you’ll get a confirmation that your registration is pending:</p> |
|||
|
|||
<div class="language-json highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"success"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"transaction_hash"</span><span class="p">:</span><span class="w"> </span><span class="s2">"f576313b2ff4cc7cb0d25545e1e38e2d0d48a6ef486b7118e5ca0f8e8b98ae45"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"message"</span><span class="p">:</span><span class="w"> </span><span class="s2">"The name has been queued up for registration and will take a few hours to go through. You can check on the status at any time by running 'blockstack info'."</span><span class="w"> |
|||
</span><span class="p">}</span><span class="w"> |
|||
</span></code></pre> |
|||
</div> |
|||
|
|||
<p>After a few hours, your registration should go through and you’ll be able to update your DNS records for the name.</p> |
|||
|
|||
<h3 id="updates">Updates</h3> |
|||
|
|||
<p>To update the data record associated with a name you own, run the <code class="highlighter-rouge">blockstack update</code> command:</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>cat > new_zone_file.txt <span class="sh"><<EOF |
|||
\$ORIGIN swiftonsecurity.id |
|||
\$TTL 3600 |
|||
pubkey TXT "pubkey:data:04cabba0b5b9a871dbaa11c044066e281c5feb57243c7d2a452f06a0d708613a46ced59f9f806e601b3353931d1e4a98d7040127f31016311050bedc0d4f1f62ff" |
|||
_file IN URI 10 1 "file:///Users/TaylorSwift/.blockstack/storage-disk/mutable/swiftonsecurity.id" |
|||
_https._tcp IN URI 10 1 "https://blockstack.s3.amazonaws.com/swiftonsecurity.id" |
|||
_http._tcp IN URI 10 1 "http://node.blockstack.org:6264/RPC2#swiftonsecurity.id" |
|||
_dht._udp IN URI 10 1 "dht+udp://fc4d9c1481a6349fe99f0e3dd7261d67b23dadc5" |
|||
EOF |
|||
|
|||
</span><span class="gp">$ </span>blockstack update swiftonsecurity.id new_zone_file.txt |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>Expected response:</p> |
|||
|
|||
<div class="language-json highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"success"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"transaction_hash"</span><span class="p">:</span><span class="w"> </span><span class="s2">"4e1f292c09ad8e03a5f228b589d9a7dc3699b495862bee3b40f2432ac497b134"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"message"</span><span class="p">:</span><span class="w"> </span><span class="s2">"The name has been queued up for update and will take ~1 hour to process. You can check on the status at any time by running 'blockstack info'."</span><span class="w"> |
|||
</span><span class="p">}</span><span class="w"> |
|||
</span></code></pre> |
|||
</div> |
|||
@ -0,0 +1,828 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<!-- Begin Jekyll SEO tag v2.5.0 --> |
|||
<title>Hello, Blockstack Tutorial | Blockstack</title> |
|||
<meta name="generator" content="Jekyll v3.8.3" /> |
|||
<meta property="og:title" content="Hello, Blockstack Tutorial" /> |
|||
<meta name="author" content="Blockstack" /> |
|||
<meta property="og:locale" content="en_US" /> |
|||
<meta name="description" content="Hello, Blockstack Tutorial" /> |
|||
<meta property="og:description" content="Hello, Blockstack Tutorial" /> |
|||
<link rel="canonical" href="https://zbabystack.netlify.com/newinternet/hello-blockstack.html" /> |
|||
<meta property="og:url" content="https://zbabystack.netlify.com/newinternet/hello-blockstack.html" /> |
|||
<meta property="og:site_name" content="Blockstack" /> |
|||
<meta property="og:type" content="article" /> |
|||
<meta property="article:published_time" content="2018-09-05T15:55:10-07:00" /> |
|||
<script type="application/ld+json"> |
|||
{"description":"Hello, Blockstack Tutorial","author":{"@type":"Person","name":"Blockstack"},"@type":"BlogPosting","url":"https://zbabystack.netlify.com/newinternet/hello-blockstack.html","headline":"Hello, Blockstack Tutorial","dateModified":"2018-09-05T15:55:10-07:00","datePublished":"2018-09-05T15:55:10-07:00","mainEntityOfPage":{"@type":"WebPage","@id":"https://zbabystack.netlify.com/newinternet/hello-blockstack.html"},"@context":"http://schema.org"}</script> |
|||
<!-- End Jekyll SEO tag --> |
|||
|
|||
<!-- <meta property="og:image" content="https://zbabystack.netlify.com/assets/posts/logo.png"/> --> |
|||
<meta property="og:image" content="/assets/posts/logo.png"/> |
|||
<link rel="stylesheet" href="/assets/css/main.css"> |
|||
<link rel="shortcut icon" type="image/png" href="/assets/img/touch-icon.png" > |
|||
<link rel="alternate" type="application/rss+xml" title="Blockstack" href="/feed.xml"> |
|||
<script src="/assets/js/main.js"></script> |
|||
|
|||
</head> |
|||
|
|||
|
|||
<body> |
|||
|
|||
<header class="uk-background-secondary"> |
|||
<div data-uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky" class="uk-sticky uk-sticky-fixed" style="position: fixed; top: 0px; width: 1904px;"> |
|||
<nav class="uk-navbar-container"> |
|||
<div class="uk-container"> |
|||
<div data-uk-navbar> |
|||
<div class="uk-navbar-left"> |
|||
|
|||
<!-- <a class="uk-navbar-item uk-logo" href="/"><img src="https://zbabystack.netlify.com/assets/posts/logo.png" alt="Docs"></a> --> |
|||
<a class="uk-navbar-item uk-logo" href="/"><img src="/assets/posts/logo.png" alt="Docs"></a> |
|||
|
|||
</div> |
|||
<div class="uk-navbar-right"> |
|||
<ul class="uk-navbar-nav uk-visible@m"> |
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://blockstack.org" target="_blank" >Blockstack.org</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://forum.blockstack.org/" target="_blank" >Forums</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://github.com/blockstack" target="_blank" >GitHub</a></li> |
|||
|
|||
|
|||
</ul> |
|||
|
|||
|
|||
<div> |
|||
<a class="uk-navbar-toggle" uk-search-icon href="#"></a> |
|||
<div class="uk-drop uk-background-default uk-border-rounded" uk-drop="mode: click; pos: left-center; offset: 0"> |
|||
<form class="uk-search uk-search-navbar uk-width-1-1" onsubmit="return false;"> |
|||
<input id="searchBox" class="uk-search-input" type="search" placeholder="Search..." autofocus> |
|||
</form> |
|||
<ul id="searchBox-results" class="uk-position-absolute uk-width-1-1 uk-list"></ul> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<a class="uk-navbar-toggle uk-hidden@m" href="#offcanvas" data-uk-navbar-toggle-icon data-uk-toggle></a> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</nav> |
|||
</div> |
|||
</header> |
|||
|
|||
|
|||
|
|||
|
|||
<div class="uk-section"> |
|||
<div class="uk-container"> |
|||
<div class="uk-grid-large" data-uk-grid> |
|||
|
|||
<div class="sidebar-fixed-width uk-visible@m"> |
|||
<div class="sidebar-docs uk-position-fixed"> |
|||
|
|||
<h5>Try a tutorial</h5> |
|||
<ul class="uk-nav uk-nav-default doc-nav"> |
|||
|
|||
|
|||
<!-- --> |
|||
|
|||
<li class="uk-active"><a href="/newinternet/hello-blockstack.html">Hello, Blockstack Tutorial</a></li> |
|||
|
|||
|
|||
<!-- --> |
|||
|
|||
<li class=""><a href="/newinternet/multi-player-storage.html">Manage Data with Gaia</a></li> |
|||
|
|||
</ul> |
|||
|
|||
<h5>Work with an SDK</h5> |
|||
<ul class="uk-nav uk-nav-default doc-nav"> |
|||
|
|||
|
|||
<!-- --> |
|||
|
|||
<li class=""><a href="/android/tutorial.html">Android SDK Tutorial (Pre-release)</a></li> |
|||
|
|||
|
|||
<!-- --> |
|||
|
|||
<li class=""><a href="/ios/tutorial.html">iOS SDK Tutorial (Pre-release)</a></li> |
|||
|
|||
</ul> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<div class="uk-width-1-1 uk-width-expand@m"> |
|||
|
|||
<article class="uk-article"> |
|||
|
|||
<h1 class="uk-article-title">Hello, Blockstack Tutorial</h1> |
|||
|
|||
|
|||
|
|||
<div class="uk-article-meta uk-margin-top uk-margin-medium-bottom"> |
|||
|
|||
|
|||
|
|||
<!-- <img class="avatar avatar-small" alt="Blockstack" width="32" height="32" data-proofer-ignore="true" src="https://avatars2.githubusercontent.com/Blockstack?v=3&s=32" srcset="https://avatars2.githubusercontent.com/Blockstack?v=3&s=32 1x, https://avatars2.githubusercontent.com/Blockstack?v=3&s=64 2x, https://avatars2.githubusercontent.com/Blockstack?v=3&s=96 3x, https://avatars2.githubusercontent.com/Blockstack?v=3&s=128 4x" /> --> |
|||
|
|||
|
|||
|
|||
<!-- Written by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Blockstack</span></span><br> --> |
|||
|
|||
|
|||
<time datetime="2018-09-05T15:55:10-07:00" itemprop="datePublished"> |
|||
|
|||
<a "target="_blank" href="https://github.com/moxiegirl/docs-new/blob/master/_newinternet/hello-blockstack.md" class="btn btn-default githubEditButton" role="button"><span data-uk-icon="icon: pencil; ratio: 1.2"></span> Edit this page on Github</a> |
|||
<span style="font-family:Wingdings">w</span> Sep 5, 2018 |
|||
</time> |
|||
|
|||
</div> |
|||
|
|||
<div class="article-content"> |
|||
|
|||
<p>In this tutorial, you build a simple application on Blockstack. The application |
|||
is a single-page application (SPA) that runs completely client-side. The |
|||
application has no backend API to talk to, other than the identity and storage |
|||
API that the user provides. In this sense, the application is a completely |
|||
decentralized, server-less application. You work through the following sections:</p> |
|||
|
|||
<ul id="markdown-toc"> |
|||
<li><a href="#about-this-tutorial-and-the-prerequisites-you-need" id="markdown-toc-about-this-tutorial-and-the-prerequisites-you-need">About this tutorial and the prerequisites you need</a></li> |
|||
<li><a href="#use-npm-to-install-yeoman-and-the-blockstack-app-generator" id="markdown-toc-use-npm-to-install-yeoman-and-the-blockstack-app-generator">Use npm to install Yeoman and the Blockstack App Generator</a></li> |
|||
<li><a href="#generate-an-initial-blockstack-application" id="markdown-toc-generate-an-initial-blockstack-application">Generate an initial Blockstack application</a></li> |
|||
<li><a href="#review-the-basic-application-structure" id="markdown-toc-review-the-basic-application-structure">Review the basic application structure</a></li> |
|||
<li><a href="#start-the-server-and-view-the-application" id="markdown-toc-start-the-server-and-view-the-application">Start the server and view the application</a></li> |
|||
<li><a href="#understand-the-application-code" id="markdown-toc-understand-the-application-code">Understand the application code</a> <ul> |
|||
<li><a href="#application-manifest" id="markdown-toc-application-manifest">Application manifest</a></li> |
|||
<li><a href="#save-your-application-code" id="markdown-toc-save-your-application-code">Save your application code</a></li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
|
|||
<h2 id="about-this-tutorial-and-the-prerequisites-you-need">About this tutorial and the prerequisites you need</h2> |
|||
|
|||
<p>For this tutorial, we will use the following tools:</p> |
|||
|
|||
<ul> |
|||
<li><code class="highlighter-rouge">npm</code> to manage dependencies and scripts</li> |
|||
<li><code class="highlighter-rouge">browserify</code> to compile node code into browser-ready code</li> |
|||
<li><code class="highlighter-rouge">blockstack.js</code> to authenticate the user and work with the user’s identity/profile information</li> |
|||
</ul> |
|||
|
|||
<p>At minimum, Blockstack requires macOS High Sierra. This tutorial was written for |
|||
a user running macOS High Sierra 10.13.4. The application you build is a |
|||
React.js application that is completely decentralized and server-less. While |
|||
not strictly required to follow along, basic familiarity with React.js is |
|||
helpful.</p> |
|||
|
|||
<p>When complete, the app is capable of the following:</p> |
|||
|
|||
<ul> |
|||
<li>authenticating users using Blockstack</li> |
|||
<li>posting new statuses</li> |
|||
<li>displaying statuses in the user profile</li> |
|||
<li>looking up the profiles and statuses of other users</li> |
|||
</ul> |
|||
|
|||
<p>The basic identity and storage services are provided by <code class="highlighter-rouge">blockstack.js</code>. To test |
|||
the application, you need to have already registered a Blockstack ID.</p> |
|||
|
|||
<p>The tutorial relies on the <code class="highlighter-rouge">npm</code> dependency manager. Before you begin, verify |
|||
you have installed <code class="highlighter-rouge">npm</code> using the <code class="highlighter-rouge">which</code> command to verify.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>which npm |
|||
/usr/local/bin/npm |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>If you don’t find <code class="highlighter-rouge">npm</code> in your system, <a href="https://www.npmjs.com/get-npm">install |
|||
it</a>. Finally, if you get stuck at any point |
|||
while working on the tutorial, the completed <a href="">source code is available for |
|||
you</a> to check your work against.</p> |
|||
|
|||
<p>Finally, make sure you have <a href="ids-introduction.md#create-an-initial-blockstack-id">created at least one Blockstack ID</a>. You’ll use this ID to interat with the application.</p> |
|||
|
|||
<h2 id="use-npm-to-install-yeoman-and-the-blockstack-app-generator">Use npm to install Yeoman and the Blockstack App Generator</h2> |
|||
|
|||
<p>You use <code class="highlighter-rouge">npm</code> to install Yeoman. Yeoman is a generic scaffolding system that |
|||
helps users rapidly start new projects and streamline the maintenance of |
|||
existing projects.</p> |
|||
|
|||
<ol> |
|||
<li> |
|||
<p>Install Yeoman.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> npm install -g yo |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Install the Blockstack application generator.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> npm install -g generator-blockstack |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
</ol> |
|||
|
|||
<h2 id="generate-an-initial-blockstack-application">Generate an initial Blockstack application</h2> |
|||
|
|||
<p>In this section, you build an initial React.js application called <code class="highlighter-rouge">hello-world-tutorial</code>.</p> |
|||
|
|||
<ol> |
|||
<li> |
|||
<p>Create the <code class="highlighter-rouge">hello-world-tutorial</code> directory.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> mkdir hello-world-tutorial |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Change into your new directory.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nb">cd </span>hello-world-tutorial |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Use Yeoman and the Blockstack application generator to create your initial <code class="highlighter-rouge">hello-world-tutorial</code> application.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> yo blockstack |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>You should see several interactive prompts.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> <span class="nv">$ </span>yo blockstack |
|||
|
|||
_-----_ ╭──────────────────────────╮ |
|||
| | │ Welcome to the │ |
|||
|--<span class="o">(</span>o<span class="o">)</span>--| │ Blockstack app │ |
|||
<span class="sb">`</span>---------´ │ generator! │ |
|||
<span class="o">(</span> _´U<span class="sb">`</span>_ <span class="o">)</span> ╰──────────────────────────╯ |
|||
/___A___<span class="se">\ </span> / |
|||
| ~ | |
|||
__<span class="s1">'.___.'</span>__ |
|||
´ <span class="sb">`</span> |° ´ Y <span class="sb">`</span> |
|||
|
|||
? Are you ready to build a Blockstack app <span class="k">in </span>React? <span class="o">(</span>Y/n<span class="o">)</span> |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Respond to the prompts to populate the initial app.</p> |
|||
|
|||
<p>After the process completes successfully, you see a prompt similar to the following:</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> ... |
|||
create public/icon-192x192.png |
|||
create public/index.html |
|||
create public/robots.txt |
|||
create public/manifest.json |
|||
|
|||
|
|||
I<span class="s1">'m all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself. |
|||
</span></code></pre> |
|||
</div> |
|||
</li> |
|||
</ol> |
|||
|
|||
<p>Depending on your environment you may have some problems with the <code class="highlighter-rouge">npm</code> packages. Go ahead and fix these before continuing to the next section.</p> |
|||
|
|||
<h2 id="review-the-basic-application-structure">Review the basic application structure</h2> |
|||
|
|||
<p>The initial application you create is a generic Javascript application you run |
|||
with a local express node. Before you continue, take a moment to examine the |
|||
structure of this generic application structure:</p> |
|||
|
|||
<table> |
|||
<thead> |
|||
<tr> |
|||
<th>File</th> |
|||
<th>Description</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>.editorconfig</td> |
|||
<td>Sets universal values for editor.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>.gitignore</td> |
|||
<td>Git configuration file.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>firebase.json</td> |
|||
<td>Configuragion for mobile application.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>package.json</td> |
|||
<td>Specifies required packages.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>requires.js</td> |
|||
<td>A Javascript module loader.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>server.js</td> |
|||
<td>Simple static server configuration.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<p>In the <code class="highlighter-rouge">public</code> folder you find these files:</p> |
|||
|
|||
<table> |
|||
<thead> |
|||
<tr> |
|||
<th>File</th> |
|||
<th>Description</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>app.css</td> |
|||
<td>Contains application styles.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>app.js</td> |
|||
<td>Main application file.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>boostrap.min.css</td> |
|||
<td>Minifield css for production.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>icon-192x192.png</td> |
|||
<td>Application icon</td> |
|||
</tr> |
|||
<tr> |
|||
<td>index.html</td> |
|||
<td>Single page.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>manifest.json</td> |
|||
<td>Tells the browser about the application and how it should behave.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>robots.txt</td> |
|||
<td>Configures crawling and indexing.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<p>The simple static file server in the <code class="highlighter-rouge">server.js</code>file serves all of the files in |
|||
the <code class="highlighter-rouge">/public</code> directory, including <code class="highlighter-rouge">index.html</code>, <code class="highlighter-rouge">app.js</code>, <code class="highlighter-rouge">bootstrap.min.css</code> |
|||
and <code class="highlighter-rouge">app.css</code>. The main file of the application is in the <code class="highlighter-rouge">app.js</code>. It contains |
|||
the majority of the application logic.</p> |
|||
|
|||
<h2 id="start-the-server-and-view-the-application">Start the server and view the application</h2> |
|||
|
|||
<p>When you start the server, it will create a Node.js server, start it locally, |
|||
and open your browser ‘http://localhost:5000’. From the root of your new application directory:</p> |
|||
|
|||
<ol> |
|||
<li> |
|||
<p>Start the application server.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> npm start |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>The first time you run it, your system prompts you to accept incoming connections.</p> |
|||
|
|||
<p><img src="images/network-connections.gif" alt="Network Connection" /></p> |
|||
</li> |
|||
<li> |
|||
<p>Choose <strong>Allow</strong>.</p> |
|||
</li> |
|||
<li> |
|||
<p>Open your browser to <code class="highlighter-rouge">http://localhost:8080</code>.</p> |
|||
|
|||
<p>You should see a simple application:</p> |
|||
|
|||
<p><img src="images/initial-app.gif" alt="" /></p> |
|||
</li> |
|||
<li> |
|||
<p>Choose <strong>Sign In with Blockstack</strong>.</p> |
|||
|
|||
<p>The application detects whether the user has the Blockstack client edition installed or |
|||
not. This is done automatically by the Blockstack API, more about this later. |
|||
What the authenticator displays depends on the users’ current state.</p> |
|||
|
|||
<table> |
|||
<thead> |
|||
<tr> |
|||
<th>Using web app</th> |
|||
<th>Has client edition installed</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td><img src="images/login-choice.png" alt="" /></td> |
|||
<td><img src="images/login.gif" alt="" /></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<p>If the user logged into the Blockstack authenticator but not reset it, the user can |
|||
simply use the exiting identity.</p> |
|||
|
|||
<p><img src="images/login-no-auth.png" alt="" /></p> |
|||
|
|||
<p>If the user chooses <strong>Deny</strong>, the Blockstack authenticator displays its |
|||
<strong>Home</strong> page but the user is not logged into the sample application.</p> |
|||
</li> |
|||
<li> |
|||
<p>Leave your new application running and move onto the next section.</p> |
|||
</li> |
|||
</ol> |
|||
|
|||
<h2 id="understand-the-application-code">Understand the application code</h2> |
|||
|
|||
<p>In this section, you look at the main application code which is located in the |
|||
<code class="highlighter-rouge">public/app.css</code> file. Open this file now.</p> |
|||
|
|||
<p>All of the code in the file is wrapped in an event |
|||
listener.</p> |
|||
|
|||
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">"DOMContentLoaded"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> |
|||
<span class="p">})</span> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>This listener that waits until the DOM content is loaded. Then, it creates an auth request and redirects the user to sign in:</p> |
|||
|
|||
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'signin-button'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> |
|||
<span class="nx">blockstack</span><span class="p">.</span><span class="nx">redirectUserToSignIn</span><span class="p">()</span> |
|||
<span class="p">})</span> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>You can find the <code class="highlighter-rouge">redirectUserToSignIn()</code> function is part of the <a href="https://blockstack.github.io/blockstack.js/">Blockstack Javascript documentation</a>. There is also a sign out button handler. This handler deletes the local user data and signs the user out:</p> |
|||
|
|||
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'signout-button'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> |
|||
<span class="nx">blockstack</span><span class="p">.</span><span class="nx">signUserOut</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">origin</span><span class="p">)</span> |
|||
<span class="p">})</span> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>The handlers are followed by a <code class="highlighter-rouge">showProfile()</code> function for showing the user’s profile:</p> |
|||
|
|||
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">showProfile</span><span class="p">(</span><span class="nx">profile</span><span class="p">)</span> <span class="p">{</span> |
|||
<span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">blockstack</span><span class="p">.</span><span class="nx">Person</span><span class="p">(</span><span class="nx">profile</span><span class="p">)</span> |
|||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'heading-name'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">name</span><span class="p">()</span> <span class="p">?</span> <span class="nx">person</span><span class="p">.</span><span class="nx">name</span><span class="p">()</span> <span class="p">:</span> <span class="s2">"Nameless Person"</span> |
|||
<span class="k">if</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">avatarUrl</span><span class="p">())</span> <span class="p">{</span> |
|||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'avatar-image'</span><span class="p">).</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'src'</span><span class="p">,</span> <span class="nx">person</span><span class="p">.</span><span class="nx">avatarUrl</span><span class="p">())</span> |
|||
<span class="p">}</span> |
|||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'section-1'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">'none'</span> |
|||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'section-2'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">'block'</span> |
|||
<span class="p">}</span> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>Each <code class="highlighter-rouge">getElementById()</code> function refers to elemments in the <code class="highlighter-rouge">index.html</code> file.</p> |
|||
|
|||
<p>Once a user is successfully signed in, there is logic for loading the user |
|||
profile and displaying the application. As illustrated earlier, there are |
|||
several states the user can be in:</p> |
|||
|
|||
<ul> |
|||
<li>The user is already signed in</li> |
|||
<li>The user has a pending sign in request</li> |
|||
<li>The user is signed out</li> |
|||
</ul> |
|||
|
|||
<p>The application handles these situtations as followed:</p> |
|||
|
|||
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="k">if</span> <span class="p">(</span><span class="nx">blockstack</span><span class="p">.</span><span class="nx">isUserSignedIn</span><span class="p">())</span> <span class="p">{</span> |
|||
<span class="kd">var</span> <span class="nx">profile</span> <span class="o">=</span> <span class="nx">blockstack</span><span class="p">.</span><span class="nx">loadUserData</span><span class="p">().</span><span class="nx">profile</span> |
|||
<span class="nx">showProfile</span><span class="p">(</span><span class="nx">profile</span><span class="p">)</span> |
|||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">blockstack</span><span class="p">.</span><span class="nx">isSignInPending</span><span class="p">())</span> <span class="p">{</span> |
|||
<span class="nx">blockstack</span><span class="p">.</span><span class="nx">handlePendingSignIn</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">userData</span><span class="p">)</span> <span class="p">{</span> |
|||
<span class="nb">window</span><span class="p">.</span><span class="nx">location</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">origin</span> |
|||
<span class="p">})</span> |
|||
<span class="p">}</span> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>When the user is signed in, Blockstack loads the user data from local storage |
|||
and displays the profile with the <code class="highlighter-rouge">showProfile()</code> function. When the user has a |
|||
pending sign in request, the appplication signs the user in and redirects the |
|||
user back to the home page.</p> |
|||
|
|||
<h3 id="application-manifest">Application manifest</h3> |
|||
|
|||
<p>The application’s <code class="highlighter-rouge">/public/manifest.json</code> file configures your app. The |
|||
configurations dictate how the application is displayed in auth views and on |
|||
user home screens. The contents are very simple:</p> |
|||
|
|||
<div class="language-json highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Hello, Blockstack"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"start_url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"localhost:5000"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"description"</span><span class="p">:</span><span class="w"> </span><span class="s2">"A simple demo of Blockstack Auth"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"icons"</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="w"> |
|||
</span><span class="nt">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://helloblockstack.com/icon-192x192.png"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"192x192"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="w"> |
|||
</span><span class="p">}]</span><span class="w"> |
|||
</span><span class="p">}</span><span class="w"> |
|||
</span></code></pre> |
|||
</div> |
|||
|
|||
<p>Keep it as is or fill it in with new information that describes your app.</p> |
|||
|
|||
<h3 id="save-your-application-code">Save your application code</h3> |
|||
|
|||
<p>Complete the tutorial by storing your app code on GitHub. Before you begin, make sure you have a GitHub account and have configured your environment to use it.</p> |
|||
|
|||
<ol> |
|||
<li> |
|||
<p>Initialize the application code as a Git repo.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> git init |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Add and commit all of the files:</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> git add . <span class="o">&&</span> git commit -m <span class="s2">"first commit"</span> |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>In GitHub, create a <code class="highlighter-rouge">hello-blockstack</code> repository.</p> |
|||
</li> |
|||
<li> |
|||
<p>Back in your termininal window, add a remote for GitHub.</p> |
|||
|
|||
<p>Make sure to fill in your username:</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code> git remote add origin git@github.com:YOUR_USERNAME_HERE/hello-blockstack.git |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Push your new code to the master branch of the remote repo:</p> |
|||
|
|||
<div class="highlighter-rouge"><pre class="highlight"><code> git push origin master |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
</ol> |
|||
|
|||
<p>You’re done! You just built your first Blockstack app and shipped the code. |
|||
You’re well on your way to becoming a Blockstack app legend.</p> |
|||
|
|||
<div class="share uk-text-center"> |
|||
<a href="https://twitter.com/intent/tweet?text=Hello, Blockstack Tutorial&url=https://zbabystack.netlify.com/newinternet/hello-blockstack.html&via=&related=" rel="nofollow" target="_blank" title="Share on Twitter" onclick="window.open(this.href, 'twitter', 'width=550,height=235');return false;"><span data-uk-icon="icon: twitter; ratio: 1.2"></span></a> |
|||
<a class="uk-margin-small-left" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fzbabystack.netlify.com%2Fnewinternet%2Fhello-blockstack.html" rel="nofollow" target="_blank" title="Share on Facebook" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"><span data-uk-icon="icon: facebook; ratio: 1.2"></span></a> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<hr class="uk-margin-medium"> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<div class="uk-margin-large-top"> |
|||
<h3>Related Articles</h3> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<ul class="uk-list"> |
|||
|
|||
</ul> |
|||
</div> |
|||
|
|||
|
|||
|
|||
</article> |
|||
|
|||
<script> |
|||
// Table of contents scroll to |
|||
UIkit.scroll('#markdown-toc a', { |
|||
duration: 400, |
|||
offset: 120 |
|||
}); |
|||
</script> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div id="offcanvas" data-uk-offcanvas="flip: true; overlay: true"> |
|||
<div class="uk-offcanvas-bar"> |
|||
|
|||
<button class="uk-offcanvas-close" type="button" data-uk-close></button> |
|||
|
|||
<ul class="uk-nav uk-nav-default"> |
|||
<!-- <li><a class="uk-logo uk-margin-small-bottom" href="/"><img src="https://zbabystack.netlify.com/assets/posts/logo.png" alt="Docs"></a></li> --> |
|||
<li><a class="uk-logo uk-margin-small-bottom" href="/"><img src="/assets/posts/logo.png" alt="Docs"></a></li> |
|||
|
|||
|
|||
<li><a href="https://blockstack.org" target="_blank" >Blockstack.org</a></li> |
|||
|
|||
|
|||
<li><a href="https://forum.blockstack.org/" target="_blank" >Forums</a></li> |
|||
|
|||
|
|||
<li><a href="https://github.com/blockstack" target="_blank" >GitHub</a></li> |
|||
|
|||
</ul> |
|||
|
|||
<div class="uk-margin-small-top uk-text-center uk-text-muted uk-link-muted"> |
|||
<div data-uk-grid class="uk-child-width-auto uk-grid-small uk-flex-center uk-grid"> |
|||
|
|||
<div class="uk-first-column"> |
|||
<a href="https://twitter.com/" data-uk-icon="icon: twitter" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.facebook.com/" data-uk-icon="icon: facebook" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.instagram.com/" data-uk-icon="icon: instagram" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://vimeo.com/" data-uk-icon="icon: vimeo" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<footer class="uk-section uk-text-center uk-text-muted uk-link-muted"> |
|||
<div class="uk-container uk-container-small"> |
|||
|
|||
<!-- <div> |
|||
<ul class="uk-subnav uk-flex-center"> |
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://blockstack.org" target="_blank" >Blockstack.org</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://forum.blockstack.org/" target="_blank" >Forums</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://github.com/blockstack" target="_blank" >GitHub</a></li> |
|||
|
|||
|
|||
</ul> |
|||
</div> |
|||
<div class="uk-margin-medium"> |
|||
<div data-uk-grid class="uk-child-width-auto uk-grid-small uk-flex-center uk-grid"> |
|||
|
|||
<div class="uk-first-column"> |
|||
<a href="https://twitter.com/" data-uk-icon="icon: twitter" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.facebook.com/" data-uk-icon="icon: facebook" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.instagram.com/" data-uk-icon="icon: instagram" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://vimeo.com/" data-uk-icon="icon: vimeo" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
</div> --> |
|||
<div class="uk-margin-medium uk-text-small copyright">© 2018 Blockstack</div> |
|||
|
|||
</div> |
|||
</footer> |
|||
|
|||
|
|||
|
|||
<script type="text/javascript"> |
|||
/* Create a configuration object */ |
|||
var ss360Config = { |
|||
/* Your site id */ |
|||
siteId: 'blockstack', |
|||
/* A CSS selector that points to your search box */ |
|||
searchBox: {selector: '#searchBox'} |
|||
}; |
|||
</script> |
|||
<script src="https://cdn.sitesearch360.com/sitesearch360-v11.min.js" async></script> |
|||
|
|||
|
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,622 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<!-- Begin Jekyll SEO tag v2.5.0 --> |
|||
<title>Get and use a Blockstack ID | Blockstack</title> |
|||
<meta name="generator" content="Jekyll v3.8.3" /> |
|||
<meta property="og:title" content="Get and use a Blockstack ID" /> |
|||
<meta name="author" content="Blockstack" /> |
|||
<meta property="og:locale" content="en_US" /> |
|||
<meta name="description" content="Get and use a Blockstack ID" /> |
|||
<meta property="og:description" content="Get and use a Blockstack ID" /> |
|||
<link rel="canonical" href="https://zbabystack.netlify.com/newinternet/ids-introduction.html" /> |
|||
<meta property="og:url" content="https://zbabystack.netlify.com/newinternet/ids-introduction.html" /> |
|||
<meta property="og:site_name" content="Blockstack" /> |
|||
<meta property="og:type" content="article" /> |
|||
<meta property="article:published_time" content="2018-09-05T15:55:10-07:00" /> |
|||
<script type="application/ld+json"> |
|||
{"description":"Get and use a Blockstack ID","author":{"@type":"Person","name":"Blockstack"},"@type":"BlogPosting","url":"https://zbabystack.netlify.com/newinternet/ids-introduction.html","headline":"Get and use a Blockstack ID","dateModified":"2018-09-05T15:55:10-07:00","datePublished":"2018-09-05T15:55:10-07:00","mainEntityOfPage":{"@type":"WebPage","@id":"https://zbabystack.netlify.com/newinternet/ids-introduction.html"},"@context":"http://schema.org"}</script> |
|||
<!-- End Jekyll SEO tag --> |
|||
|
|||
<!-- <meta property="og:image" content="https://zbabystack.netlify.com/assets/posts/logo.png"/> --> |
|||
<meta property="og:image" content="/assets/posts/logo.png"/> |
|||
<link rel="stylesheet" href="/assets/css/main.css"> |
|||
<link rel="shortcut icon" type="image/png" href="/assets/img/touch-icon.png" > |
|||
<link rel="alternate" type="application/rss+xml" title="Blockstack" href="/feed.xml"> |
|||
<script src="/assets/js/main.js"></script> |
|||
|
|||
</head> |
|||
|
|||
|
|||
<body> |
|||
|
|||
<header class="uk-background-secondary"> |
|||
<div data-uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky" class="uk-sticky uk-sticky-fixed" style="position: fixed; top: 0px; width: 1904px;"> |
|||
<nav class="uk-navbar-container"> |
|||
<div class="uk-container"> |
|||
<div data-uk-navbar> |
|||
<div class="uk-navbar-left"> |
|||
|
|||
<!-- <a class="uk-navbar-item uk-logo" href="/"><img src="https://zbabystack.netlify.com/assets/posts/logo.png" alt="Docs"></a> --> |
|||
<a class="uk-navbar-item uk-logo" href="/"><img src="/assets/posts/logo.png" alt="Docs"></a> |
|||
|
|||
</div> |
|||
<div class="uk-navbar-right"> |
|||
<ul class="uk-navbar-nav uk-visible@m"> |
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://blockstack.org" target="_blank" >Blockstack.org</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://forum.blockstack.org/" target="_blank" >Forums</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://github.com/blockstack" target="_blank" >GitHub</a></li> |
|||
|
|||
|
|||
</ul> |
|||
|
|||
|
|||
<div> |
|||
<a class="uk-navbar-toggle" uk-search-icon href="#"></a> |
|||
<div class="uk-drop uk-background-default uk-border-rounded" uk-drop="mode: click; pos: left-center; offset: 0"> |
|||
<form class="uk-search uk-search-navbar uk-width-1-1" onsubmit="return false;"> |
|||
<input id="searchBox" class="uk-search-input" type="search" placeholder="Search..." autofocus> |
|||
</form> |
|||
<ul id="searchBox-results" class="uk-position-absolute uk-width-1-1 uk-list"></ul> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<a class="uk-navbar-toggle uk-hidden@m" href="#offcanvas" data-uk-navbar-toggle-icon data-uk-toggle></a> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</nav> |
|||
</div> |
|||
</header> |
|||
|
|||
|
|||
|
|||
|
|||
<div class="uk-section"> |
|||
<div class="uk-container"> |
|||
<div class="uk-grid-large" data-uk-grid> |
|||
|
|||
<div class="sidebar-fixed-width uk-visible@m"> |
|||
<div class="sidebar-docs uk-position-fixed"> |
|||
<!-- --> |
|||
|
|||
|
|||
<h5>Get started</h5> |
|||
|
|||
<ul class="uk-nav uk-nav-default doc-nav"> |
|||
|
|||
|
|||
<!-- --> |
|||
|
|||
<li class=""><a href="/newinternet/browser-introduction.html">Use the Blockstack Authenticator</a></li> |
|||
|
|||
|
|||
<!-- --> |
|||
|
|||
<li class="uk-active"><a href="/newinternet/ids-introduction.html">Get and use a Blockstack ID</a></li> |
|||
|
|||
</ul> |
|||
|
|||
<!-- --> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="uk-width-1-1 uk-width-expand@m"> |
|||
|
|||
<article class="uk-article"> |
|||
|
|||
<h1 class="uk-article-title">Get and use a Blockstack ID</h1> |
|||
|
|||
|
|||
|
|||
|
|||
<div class="uk-article-meta uk-margin-top uk-margin-medium-bottom"> |
|||
|
|||
|
|||
|
|||
<!-- <img class="avatar avatar-small" alt="Blockstack" width="32" height="32" data-proofer-ignore="true" src="https://avatars2.githubusercontent.com/Blockstack?v=3&s=32" srcset="https://avatars2.githubusercontent.com/Blockstack?v=3&s=32 1x, https://avatars2.githubusercontent.com/Blockstack?v=3&s=64 2x, https://avatars2.githubusercontent.com/Blockstack?v=3&s=96 3x, https://avatars2.githubusercontent.com/Blockstack?v=3&s=128 4x" /> --> |
|||
|
|||
|
|||
|
|||
<!-- Written by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Blockstack</span></span><br> --> |
|||
|
|||
|
|||
<time datetime="2018-09-05T15:55:10-07:00" itemprop="datePublished"> |
|||
|
|||
<a "target="_blank" href="https://github.com/moxiegirl/docs-new/blob/master/_newinternet/ids-introduction.md" class="btn btn-default githubEditButton" role="button"><span data-uk-icon="icon: pencil; ratio: 1.2"></span> Edit this page on Github</a> |
|||
<span style="font-family:Wingdings">w</span> Sep 5, 2018 |
|||
</time> |
|||
|
|||
</div> |
|||
|
|||
<div class="article-content"> |
|||
|
|||
<p class="no_toc">Through the Blockstack browser you can create an identity. Your identity is a |
|||
point of contact as you interact with others through Dapps. Others may be |
|||
individual users or companies or software. Unless you allow it, none of these |
|||
others have access to anything other than your identity label, for example |
|||
<code class="highlighter-rouge">moxiegirl.id.blockstack</code>. To learn more about you, others must ask and you can |
|||
choose to share – or not.</p> |
|||
|
|||
<p>This document explains one type of identity, the Blockstack ID. You learn how to |
|||
create them, as well as when and how to restore them. It contains the following sections:</p> |
|||
|
|||
<ul id="markdown-toc"> |
|||
<li><a href="#understand-blockstack-ids" id="markdown-toc-understand-blockstack-ids">Understand Blockstack IDs</a></li> |
|||
<li><a href="#create-an-initial-blockstack-id" id="markdown-toc-create-an-initial-blockstack-id">Create an initial Blockstack ID</a></li> |
|||
<li><a href="#restore-a-blockstack-id" id="markdown-toc-restore-a-blockstack-id">Restore a Blockstack ID</a> <ul> |
|||
<li><a href="#restore-with-a-recovery-key" id="markdown-toc-restore-with-a-recovery-key">Restore with a recovery key</a></li> |
|||
<li><a href="#restore-with-a-recovery-code-and-original-password" id="markdown-toc-restore-with-a-recovery-code-and-original-password">Restore with a recovery code and original password</a></li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
|
|||
<h2 id="understand-blockstack-ids">Understand Blockstack IDs</h2> |
|||
|
|||
<p>Interacting within the decentralized internet requires that you have at least |
|||
one identity, though you can create several. Your identity is created through a |
|||
registrar. Blockstack maintains a registrar for creating identities that you |
|||
can use to interact with distributed applications (Dapps).</p> |
|||
|
|||
<p>To use the Blockstack Browser or to develop a decentralized application you |
|||
require a Blockstack ID, for example <code class="highlighter-rouge">moxiegirl.id.blockstack</code>. A Blockstack ID |
|||
is a digital identity that is registered With Blockstack. Your personal data and |
|||
storage are built around this ID. Decentralized applications that want to access |
|||
your data need your identity and your permission.</p> |
|||
|
|||
<p>When you first sign up through the Blockstack browser, you create an initial |
|||
human-readable identity in the <code class="highlighter-rouge">id.blockstack</code> domain. This initial identity has |
|||
the format:</p> |
|||
|
|||
<p><em><code class="highlighter-rouge">USERNAME</code></em><code class="highlighter-rouge">.id.blockstack</code></p> |
|||
|
|||
<p>The <em><code class="highlighter-rouge">USERNAME</code></em> portion must be unique. You enter an email and password to |
|||
create the initial identity. Blockstack uses the password to:</p> |
|||
|
|||
<ul> |
|||
<li>seed a <em>recovery code</em> an encrypted string, for example <code class="highlighter-rouge">36mWivFdy0YPH2z31EflpQz/Y0UMrOrJ++lH=0EI7c3mop2JuRBm5W1P0BwXxSTazJsUjOAmC55rFUWINqDqGccLio0iwzGclAhaHGZQ5M52</code></li> |
|||
<li>seed a <em>recovery key</em> which is a squence of words <code class="highlighter-rouge">applied binge crisp pictorial fiery dancing agreeable frogs light finish ping apple</code></li> |
|||
</ul> |
|||
|
|||
<p>The email is provided to allow either Blockstack or a decentralized application |
|||
to communicate information to you. In Blockstacks’ case, the email is used to |
|||
send you reovery information.</p> |
|||
|
|||
<p>While Blockstack registers your human readable ID and the recovery key. <em>You</em> must |
|||
record the:</p> |
|||
|
|||
<ul> |
|||
<li>recovery key</li> |
|||
<li>recovery code (in the order the words apepar)</li> |
|||
<li>initial password</li> |
|||
</ul> |
|||
|
|||
<p>Blockstack does not store them, so it can’t give them to you later if they are |
|||
lost.</p> |
|||
|
|||
<p>Your initial ID is created in the <code class="highlighter-rouge">id.blockstack</code> domain. The initial identity |
|||
remains primary, and you need this primary ID and its associated information |
|||
(recovery code, recovery key, and password) to use the browser again.</p> |
|||
|
|||
<p>Finally, the <code class="highlighter-rouge">id.blockstack</code> domain is sponsored by the Blockstack registrar and |
|||
identities on it are free. Once you are using the Blockstack Browser, you can |
|||
create additional identities outside of this domain and controlled by other |
|||
registrars. Coin is required to purchase identities on other domains.</p> |
|||
|
|||
<h2 id="create-an-initial-blockstack-id">Create an initial Blockstack ID</h2> |
|||
|
|||
<p>To create an inititial Blockstack ID, do the following:</p> |
|||
|
|||
<ol> |
|||
<li> |
|||
<p>Open the <a href="https://browser.blockstack.org/sign-up?redirect=%2F">Blockstack web applicatin in your browser</a>.</p> |
|||
|
|||
<p>The application prompts you for an email address.</p> |
|||
|
|||
<p><img src="images/create-id-0.png" alt="" /></p> |
|||
|
|||
<p>Blockstack uses this email address to send you recovery information.</p> |
|||
</li> |
|||
<li> |
|||
<p>Enter an email address and press <strong>Next</strong>.</p> |
|||
|
|||
<p>The application prompts you to enter a password. Blockstack users this |
|||
password to encrypt your recovery code. You must record and save this |
|||
initial password.</p> |
|||
|
|||
<p><strong>NOTE</strong>:The Blockstack team cannot restore your password for you.</p> |
|||
</li> |
|||
<li> |
|||
<p>Enter a password, confirm it, and press <strong>Next</strong>.</p> |
|||
|
|||
<p><img src="images/create-id-1.png" alt="" /></p> |
|||
|
|||
<p>The browser prompts you to register a unique username in the <code class="highlighter-rouge">id.blockstack</code> |
|||
domain. This is your identity in the decentralized internet. The format of the id |
|||
is:</p> |
|||
|
|||
<p><em><code class="highlighter-rouge">username</code></em><code class="highlighter-rouge">.id.blockstack</code></p> |
|||
|
|||
<p>You’ll use this initial ID to access the Blockstack Browser.</p> |
|||
</li> |
|||
<li> |
|||
<p>Enter a unique username and press <strong>Check Availability</strong>.</p> |
|||
|
|||
<p><img src="images/create-id-2.png" alt="" /></p> |
|||
|
|||
<p>When you choose an ID that is available, the system responds with the following:</p> |
|||
|
|||
<p><img src="images/create-id-3.png" alt="" /></p> |
|||
</li> |
|||
<li> |
|||
<p>Press <strong>Continue</strong>.</p> |
|||
|
|||
<p>The system prompts you to save your <strong>recovery code</strong>. A recovery code is a |
|||
sequence of words. These words allow you to recover an <code class="highlighter-rouge">id.blockstack</code> |
|||
that you’ve created. You should store the words along with their order, for |
|||
example, <code class="highlighter-rouge">#1 applied</code> and so forth.</p> |
|||
</li> |
|||
<li> |
|||
<p>Click <strong>I have written down all the words</strong> when you are done.</p> |
|||
|
|||
<p>The system places you in the Blockstack browser. You can begin exploring and |
|||
using Dapps.</p> |
|||
</li> |
|||
</ol> |
|||
|
|||
<h2 id="restore-a-blockstack-id">Restore a Blockstack ID</h2> |
|||
|
|||
<p>When you return to the Blockstack Browser, the browser prompts you to create a |
|||
new Blockstack ID or restore an existing Blockstack ID. If you have a |
|||
Blockstack identity, you can open the browser by restoring the identity. To |
|||
restore an identity, there are two available methods.</p> |
|||
|
|||
<p>Method 1: Supply the identity recovery code (<code class="highlighter-rouge">36mWivFdy0YPH2z31E...</code>) and the |
|||
password you provided when you <em>initially</em> created your identity. Method 2: |
|||
Supply the recovery key which is a sequence of words (<code class="highlighter-rouge">applied binge ...</code>)</p> |
|||
|
|||
<p>If you loose either the recovery code or the password you provided when you |
|||
<em>initially</em> created your identity, you can no longer use method 1 to restore |
|||
your identity. If you lose the recovery key, you can no longer use method 2. |
|||
Once you no longer have access to either method, your identity is estranged and |
|||
not accessible by anyone.</p> |
|||
|
|||
<h3 id="restore-with-a-recovery-key">Restore with a recovery key</h3> |
|||
|
|||
<ol> |
|||
<li>Open the <a href="https://browser.blockstack.org/sign-up?redirect=%2F">Blockstack web application in your browser</a>.</li> |
|||
<li> |
|||
<p>Choose <strong>Restore a Blockstack ID</strong>.</p> |
|||
|
|||
<p>The system displays a dialog where you can enter your recovery code or a |
|||
recovery key.</p> |
|||
</li> |
|||
<li> |
|||
<p>Enter the recovery key.</p> |
|||
|
|||
<p>The recovery key is a squence of words.</p> |
|||
|
|||
<p><img src="images/recovery-code.png" alt="" /></p> |
|||
</li> |
|||
<li> |
|||
<p>Press <strong>Next</strong>.</p> |
|||
|
|||
<p>The system prompts you for an email address. This email can be one you |
|||
entered previously or an entirely new one. Blockstack doesn’t store this |
|||
address; it is used during your current Blockstack browser interaction to communicate |
|||
important information with you.</p> |
|||
</li> |
|||
<li> |
|||
<p>Enter an email and press <strong>Next</strong>.</p> |
|||
|
|||
<p>The system prompts you for an password and its confirmation. This password |
|||
can be one you entered previously or an entirely new one. Write this password |
|||
down. You can use the password during your current Blockstack browser |
|||
interaction to reveal your keychain or change your password. Blockstack does |
|||
not store this information past the session.</p> |
|||
</li> |
|||
<li> |
|||
<p>Enter a password and press <strong>Next</strong>.</p> |
|||
|
|||
<p>The system welcomes you back.</p> |
|||
|
|||
<p><img src="images/welcome-back.png" alt="" /></p> |
|||
|
|||
<p>At this point, you can go onto work with Dapps or you can review your recovery key.</p> |
|||
</li> |
|||
</ol> |
|||
|
|||
<h3 id="restore-with-a-recovery-code-and-original-password">Restore with a recovery code and original password</h3> |
|||
|
|||
<ol> |
|||
<li>Open the <a href="https://browser.blockstack.org/sign-up?redirect=%2F">Blockstack web application in your browser</a>.</li> |
|||
<li> |
|||
<p>Choose <strong>Restore a Blockstack ID</strong>.</p> |
|||
|
|||
<p>The system displays a dialog where you can enter your recovery code or a |
|||
recovery key.</p> |
|||
</li> |
|||
<li>Enter your recovery code.</li> |
|||
</ol> |
|||
|
|||
<p>The recovery code is an encrypted string.</p> |
|||
|
|||
<p><img src="images/recovery-code.png" alt="" /></p> |
|||
|
|||
<ol> |
|||
<li> |
|||
<p>Press <strong>Next</strong>.</p> |
|||
|
|||
<p>The system prompts you for an email address. This email can be one you |
|||
entered previously or an entirely new one. Blockstack doesn’t store this |
|||
address; it is used during your current Blockstack browser interaction to |
|||
communicate important information with you.</p> |
|||
</li> |
|||
<li> |
|||
<p>Enter an email and press <strong>Next</strong>.</p> |
|||
|
|||
<p>The system prompts you for an password. This must be the password entered |
|||
when you first created your identity. If you have forgetten this passowrd, |
|||
Blockstack cannot provide it to you. Instead, you must switch to using your |
|||
recovery key rather than your code to restore your identity.</p> |
|||
</li> |
|||
<li> |
|||
<p>Enter your origin password and press <strong>Next</strong>.</p> |
|||
</li> |
|||
</ol> |
|||
|
|||
<p>The system welcomes you back.</p> |
|||
|
|||
<p><img src="images/welcome-back.png" alt="" /></p> |
|||
|
|||
<p>At this point, you can go work with Dapps or you can review your recovery key.</p> |
|||
|
|||
<div class="share uk-text-center"> |
|||
<a href="https://twitter.com/intent/tweet?text=Get and use a Blockstack ID&url=https://zbabystack.netlify.com/newinternet/ids-introduction.html&via=&related=" rel="nofollow" target="_blank" title="Share on Twitter" onclick="window.open(this.href, 'twitter', 'width=550,height=235');return false;"><span data-uk-icon="icon: twitter; ratio: 1.2"></span></a> |
|||
<a class="uk-margin-small-left" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fzbabystack.netlify.com%2Fnewinternet%2Fids-introduction.html" rel="nofollow" target="_blank" title="Share on Facebook" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"><span data-uk-icon="icon: facebook; ratio: 1.2"></span></a> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<hr class="uk-margin-medium"> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<!-- <div class="uk-margin-large-top"> |
|||
<h3>Related Articles</h3> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<ul class="uk-list"> |
|||
|
|||
</ul> |
|||
</div> |
|||
--> |
|||
|
|||
</article> |
|||
|
|||
<script> |
|||
// Table of contents scroll to |
|||
UIkit.scroll('#markdown-toc a', { |
|||
duration: 400, |
|||
offset: 120 |
|||
}); |
|||
</script> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div id="offcanvas" data-uk-offcanvas="flip: true; overlay: true"> |
|||
<div class="uk-offcanvas-bar"> |
|||
|
|||
<button class="uk-offcanvas-close" type="button" data-uk-close></button> |
|||
|
|||
<ul class="uk-nav uk-nav-default"> |
|||
<!-- <li><a class="uk-logo uk-margin-small-bottom" href="/"><img src="https://zbabystack.netlify.com/assets/posts/logo.png" alt="Docs"></a></li> --> |
|||
<li><a class="uk-logo uk-margin-small-bottom" href="/"><img src="/assets/posts/logo.png" alt="Docs"></a></li> |
|||
|
|||
|
|||
<li><a href="https://blockstack.org" target="_blank" >Blockstack.org</a></li> |
|||
|
|||
|
|||
<li><a href="https://forum.blockstack.org/" target="_blank" >Forums</a></li> |
|||
|
|||
|
|||
<li><a href="https://github.com/blockstack" target="_blank" >GitHub</a></li> |
|||
|
|||
</ul> |
|||
|
|||
<div class="uk-margin-small-top uk-text-center uk-text-muted uk-link-muted"> |
|||
<div data-uk-grid class="uk-child-width-auto uk-grid-small uk-flex-center uk-grid"> |
|||
|
|||
<div class="uk-first-column"> |
|||
<a href="https://twitter.com/" data-uk-icon="icon: twitter" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.facebook.com/" data-uk-icon="icon: facebook" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.instagram.com/" data-uk-icon="icon: instagram" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://vimeo.com/" data-uk-icon="icon: vimeo" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<footer class="uk-section uk-text-center uk-text-muted uk-link-muted"> |
|||
<div class="uk-container uk-container-small"> |
|||
|
|||
<!-- <div> |
|||
<ul class="uk-subnav uk-flex-center"> |
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://blockstack.org" target="_blank" >Blockstack.org</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://forum.blockstack.org/" target="_blank" >Forums</a></li> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<li><a href="https://github.com/blockstack" target="_blank" >GitHub</a></li> |
|||
|
|||
|
|||
</ul> |
|||
</div> |
|||
<div class="uk-margin-medium"> |
|||
<div data-uk-grid class="uk-child-width-auto uk-grid-small uk-flex-center uk-grid"> |
|||
|
|||
<div class="uk-first-column"> |
|||
<a href="https://twitter.com/" data-uk-icon="icon: twitter" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.facebook.com/" data-uk-icon="icon: facebook" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://www.instagram.com/" data-uk-icon="icon: instagram" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<div> |
|||
<a href="https://vimeo.com/" data-uk-icon="icon: vimeo" class="uk-icon-link uk-icon" target="_blank"></a> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
</div> --> |
|||
<div class="uk-margin-medium uk-text-small copyright">© 2018 Blockstack</div> |
|||
|
|||
</div> |
|||
</footer> |
|||
|
|||
|
|||
|
|||
<script type="text/javascript"> |
|||
/* Create a configuration object */ |
|||
var ss360Config = { |
|||
/* Your site id */ |
|||
siteId: 'blockstack', |
|||
/* A CSS selector that points to your search box */ |
|||
searchBox: {selector: '#searchBox'} |
|||
}; |
|||
</script> |
|||
<script src="https://cdn.sitesearch360.com/sitesearch360-v11.min.js" async></script> |
|||
|
|||
|
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 105 KiB |
@ -0,0 +1,157 @@ |
|||
<p>If you’ve gone through tutorials and documentation for blockstack.js and Gaia, |
|||
you’ll know the <code class="highlighter-rouge">blockstack.js</code> interface is dead simple. First, you |
|||
authenticate a user into your app. Once that’s complete, you’re free to read and |
|||
write app data in the user’s storage provider with two data operations:</p> |
|||
|
|||
<ul> |
|||
<li><code class="highlighter-rouge">putFile</code>: Writes to a specified path</li> |
|||
<li><code class="highlighter-rouge">getFile</code>: Gets the file at a specified path</li> |
|||
</ul> |
|||
|
|||
<p>That’s it. You’re reading files and you’re writing files. All file types are |
|||
supported, so you can choose to manage data with sql, markdown, json, or even |
|||
your own custom format! Gaia operations are purposefully left primitive so that |
|||
you have complete control over which tools you use on top. In the future, we |
|||
imagine a variety of data management libraries will emerge that wrap Gaia and |
|||
help you interact with your data layer via expressive APIs.</p> |
|||
|
|||
<p>If you’re anything like most developers, you’re probably used to working with |
|||
highly abstracted libraries that offer collection management, querying, |
|||
pagination, documented schema models, and more. Developing apps on Blockstack is |
|||
thrilling because you quickly learn that you don’t need training wheels. You can |
|||
create a meaningful and complex data layer using two methods: <code class="highlighter-rouge">putFile</code> and |
|||
<code class="highlighter-rouge">getFile</code>. This limited interface forces you to think about your fundamental |
|||
data architecture and make some decisions about how you’re modeling data to gain |
|||
back the benefits you get with large frameworks.</p> |
|||
|
|||
<p>This series will focus on teaching you to think like a Blockstack developer |
|||
working with Gaia. Let’s get started!</p> |
|||
|
|||
<h2 id="working-with-data-collections">Working with Data Collections</h2> |
|||
|
|||
<p>For the purposes of this tutorial, let’s pretend that we’re building a simple |
|||
grocery list app called Grublist. As a user of Grublist, you should be able to |
|||
create, read, update, and delete grocery lists.</p> |
|||
|
|||
<p>Let’s think in terms of JSON since it’s easy and familiar.</p> |
|||
|
|||
<h3 id="single-file-collection-approach">Single-File Collection Approach</h3> |
|||
|
|||
<p>Here’s a Single-File Collection approach to modeling our data:</p> |
|||
|
|||
<div class="highlighter-rouge"><pre class="highlight"><code>// grocerylists.json |
|||
{ |
|||
"3255": { |
|||
"items": [ |
|||
"1 Head of Lettuce", |
|||
"Haralson apples" |
|||
] |
|||
}, |
|||
// ...more lists with items |
|||
} |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>Notice that items are stored as an array nested inside of each grocery list.</p> |
|||
|
|||
<p>This is conceptually the simplest way to manage your grocery lists. It’s very |
|||
easy to wrap your brain around what’s going on with the data. When you read the |
|||
<code class="highlighter-rouge">/grocerylists.json</code> file, you get back exactly what you need: grocery lists and |
|||
their items. When you write, you’re always writing to one place.</p> |
|||
|
|||
<p>There is one caveat to this approach that you should seriously consider: Every |
|||
time you update one of your grocery lists in any way, you’re overwriting the |
|||
entire file of all your grocery lists. This is because using the <code class="highlighter-rouge">putFile</code> |
|||
method will overwrite anything at <code class="highlighter-rouge">/grocerylists.json</code> if it exists, so if |
|||
you’re doing a write operation for a new grocery list, you must submit all |
|||
previous grocery lists plus the new grocery list.</p> |
|||
|
|||
<p>That’s actually kind of scary, especially considering this code is running on |
|||
the client where anything can go wrong. Imagine your client-side code encounters |
|||
a parsing error with a user-input value and you overwrite two years worth of a |
|||
user’s grocery lists with:</p> |
|||
|
|||
<div class="highlighter-rouge"><pre class="highlight"><code>"line 6: Parsing Error: Unexpected token ." |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p><strong>To summarize the Single-File Collection approach:</strong></p> |
|||
|
|||
<p>Pros:</p> |
|||
|
|||
<ul> |
|||
<li><strong>Simplified reads</strong>: Just request a single file and get back a list of all your data.</li> |
|||
<li><strong>Simplified writes</strong>: Some people might be more comfortable working with a Javascript array of items on the client.</li> |
|||
</ul> |
|||
|
|||
<p>Cons:</p> |
|||
|
|||
<ul> |
|||
<li><strong>Pagination is impossible</strong>: Using a simple storage strategy like this, you have no choice but to download the entire file of all grocery lists. A user could have 1000 grocery lists, and every time they enter your app they would be forced to download all 1000 grocery lists worth of data.</li> |
|||
<li><strong>Too heavy-handed</strong>: This is the issue I mentioned above about overwriting an entire file of all grocery lists. Generally, you should try to avoid managing entire collections of data at a time.</li> |
|||
<li><strong>Less control over file permissions</strong>: You’ll need to perform data acrobatics if you want to share only a single grocery list with a trusted party.</li> |
|||
</ul> |
|||
|
|||
<h3 id="multi-file-collection-approach">Multi-File Collection Approach</h3> |
|||
|
|||
<p>It would be great if we could split out grocery lists into their own files to |
|||
minimize the risk of destroying all the user’s grocery list data and make it |
|||
easier to paginate the lists.</p> |
|||
|
|||
<p>Here’s a diagram of a Multi-File Collection approach:</p> |
|||
|
|||
<p><img src="/images/tutorials/grocery-lists.png" style="max-width: 80%;" /></p> |
|||
|
|||
<p>With this approach, we maintain an index file that stores an array of list IDs. |
|||
Each list ID is predictably the name of a file under a <code class="highlighter-rouge">grocerylists</code> folder.</p> |
|||
|
|||
<p><strong>To summarize the Multi-File Collection approach:</strong></p> |
|||
|
|||
<p>Pros:</p> |
|||
|
|||
<ul> |
|||
<li><strong>Performant pagination</strong>: Just request the <code class="highlighter-rouge">grocerylists.json</code> file, and from there you can request as many of the collection items as you need.</li> |
|||
<li><strong>Less risk of data corruption</strong>: By only manipulating one grocery list at a time, you can guarantee that if something goes wrong with your write operation, it won’t affect the other grocery list data. You might say, “but I still need to overwrite the list of IDs every time I operate.” That’s true, but you can optimize your code so that you’re only updating that file when you add or remove a grocery list. Managing a list of IDs is also much more manageable than a big list of user input data.</li> |
|||
<li><strong>More control over file permissions</strong>: If you wanted to share only a single grocery list with a trusted party, it’s much easier to do when the list data is isolated to its own file.</li> |
|||
</ul> |
|||
|
|||
<p>Cons</p> |
|||
|
|||
<ul> |
|||
<li><strong>More network requests</strong>: If you have 10 grocery lists and want to fetch them all, you’re going to be making 11 network requests. Using HTTP/2 and requesting limited items at a time will help with performance.</li> |
|||
<li><strong>More complex architecture</strong>: Rather than simply requesting the file of all your data, you now have to request each item individually and stitch them all together once all requests have finished.</li> |
|||
</ul> |
|||
|
|||
<h3 id="implementing-these-approaches">Implementing these approaches</h3> |
|||
|
|||
<p>We’ve shown you conceptually how you might think about organizing your data, but |
|||
you have not seen much implementation code. Check out the sandbox linked below |
|||
for an implementation of services that can accommodate either the single-file or |
|||
multi-file approaches for all of your collections.</p> |
|||
|
|||
<p>Note that we’ve included an interstitial “driver” layer for a few reasons:</p> |
|||
|
|||
<ol> |
|||
<li>In the sandbox, we’re swapping out the Blockstack driver for a localstorage driver for demonstration purposes.</li> |
|||
<li>It’s good practice to have all data flow through an interface you control, so that you can add logging or perform other operations.</li> |
|||
<li>If the <code class="highlighter-rouge">blockstack.js</code> API changes in the future, you can update your code once in the driver.</li> |
|||
<li>You can DRY up your code by declaring the Gaia config once per collection.</li> |
|||
</ol> |
|||
|
|||
<p>Click the button below to spin up a sandbox environment:</p> |
|||
|
|||
<p><a href="https://codesandbox.io/s/8kzmjjr9nj"><img src="images/tutorials/edit-sandbox.png" alt="" /></a></p> |
|||
|
|||
<h2 id="summary">Summary</h2> |
|||
|
|||
<p>There are many valid ways to organize your data and you should pick what makes |
|||
the most sense for your needs. I would recommend using a single-file collection |
|||
approach for predictably small collections of data. For larger collections, the |
|||
risk of data corruption is too high to be passing around entire collections |
|||
worth of data with one <code class="highlighter-rouge">putFile</code> request, so opt for an architecture that looks |
|||
more like the multi-file collection model.</p> |
|||
|
|||
<p>Most importantly, feel free to experiment with data architecture. There are |
|||
concepts and patterns you can introduce into this process that can help you |
|||
validate schema, migrate data, and more. Check out more of our tutorials for a |
|||
deeper dive into developing a sample app.</p> |
|||
File diff suppressed because it is too large
@ -0,0 +1,379 @@ |
|||
<p>In this tutorial, you build the code for and run a single-page application (SPA) |
|||
with Blockstack and Vue.js. Once the application is running, you take a tour |
|||
through the applications’ Blockstack functionality. You’ll learn how it manages |
|||
authentiation using a Blockstack ID and how it stores information associated |
|||
with that ID using Blockstack Storage (Gaia).</p> |
|||
|
|||
<h2 id="prerequisites">Prerequisites</h2> |
|||
|
|||
<p>Make sure you have <a href="ids-introduction.md#create-an-initial-blockstack-id">created at least one Blockstack ID</a>. You’ll use this ID to Finteract with the Todo application.</p> |
|||
|
|||
<p>The applicaton code relies on both the <code class="highlighter-rouge">npm</code> and the <code class="highlighter-rouge">yarn</code> package managers. |
|||
Before you begin, verify you have these tools <code class="highlighter-rouge">npm</code> using the <code class="highlighter-rouge">which</code> command to |
|||
verify.</p> |
|||
|
|||
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>which npm |
|||
/usr/local/bin/npm |
|||
<span class="gp">$ </span>which yarn |
|||
/usr/local/bin/yarn |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p><a href="https://www.npmjs.com/get-npm">Install npm</a>, <a href="https://yarnpkg.com/lang/en/docs/install/#mac-stable">install |
|||
yarn</a>, or both as needed. You</p> |
|||
|
|||
<p>While it stands alone, this tour does on the information from the <a href="hello-blockstack.md">Hello |
|||
Blockstack tutorial</a>. If you haven’t worked through that |
|||
tutorial, you may want to do that before continuing.</p> |
|||
|
|||
<h2 id="install-the-applicaton-code-and-retrieve-the-dependencies">Install the applicaton code and retrieve the dependencies</h2> |
|||
|
|||
<p>You can clone the source code with <code class="highlighter-rouge">git</code> or <a href="https://github.com/blockstack/blockstack-todos/archive/master.zip">download and unzip the code from |
|||
the |
|||
repository</a>. |
|||
These instructions assume you are cloning.</p> |
|||
|
|||
<ol> |
|||
<li> |
|||
<p>Install the code by cloning it.</p> |
|||
|
|||
<div class="highlighter-rouge"><pre class="highlight"><code> $ git clone git@github.com:blockstack/blockstack-todos.git |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Change to directory to the root of the code.</p> |
|||
|
|||
<div class="highlighter-rouge"><pre class="highlight"><code> $ cd blockstack-todos |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<p>Use yarn to install the dependencies.</p> |
|||
|
|||
<div class="highlighter-rouge"><pre class="highlight"><code> $ yarn install |
|||
yarn install v1.9.2 |
|||
info No lockfile found. |
|||
... |
|||
[4/5] 🔗 Linking dependencies... |
|||
[5/5] 📃 Building fresh packages... |
|||
success Saved lockfile. |
|||
✨ Done in 19.90s. |
|||
</code></pre> |
|||
</div> |
|||
</li> |
|||
</ol> |
|||
|
|||
<h2 id="understand-the-important-application-files">Understand the important application files</h2> |
|||
|
|||
<p>The Todo application has a basic Vue.js structure. There are several configuration files but the central programming files are in the <code class="highlighter-rouge">src</code> directory:</p> |
|||
|
|||
<table> |
|||
<thead> |
|||
<tr> |
|||
<th>File</th> |
|||
<th>Description</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td><code class="highlighter-rouge">main.js</code></td> |
|||
<td>Application initialization.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><code class="highlighter-rouge">App.vue </code></td> |
|||
<td>Code for handling the <code class="highlighter-rouge">authResponse</code>.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><code class="highlighter-rouge">Landing.vue </code></td> |
|||
<td>Code for the initial sign on page.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><code class="highlighter-rouge">Dashboard.vue</code></td> |
|||
<td>Application data storage and user sign out.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<p>The example application runs in a node server on your local host. In the next section, you start the application and interact with it.</p> |
|||
|
|||
<ol> |
|||
<li> |
|||
<p>Start the application.</p> |
|||
|
|||
<div class="highlighter-rouge"><pre class="highlight"><code> $ npm run start |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>You should see a simple application:</p> |
|||
|
|||
<p><img src="images/todo-sign-in.png" alt="" /></p> |
|||
</li> |
|||
<li> |
|||
<p>Choose <strong>Sign In with Blockstack</strong>.</p> |
|||
</li> |
|||
</ol> |
|||
|
|||
<h2 id="understand-the-sign-in-process">Understand the sign in process</h2> |
|||
|
|||
<p>At startup, the Todo application detects whether the user has the Blockstack client edition |
|||
installed or not. This is done automatically by the Blockstack API, more |
|||
about this later. What the authenticator displays depends on which whether the user has installed the Blockstack Authenticator client edition or not.</p> |
|||
|
|||
<table> |
|||
<thead> |
|||
<tr> |
|||
<th>Client edition installed</th> |
|||
<th>Not installed</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td><img src="images/login.gif" alt="" /></td> |
|||
<td><img src="images/login-choice.png" alt="" /></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<p>If the user was logged into the Blockstack authenticator (web or client) but |
|||
did not reset it, the web application to use the current identity:</p> |
|||
|
|||
<p><img src="images/login-no-auth.png" alt="" /></p> |
|||
|
|||
<p>If the user chooses <strong>Deny</strong>, the Blockstack authenticator opens but the user |
|||
is not logged into the sample application.</p> |
|||
|
|||
<p><img src="images/windows-browser.png" alt="" /></p> |
|||
|
|||
<p>If the login to the application is successful, the user is presented with the application:</p> |
|||
|
|||
<p><img src="images/todo-app.png" alt="" /></p> |
|||
|
|||
<p>Clicking the <strong>Sign In With Blockstack</strong> button brings up a modal that prompts |
|||
you to use an existing ID’s session, create a new ID, or reset the browser with |
|||
another ID. When Blockstack is provided an ID, it generates an <em>ephemeral key</em> |
|||
within the application. An ephemeral key is generated for each execution of a |
|||
key establishment process. This key is just used for the particular instance of |
|||
the application, in this case to sign a <strong>Sign In</strong> request.</p> |
|||
|
|||
<p>Blockstack also generates a public key token which is sent to the authenticator |
|||
as an <code class="highlighter-rouge">authRequest</code> from the authenticator to your local blockstack-core node. |
|||
The signed authentication request is sent to Blockstack through a JSON Web |
|||
Token. The JWT is passed in via a URL query string in the <code class="highlighter-rouge">authRequest</code> |
|||
parameter: |
|||
<code class="highlighter-rouge">https://browser.blockstack.org/auth?authRequest=j902120cn829n1jnvoa...</code>. To |
|||
decode the token and see what information it holds:</p> |
|||
|
|||
<ol> |
|||
<li>Copy the <code class="highlighter-rouge">authRequest</code> string from the URL.</li> |
|||
<li>Navigate to <a href="http://jwt.io/">jwt.io</a>.</li> |
|||
<li> |
|||
<p>Paste the full token there.</p> |
|||
|
|||
<p>The output should look similar to below:</p> |
|||
|
|||
<div class="language-json highlighter-rouge"><pre class="highlight"><code><span class="w"> </span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"jti"</span><span class="p">:</span><span class="w"> </span><span class="s2">"3i96e3ad-0626-4e32-a316-b243154212e2"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"iat"</span><span class="p">:</span><span class="w"> </span><span class="mi">1533136622</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"exp"</span><span class="p">:</span><span class="w"> </span><span class="mi">1533140228</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"iss"</span><span class="p">:</span><span class="w"> </span><span class="s2">"did:btc-addr:1Nh8oQTunbEQWjrL666HBx2qMc81puLmMt"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"public_keys"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"> |
|||
</span><span class="s2">"0362173da080c6e1dec0653fa9a3eff5f5660546e387ce6c24u04a90c2fe1fdu73"</span><span class="w"> |
|||
</span><span class="p">],</span><span class="w"> |
|||
</span><span class="nt">"domain_name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"http://localhost:8080"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"manifest_uri"</span><span class="p">:</span><span class="w"> </span><span class="s2">"http://localhost:8080/manifest.json"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"redirect_uri"</span><span class="p">:</span><span class="w"> </span><span class="s2">"http://localhost:8080/"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"version"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1.2.0"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"do_not_include_profile"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"supports_hub_url"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"scopes"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"> |
|||
</span><span class="s2">"store_write"</span><span class="w"> |
|||
</span><span class="p">]</span><span class="w"> |
|||
</span><span class="p">}</span><span class="w"> |
|||
</span></code></pre> |
|||
</div> |
|||
</li> |
|||
</ol> |
|||
|
|||
<blockquote> |
|||
<p><strong>Note</strong>:</p> |
|||
<ol> |
|||
<li>The <code class="highlighter-rouge">iss</code> property is a decentralized identifier or <code class="highlighter-rouge">did</code>. This identifies you and your name to the application. The specific <code class="highlighter-rouge">did</code> is a <code class="highlighter-rouge">btc-addr</code>.</li> |
|||
<li>The Blockstack JWT implementation is different from other implementations because of the underlying cryptography we employ. There are libraries in <a href="https://github.com/blockstack/jsontokens-js">Javascript</a> and <a href="https://github.com/blockstack/ruby-jwt-blockstack">Ruby</a> available on the Blockstack Github to allow you to work with these tokens.</li> |
|||
</ol> |
|||
</blockquote> |
|||
|
|||
<p>When the blockstack-core receives the <code class="highlighter-rouge">authRequest</code>, it generates a session token and |
|||
returns an authentication response to the application. This response is similar |
|||
to the <code class="highlighter-rouge">authRequest</code> above in that the <code class="highlighter-rouge">authResponse</code> includes a private key |
|||
intended only for the application. This allows the application to encrypt data |
|||
on your personal Blockstack storage.</p> |
|||
|
|||
<p>You are now logged into the Todo application!</p> |
|||
|
|||
<h2 id="undder-the-covers-in-the-sign-in-code">Undder the covers in the sign in code</h2> |
|||
|
|||
<p>Now, go to the underlying <code class="highlighter-rouge">blockstack-todo</code> code you cloned or downloaded. Sign |
|||
in and sign out is handled in each of these files:</p> |
|||
|
|||
<table> |
|||
<thead> |
|||
<tr> |
|||
<th>File</th> |
|||
<th>Description</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td><code class="highlighter-rouge">App.vue </code></td> |
|||
<td>Handles the <code class="highlighter-rouge">authResponse</code>.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><code class="highlighter-rouge">Landing.vue </code></td> |
|||
<td>Generates the <code class="highlighter-rouge">authRequest</code>.</td> |
|||
</tr> |
|||
<tr> |
|||
<td><code class="highlighter-rouge">Dashboard.vue</code></td> |
|||
<td>Handles sign out.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<p>The <code class="highlighter-rouge">src/components/Landing.vue</code> code calls a <a href="https://blockstack.github.io/blockstack.js#redirectToSignIn"><code class="highlighter-rouge">redirectToSignIn()</code></a> function which generates the <code class="highlighter-rouge">authRequest</code> and redirects the user to the Blockstack authenticator:</p> |
|||
|
|||
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">signIn</span> <span class="p">()</span> <span class="p">{</span> |
|||
<span class="kr">const</span> <span class="nx">blockstack</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">blockstack</span> |
|||
<span class="nx">blockstack</span><span class="p">.</span><span class="nx">redirectToSignIn</span><span class="p">()</span> |
|||
<span class="p">}</span> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>Once the user authenticates, the application handles the <code class="highlighter-rouge">authResponse</code> in the <code class="highlighter-rouge">src/App.vue</code> file. :</p> |
|||
|
|||
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="k">if</span> <span class="p">(</span><span class="nx">blockstack</span><span class="p">.</span><span class="nx">isUserSignedIn</span><span class="p">())</span> <span class="p">{</span> |
|||
<span class="k">this</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="nx">blockstack</span><span class="p">.</span><span class="nx">loadUserData</span><span class="p">().</span><span class="nx">profile</span> |
|||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">blockstack</span><span class="p">.</span><span class="nx">isSignInPending</span><span class="p">())</span> <span class="p">{</span> |
|||
<span class="nx">blockstack</span><span class="p">.</span><span class="nx">handlePendingSignIn</span><span class="p">()</span> |
|||
<span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">userData</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> |
|||
<span class="nb">window</span><span class="p">.</span><span class="nx">location</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">origin</span> |
|||
<span class="p">})</span> |
|||
<span class="p">}</span> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>If <a href="https://blockstack.github.io/blockstack.js/#isusersignedin"><code class="highlighter-rouge">blockstack.isUserSignedIn()</code></a> is true, the user was previously signed in so Blockstack pulls the data from the browser and uses it in our application. If the check on <a href="https://blockstack.github.io/blockstack.js/#issigninpending"><code class="highlighter-rouge">blockstack.isSignInPending()</code></a> is true, a previous <code class="highlighter-rouge">authResponse</code> was sent to the application but hasn’t been processed yet. The <code class="highlighter-rouge">handlePendingSignIn()</code> function processes any pending sign in.</p> |
|||
|
|||
<p>Signout is handled in <code class="highlighter-rouge">src/components/Dashboard.vue</code>.</p> |
|||
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">signOut</span> <span class="p">()</span> <span class="p">{</span> |
|||
<span class="k">this</span><span class="p">.</span><span class="nx">blockstack</span><span class="p">.</span><span class="nx">signUserOut</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">)</span> |
|||
<span class="p">}</span> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>The method allows the application creator to decide where to redirect the user upon Sign Out:</p> |
|||
|
|||
<h2 id="working-with-the-application">Working with the application</h2> |
|||
|
|||
<p>Now trying adding a few todos using the application. For example, try making a list of applications you want to see built on top of Blockstack:</p> |
|||
|
|||
<p><img src="images/make-a-list.png" alt="" /></p> |
|||
|
|||
<p>Each list is immediately stored in the Gaia Hub linked to your Blockstack ID. |
|||
For more information about the Gaia hub, see the <a href="https://github.com/blockstack/gaia">hub |
|||
repository</a>. You can fetch the <code class="highlighter-rouge">todos.json</code> |
|||
file you just added by opening the Javascript console and running the following |
|||
command:</p> |
|||
|
|||
<pre><code class="language-Javascript">blockstack.getFile("todos.json", { decrypt: true }).then((file) => {console.log(file)}) |
|||
</code></pre> |
|||
|
|||
<p>You should see a JSON with the todos you just added:</p> |
|||
|
|||
<div class="language-json highlighter-rouge"><pre class="highlight"><code><span class="p">[</span><span class="w"> |
|||
</span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"id"</span><span class="p">:</span><span class="mi">2</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"text"</span><span class="p">:</span><span class="s2">"Software package manager secured by the blockchain"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"completed"</span><span class="p">:</span><span class="kc">false</span><span class="w"> |
|||
</span><span class="p">},</span><span class="w"> |
|||
</span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"id"</span><span class="p">:</span><span class="mi">1</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"text"</span><span class="p">:</span><span class="s2">"Mutable torrents with human readable names"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"completed"</span><span class="p">:</span><span class="kc">false</span><span class="w"> |
|||
</span><span class="p">},</span><span class="w"> |
|||
</span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"id"</span><span class="p">:</span><span class="mi">0</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"text"</span><span class="p">:</span><span class="s2">"Decentralized twitter"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"completed"</span><span class="p">:</span><span class="kc">false</span><span class="w"> |
|||
</span><span class="p">}</span><span class="w"> |
|||
</span><span class="p">]</span><span class="w"> |
|||
</span></code></pre> |
|||
</div> |
|||
|
|||
<p>Now, add another todo and check it off. When you fetch the newly generated file |
|||
using the Javascript console it will reflect the change look for <code class="highlighter-rouge">"completed":true</code>:</p> |
|||
|
|||
<div class="language-json highlighter-rouge"><pre class="highlight"><code><span class="p">[</span><span class="w"> |
|||
</span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"id"</span><span class="p">:</span><span class="mi">3</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"text"</span><span class="p">:</span><span class="s2">"Blockstack Todo"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"completed"</span><span class="p">:</span><span class="kc">true</span><span class="w"> |
|||
</span><span class="p">},</span><span class="w"> |
|||
</span><span class="p">{</span><span class="w"> |
|||
</span><span class="nt">"id"</span><span class="p">:</span><span class="mi">2</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"text"</span><span class="p">:</span><span class="s2">"Software package manager secured by the blockchain"</span><span class="p">,</span><span class="w"> |
|||
</span><span class="nt">"completed"</span><span class="p">:</span><span class="kc">false</span><span class="w"> |
|||
</span><span class="p">},</span><span class="w"> |
|||
</span><span class="err">...</span><span class="w"> |
|||
</span><span class="p">]</span><span class="w"> |
|||
</span></code></pre> |
|||
</div> |
|||
|
|||
<p>Now that you have seen the application in action, dig into how it works.</p> |
|||
|
|||
<h2 id="implementing-storage">Implementing storage</h2> |
|||
|
|||
<p>Now, go to the underlying <code class="highlighter-rouge">blockstack-todo</code> code you cloned or downloaded. The |
|||
application interactions with your Gaia Hub originate in the |
|||
<code class="highlighter-rouge">src/components/Dashboard.vue</code> file. First lets see where the changes to the |
|||
Todos are processed:</p> |
|||
|
|||
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">todos</span><span class="err">:</span> <span class="p">{</span> |
|||
<span class="nl">handler</span><span class="p">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">todos</span><span class="p">)</span> <span class="p">{</span> |
|||
<span class="kr">const</span> <span class="nx">blockstack</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">blockstack</span> |
|||
|
|||
<span class="c1">// encryption is now enabled by default</span> |
|||
<span class="k">return</span> <span class="nx">blockstack</span><span class="p">.</span><span class="nx">putFile</span><span class="p">(</span><span class="nx">STORAGE_FILE</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">todos</span><span class="p">))</span> |
|||
<span class="p">},</span> |
|||
<span class="nx">deep</span><span class="err">:</span> <span class="kc">true</span> |
|||
<span class="p">}</span> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>Tje <code class="highlighter-rouge">todos</code> JSON object is passed in and the <a href="https://blockstack.github.io/blockstack.js/#putfile"><code class="highlighter-rouge">blockstack.putFile()</code></a> method to store it in our Gaia Hub.</p> |
|||
|
|||
<p>The code needs to read the Todo items from the storage with the <a href="https://blockstack.github.io/blockstack.js/#getfile"><code class="highlighter-rouge">blockstack.getFile()</code></a> method which returns a promise:</p> |
|||
|
|||
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">fetchData</span> <span class="p">()</span> <span class="p">{</span> |
|||
<span class="kr">const</span> <span class="nx">blockstack</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">blockstack</span> |
|||
<span class="nx">blockstack</span><span class="p">.</span><span class="nx">getFile</span><span class="p">(</span><span class="nx">STORAGE_FILE</span><span class="p">)</span> <span class="c1">// decryption is enabled by default</span> |
|||
<span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">todosText</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> |
|||
<span class="kd">var</span> <span class="nx">todos</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">todosText</span> <span class="o">||</span> <span class="s1">'[]'</span><span class="p">)</span> |
|||
<span class="nx">todos</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">todo</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span> |
|||
<span class="nx">todo</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">index</span> |
|||
<span class="p">})</span> |
|||
<span class="k">this</span><span class="p">.</span><span class="nx">uidCount</span> <span class="o">=</span> <span class="nx">todos</span><span class="p">.</span><span class="nx">length</span> |
|||
<span class="k">this</span><span class="p">.</span><span class="nx">todos</span> <span class="o">=</span> <span class="nx">todos</span> |
|||
<span class="p">})</span> |
|||
<span class="p">},</span> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>The <code class="highlighter-rouge">todos</code> data is retrieved from the promise.</p> |
|||
|
|||
<h2 id="summary">Summary</h2> |
|||
|
|||
<p>You now have everything you need to construct complex applications complete with authentication and storage on the Decentralized Internet. Why not try coding <a href="multi-player-storage.md">a sample application that accesses multiple profiles</a>.</p> |
|||
|
|||
<p>If you would like to explore the Blockstack APIs, you can visit the <a href="https://core.blockstack.org/">Blockstack Core API</a> documentation or the <a href="https://blockstack.github.io/blockstack.js">Blockstack JS API</a>.</p> |
|||
|
|||
<p>Go forth and build!</p> |
|||
@ -0,0 +1,51 @@ |
|||
{% unless page.comments_locked == true %} |
|||
<!-- Start new comment form --> |
|||
<div id="respond"> |
|||
<header class="section-title"> |
|||
<h3>Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="{{ page.url | relative_url }}#respond" style="display:none;">Cancel reply</a></small></h3> |
|||
</header> |
|||
<form id="comment-form" class="page__form js-form form" method="post" action="https://api.staticman.net/v2/entry/{{ site.repository }}/{{ site.staticman.branch }}/comments"> |
|||
<div class="form-group"> |
|||
<label class="sr-only" for="comment-form-name"><strong>Name</strong></label> |
|||
<input type="text" id="comment-form-name" name="fields[name]" required spellcheck="false" placeholder="Name"> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="sr-only" for="comment-form-email"><strong>Email address</strong> <small>(used for <a href="http://gravatar.com">Gravatar</a> image and reply notifications)</small></label> |
|||
<input type="email" id="comment-form-email" name="fields[email]" required spellcheck="false" placeholder="Email address (used for Gravatar image)"> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="sr-only" for="comment-form-url"><strong>Website</strong> <small>(optional)</small></label> |
|||
<input type="url" id="comment-form-url" name="fields[url]" placeholder="Website (optional)"> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="sr-only" for="comment-form-message"><strong>Comment</strong> <small>(<a href="https://kramdown.gettalong.org/quickref.html">Markdown</a> is allowed)</small></label> |
|||
<textarea type="text" rows="6" id="comment-form-message" name="fields[message]" required spellcheck="true" placeholder="Comment (Markdown is allowed)"></textarea> |
|||
</div> |
|||
<div class="form-group hidden" style="display: none;"> |
|||
<input type="hidden" name="options[origin]" value="{{ page.url | relative_url }}"> |
|||
<input type="hidden" name="options[parent]" value="{{ page.url | relative_url }}"> |
|||
<input type="hidden" id="comment-replying-to" name="fields[replying_to]" value=""> |
|||
<input type="hidden" id="comment-post-id" name="options[slug]" value="{{ page.slug }}"> |
|||
<input type="hidden" name="options[reCaptcha][siteKey]" value="{{ site.reCaptcha.siteKey }}"> |
|||
<input type="hidden" name="options[reCaptcha][secret]" value="{{ site.reCaptcha.secret }}"> |
|||
</div> |
|||
<!-- Start comment form alert messaging --> |
|||
<p class="hidden js-notice"> |
|||
<span class="js-notice-text"></span> |
|||
</p> |
|||
<!-- End comment form alert messaging --> |
|||
<div class="form-group"> |
|||
<div class="g-recaptcha" data-sitekey="{{ site.reCaptcha.siteKey }}"></div> |
|||
<label class="comment-reply-notifications" for="comment-form-reply"> |
|||
<input type="checkbox" id="comment-form-reply" name="options[subscribe]" value="email"> |
|||
Notify me of replies by email. |
|||
</label> |
|||
<button type="submit" id="comment-form-submit" class="btn">Send Comment</button> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<!-- End new comment form --> |
|||
<script async src="https://www.google.com/recaptcha/api.js"></script> |
|||
{% else %} |
|||
<p><em>Comments are closed. If you have a question concerning the content of this page, please feel free to <a href="/contact/">contact me</a>.</em></p> |
|||
{% endunless %} |
|||
@ -0,0 +1,50 @@ |
|||
<article id="comment{% unless include.r %}{{ index | prepend: '-' }}{% else %}{{ include.index | prepend: '-' }}{% endunless %}" class="js-comment comment {% if include.name == site.author.name %}admin{% endif %} {% unless include.replying_to == 0 %}child{% endunless %}"> |
|||
<div class="comment-avatar"> |
|||
{% if include.avatar %} |
|||
<noscript><img src="{{ include.avatar }}" alt=""></noscript> |
|||
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ include.avatar }}" alt="" class="lazyload blur-up"> |
|||
{% elsif include.email %} |
|||
<noscript><img src="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=60" alt=""></noscript> |
|||
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=60 1x, https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=120 2x" alt="" class="lazyload blur-up"> |
|||
{% else %} |
|||
<noscript><img src="/assets/images/avatar-60.png" alt=""></noscript> |
|||
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=60 1x, /assets/images/avatar-120.png 2x" alt="" class="lazyload blur-up"> |
|||
{% endif %} |
|||
</div> |
|||
<h3 class="comment-author-name"> |
|||
{% unless include.url == blank %} |
|||
<a rel="external nofollow" href="{{ include.url }}">{{ include.name | strip_html }}</a> |
|||
{% else %} |
|||
{{ include.name | strip_html }} |
|||
{% endunless %} |
|||
</h3> |
|||
<div class="comment-timestamp"> |
|||
{% if include.date %} |
|||
{% if include.index %}<a href="#comment{% if r %}{{ index | prepend: '-' }}{% else %}{{ include.index | prepend: '-' }}{% endif %}" title="Permalink to this comment">{% endif %} |
|||
<time datetime="{{ include.date | date_to_xmlschema }}">{{ include.date | date_to_long_string: 'ordinal', 'US' }}</time> |
|||
{% if include.index %}</a>{% endif %} |
|||
{% endif %} |
|||
</div> |
|||
<div class="comment-content"> |
|||
{{ include.message | markdownify }} |
|||
</div> |
|||
{% unless include.replying_to != 0 or page.comments_locked == true %} |
|||
<div class="comment-reply"> |
|||
<a rel="nofollow" href="#comment-{{ include.index }}" onclick="return addComment.moveForm('comment-{{ include.index }}', '{{ include.index }}', 'respond', '{{ page.slug }}')"><svg class="icon icon--reply" width="16px" height="16px"><use xlink:href="{{ 'icons.svg#icon-reply' | prepend: 'assets/icons/' | relative_url }}"></use></svg> Reply to {{ include.name }}</a> |
|||
</div> |
|||
{% endunless %} |
|||
</article> |
|||
|
|||
{% capture i %}{{ include.index }}{% endcapture %} |
|||
{% assign replies = site.data.comments[page.slug] | sort | where_exp: 'comment', 'comment[1].replying_to == i' %} |
|||
{% for reply in replies %} |
|||
{% assign index = forloop.index | prepend: '-' | prepend: include.index %} |
|||
{% assign replying_to = reply[1].replying_to | to_integer %} |
|||
{% assign avatar = reply[1].avatar %} |
|||
{% assign email = reply[1].email %} |
|||
{% assign name = reply[1].name %} |
|||
{% assign url = reply[1].url %} |
|||
{% assign date = reply[1].date %} |
|||
{% assign message = reply[1].message %} |
|||
{% include comment.html index=index replying_to=replying_to avatar=avatar email=email name=name url=url date=date message=message %} |
|||
{% endfor %} |
|||
@ -0,0 +1,56 @@ |
|||
{% if page.comments == true %} |
|||
<section class="post__comments"> |
|||
{% if site.repository and site.staticman.branch %} |
|||
{% if site.data.comments[page.slug] %} |
|||
<!-- Start static comments --> |
|||
<div id="comments" class="js-comments"> |
|||
<h3 class="tile__header">Comments</h3> |
|||
{% assign comments = site.data.comments[page.slug] | sort %} |
|||
{% for comment in comments %} |
|||
{% assign avatar = comment[1].avatar %} |
|||
{% assign email = comment[1].email %} |
|||
{% assign name = comment[1].name %} |
|||
{% assign url = comment[1].url %} |
|||
{% assign date = comment[1].date %} |
|||
{% assign message = comment[1].message %} |
|||
{% include comment.html index=forloop.index avatar=avatar email=email name=name url=url date=date message=message %} |
|||
{% endfor %} |
|||
</div> |
|||
<!-- End static comments --> |
|||
{% endif %} |
|||
|
|||
<!-- Start new comment form --> |
|||
<h3 class="tile__header">Leave a Comment</h3> |
|||
<p class="instruct">Your email address will not be published. Required fields are marked <span class="required">*</span></p> |
|||
<form id="comment-form" class="post__comments-form js-form form" method="post" action="https://api.staticman.net/v2/entry/{{site.repository}}/{{site.staticman.branch}}"> |
|||
<fieldset> |
|||
<label for="comment-form-message">Comment<small class="required">*</small> <small>(<a href="https://daringfireball.net/projects/markdown/">Markdown</a> is supported)</small></label> |
|||
<textarea type="text" rows="3" id="comment-form-message" name="fields[message]" tabindex="1"></textarea> |
|||
<label for="comment-form-name">Name<small class="required">*</small></label> |
|||
<input type="text" id="comment-form-name" name="fields[name]" tabindex="2" /> |
|||
</fieldset> |
|||
<fieldset> |
|||
<label for="comment-form-email">Email address<small class="required">*</small></label> |
|||
<input type="email" id="comment-form-email" name="fields[email]" tabindex="3" /> |
|||
</fieldset> |
|||
<fieldset> |
|||
<label for="comment-form-url">Website <small>(optional)</small></label> |
|||
<input type="url" id="comment-form-url" name="fields[url]" tabindex="4"/> |
|||
</fieldset> |
|||
<fieldset class="hidden"> |
|||
<input type="hidden" name="options[slug]" value="{{ page.slug }}"> |
|||
<input type="hidden" name="fields[hidden]"/> |
|||
</fieldset> |
|||
<!-- Start comment form alert messaging --> |
|||
<p class="hidden js-notice"> |
|||
<span class="js-notice-text"></span> |
|||
</p> |
|||
<!-- End comment form alert messaging --> |
|||
<fieldset> |
|||
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--large">Submit Comment</button> |
|||
</fieldset> |
|||
</form> |
|||
<!-- End new comment form --> |
|||
{% endif %} |
|||
</section> |
|||
{% endif %} |
|||
@ -0,0 +1,27 @@ |
|||
<div class="entry-comments"> |
|||
{% if site.repository and site.staticman.branch %} |
|||
{% if site.data.comments[page.slug] %} |
|||
<!-- Start static comments --> |
|||
<div id="comments" class="js-comments"> |
|||
<header class="section-title"> |
|||
<h3>{% if site.data.comments[page.slug].size > 1 %}{{ site.data.comments[page.slug] | size | append: ' ' }}{% endif %}Comments</h3> |
|||
</header> |
|||
{% assign comments = site.data.comments[page.slug] | sort | where_exp: 'comment', 'comment[1].replying_to == blank' %} |
|||
{% for comment in comments %} |
|||
{% assign index = forloop.index %} |
|||
{% assign replying_to = comment[1].replying_to | to_integer %} |
|||
{% assign avatar = comment[1].avatar %} |
|||
{% assign email = comment[1].email %} |
|||
{% assign name = comment[1].name %} |
|||
{% assign url = comment[1].url %} |
|||
{% assign date = comment[1].date %} |
|||
{% assign message = comment[1].message %} |
|||
{% include comment.html index=index replying_to=replying_to avatar=avatar email=email name=name url=url date=date message=message %} |
|||
{% endfor %} |
|||
</div> |
|||
<!-- End static comments --> |
|||
{% endif %} |
|||
|
|||
<!-- {% include comment-form.html %} --> |
|||
{% endif %} |
|||
</div> |
|||
Loading…
Reference in new issue