create account

Setting up "SteemConnect V2" with React.js by selected

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @selected · (edited)
$45.89
Setting up "SteemConnect V2" with React.js
<html>
<div>

<center>
     <img src="https://i.imgur.com/6zvBBMM.png">
</center>
<br>

<center>
<em>
<strong>
First, solve the problem. Then, write the code.
</strong>
<br>
<em>-"John Johnson".</em><br>
<sub>fortrabbit.github.io/quotes</sub>
</em>
<br>
</center> 

<p>
</p>

<div>

<div class="pull-right">
<img src="https://78.media.tumblr.com/3d6a33fd232b15653d9ea6427e4e7cdd/tumblr_ohh98sIjw41vr75k3o1_500.gif">
</div>

<strong>What's up guys!</strong> I recently started a steemit project by myself and I thought I could do a little introduction to the <a href="#">Steemconnect V2</a> library, in case it helps someone else.

<br><br>

<strong>So let's stop the talk and let's get into it.</strong>

<br><br>

First of all. You need to <a href="#">configure Steemconnect v2</a>. So I will leave here a link, in witch it tells you step by step how to do it properly. <br><br><a href="https://busy.org/@noisy/how-to-configure-steemconnect-v2-and-use-it-with-your-application-how-it-works-and-how-it-is-different-from-v1">How to configure SteemConnect v2 - By @noisy</a>

<br><br>

Once the APP is set from <a href="https://v2.steemconnect.com/login"> Steemconnect </a> we can begin to prepare the environment that we will need. <br><br>

<center>
https://steemitimages.com/DQmdYE66KsdUJ7erQoUPuMErfk36K664MNDTAAHLzvvJTzu/m81kCVH.png
</center>  <br>

<center> Before setting the main code, we will need to install <strong>2 NPM packages</strong>. <br> Them are: <a href="#">npm install cross-fetch --save</a> <br>
<a href="#">npm install js-cookie --save</a></center> <br>
<center>Basically seems like the SC2.JS API needs the cross-fetch package, and we will need the Cookie one, to get access to the 'access_token' in our entire site.<br><sub>With this ready, let's move to our next step.</sub></center> 

<br><br>
<center>After this, we just need to initialize our SC2 API. So for that, just create another file, import the SC2 API, and set this next code.

<br><br>
https://steemitimages.com/DQmdTyJWF5yaDQaNHmA2B52ZQtK9cx88mDuuaZiZWbMHNf5/Screen%20Shot%202018-04-26%20at%2019.16.28.png <br><br>

<strong>Edited: on scope, 'login' is an invalid scope. So guys, don't set it as I did.</strong> <br><br>
With this ready, we just need a way to <strong>GET</strong> the <a href="#">link that the user needs to login with SteemConnect</a>. For that, the <strong>API provides us with 2 methods</strong>. Both them are for authentication. One of them provides the main link to login, and the other one, just revokes the token, and logs out the user. <br><br>

https://steemitimages.com/DQmU5bWMGWQkdtDfYNMd5ei64A1puxoWVri5t9mqX2wDz6u/Screen%20Shot%202018-04-26%20at%2019.22.23.png <br><br>

As you can see in the <strong>revokeToken method</strong>, we use the <a href="#">Cookie.remove('access_token')</a>. Basically the Cookie package will help us to get the main 'access_token' to the entire site, or remove it in case we don't need it anymore. <br><br> 

<strong>Right now we just need a way to set the 'access_token'</strong>. I will provide you with my own method. Im sure you can improve it and use regex in a better way, but for now im sure this one will works perfectly for you. <br><br>

https://steemitimages.com/DQmQZzbjLvmccZPUqT3LqxZmYCGbKNqUEnLAvoEArArkGg2/Screen%20Shot%202018-04-26%20at%2019.27.38.png <br><br>

Damn, a lot of promises. Im sure you can delete most of them, and clean this code a bit. But basically, <strong>after the user hits the /success url path, we initialize this method in our componentDidMount</strong>. <br><br>

Basically we are <strong>extracting the 'access_token' and setting it to our global Cookie</strong>. With that, we are ready to get all the info that the steem blockchain has to offer for us.
 <br><br>

