LinkedIn for Business

LinkedIn has over 300 million members world wide. You can leverage one of the most popular social networks to dramatically simplify your website's user login experience by adding LinkedIn social login to your website. Social login has been shown to increase user engagement, customer conversion rates, and reduce sign-up resistence for websites [1]. As mentioned in my previous blog post social login is a very popular authentication mechanism that is safe and secure. In this post I will talk about how to connect LinkedIn Login to your website with the help of Stitchz Social Login.

Create a Stitchz Social Login App

The first thing you'll need to do is create a Stitchz Social Login account. Go to the login page, and sign in with the social identity of your choice, Figure 1.

Figure 1 - Select a Social Login to sign in with
Once logged in, create a new application by clicking "Login" at the top, then click the Create link, Figure 2.
Create a new Social Login Application Button
Figure 2 - Create a new Stitchz application
In the new Stitchz application page, Figure 3, the fields marked with a red asterisk are required. So begin by entering an application name. It must be unqiue, it only accepts letters and numbers and it cannot contain spaces, so I recommended to use your base domain name. The application name will become your "App Url" and you'll use it when setting up your Authentication with LinkedIn Login. For now write it down, or copy it to a safe place, we'll talk about this in a minute.
Next, enter the description of your website and your domain. Your Domain is exactly as it sounds, your website's root domain name, i.e. example.com, without the "http" or "www" in front of it.
The Return Url is an end point or page on your website that is ready to accept a POST request from Stitchz containing a one-time unique code or "token", i.e. https://www.yourdomain.com/Read/Token/from/Stitchz. If you're using one of our CMS plug-ins (i.e. Drupal, Wordpress, etc.) the Url is simple, usually "https://www.yourwebsite.com/stitchz_social_login/auth", otherwise make sure your website is ready to accept a POST request from Stitchz and enter that full Url. Check the "Web Site Set Up" page for your application for more details.
Next, enter the Url to your website's privacy page and the domain(s) you will be sending your authentication request from in the Privacy Url and Whitelist Domains fields respectively. The domain(s) in the Whitelist Domains field can be a comma separated list of domains and it is very important as Stitchz Social Login will only accept requests from one of the domains listed, i.e. "localhost, yourdomain.com".
Once all the fields are complete click the "Next" button to continue.
New application details form
Figure 3 - New application details
On the next page, select the type of plan that best fits your needs, Figure 3, there are three choices, Basic, Professional, and Enterprise. The differences between the three can be found on the , but in general they are related to how many logins per month, how many providers you can setup for your site, etc. The plan type can be changed at any time, so for now, select Basic.
Select an Application Type for the new application
Figure 4 - Choosing a Stitchz Plan

Adding Social Login Providers

Now your application has been created, but no social login providers have been setup, that's our next step. To add a new Social Login Provider, a wizard will walk you through each step in creating a new provider, Figure 5. First, select a Social Login Identity Provider from the drop down list. The envelope icon next to a provider name indicates that the respective provider offers the user's email address in their profile data. As the wizard walks through each field, you will be asked to enter an App Key and Secret Token, we'll go to LinkedIn Login to get those after saving the new provider, for now, enter "0000000000000000000" for both fields. Write down or copy the "Stitchz Return URL" as we'll need this next. Click Save.
Create a new Identity Provider
Figure 5 - Add new Identity Provider
After saving your provider, you'll be asked what permissions (or scope) you'd like to request from each end user logging in to you website. Select only the permissions you need, selecting too many without proper justification may scare your end users off. For now leave the default selection(s), r_basicprofile, and click "Save" at the bottom.

Create a new LinkedIn Application

Open a new browser window and go to: https://www.linkedin.com/secure/developer. Click the "Create Application" button to create your LinkedIn application. A new screen will open asking you for your website's details, Figure 6. Enter your Company Name, or select it from the drop down list. Next enter a name for your application, this will be presented to your end users when they login, that way they will be absolutely clear where and what they are logging in to. Now enter a concise description of your application/website and upload your website logo (it must be the same size height and width). Finally, select your website's use and enter your URL and business contact information, then click Submit.
Create a New LinkedIn Application
Figure 6 - Create a new LinkedIn Application
On your new application's Authentication page, write down or copy the "Client ID" and "Client Secret" Authentication Keys, and leave the Default Application Permissions as is for now. Remember the "App URL" from when you created you Stitchz application above, add that as one of your LinkedIn "Authorized Redirect URLs" (if you don't remember it go to your Stitchz application's Settings page). Click "Update" at the bottom, Figure 7.

