Login Customization for Discourse SSO

[itsbhanusharma (Bhanu Sharma)]

Hey Everyone!

My Setup Consists of: Discourse (Forum + SSO Provider) And Wordpress (Home + SSO Client), Using Discourse WP Plugin, I’ve been able to create a fully functional setup to let forum users log in to the wordpress using the login with discourse link, it works great!

However, I need some advanced level of customization to these Links!

is there a way to replace those links with proper buttons?

Also, Can the [discourse_sso_client login=‘Login Through the Forum’] be used in a text widget to make it visible across the website? Unfortunately, this isn’t working for me

[simon]

A css class should be added to the SSO client login shortcode links so that they are easier to target with css. I’ll do that for the next release of the plugin. Until then, you can still style the links, they are just a little harder to target with css.

Styling the link on the login page is a little trickier. It can be done by adding something like this to your theme’s functions.php file. Maybe we should add an option to the plugin to help with this. (These styles are from an online button generator. Make sure to replace the ‘my_namespace_’ prefix in the function name and the function call with something unique to your website.)

function my_namespace_login_styles() { ?>
    <style type="text/css">
        #loginform a {
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            padding: 12px 24px;
            border: 1px solid #a12727;
            border-radius: 8px;
            background: #ff4a4a;
            background: -webkit-gradient(linear, left top, left bottom, from(#ff4a4a), to(#992727));
            background: -moz-linear-gradient(top, #ff4a4a, #992727);
            background: linear-gradient(to bottom, #ff4a4a, #992727);
            text-shadow: #591717 1px 1px 1px;
            font: normal normal bold 20px arial;
            color: #ffffff;
            text-decoration: none;
            width: 225px;
        }
        #loginform a:hover,
        #loginform a:focus {
            background: -webkit-gradient(linear, left top, left bottom, from(#ff5959), to(#b62f2f));
            background: -moz-linear-gradient(top, #ff5959, #b62f2f);
            background: linear-gradient(to bottom, #ff5959, #b62f2f);
            color: #ffffff;
            text-decoration: none;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_namespace_login_styles' );

@itsbhanusharma

Can the [discourse_sso_client login=‘Login Through the Forum’] be used in a text widget to make it visible across the website?

You can get text widgets to work with shortcodes by adding something like this to your theme’s functions.php file:

add_filter( 'widget_text', 'do_shortcode' );

[itsbhanusharma (Bhanu Sharma)]

Hey @simon !

Thanks for all the feedback, I’ll give it a try in my test setup as running such hack in a production environment can be risky! Grant me time till tomorrow, i’ll share my findings here.

buttons in wp-login.php isn’t that big of a concern for me, I basically need some way to embed a wordpress navigation menu entry that quotes link/login to discourse (forum) account and clicking on that does the whole SSO magic for any user without a hiccup.

Let me know if there’s a starting point to it. maybe some sort of webhook or url that could be set there to automate the process?

I searched the wordpress support and found nothing relevant, but I’ve seen theme developers hardcoding things such as facebook login so maybe there is some sort of possibility to implement this if we take the right approach?