- Overview
- Social Sign-in Widget
- User Registration Widget
- Social Sharing Widget
- Provider Setup Guide
- One-Click Sharing Widget
- Legacy Sign-in Widget
- Legacy Sharing Widget
Social Sign-in Migration Guide
The purpose of this guide is to assist in transitioning 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:
- Remove the legacy code from the client-side website.
- Optional — You might want to redesign your widget at this time.
- Generate the new code in the Janrain Dashboard.
- 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.
- The JavaScript code placed directly before the </body> tag. See Example 1.
- 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
<script type="text/javascript">
var rpxJsHost = (("https:" == document.location.protocol) ? "https://" : "http://static.");
document.write(unescape("%3Cscript src='" + rpxJsHost +l
"rpxnow.com/js/lib/rpx.js' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript">
RPXNOW.overlay = true;
RPXNOW.language_preference = 'en';
</script>
Example 2. Legacy Widget Link
<a class="rpxnow" onclick="return false;" href="https://example.com/openid/v2/signin?token_url=http%3A%2F%2Fwww.example.net%2Ftest_token.php"> Sign In </a>
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 the Configure the Widget chapter of the Social Sign-in User’s Guide.
Step 3. Generate New Code ¶
On the Dashboard’s Configure the Widget page, click the Save button (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, please see the Call the API chapter of the Social Sign-in Widget User’s Guide.
When you finish testing, visit the website hosting the widget to confirm that everything is in working order.