Magento – Social Login

This topic describes the prerequisites and installation and configuration options for the Social Login integration.

Prerequisites

To use the Janrain Social Login plugin for Magento, you must have a Janrain Social Login account, so sign up for one if you have not already done so. To activate this Magento integration, you’ll need to obtain an API key for Social Login. This is available from the Dashboard. You will not need to create a sign-in page, any HTML files, or PHP scripts, as the plugin handles all of this automatically.

Installation

Installation of the Social Login plugin for Magento involves specifying an extension key to the Magento Connect Manager. To get this extension key, access the Janrain Engage plugin page, and click the Get Extension Key button. You’ll need to select the version of Magento Connect that you are using (1.0 for versions 1.4.2 and lower, 2.0 for 1.5.0 and higher), and agree to the license agreement.

Extension key

Figure 1. Extension key

Copy this extension key to your clipboard or into a text file; you’ll need to retrieve it for use in the Magento Connect Manager. The Magento Connect Manager is accessible in the admin back end, in the main navigation, under System > Magento Connect > Magento Connect Manager. This redirects you to the Magento Connect Manager application, which requires authentication to access. Enter your admin username and password to continue.

Key field

Figure 2. Key field

Next, in the Extensions tab, paste in the extension key you retrieved from Magento Connect into the extension key field under the Install New Extensions section (see Figure 2). Click Install, and then Proceed. You should see a terminal message area notifying you of your successful install.

Configuration

Once you have your API key, go to your Magento installation’s admin back end and navigate to System > Configuration.

You should see a new Janrain section, with a new menu item labeled Engage under it (see Figure 3). Immediately after installing this module, it is common to see a 404 page not found error when clicking this link. To correct this, log out of the back end and then log back in.

Engage configuration

Figure 3. Configuration

  1. Click on the Options tab.
  2. Enter your Social Login API Key in the field provided.
  3. Clicking Save Config.

Your account info will be retrieved from the server, which updates the set of social icons that appear in your Login and Sharing solutions. You can expand the Account Info section to verify that the data was retrieved. Note: This data is automatically retrieved only when the API key changes. Therefore, if you need to update your local list of identity providers, you will need to use the Click Here to refresh link in the Account Info box.

Placing Content

There are numerous ways to place content in Magento. Here are some ways that work well for Social Login.

1. Embedding your UI in CMS content

If you want to add your UI inside the content area of a Page or Static Block, you can do so by adding an inline widget. Navigate to the Pages area located under the CMSsection of the admin navigation, and select the page to host the link. See Figure 4.

Select page

Figure 4. Select page

Then, navigate to the page you want to place the UI on and click the Content tab. From here, you can move the cursor inside the editor to the location we want the UI to appear, and click the Insert Widget icon (see Figure 5).

Insert Widget button

Figure 5. Insert Widget button

From here, select Janrain Engage Login as the widget type. After a second or two, additional options should appear allowing you to specify text to display and the icon size. See Figure 6.

Configure widget

Figure 6. Configure widget

Click Insert Widget and then Save Page. You should now be able to view your homepage and see your new UI.

2. Adding a Widget Instance

In some cases, you may want more control over where you place your Social Login functionality, or to display them on multiple pages without needing to edit each page individually. You can do this by adding a widget instance.

  1. Navigate to the Widgets area located under the CMS section of the admin navigation and click Add New Widget Instance.
  2. Select Janrain Engage Login from the Type drop down menu, and select the theme to use. Click Continue to see more options (see Figure 7).
  3. First, give your widget a title. This title won’t display anywhere on the page, but serves as a unique identifier. If you have multiple store fronts, you can select which to display this widget on, otherwise select All Store Views.
  4. Leave Sort Order set to 0 unless you’re planning on using this instance in a space with multiple blocks of varying sort orders.
  5. Once your settings are configured, click Add Layout Update to add a layout instance of this widget.
Configure widget instance

Figure 7. Configure widget instance

You will need to decide where the UI will appear. From the Display On drop-down menu, you can select All Pages, a Specified Page, All Products, specific product types, or specific categories.

Once your page type is selected, you can choose which content area to use. This example uses Navigation Menu. In the left column, click the Widget Options tab, and specify an icon size and display text. Finally, click Save.

The widget should show up in the header as shown in Figure 8.

Magento top navigation

Figure 8. Magento top navigation

3. Page Layout XML

If you want more control of your UI placement on a page-by-page basis, you can add a new block node in your page’s layout.

  1. Navigate back to the Pages section under CMS in the admin navigation menu.
  2. Select the page you want to use.
  3. Select the Design tab. For this example you’ll put the UI in the right column at the very top, so select Home Page.
Block placement

Figure 9. Block placement

Note that XML is pre-populated in the Layout Update XML text box (see Figure 9). This code is commented out, so the page uses the default layout. Uncomment it by removing <!-- and --> from the beginning and end, so it will be used. Next, locate the reference node to the right column, which is designated by beginning with: <reference name="right">

Inside this node, place the new block:

large
    &amp;amp;lt;label&amp;amp;gt;Log in with your social account!&amp;amp;lt;/label&amp;amp;gt;

The type of the block specifies that you want to use the Engage module, and the Auth block. You could use the same technique for the social sharing block using type=”engage/share”. In this example, before=”-” specifies to place the block at the top. You can reference another block name here if you wish.

Save the page and view to the home page. Your new block should now appear in the right column. See Figure 10.

Right block placement

Figure 10. Right block placement

Screenshots

Engage icons

Figure 11. Social Provider icons

Social sign-in

Figure 12. Social Login

Pre-populated registration form

Figure 13. Pre-populated registration form