Figure 7 - LinkedIn Authentication Setup Page

Final Setup

Now, go back to your Stitchz Social Login list of Providers and click on "Edit" to open the LinkedIn edit dialog box. Enter your "App ID" and "App Secret" copied from LinkedIn into the Stitchz "App Key/ID" and "Secret Token" fields respectively. Click "Save".
If you're using one of our CMS plug-ins (i.e. Drupal, Wordpress, etc.) then go to your administrative page and configure the plug-in per the instructions. If not, your Return URL should be ready to accept a POST from Stitchz with a one time unique key or "token". Take the token submitted to your website by Stitchz and POST it back to your App URL (https://yourappurl/Authentication/v1/Auth) along with your desired response format (XML or JSON). Stitchz will verify your token and send back the authenticated user's identity packet. Take the response and log the user in to your website.
That's it! Now your end users are ready to begin logging in with their LinkedIn Social Identity!
If you need any further help getting started let us know at [email protected]

References:

 
 
 
Drupal

This article will cover how to install and activate the Stitchz Social Login Drupal module to integrate social login providers, like Facebook or Twitter, to a Drupal site.

Drupal is a free and open-source content-management framework written in PHP that is used by at least 2.1% of all Web sites worldwide [1]. Taking a look at Drupal's usage statistics shows there is a huge user population with over one million reported installations [2]. Drupal's popularity comes from its ease of use, modular plugins (called modules), localization, and customizable themes. Modules contain the magic dust that extends Drupal core functionality that an administrator activates to customize their site.

The module extends Drupal's standard user registration and login experience by integrating social login features. With 20+ popular social networks to choose from, customizing the Drupal site experience is simple.

Installing the module into Drupal follows the standard process. Details of the installation and configuration are in this article; for an abbreviated version of these steps check out .

Installation

  1. Download the package from the Stitchz project page located in Drupal's module repository. Downloads are available as a .zip or .tar.gz file. Make sure to download the latest version from https://www.drupal.org/project/stitchz_social_login.
  2. Extract the package contents to your site's modules directory. This is typically in your Drupal deployment folder under "sites/all/modules/". The folder name should be "stitchz_social_login".
  3. Log in as an administrator and go to the Module page, "Dashboard > Modules".
  4. Find the three Stitchz Social Login modules in the list and tick the checkboxes next to each, then click "Save Configuration" to activate them. Figure 1.
    Stitchz Social Login Drupal Module Selection
    Figure 1.

Configuration

Configuring Stitchz Social Login so that users can register and login with their social identity is straight forward. If you have an application already setup with Stitchz then jump to step 1, otherwise create an application at . When creating an application combine your website's Url with "/stitchz_social_login/auth" (the Stitchz Social Login end point). For example: https://www.YourWebsiteUrl.com/stitchz_social_login/auth

For details on creating an application follow the steps outlined in the previous post .

After the application is setup, begin configuring the Drupal module. Some settings from the application are required to properly configure it in the following steps, so keep the settings handy.

  1. First, enable Clean Urls under "Dashboard > Configuration > Search and metadata" in the Drupal Configuration area. If necessary, follow the steps listed under the "Server Configuration" section in Drupal's Configure clean URLs page for troubleshooting Clean Urls in Drupal.
  2. Next, configure the Stitchz Login API Settings (Dashboard > Configuration > People > Stitchz Social Login), each field with a red asterisk (*) is required. Copy the settings from your application into the "App Url", "ApiKey", "AppSecret" and "Redirect Url" fields respectively. Figure 2.

    Stitchz Social Login Configuration
    Figure 2.

