Getting started with SteemConnect development

SteemConnect

You probably are familiar with websites that allow you to login with your Facebook, Google LinkedIn, ... account. This is very convenient for the user, no need to manage many different accounts and their associated passwords. It also allows the user to grant specific rights to your account on a per site basis. Think voting, commenting, ... in the case of the Steem blockchain.

SteemConnect offers a similar functionality for your steem account. This is an excerpt from the steemconnect.com website:

SteemConnect gives you full access to the Steem ecosystem without giving up your private keys. That’s right, never risk a malicious or incompetent 3rd party app getting your private keys again. SteemConnect acts as the identity layer in between that enables participation without vulnerability.

Basically it allows 3rd party sites such as SteemMakers' website to offer blockchain functionality without those sites needing to worry about storing your private information in a secure way on their servers.

First steps

The first requirement is to create an app account. I'm not going into detail here since @noisy did a very good job explaining the steps in his article "How to configure SteemConnect v2 and use it with your application". To get it up and running was a bit harder. Documentation was not clear to start with and examples hard to find. On top of that the examples I managed to find were using technologies I don't master. The best example available is the one with AngularJS found here.

Test implementation for SteemMakers

The topology we have in mind for SteemMakers is to keep everything as secure as possible and thus keep all information with you in your browser. One of the first features we have in mind is to use the authentication to enable certain pages for certain users and thus we started with testing the login process.

If the user is not logged in he gets a simple login link. When following the link the user is taken to the SteemConnect login page where he is asked to give the SteemMakers.app. This is a secure communication between the user and SteemConnect at no point SteemMakers receives your password.

Once verified SteemConnect redirects the user to a SteemMakers webpage providing a username, expiration time and an access token. This is again a secure connection.

This is just a temporary page where the provided information is stored in a cookie for your convenience. This way the information that SteemConnect returned is stored for your next visit to SteemMakers and you don't need to log in to SteemConnect every time.

This page then again forwards you to the original page where your username and profile image are now shown and the login link is replaced with a logout link.

Minimal implementation

If you are interested in the details to implement this functionality yourself you can have a look at the code in Github. This commit has three files with the minimal implementation as described above to be able and continue our work on the SteemMakers' website. I hope this information can help someone out in the future. At this point in time you can see the code in action on www.steemmakers.com/test/test.php. These pages will be removed in the near future but it should be easy to reproduce this functionality based on the commit.

Next steps

Next step for us is to use this functionality to enable certain features on the sit.

Help us out

Anyone interested is free to join and help out. The code is available on Github, have a look and join us on Discord!

Utopian proof of work: GitHub commit

---

Posted on Utopian.io - Rewarding Open Source Contributors

---