create account

Tutorial: Logging into a Web Application with Steem Keychain by void

View this thread on: hive.blogpeakd.comecency.com
· @void · (edited)
$2.76
Tutorial: Logging into a Web Application with Steem Keychain
When I decided to integrate [Steem Keychain](https://github.com/MattyIce/steem-keychain) with @steeveapp, it was not clear to me how to establish a user session with the server, how to log the user in. I spent some time researching and thinking, so I decided to write down how I did it in the end and share it with others.

# Being a Detective

At the beginning, when I was implementing authentication with SteemConnect, the situation was pretty clear. You ask SteemConnect and you get a token that you can use to verify user's Steem identity. But there was nothing like that with Steem Keychain, no tokens, not to mention just a few exported methods existing at the time I started checking the extension.

Anyway, when skimming through the README on GitHub, I stumbled over the section called [Decode Memo / Verify Key](https://github.com/MattyIce/steem-keychain#decode-memo--verify-key), which says that `requestVerifyKey` can be used to log the user in. No other details there, so although I knew what I was supposed to use, I didn't know what to do exactly. How to verify user's identity on the server?

# The Authentication Flow

The flow I came up with turned out to be somehow funny to me because it incorporates exchanging encrypted memos between the server and the web application as if they were having an encrypted Steem conversation with each other.

So, here is what I came up with, step by step:

1. [APP] Ask the user to insert their Steem username.
2. [APP] Post `username` to `/login/steem_keychain`.
3. [SERVER] Encrypt `username` with a symetric-key algorithm (like AES) to get `encrypted_username`. This requires a secret to be prepared in advance and stored on the server, which is not related to signing JWT tokens or the blockchain.
4. [SERVER] Fetch the given user's public memo key from the blockchain.
5. [SERVER] Encrypt `encrypted_username` using the public memo key to get `encrypted_memo` and return it in the response.
6. [APP] Ask Steem Keychain to decrypt `encrypted_memo` received using the stored private memo key.
7. [APP] Post the decrypted memo (`encrypted_username`) to `/login/steem_keychain/callback`.
8. [SERVER] Decrypt `encrypted_username` using the stored private secret (AES) to get `username`.
9. [SERVER] Generate a JWT token for the given username. Return it in the response.
10. [APP] Store the returned JWT token. The session is established.

As apparent, the whole flow works iff the user manages to decrypt the message using their private memo key, which is the step verifying Steem identify. The web application cannot mess up with what is received from the server since it is encrypted and the secret is kept on the server only.

The reason why it is not the JWT token itself returned as `encrypted_memo` is that we need the web application to ping the server back, letting it know that the session is established in case there is any necessary logic to be executed.

So, what do you think? Can it be done in a different or simpler way?

EDIT: There is a simpler way when using `requestSignBuffer`, which is an API call that was not available when I was implementing this for Steeve.

# Steem Keychain for Angular

When implementing this for @steeveapp, I decided to turn my efforts into a public Angular module that anybody can use to get up and running with Steem Keychain quickly. All hail [ngx-steem-keychain](https://github.com/steeveproject/ngx-steem-keychain).

I am posting updates regularly using Utopian:

* [Version 1.0](https://www.steeve.app/@steeveapp/ngx-steem-keychain-angular-interface-to-steem-keychain-released)
* [Version 1.1](https://www.steeve.app/@steeveapp/ngx-steem-keychain-1-1-buffer-signing-and-broadcast-available)

---
<center>View this post on [Steeve](https://www.steeve.app/@void/tutorial-logging-into-a-web-application-with-steem-keychain)</center>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 96 others
properties (23)
authorvoid
permlinktutorial-logging-into-a-web-application-with-steem-keychain
categorysteem
json_metadata{"tags":["steem","keychain","steeve","technology","tutorial"],"links":["https://github.com/MattyIce/steem-keychain","https://github.com/MattyIce/steem-keychain#decode-memo--verify-key","https://github.com/steeveproject/ngx-steem-keychain","https://www.steeve.app/@steeveapp/ngx-steem-keychain-angular-interface-to-steem-keychain-released","https://www.steeve.app/@steeveapp/ngx-steem-keychain-1-1-buffer-signing-and-broadcast-available","https://www.steeve.app/@void/tutorial-logging-into-a-web-application-with-steem-keychain"],"format":"markdown","app":"steeve/0.1"}
created2018-11-21 20:58:33
last_update2018-11-21 21:21:06
depth0
children2
last_payout2018-11-28 20:58:33
cashout_time1969-12-31 23:59:59
total_payout_value2.133 HBD
curator_payout_value0.625 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,838
author_reputation32,603,999,249,802
root_title"Tutorial: Logging into a Web Application with Steem Keychain"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id75,695,579
net_rshares4,594,532,052,351
author_curate_reward""
vote details (160)
@steemitboard ·
Congratulations @void! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@void/votes.png?201812031607</td><td>You made more than 800 upvotes. Your next target is to reach 900 upvotes.</td></tr>
</table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@void)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/steemitboard/@steemitboard/5jrq2c-steemitboard-saint-nicholas-day"><img src="https://steemitimages.com/64x128/http://i.cubeupload.com/mGo2Zd.png"></a></td><td><a href="https://steemit.com/steemitboard/@steemitboard/5jrq2c-steemitboard-saint-nicholas-day">Saint Nicholas challenge for good boys and girls</a></td></tr></table>

> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-void-20181203t191716000z
categorysteem
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-03 19:17:15
last_update2018-12-03 19:17:15
depth1
children0
last_payout2018-12-10 19:17:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,163
author_reputation38,975,615,169,260
root_title"Tutorial: Logging into a Web Application with Steem Keychain"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,308,595
net_rshares0
@steemitboard ·
Congratulations @void! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@void/commented.png?201812051720</td><td>You got more than 400 replies. Your next target is to reach 500 replies.</td></tr>
</table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@void)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/steemitboard/@steemitboard/5jrq2c-steemitboard-saint-nicholas-day"><img src="https://steemitimages.com/64x128/http://i.cubeupload.com/mGo2Zd.png"></a></td><td><a href="https://steemit.com/steemitboard/@steemitboard/5jrq2c-steemitboard-saint-nicholas-day">Saint Nicholas challenge for good boys and girls</a></td></tr></table>

> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-void-20181205t180823000z
categorysteem
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-05 18:08:21
last_update2018-12-05 18:08:21
depth1
children0
last_payout2018-12-12 18:08:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,166
author_reputation38,975,615,169,260
root_title"Tutorial: Logging into a Web Application with Steem Keychain"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,410,286
net_rshares0