There are a few things to note about the configuration that may make it simpler. First, the "Return Url" field is the Drupal website's full web Url plus the Stitchz Drupal end point ('/stitchz_social_login/auth'), i.e. https://www.YourWebsiteUrl.com/stitchz_social_login/auth. This value should match the Return Url setup with the Stitchz application.

Second, the "API Version" field determines how users' authentication requests are sent to Stitchz. The "Standard Login" option is a basic authentication request used to only authenticate a user, nothing else. The "OAuth 2 Login" option sends an OAuth 2.0 authenticated request to Stitchz and returns a valid OAuth 2.0 token that can be used to request further resources without forcing the end user to re-authenticate. Take note that "OAuth 2 Login" requires HTTPS. A future article will cover what requests can be made to Stitchz API. In the meantime if you're interested check out for info.

After configuring the Stitchz Login API Settings you must sync your configured Social Login Identity Providers from Stitchz. Click the "Sync Providers" button to synchronize the list of providers' setup in the Stitchz application. If all settings are correct a sample login will display with all the configured and active identity providers. Should an error message appear or no sample login is displayed double check the Stitchz Login API Settings and click "Sync Providers" again. If no sample is displayed, continue with the configuration, save all settings, and then check and try again.

Thirdly, the Stitchz Login Addin Settings provides options for where to display the social login form within Drupal and how it will look. Placing a tick in the checkbox "activates" the feature and displays the form on the respective screen. A typical website should activate the first three choices; websites with Drupal commenting turned on should activate all four choices so commenters can login and comment with their social identity.

The "Theme Version" selection changes the way the social login icons look. The current option is "Basic". Additional themes will be included in future updates.

Finally, the "Social Login Notes" field allows the administrator to write a message to all users; up to 255 characters are allowed, with no HTML. The note appears under the social login icons wherever they are displayed. Notes are useful to provide login instructions or share a message.

See Figure 3 for an example of a complete setup.

Stitchz Social Login Form
Figure 3.

Additional Options

Many content management frameworks have the concept of "widgets", allowing content to be placed in various regions within a page; in Drupal these are called "Blocks". An administrator can add a Block to a screen to display its content in specific locations, sort the Block with respect to another Block, and customize the visibility of the Block. For specific details on working with Blocks in Drupal check out https://www.drupal.org/documentation/modules/block.

When you activate the Stitchz Social Login module a Block is available to add to any region. To add the Stitchz Social Login block:

  1. Log in as an administrator and go to "Dashboard > Structure > Blocks".
  2. Find "Stitchz Social Login" in the list of blocks and click the drop down menu to select a region to display it in. There are many standard regions to choose from, I suggest picking a region to see how it fits into your site's layout, you can always change it later. If you're still unsure which region to choose Drupal explains regions at https://www.drupal.org/node/171224. If you have a custom theme installed it may have its own regions, check with the theme creator for details.
  3. After selecting the region, it may be necessary to drag the Block to a better position, or order. Click the Block row and drag it to reorder its position. Figure 4.
    Stitchz Social Login Block Steup
    Figure 4.
  4. Click "Save Blocks" at the bottom of the page.
  5. Go to the page where the Block was added. If it needs to be changed, repeat the steps above.

Wrap Up

Nearly everyone has a social media account, just look at the latest total number of Facebook users, over one billion [3]. Why not lower the barrier of entry and provide your visitors a simple, safe means of registration? With more than 20 popular social networks to choose from, customizing the Drupal site experience with Stitchz Social Login is simple.

References:

 
 
 
Adding Facebook Login to your website dramatically simplifies your user login experience, can increase user engagement and increase customer conversion rates. As I mentioned in my previous blog post social login is growing and Facebook is leading the way. In this post I will talk about how to connect Facebook Login to your website with the help of Stitchz Social Login.

Create a Stitchz Social Login App

The first thing you'll need to do is create a Stitchz Social Login account. Go to the login page, and sign in with the social identity of your choice, Figure 1.