<center>
https://steemitimages.com/DQmdYE66KsdUJ7erQoUPuMErfk36K664MNDTAAHLzvvJTzu/m81kCVH.png
</center>  <br>

After this, we just need to call our setAPIToken in our componentDidMount. <br><br>

https://steemitimages.com/DQmW6Ksus4MD42wJvF8D7RMndqjaqHSKpP7qp69UZznUCwZ/Screen%20Shot%202018-04-26%20at%2019.34.14.png <br><br>

And if we did things right, with the API.me() method, we will be able to get all the info that the blockchain provides from the logged in user. <br><br>

https://steemitimages.com/DQmYMbBjUYM1ddk8hcWqjZ9pB9Ru8BSxHiuzGPqZbF7vPEw/Screen%20Shot%202018-04-26%20at%2019.40.47.png <br><br>

<center>
https://steemitimages.com/DQmdYE66KsdUJ7erQoUPuMErfk36K664MNDTAAHLzvvJTzu/m81kCVH.png
</center>  <br>

<center>So this is all guys. I'm a newbie developer, so for sure this code can be improved much more. If you all wanna suggest something, or wanna know anything else about the above example, just ask. 

<br><br>

<strong>Hope you liked this post, and helped you a bit. See you in the next one! Have a great day everyone!</strong>

<br><br>

<sub>

<br>The thumbnail of the post, was created by me. The gifs of this post, does not belongs to me.<br>
This post was created on steemit.com. As i know on busy.org, the posts didn't looks in the same way. So if you wanna enjoy it, i fully recommend taking a look at the post here on Steemit.
<br>
Thanks you! <br>
@selected
</sub>


</center>




</center>

<center> 


