Integrate LinkedIn Login Button to WordPress

This tutorial is for WordPress developers who want to integrate LinkedIn login button to WordPress.

Most E-Commerce and Forum sites has a LinkedIn login button that make registration and login process faster for users as they don’t have to fill up forms.

LinkedIn OAuth WordPress library

I have created a LinkedIn OAuth library for WordPress which handles all the tough task of LinkedIn OAuth login.
This library also creates necessary REST API URLs required for LinkedIn Login.

Extract the zip file in your theme folder. Now you will have a inc directory in your theme folder which has all necessary files for LinkedIn login.

Loading LinkedIn OAuth WordPress library

Now you need to load the library into WordPress. Inside your theme’s functions.php file include.


require_once('inc/linkedinoauth.php');
Redirecting users

When user clicks on Sign In with LinkedIn button you need to redirect user to


site_url()."/wp-admin/admin-ajax.php?action=linkedin_oauth_redirect"

This URL will handle all core functionality of Sign In with LinkedIn. Once the user has been logged in, the user will be redirected to the homepage of the website.

Creating and Installing LinkedIn App

Users who install your theme needs to create a LinkedIn App for their website.

While creating a LinkedIn App, LinkedIn asks for a callback URL. Users will have to use the following as the callback URL.


site_url()."/wp-admin/admin-ajax.php?action=linkedin_oauth_callback"

Once they have created a LinkedIn App they need to copy the API key and Secret Key from LinkedIn App dashboard and store them as WordPress options.

Use the following option names to store the options value.


update_option("linkedin_app_key", $api_key_variable);
update_option("linkedin_app_secret", $secret_key_variable);

This is all you need to do to have a LinkedIn login button in your theme.

Let’s create a LinkedIn Login widget which displays a LinkedIn Login Button.

LinkedIn Login Widget

Here is the code for creating a LinkedIn Login Widget.

You can put this code inside a plugin also. Make sure you pack the LinkedIn OAuth WordPress library with your plugin also.


<?php
require_once('inc/linkedinoauth.php');

class LinkedIn_Login_Widget extends WP_Widget 
{
    public function __construct() 
    {
        parent::__construct("linkedin_login_widget", "LinkedIn Login", array("description" => __("Display a LinkedIn Login Button")));
    }
        
    public function form( $instance ) 
    {
        // Check values
        if($instance) 
        {
            $title = esc_attr($instance['title']);
            $api_key = $instance['api_key'];
            $secret_key = $instance['secret_key'];
        } 
        else 
        {
            $title = '';
            $api_key = '';
            $secret_key = '';
        }
        ?>

        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'linkedin_login_widget'); ?></label>  
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('api_key'); ?>"><?php _e('API Key:', 'api_login_widget'); ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id('api_key'); ?>" name="<?php echo $this->get_field_name('api_key'); ?>" value="<?php echo $api_key; ?>" />
        </p>
        
        <p>
            <label for="<?php echo $this->get_field_id('secret_key'); ?>"><?php _e('Secret Key:', 'linkedin_login_widget'); ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id('secret_key'); ?>" name="<?php echo $this->get_field_name('secret_key'); ?>" value="<?php echo $secret_key; ?>" />
        </p>

        <p>
            While creating a LinkedIn app use "<?php echo get_site_url() . '/wp-admin/admin-ajax.php?action=linkedin_oauth_callback'  ?>" as callback URL.
        </p>

        <?php
    }
        
    public function update( $new_instance, $old_instance ) 
    {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['api_key'] = strip_tags($new_instance['api_key']);
        $instance['secret_key'] = strip_tags($new_instance['secret_key']);
        
        update_option("linkedin_app_key", $new_instance['api_key']);
        update_option("linkedin_app_secret", $new_instance['secret_key']);
        
        return $instance;
    }
        
    public function widget( $args, $instance ) 
    {
        extract($args);
        
        $title = apply_filters('widget_title', $instance['title']);
        echo $before_widget;
        
        if($title) 
        {
            echo $before_title . $title . $after_title ;
        }
        
        if(is_user_logged_in()) 
        {
            ?>
                <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout"><input type="button" value="Logout" /></a>
            <?php
        }
        else
        {
            ?>
                <a href="<?php echo site_url() . '/wp-admin/admin-ajax.php?action=linkedin_oauth_redirect'; ?>"><input type="button" value="Login Using LinkedIn" /></a>
            <?php
        }
        
        
        
        
        echo $after_widget;
    }
}
register_widget("LinkedIn_Login_Widget");

Let’s see how the above code works:

  • We first included the LinkedIn OAuth library.
  • Then we created a Widget which displays a Login button on front-end and displays keys input boxes on backend.
  • When users submit the widget form on backend the values are saved as WordPress options.
  • When someone clicks on the LinkedIn Login button on the front-end of the widget, the users are redirected to the Redirect URL as mentioned above. The redirected URL handles all the login task.

Below is a screenshot of the Front-end LinkedIn login widget

LinkedIn Login Widget Display

Making LinkedIn REST API Calls

This library is not only limited to just logging in but you can make request to various LinkedIn REST APIs after user is logged in.

Here is a simple example of making GET, POST and DELETE requests.


<?php
	session_start();
	if(is_user_logged_in()) 
	{
		require_once('inc/LinkedIn/LinkedIn.php');
		$app_key = get_option("linkedin_app_key");
		$app_secret = get_option("linkedin_app_secret");
		$callback_url = get_site_url() . "/wp-admin/admin-ajax.php?action=linkedin_oauth_callback";

		$li = new LinkedIn(array('api_key' => $app_key, 'api_secret' => $app_secret, 'callback_url' => $callback_url));

		$li->setAccessToken(get_user_meta(get_current_user_id(), "linkedin_access_token", true));

		//GET, POST and PUT request example
		$result_array = $li->get('endpoint', array("q1"="value1", "q2"="value2"));
		$result_array = $li->post('endpoint', array("q1"="value1", "q2"="value2"));
		$result_array = $li->put('endpoint', array("q1"="value1", "q2"="value2"));
	}
Refreshing Access Token

LinkedIn doesn’t allow the use access token for more than 60 days. On expiration of the token, the user should be asked to login again using the complete login flow.

While logging in user you can store the current time as a user meta-data and refresh it before 60 days. Otherwise, wait until you get a 401 response error to refresh the token.

Conclusion

We’ve learned how to create a LinkedIn Login button.
If you integrate it in your theme then you can place it button anywhere but If it’s in a plugin then you need to put in a widget.

Don’t miss out!
Subscribe to My Newsletter
Invalid email address