Figure 1 - Select a Social Login to sign in with
Once logged in, create a new application by hovering your mouse over the Applications menu at the top, then click the Create Application link, Figure 2.
Create a new Social Login Application Button
Figure 2 - Create a new application
In the new application page, select the type of application you'd like to create. There are three choices, Basic, Professional, and Enterprise, Figure 3. The differences between the three can be found on our , but in general they are around how many logins per month and how many providers you can setup for your site. The application type can be changed at any time, so for now, select Basic.
Select an Application Type for the new application
Figure 3 - Choosing an application type
Next, enter the new application's details, Figure 4. The fields with the red asterisk are required. The application name, which must be unqiue, accepts only letters and numbers and cannot contain spaces. The application name will become your "App Url" and you'll use it when setting up your credentials with Facebook Login, write it down or copy it (we'll talk about this later).
New application details form
Figure 4 - New application details
Enter the description of your application and the full Url of your website's Favicon if you'd like. Your Domain is exactly as it sounds, your website's root domain name, i.e. example.com, without the "http" or "www" in front of it.
The Return Url is an end point or page on your website that is ready to accept a POST back from Stitchz containing a one-time unique code or "token". If you're using one of our CMS plug-ins (i.e. Drupal, Wordpress, etc.) the Url is simple, usually "https://www.yourwebsite.com/stitchz_social_login/auth", otherwise make sure your website is ready to accept a POST request from Stitchz and enter that full Url. Check the "Web Site Set Up" page for your application for more details.
Next, enter the Url to your website's privacy page and the domain(s) you will be sending your authentication request from in the Privacy Url and Whitelist Domains fields respectively.
Finally, the domain(s) in the Whitelist Domains field is a comma separated list of domains, and it is very important as Stitchz Social Login will only accept requests from one of the domains listed, i.e. "localhost, yourdomain.com".
Once all the fields are complete click the "Create" button at the bottom.

Adding Social Login Providers

Now your application has been created, but no social login providers have been setup, that's our next step. To add a new Social Login Provider, a wizard will walk you through each step in creating a new provider, Figure 5. First, select a Social Login Identity Provider from the drop down list. The envelope icon next to a provider name indicates that the respective provider offers the user's email address in their profile data. As the wizard walks through each field, you will be asked to enter an App Key and Secret Token, we'll go to Facebook Login to get those after saving the new provider, for now, enter "0000000000000000000" for both fields. Write down or copy the "Stitchz Return URL" as we'll need this next. Click Save.
Create a new Identity Provider
Figure 5 - Add new Identity Provider
After saving your provider, you'll be asked what permissions (or scope) you'd like to request from each end user logging in to you website. Select only the permissions you need, selecting too many without proper justification may scare your end users off. Click "Save" at the bottom.

Create a Facebook App

Open a new browser window and go to: https://developers.facebook.com/apps. Click the "Create New App" button to create your Facebook application. A new dialog box will open asking you for your website's details. Enter a descriptive name for your "Display Name", this will be presented to your end users when they login, that way they will be absolutely clear where and what they are logging in to. Next select a "Category" that your website fits into and click "Create App".
On your new App's Settings page, write down or copy the "App ID" and "App Secret" values, you may need to click on "Show" to get the values. Remember the "App URL" from when you created you application above, add that as your Facebook "App Domain" (if you don't remember it go to your Stitchz application's Settings page). Then, take your "Stitchz Return URL" from above and copy that into your Facebook "Website > Site URL". Click "Save Changes" at the bottom.

Final Setup

Now, go back to your Stitchz Social Login list of Providers and click on "Edit" to open the Facebook edit dialog box. Enter your "App ID" and "App Secret" copied from Facebook into the Stitchz "App Key/ID" and "Secret Token" fields respectively. Click "Save".
If you're using one of our CMS plug-ins (i.e. Drupal, Wordpress, etc.) then go to your administrative page and configure the plug-in per the instructions. If not, your Return URL should be ready to accept a POST from Stitchz with a one time unique key or "token". Take the token submitted to your website by Stitchz and POST it back to your App URL (https://yourappurl/Authentication/v1/Auth) along with your desired response format (XML or JSON). Stitchz will verify your token and send back the authenticated user's identity packet. Take the response and log the user in to your website.
That's it! Now your end users are ready to begin logging in with their Social Identity!
If you need any further help getting started let us know.