</html>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authorselected
permlinksetting-up-steemconnect-v2-with-react-js
categoryutopian-io
json_metadata{"tags":["utopian-io","steemit","programming","dev","steemdev"],"users":["selected"],"image":["https://i.imgur.com/6zvBBMM.png","https://78.media.tumblr.com/3d6a33fd232b15653d9ea6427e4e7cdd/tumblr_ohh98sIjw41vr75k3o1_500.gif","https://steemitimages.com/DQmdYE66KsdUJ7erQoUPuMErfk36K664MNDTAAHLzvvJTzu/m81kCVH.png","https://steemitimages.com/DQmdTyJWF5yaDQaNHmA2B52ZQtK9cx88mDuuaZiZWbMHNf5/Screen%20Shot%202018-04-26%20at%2019.16.28.png","https://steemitimages.com/DQmU5bWMGWQkdtDfYNMd5ei64A1puxoWVri5t9mqX2wDz6u/Screen%20Shot%202018-04-26%20at%2019.22.23.png","https://steemitimages.com/DQmQZzbjLvmccZPUqT3LqxZmYCGbKNqUEnLAvoEArArkGg2/Screen%20Shot%202018-04-26%20at%2019.27.38.png","https://steemitimages.com/DQmW6Ksus4MD42wJvF8D7RMndqjaqHSKpP7qp69UZznUCwZ/Screen%20Shot%202018-04-26%20at%2019.34.14.png","https://steemitimages.com/DQmYMbBjUYM1ddk8hcWqjZ9pB9Ru8BSxHiuzGPqZbF7vPEw/Screen%20Shot%202018-04-26%20at%2019.40.47.png"],"links":["#","https://busy.org/@noisy/how-to-configure-steemconnect-v2-and-use-it-with-your-application-how-it-works-and-how-it-is-different-from-v1","https://v2.steemconnect.com/login"],"app":"steemit/0.1","format":"html"}
created2018-04-26 19:30:33
last_update2018-04-26 19:34:12
depth0
children6
last_payout2018-05-03 19:30:33
cashout_time1969-12-31 23:59:59
total_payout_value38.356 HBD
curator_payout_value7.538 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length5,204
author_reputation5,342,944,151,905
root_title"Setting up "SteemConnect V2" with React.js"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,317,273
net_rshares7,305,030,999,399
author_curate_reward""
vote details (32)
@aant1563 ·
$0.05
great tutorial sir @selected. Go on sir.
👍  
properties (23)
authoraant1563
permlinkre-selected-setting-up-steemconnect-v2-with-react-js-20180426t193419809z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["selected"],"app":"steemit/0.1"}
created2018-04-26 19:34:27
last_update2018-04-26 19:34:27
depth1
children2
last_payout2018-05-03 19:34:27
cashout_time1969-12-31 23:59:59
total_payout_value0.042 HBD
curator_payout_value0.011 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length40
author_reputation349,555,464,104
root_title"Setting up "SteemConnect V2" with React.js"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,317,826
net_rshares9,046,746,865
author_curate_reward""
vote details (1)
@selected · 
Thanks sir : )
properties (22)
authorselected
permlinkre-aant1563-re-selected-setting-up-steemconnect-v2-with-react-js-20180426t202943141z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-26 20:29:42
last_update2018-04-26 20:29:42
depth2
children1
last_payout2018-05-03 20:29:42
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_length14
author_reputation5,342,944,151,905
root_title"Setting up "SteemConnect V2" with React.js"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,324,849
net_rshares0
@aant1563 ·
$0.05
welcome sir
👍  
properties (23)
authoraant1563
permlinkre-selected-re-aant1563-re-selected-setting-up-steemconnect-v2-with-react-js-20180426t203254360z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-26 20:32:57
last_update2018-04-26 20:32:57
depth3
children0
last_payout2018-05-03 20:32:57
cashout_time1969-12-31 23:59:59
total_payout_value0.046 HBD
curator_payout_value0.003 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length11
author_reputation349,555,464,104
root_title"Setting up "SteemConnect V2" with React.js"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,325,224
net_rshares8,726,912,380
author_curate_reward""
vote details (1)
@mmouaz · (edited)
$0.05
Thanks tell me I am resteem due to more peoples read
# @selected
👍  
properties (23)
authormmouaz
permlinkre-selected-setting-up-steemconnect-v2-with-react-js-20180426t193810108z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["selected"],"app":"steemit/0.1"}
created2018-04-26 19:38:12
last_update2018-04-26 19:51:15
depth1
children0
last_payout2018-05-03 19:38:12
cashout_time1969-12-31 23:59:59
total_payout_value0.042 HBD
curator_payout_value0.011 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length64
author_reputation514,935,601,142
root_title"Setting up "SteemConnect V2" with React.js"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,318,313
net_rshares8,863,984,303
author_curate_reward""
vote details (1)
@resteemable · 
**Your Post Has Been Featured on @Resteemable!** <br> Feature any Steemit post using resteemit.com! <br> **How It Works:** <br> 1. Take Any Steemit URL <br> 2. Erase `https://` <br> 3. Type `re`<br> Get Featured Instantly & Featured Posts are voted every 2.4hrs <br>[Join the Curation Team Here](https://goo.gl/forms/4sr0InoTxcyPRQSj2) | [Vote Resteemable for Witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=resteemable&approve=1)
properties (22)
authorresteemable
permlinkre-resteemable-setting-up-steemconnect-v2-with-react-js-20180426t220701235z
categoryutopian-io
json_metadata""
created2018-04-26 22:07:00
last_update2018-04-26 22:07:00
depth1
children0
last_payout2018-05-03 22:07: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_length453
author_reputation711,299,530,826
root_title"Setting up "SteemConnect V2" with React.js"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,336,650
net_rshares0
@sanjoy22 ·
$0.05
Thanks for sharing this great post sir@selected. Great tutorial..it's appreciate me sir. keep going sir.
👍  
properties (23)
authorsanjoy22
permlinkre-selected-setting-up-steemconnect-v2-with-react-js-20180426t212131062z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-26 21:21:36
last_update2018-04-26 21:21:36
depth1
children0
last_payout2018-05-03 21:21:36
cashout_time1969-12-31 23:59:59
total_payout_value0.050 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length104
author_reputation285,915,584,994
root_title"Setting up "SteemConnect V2" with React.js"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,331,295
net_rshares8,270,005,973
author_curate_reward""
vote details (1)
Help/Feedback