(Part 2)Tutorial On SteemConnect JS Dsteem And Steem API for JavaScript pt2
Previously I have learned and taught you how to create your Steem app on SteemConnect and import a few scripts we might need.
Just to remember, I am learning on the go, as I build my own app, as a beginner I am trying to make a tutorial that is very beginner friendly, I want to empower people so we can have more creative apps thus bring more users to the platform, we can all win by having more people and raising the bar of development knowledge.
If you didn't read the tutorial, you can read it if you click here or paste the following link on your browser
https://steemit.com/tutorial/@igormuba/tutorial-on-steemconnect-js-dsteem-and-steem-api-for-javascript-pt1
Now we need to generate a sign in URL for the website and the permissions the app will require.
So here we go!
How is our code looking so far
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://unpkg.com/dsteem@^0.8.0/dist/dsteem.js"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/steemconnect"></script>
</body>
</html>
Setting things up first
For the user to sign in with Steem Connect in your platform, you need to create a link, the link will do 2 things
- Redirect the user to the Steem Connect page so they can safely provide their Steem credentials
- Redirect the user back to your website according to the URI we have set on the previous tutorial
I will later post supplementary content so you can learn more basic javascript and web things, this will make your life MUCH easier, trust me, meanwhile, if you have any troubles, post a comment and I will either help you or link a supplementary content to help you
Now, create a new directory (folder) called "js" in the directory(folder) your index page (the HTML file we have created) is, this is where we will put own personalized javascript code. Here is a picture of what it looks like, notice that I am not using Windows, Linux nor MAC, I am using one of the servers I own, but if you have WAMP server installed you will create inside the WWW directory (if this looks a bit overwhelming, save this tutorial and follow me to see the supplementary content I will post very very soon, that will help you A LOT)
Now inside the js directory and create a file called "myapp.js", this is where the fun begins
Creating our file to get the URL
Now, open the file with your preferred text editor, I, personally, recommend one called "Sublime" for it's lightweight, in my case, I am inside my server, so the interface might be a bit different from what you are used to, but what matters is the text inside the file!
Here, add the following chunk of code I have grabbed from SteemConnect's Github
var api = sc2.Initialize({
app: 'appnamehere',
callbackURL: 'http://localhost',
accessToken: 'access_token',
scope: ['vote', 'comment']
});
The original one had a line of code
var sc2 = require('steemconnect');
But, being honest, I have never worked with requireJS before, if I add this line before the code it breaks everything, this is the perfect moment for anyone reading that knows how to do it to contribute with the tutorial series and help me and the other readers. My workaround was to remove the line of code (sorry Steem Connect devs)
Personalizing the URL before it is generated
On the code on the section right above, you will need change the following arguments:
- app: Put here between the single quotes ' ' the name of your app, the name I have said in the previous tutorial you can't change, you can find it going to https://steemconnect.com/dashboard and clicking on "My Apps" to see the name of the apps
- callbackURL:This is the URL the user will be redirected to after signing in with SteemConnect, this HAS to be whitelisted on the URI list I have mentioned in the previous tutorial, if you do not have a domain and server and you are testing things locally on your computer, put http://localhost or http://127.0.0.1 (YOU HAVE TO HAVE THE WEBSITE INSTALLED IN A SERVER LIKE WAMP FOR EXAMPLE, more on this on future supplementary content)
- accessToken:I recommend leaving this as "access_token" for ease of use in the future
- scope:The permissions your app will request from the user signing in, you can see a full link of scopes on https://github.com/steemit/steemconnect/wiki/OAuth-2#scopes but for now we will request every permission for flexibility on the tutorial, so just leave it as "scope: ['login', 'offline', 'delete_comment', 'custom_json', 'comment_options', 'vote', 'comment', 'claim_reward_balance']"
The final code will look like
var api = sc2.Initialize({
app: 'appname',
callbackURL: 'http://127.0.0.1',
accessToken: 'access_token',
scope: ['login', 'offline', 'delete_comment', 'custom_json', 'comment_options', 'vote', 'comment', 'claim_reward_balance']
});
Seeing the results (URL for Sign In)
Now, to wrap up everything, in the same myapp.js file, paste the following
var link = api.getLoginURL();
console.log(link)
Note:The original text send a (state) argument in the api.getLoginURL function, again, I humbly admit I do not know what that actually does, though I have read all the documentation, if you do know or if you read the documentation and understand, please, comment below, I do appreciate contributions A LOT!
But this won't change much, you will still get the login URL with the permissions and be redirected.
Save everything, all the files, and open the index file with a text editor, the one with the HTML code.
Add this on the code on the end after the other script things
<script src="js/myapp.js"></script>
This will import the personalized JavaScript code we have just created.
Save everything and open the file with a browser.
Assuming you have followed this tutorial and did not add personalized HTML and CSS to make it pretty you should see a blank screen, and that is exactly what we expect, because what we want is not in the browser interface, but in the console!
Press the F12 button on your keyboard or open the inspect element or console in your browser
Search for the console tab
AND HERE WE HAVE THE LOGIN URL! Sounds like magic? No, it's code!
Right click and copy address
Or just click on it, this will open a SteemConnect tab for you to sign in, but you don't need to do it now, just click on the URL and copy it
Save this link you have copied somewhere so you will have ease of access to it in the future, go back to the myapp.js file, open it with a text editor and delete the
var link = api.getLoginURL();
console.log(link)
You won't need it anymore, it's sole purpose was to print on the console the URL generated so we can copy, you could actually create the URL manually but that would be boring and tedious.
This is all for now.
Now we have the link to login, on the next tutorial we will create a button to login and I am actually trying to learn how to get the data from the logged in user, if I figure out what am I doing wrong and I can manage to get the data I will add that on the tutorial, else it will be a very short one on inserting the button and testing it, but I am talking to some people and trying to add more content, as I have said, I am learning, digesting and trying to put it in a beginner friendly manner here.
Hey, I am Witness, did you know?
To vote for me, go to https://steemit.com/~witnesses
(note, it is /~witnesses, not /witness)
Scroll all the way down to "If you would like to vote for a witness outside of the top 100, enter the account name below to cast a vote."
type igormuba and click vote
Thank you for your contribution @igormuba.
After analyzing your tutorial we suggest the following points below:
Include proof of work under the shape of a gist or your own github repository containing your code
Nice work on the explanations of your code, although add comments to the code can be helpful as well.
Your tutorial is quite short for a good tutorial. We recommend you aim for capturing at least 2-3 concepts.
We suggest you do the next tutorial with the template here.
Thanks for your work on developing this tutorial.
Your contribution has been evaluated according to Utopian policies and 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.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Wow, this is a very in depth feedback, the kind of comment I like to read.
Thank you very very much for the tips, I will read now all the content you have sent me to improve the classes. I also plan to make videos to complement the text classes.
thank you very very much for showing me the points where I can improve.
Thank you for your review, @portugalcoin! Keep up the good work!
sc2 is not defined
]
Thanks for sharing your explorations - I too found the documentation for Steem Connect to be pretty poor and hard to understand. I am still learning about these libraries too, but at least I have now managed to get the code to do something!
Hey, @igormuba!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
I can't find how to add beneficiary on SteemPlus on already posted content, but I'll be sure to add it with at least 20% on the next posts, thank you for showing me how to further contribute
Hi @igormuba!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server