Social Sign-in Migration Guide


The purpose of this guide is to help you transition from the legacy Sign-in Widget to the current Social Sign-in Widget.

Users of the legacy Sign-in Widget only need to update the code installed on the client side to integrate with the new widget. The Token URL used with the original widget works with the new widget as well. Once you switch the widgets in the Dashboard and put the new code in place, you will be able to access the new features of the Social Sign-in Widget.

You need to:

  1. Remove the legacy code from the client-side website.
  2. Optional—You might want to redesign your widget at this time.
  3. Generate the new code in the Janrain Dashboard.
  4. Test your new Widget.

Depending on the amount of custom coding you used to build your legacy Sign-in Widget, some sites may require additional steps.

Step 1: Remove the legacy code from the client-side website

When you installed the legacy widget, you inserted the JavaScript code generated by the Janrain Dashboard on every page that included the legacy Sign-in Widget.

Remove these scripts from the website code:

  1. The JavaScript code placed directly before the </body> tag. See Example 1.
  2. The link tag that triggers the sign-in process. This will be installed where the widget is invoked, usually a hyperlink. See Example 2.

Example 1: Legacy Widget Code

Example 2: Legacy Widget Link

Step 2: Optional—Redesign the Widget

The new Social Sharing Widget has several upgraded features that allow you to customize the appearance of the widget. To update the look and feel of your widget before re-implementation, refer to Implementing Social Login.

Step 3: Generate New Code

On the Dashboard’s Configure the Widget page, click Save (alternatively, the Generate the Code button). This generates the JavaScript for the new Social Sign-in Widget.

You must add the URL that points to your tokenURL in the first section of code. Look for the Replace With Your Token URL placeholder.

You need to place two snippets of code as described below (see Figure 1).

Place this code into all pages using the Social Sign-in Widget. Put the first section of code in the <head> section of your website. Place the link to the widget in the body, wherever you desire.

Figure 1: The Get the Code Page

Step 4: Test the Widget

We strongly recommend that you test your newly-created widget.

On the Call the API page, click the Test Your Token URL link in the Resources menu. For information on using this tool, see Implementing Social Login.

When you finish testing, visit the website hosting the widget to confirm that everything is in working order.