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

https://steemautomated.eu/wp-login.php?action=wordpress_social_authenticate&mode=login&provider=Steemconnect&redirect_to=https://steemautomated.eu/

Easy login-logout button

Additionally an easy way to configure a login-logout button is as follows. Install the following two plugings:

• https://wordpress.org/plugins/login-logout/
• https://wordpress.org/plugins/widgets-in-menu/

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

Step #1
Step #2
Step #3

---

This tutorial was written by @juliank.