Integrate Steemconnect V2 User Authentication Into Any WordPress Website

in utopian-io •  3 months ago

logo.jpg

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.

steemconnect.jpg

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.

social_login.jpg

Insert the client_id and client_secret here. Copy the green url, Callback url, and go to Steemconnect->My Apps->Appname->Edit.

steemconnect2.jpg

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.

social.jpg

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

Screenshot 2018-07-25 00.55.56.png

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:

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

Screenshot 2018-07-25 01.34.11.pngStep #1

Screenshot 2018-07-25 01.01.48.pngStep #2

Screenshot 2018-07-25 01.34.31.pngStep #3


This tutorial was written by @juliank.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for your contribution.

  • I work with wordpress too and I was glad to see a steemconnect v2 plugin. Thanks for your 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]

·

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!