create account

Adding SteemConnect to HapRamp Alpha Web App by singhpratyush

View this thread on: hive.blogpeakd.comecency.com
· @singhpratyush · (edited)
$116.21
Adding SteemConnect to HapRamp Alpha Web App
#### Repository

https://github.com/hapramp/alpha-web

---

## SteemConnect Integration - HapRamp Alpha Web App

[HapRamp](https://hapramp.com)'s Alpha Web App was using posting key based authentication earlier. The implementation had a lot of issues like storing posting key in `localStorage`, creating a comment to generate unique auth token for the user and so on. To overcome these shortcomings, we moved to authentication using [SteemConnect](https://v2.steemconnect.com/).

In this post, I will be sharing how I integrated SteemConnect to a web app which previously used posting key based authentication.

### 1. Registering a New Application

New applications can be registered on SteemConnect v2 from its [dashboard](https://v2.steemconnect.com/dashboard). On the dashboard, go to `My Apps` under `Developers` section and then follow on-screen instructions to get your new app registered.

<p align="center">
<img src="https://ipfs.busy.org/ipfs/QmWkKBiqY7b8faUeUwQiq4SefUyetRrffgCgnmbz9CYAnz"/>
</p>

Once the app is created, you will have to choose valid callback URLs that your apps must support. In this case, we went with `/_outh/`. It should be noted that in you have to provide complete URLs for redirect, e.g. `http://my.app/_oauth/` and not just `/_oauth/`.

### 2 Using SteemConnect JS SDK

Steemit offers [SteemConnect JS SDK](https://github.com/steemit/steemconnect-sdk) which can be used to work with SteemConnect API.

#### 2.1. ES6 and CRA
HapRamp Alpha WA was bootstrapped with [CRA](https://github.com/facebookincubator/create-react-app) and requires the packages in `node_modules` to be entirely in `ES5`. But since the SDK uses ES6 in the source, it was not possible to add it as direct git dependency without changing the build script. Due to this, the SDK source was added directly to the project.

#### 2.2. Initializing the SDK

Once we have the SDK, we can initialize it using app's name, callback URL and desired scopes - 

![carbon1.png](https://ipfs.busy.org/ipfs/QmQXWDzar5YDT8pJvVB3Lz5i6ig14oEEaty23BuWvpdRG1)

You can see the full list of scopes [here](https://github.com/steemit/steemconnect/wiki/OAuth-2#scopes).

### 3. Handling Callback in React

Once the user authenticates herself from SteemConnect, the browser redirects to the callback URL with the access token, expiry and authenticated user's username as `GET` parameters. These details are used to set the cookies and other related parameters -

![carbon2.png](https://ipfs.busy.org/ipfs/QmU4pJEV3fA72ak1UbqEVdUyoFbTEgyt6voJwu5u1Fh6Jz)

`Cookie`s are handled using [`js-cookie`](https://github.com/js-cookie/js-cookie) package. We also need to set the access token using the SDK API - 

![carbon3.png](https://ipfs.busy.org/ipfs/QmXtQ5rrEUZr2ZSJ2Z6gE2RHF1rRC6kCRp5Ps3i7Hv4YrL)


### 4. Using the SDK for Blockchain Operations

Once we have the SDK ready, we can use it to perform operations on the blockchain like comment, vote, follow, etc. - 

![carbon4.png](https://ipfs.busy.org/ipfs/QmZs4cqirUooisM3isLFJXvmVznvHU6vBXsTUMicnFRJ4M)

A detailed documentation can be found at [SDK's README](https://github.com/steemit/steemconnect-sdk/blob/master/README.md).

### 5. Ease of Transition

Since the SteemConnect SDK's API and Steem JS's API are very similar, there was not much code change required to move to the former. The signature of the API functions remained the same, hence removing need to change all the dependent modules.

---

**Pull Request**: [Integrate SteemConnect (#25)](https://github.com/hapramp/alpha-web/pull/25)
**Commmits**: https://github.com/hapramp/alpha-web/pull/25/commits
**Github Account**: https://github.com/singhpratyush
πŸ‘  , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authorsinghpratyush
permlinkadding-steemconnect-to-hapramp-alpha-web-app
categoryutopian-io
json_metadata{"community":"busy","app":"busy/2.4.0","format":"markdown","tags":["utopian-io","development","hapramp","steemconnect","indiaunited"],"links":["https://github.com/hapramp/alpha-web","https://hapramp.com","https://v2.steemconnect.com/","https://v2.steemconnect.com/dashboard","https://github.com/steemit/steemconnect-sdk","https://github.com/facebookincubator/create-react-app","https://github.com/steemit/steemconnect/wiki/OAuth-2#scopes","https://github.com/js-cookie/js-cookie","https://github.com/steemit/steemconnect-sdk/blob/master/README.md","https://github.com/hapramp/alpha-web/pull/25"]}
created2018-06-09 23:25:09
last_update2018-06-15 07:25:15
depth0
children5
last_payout2018-06-16 23:25:09
cashout_time1969-12-31 23:59:59
total_payout_value87.435 HBD
curator_payout_value28.778 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,652
author_reputation7,035,648,262,478
root_title"Adding SteemConnect to HapRamp Alpha Web App"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id60,062,561
net_rshares43,973,449,074,966
author_curate_reward""
vote details (22)
@gregory.latinier ·
$3.95
Haaa this is nice! Good use of SteemConnect, removing the posting key from localStorage (really good for security :) ), using a PR and ask for reviews great great great.

Let's dig a little.

When doing a PR that modifies your application that much you should provide a test plan. See my next observation, I wonder if your reviewers really did their job completely ;)

https://github.com/hapramp/alpha-web/blob/053805cc037d5986bd9472f23da053eb69a0b4ca/src/components/header/index.js#L16 => What happens if the cookie has expired ?

Is there a reason why you're mixing cookies and localStorage ? Why not using cookies to initialize your redux state ?

https://github.com/hapramp/alpha-web/blob/b3edaa6773e8df033e44a8dbf26ad347dd30e366/src/utils/haprampAPI.js#L98 => ESlint recommend the use of templates (you should add eslint to your project btw, and maybe prettier to go even further)

Ex: 
```
const i = 1;
const data = `a_${i}_b`; // produces a_1_b
```

I see that you use a lot `let` even when you're not reassigning the value. Is there any reason why you're not using `const` ?

Why is there a `fakeLogin` method in the code ? If it's meant for test purposes you should write real tests with `jest` `mocha` `enzyme` or whatever lib you like.

To sum up, it 's a nice addition that really improves your project. Continue in that direction !

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/3/2221214).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  ,
properties (23)
authorgregory.latinier
permlinkre-singhpratyush-adding-steemconnect-to-hapramp-alpha-web-app-20180611t225806316z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://github.com/hapramp/alpha-web/blob/053805cc037d5986bd9472f23da053eb69a0b4ca/src/components/header/index.js#L16","https://github.com/hapramp/alpha-web/blob/b3edaa6773e8df033e44a8dbf26ad347dd30e366/src/utils/haprampAPI.js#L98","https://join.utopian.io/guidelines","https://review.utopian.io/result/3/2221214","https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2018-06-11 22:58:09
last_update2018-06-11 22:58:09
depth1
children2
last_payout2018-06-18 22:58:09
cashout_time1969-12-31 23:59:59
total_payout_value2.968 HBD
curator_payout_value0.986 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,835
author_reputation34,278,323,818,021
root_title"Adding SteemConnect to HapRamp Alpha Web App"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id60,363,516
net_rshares1,524,132,445,769
author_curate_reward""
vote details (2)
@singhpratyush ·
Hi @gregory.latinier!

Thanks for reviewing the submission :)

I'll make sure to use `const`s and `let`s properly.

I was planning to add tests after improving the code structure of the project. I've opened issues for adding ESlint and prettier.

Your comments from the last blog really helped me focus on what's most important. Hoping to keep hearing from you about the project.

Thanks again πŸ˜„
properties (22)
authorsinghpratyush
permlinkre-gregorylatinier-re-singhpratyush-adding-steemconnect-to-hapramp-alpha-web-app-20180613t112013922z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"busy","app":"busy/2.4.0"}
created2018-06-13 11:20:15
last_update2018-06-13 11:20:15
depth2
children0
last_payout2018-06-20 11:20: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_length395
author_reputation7,035,648,262,478
root_title"Adding SteemConnect to HapRamp Alpha Web App"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id60,570,780
net_rshares0
@utopian-io ·
Hey @gregory.latinier
Here's a tip for your valuable feedback! @Utopian-io loves and incentivises informative comments.

**Contributing on Utopian**
Learn how to contribute on <a href="https://join.utopian.io">our website</a>.

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for Utopian Witness!</a>
properties (22)
authorutopian-io
permlink20180612t105000909z
categoryutopian-io
json_metadata{"tags":["utopian.tip"],"app":"utopian-io"}
created2018-06-12 10:50:00
last_update2018-06-12 10:50:00
depth2
children0
last_payout2018-06-19 10:50:00
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_length416
author_reputation152,955,367,999,756
root_title"Adding SteemConnect to HapRamp Alpha Web App"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id60,429,191
net_rshares0
@steemitboard ·
Congratulations @singhpratyush! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/voted.png)](http://steemitboard.com/@singhpratyush) Award for the number of upvotes received

<sub>_Click on the badge to view your Board of Honor._</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>


To support your work, I also upvoted your post!


> Do you like [SteemitBoard's project](https://steemit.com/@steemitboard)? Then **[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-singhpratyush-20180610t123630000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-06-10 12:36:30
last_update2018-06-10 12:36:30
depth1
children0
last_payout2018-06-17 12:36:30
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_length729
author_reputation38,975,615,169,260
root_title"Adding SteemConnect to HapRamp Alpha Web App"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id60,134,695
net_rshares0
@utopian-io ·
Hey @singhpratyush
**Thanks for contributing on Utopian**.
We’re already looking forward to your next contribution!

**Contributing on Utopian**
Learn how to contribute on <a href='https://join.utopian.io'>our website</a> or by watching <a href='https://www.youtube.com/watch?v=8S1AtrzYY1Q'>this tutorial</a> on Youtube.

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
properties (22)
authorutopian-io
permlinkre-adding-steemconnect-to-hapramp-alpha-web-app-20180611t230509z
categoryutopian-io
json_metadata"{"app": "beem/0.19.29"}"
created2018-06-11 23:05:09
last_update2018-06-11 23:05:09
depth1
children0
last_payout2018-06-18 23:05:09
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_length510
author_reputation152,955,367,999,756
root_title"Adding SteemConnect to HapRamp Alpha Web App"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id60,364,240
net_rshares0