Integrate Steemconnect V2 User Authentication Into Any WordPress Website
This tutorial will explain how to integrate Steemconnect authentication into any Wordpress website.
Repository
https://github.com/WordPress/WordPress
https://github.com/steemit/steemconnect
https://github.com/guix77/wordpress-social-login/tree/steemconnect
What will I learn
- Setting up your Steemconnect APP
- Altering Wordpress Social Login
- Configuring Wordpress Social Login
- Set up login button directly to Steemconnect
- Easy login-logout button
Requirements
- Python3.6
- WordPress
Difficulty
- intermediate
Tutorial
Preface
WordPress is a frequently used framework for building websites. Integrating STEEM into this ecosystem can greatly benefit both ecosystems. This tutorial will look how to add authentication with a STEEM account using Steemconnect and in addition how to make STEEM the only way to login.
Setting up your Steemconnect app
Steemconnect requires a dedicated 'app' to handle all the interactions with Steemconnect. An app can be created here.
It costs 3 STEEM to register an app. All the keys will stay in control of Steemconnect. Any interactions with the account will be done with the client_id
and client_secret
.
Altering Wordpress Social Login
Wordpress social login is a nice plugin that deals with user verification on any WordPress website by using their social media accounts. This version by @guix77 adds Steemconnect as an option. However, it does not take the exact STEEM username to be the username for the account on the WordPress website. This is fixed by altering the next line of code to:
$this->user->profile->displayName = $data->_id;
Configuring Wordpress Social Login
Go to plugings, activate the wordpress social login plugin and go to settings. Set any not wanted social media sites to no, save settings, and then add Steemconnect.
Insert the client_id
and client_secret
here. Copy the green url, Callback url, and go to Steemconnect->My Apps->Appname->Edit.
Scroll down to Redirect URI(s) and copy the url there.
Account linking
When the user is not recognised by default the user will be asked to either link their account or make a new one. In this example linking will be disabled so that users can only use STEEM to authenticate on the website.
Set up login button directly to Steemconnect
With the current set up a Steemconnect icon will show up at the standard login screen. This can be seen at http://website_url/wp-login.php
To only enable authentication via STEEM the default login menu is unnecessary and direct linking to Steemconnect is more efficient. This can be done with the following url:
http://website_url/wp-login.php?action=wordpress_social_authenticate&mode=login&provider=Steemconnect&redirect_to=redirect_url
Replace website_url
with the url of the website and for redirect_url
get_permalink()
can be used to obtain the current url of where the user is. The following link is an example for the website https://steemautomated.eu and redirect back to the main url.
"http://steemautomated.eu/wp-login.php?action=wordpress_social_authenticate&mode=login&provider=Steemconnect&redirect_to= . get_permalink()"
php code
Easy login-logout button
Additionally an easy way to configure a login-logout button is as follows. Install the following two plugings:
A small change has to be made to the source code of the login-logout plugin. Go to the website folder and navigate to /wp-content/plugins/login-logout
open login-logout.php
Search for item_login
and replace with
if ( ! is_user_logged_in() ){
echo '"item_login">';
echo '<a href="https://your_website/wp-login.php?action=wordpress_social_authenticate&mode=login&provider=Steemconnect&redirect_to=' . $login_redirect_to . '">'.$login_text.'</a>';
}
Replace your_website with the url of the website. This plugin can now be added as a widget to any of the menus.
Example
Live version at http://steemautomated.eu
This tutorial was written by @juliank.
Thank you for your contribution.
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]
Thanks, you are welcome! There is an official development version of the plugin which has Steemconnect as well. However, for some reason it did not work, so I stuck to using this forked version.
Really Amazing news for website creator who use wordpress
Hey @steempytutorials
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
I tried to do this on wordpress but i get an authentication error. http://qwoyn.io do I have to have SSL installed?