Add Registration to a Website (JavaScript)

Implementing the Registration Solution involves working with Janrain representatives. This task adds Registration features and GUI to an existing website.

Main high-level process steps:

  1. Application Creation — Janrain sets up a Registration application. This is administered from the Janrain Dashboard (dashboard.janrain.com).
  2. Customer Portal — Janrain also sets up a personalized customer portal for communicating with your Janrain representative (http://support.janrain.com).
  3. Flow Building — Janrain representatives publish a standard registration flow to your registration application hosted by Janrain.
  4. Add Functionality with Events — Once the Registration code is added, it is launched using JavaScript.
  5. Customization (optional) — Customizations to the standard registration flow, if any, are communicated to Janrain, and then made by Janrain. Any changes made to the default flow must be provided to Janrain in a bulleted list. New code will be delivered for the customer to place on their site.
  6. Testing — UI is tested in a staging environment.
  7. Deployment — After testing, code is deployed to the live site.

Requirements

1. Add Standard Flow

1. Unzip the Standard Registration Flow deliverable. Create a folder in your localhost public folder, or root of your test environment called flow_demo. Add the unzipped files here.
2. Using a browser, navigation to this location, and select the index.html file.

Figure 1. index.html

Figure 1. index.html

3. Click on the Sign-in/Sign-up link to launch Registration.

Figure 2: Standard Registration Flow

Figure 2: Standard Registration Flow

This is the standard registration functionality. Next, it will be added to a website.

2. Add to a Website

The standard flow functionality is added to a webpage using JavaScript.

  1. Add a website to your flow_demo folder.
  2. Open the index.html file included in your deliverable in a text editor.
  3. Copy the entire head tag, from the index.html file.
  4. Replace the entire head tag of the target website.An example of what this might look like follows:
    <script type="text/javascript">
    
    (function() {
      if (typeof window.janrain !== 'object') window.janrain = {};
      window.janrain.settings = {};
      window.janrain.settings.capture = {};
    
      /* _______________ can edit below this line _______________ */
    
      janrain.settings.packages = ['capture'];
      janrain.settings.tokenUrl = 'http://example.com/rpx-token-url.php';
      janrain.settings.capture.redirectUri = 'http://redirectdomain.com/';
      janrain.settings.capture.confirmModalClose = true;
      janrain.settings.capture.clientId = '12345678912345678912345678912345';
      janrain.settings.capture.responseType = 'token';
      janrain.settings.capture.modalBorderOpacity = 1;
      janrain.settings.capture.modalBorderWidth = 5;
      janrain.settings.capture.modalBorderRadius = 20;
      janrain.settings.capture.modalCloseHtml = 'X';
      janrain.settings.capture.modalBorderColor = '#7AB433';
      janrain.settings.capture.mode13 = true;
      janrain.settings.capture.captureServer = 'https://example.janraincapture.com';
      janrain.settings.capture.stylesheets = [
        'stylesheets/example1.css', 'stylesheets/example2.css'
      ];
      janrain.settings.capture.conditionalIEStylesheets = [
        'stylesheets/example-ie.css'
      ];
    
      /* _______________ can edit above this line _______________ */
    
      function isReady() { janrain.ready = true; };
      if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", isReady, false);
      } else {
        window.attachEvent('onload', isReady);
      }
    
      var e = document.createElement('script');
      e.type = 'text/javascript';
      e.id = 'janrainAuthWidget';
      e.src = 'http://12345678912345.cloudfront.net/examplev2/load.js';
    
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(e, s);
    
    })();
    
    function janrainCaptureWidgetOnLoad() {
      janrain.events.onCaptureSuccessfulLogin.addHandler(function(result){
        alert('Well done! You just logged in and got an <code>accessToken</code> of ' + result.accessToken);
      };
      janrain.capture.ui.start();
    }
    </script>
    
    

    Please note: The janrain.capture.ui.start() function should always be invoked only after all event handlers have been specified.

    In the script delivered by your Janrain representative, the URL you want to load the JS from is:

    http://widget-cdn.rpxnow.com/load/NAME

    or

    https://rpxnow.com/load/RPNAME or https://rpxnow.com/load/RPNAME

    Note: If you are not using social sign as an option for Registration, change the /load/NAME to /load-default.

  5. Next, paste the following sample code directly above the closing body tag in your website. This injects configuration code into your webpage from the Janrain application. When the final widget is deployed in production, this will be replaced with the actual code.
    <!-- During the development process, the configuration code will be loaded from
         Janrain servers so that we can help you customize it. When your site is ready
         to go live, the following script tag will be replaced with your customized
         javascript and HTML markup to provide the fastest possible user experience. -->
    <script src="http://pse.janrain.com/customer_dev/e77fbc51599d/scripts/index.js" 
            id="janrainCaptureDevScript"></script>
    
    <!-- The following links are meant to simulate elements already existing on your page. -->
    <!-- Add the class 'capture_modal_open' to an anchor tag to initiate signin. -->
    <a href="#" id="capture_signin_link">Sign In / Sign Up</a>
    
    <!-- Link to the profile page as needed -->
    <a href="edit-profile.html" id="capture_profile_link" style="display:none">Edit Profile</a>
    
    <!-- Add the class 'capture_end_session' for the log out link -->
    <a href="#" id="capture_signout_link" style="display:none">Sign Out</a>
    

    Warning: The highlighted link above is a preliminary link of setting for your widget that are initially hosted at Janrain. Once your installation is finalized, these settings will be delivered to you, and placed at this point in the script. Do not deploy with this link. The server is not configured for hight amounts of traffic and will break.

  6. Finally, add a JavaScript class to a hyperlink on the website to launch the flow:
    class="capture_modal_open"
    

    Once you have added these elements to your website, use your browser to navigate to localhost:8888/flow_demo/[sitename].html. Click the link that has the capture_model_open class designation. The UI will launch.

3. Use the Event System to Register State

Now that the Registration functionality is associated with a link, a robust JavaScript event system is provided to communicate with the website. Every website will have different requirements on what happens after a user is authenticated, but the following is a simple example to illustrate a basic implementation that will launch a pop up once a user signs in.

  1. Use a text editor to open the website that you used in the last example. The the widget code should already be added to your website (or page).
  2. In the script added to the head section in the last Add Flow example, find the janrain.events.onCaptureLoginSuccess event. This event fires when a user successfully signs in.
  3. The code in the addHandler section executes when this event fires. Add this code after the janrain.capture.ui.modal.close(); line:
    alert("You are logged in");
    

An example using the event system in code:

<script type="text/javascript">
  function janrainCaptureWidgetOnLoad() {
    janrain.capture.ui.start();
    janrain.events.onCaptureLoginSuccess.addHandler(function(result) {
      console.log(result);
      janrain.capture.ui.modal.close();
      alert("You are logged in");
      document.location = "edit-profile.html";
    }
  });
  ...

Save the file, and in your browser, navigate to localhost:8888/flow_demo/your_site_name.html .

Now, when you click on the link and sign in, the janrain.events.onCaptureLoginSuccess event fires, and the alert displays. See Figure 2.

Figure 2: Alert

4. Test Authentication

Once you have added these elements to your website, use your browser to navigate to localhost:8888/flow_demo/[sitename].html. Click the link that has the capture_model_open class designation. The UI should launch when you finish the registration or sign-in process.

At this point, a token will have been received and stored in your browser’s local storage. To observe this, open the javascript console in the browser you are using.

An example using Google Chrome:

  1. From the navigation menu, select View > Developer > JavaScript Console. The JavaScript Console opens.
  2. In JavaScript Console, select the Resources tab.
  3. Select Local Storage.

The token passed by Janrain to authenticate the user is displayed in the janrainCaptureToken Key field. This token is used to identify the user’s session in Registration API calls. The user is signed in to your website.

5. Deploy to Live Website

Once the UI has been QA’d, Janrain will assist with final placement of the code on the production website.