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 . Taking a look at Drupal's usage statistics shows there is a huge user population with over one million reported installations . 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 Stitchz Social Login 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 https://www.stitchz.net/Drupal.
- 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.
- 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".
- Log in as an administrator and go to the Module page, "Dashboard > Modules".
- 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.
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 https://login.stitchz.net/. 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 How to Setup Facebook Login.
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.
- 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.
- 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 Stitchz Social Login application into the "App Url", "ApiKey", "AppSecret" and "Redirect Url" fields respectively. 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 https://www.stitchz.net/Documentation 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 https://www.stitchz.net/Faq 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.
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:
- Log in as an administrator and go to "Dashboard > Structure > Blocks".
- 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.
- 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.
- Click "Save Blocks" at the bottom of the page.
- Go to the page where the Block was added. If it needs to be changed, repeat the steps above.
Nearly everyone has a social media account, just look at the latest total number of Facebook users, over one billion . 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.