#### 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 -  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 -  `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 -  ### 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. -  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
author | singhpratyush |
---|---|
permlink | adding-steemconnect-to-hapramp-alpha-web-app |
category | utopian-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"]} |
created | 2018-06-09 23:25:09 |
last_update | 2018-06-15 07:25:15 |
depth | 0 |
children | 5 |
last_payout | 2018-06-16 23:25:09 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 87.435 HBD |
curator_payout_value | 28.778 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 3,652 |
author_reputation | 7,035,648,262,478 |
root_title | "Adding SteemConnect to HapRamp Alpha Web App" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 0 |
post_id | 60,062,561 |
net_rshares | 43,973,449,074,966 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
steemitboard | 0 | 678,259,521 | 1% | ||
mys | 0 | 15,412,620,794 | 15% | ||
youngogmarqs | 0 | 84,128,634 | 0.02% | ||
leir | 0 | 702,937,590 | 20% | ||
utopian-io | 0 | 43,884,941,039,197 | 28.7% | ||
the-dragon | 0 | 1,136,684,976 | 100% | ||
vikonomics | 0 | 0 | 100% | ||
steemitstats | 0 | 3,634,142,592 | 5% | ||
shreya26 | 0 | 0 | 100% | ||
singhpratyush | 0 | 613,190,955 | 100% | ||
rajatdangi | 0 | 611,859,297 | 100% | ||
sachincool | 0 | 9,989,310,628 | 100% | ||
nileshchaturvedi | 0 | 0 | 100% | ||
r351574nc3 | 0 | 537,148,410 | 1.5% | ||
bxute | 0 | 0 | 100% | ||
jjay | 0 | 457,861,094 | 66% | ||
holger80 | 0 | 43,953,287,625 | 15% | ||
josephace135 | 0 | 9,189,787,354 | 100% | ||
salty-mcgriddles | 0 | 575,602,752 | 1.5% | ||
hapramp | 0 | 609,635,373 | 100% | ||
exifr | 0 | 187,099,361 | 4% | ||
exifr0 | 0 | 134,478,813 | 4% |
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/)
author | gregory.latinier |
---|---|
permlink | re-singhpratyush-adding-steemconnect-to-hapramp-alpha-web-app-20180611t225806316z |
category | utopian-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"} |
created | 2018-06-11 22:58:09 |
last_update | 2018-06-11 22:58:09 |
depth | 1 |
children | 2 |
last_payout | 2018-06-18 22:58:09 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 2.968 HBD |
curator_payout_value | 0.986 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 1,835 |
author_reputation | 34,278,323,818,021 |
root_title | "Adding SteemConnect to HapRamp Alpha Web App" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 60,363,516 |
net_rshares | 1,524,132,445,769 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
utopian-io | 0 | 1,522,314,925,772 | 1% | ||
singhpratyush | 0 | 1,817,519,997 | 100% |
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 π
author | singhpratyush |
---|---|
permlink | re-gregorylatinier-re-singhpratyush-adding-steemconnect-to-hapramp-alpha-web-app-20180613t112013922z |
category | utopian-io |
json_metadata | {"tags":["utopian-io"],"community":"busy","app":"busy/2.4.0"} |
created | 2018-06-13 11:20:15 |
last_update | 2018-06-13 11:20:15 |
depth | 2 |
children | 0 |
last_payout | 2018-06-20 11:20:15 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 395 |
author_reputation | 7,035,648,262,478 |
root_title | "Adding SteemConnect to HapRamp Alpha Web App" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 60,570,780 |
net_rshares | 0 |
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>
author | utopian-io |
---|---|
permlink | 20180612t105000909z |
category | utopian-io |
json_metadata | {"tags":["utopian.tip"],"app":"utopian-io"} |
created | 2018-06-12 10:50:00 |
last_update | 2018-06-12 10:50:00 |
depth | 2 |
children | 0 |
last_payout | 2018-06-19 10:50:00 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 416 |
author_reputation | 152,955,367,999,756 |
root_title | "Adding SteemConnect to HapRamp Alpha Web App" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 60,429,191 |
net_rshares | 0 |
Congratulations @singhpratyush! You have completed some achievement on Steemit and have been rewarded with new badge(s) : [](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**!
author | steemitboard |
---|---|
permlink | steemitboard-notify-singhpratyush-20180610t123630000z |
category | utopian-io |
json_metadata | {"image":["https://steemitboard.com/img/notify.png"]} |
created | 2018-06-10 12:36:30 |
last_update | 2018-06-10 12:36:30 |
depth | 1 |
children | 0 |
last_payout | 2018-06-17 12:36:30 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 729 |
author_reputation | 38,975,615,169,260 |
root_title | "Adding SteemConnect to HapRamp Alpha Web App" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 60,134,695 |
net_rshares | 0 |
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>
author | utopian-io |
---|---|
permlink | re-adding-steemconnect-to-hapramp-alpha-web-app-20180611t230509z |
category | utopian-io |
json_metadata | "{"app": "beem/0.19.29"}" |
created | 2018-06-11 23:05:09 |
last_update | 2018-06-11 23:05:09 |
depth | 1 |
children | 0 |
last_payout | 2018-06-18 23:05:09 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 510 |
author_reputation | 152,955,367,999,756 |
root_title | "Adding SteemConnect to HapRamp Alpha Web App" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 60,364,240 |
net_rshares | 0 |