Why is Janrain's Engage example only working in IE?

StackOverflow https://stackoverflow.com/questions/13482798

  •  30-11-2021
  •  | 
  •  

Question

First, let me preface this with the fact that I am totally new to OpenID and not very experienced with PHP.

I set up Janrain's Engage example on my website (Apache/PHP), including their JavaScript in the head section:

(function() {

   if (typeof window.janrain !== 'object') {
      window.janrain = {};
   }
   if (typeof window.janrain.settings !== 'object') {
      window.janrain.settings = {};
   }

   janrain.settings.tokenUrl = 'http://mydomain.com/tokenform.php';

   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';

   if (document.location.protocol === 'https:') {
      e.src = 'https://rpxnow.com/js/lib/myapp/engage.js';
   } else {
      e.src = 'http://widget-cdn.rpxnow.com/js/lib/myapp/engage.js';
   }

   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(e, s);

})();

And I added their DIV tag:

<div id="janrainEngageEmbed"></div>

I built the following token receipt page based on their instructions:

<?php

header('Content-Type: text/html; charset=utf-8');

?>
<html>
   <head>
      <title>Janrain Engage example</title>
   </head>
   <body>
      <pre>
<?php

$rpx_api_key = file_get_contents('/path/apikey.txt');

/* STEP 1: Extract token POST parameter */
$token = $_POST['token'];

echo "SERVER VARIABLES:\n";
var_dump($_SERVER);
echo "HTTP POST ARRAY:\n";
var_dump($_POST);

// test the length of the token; it should be 40 characters
if (strlen($token) == 40) {

   /* STEP 2: Use the token to make the auth_info API call */
   $post_data = array('token'  => $token,
                     'apiKey' => $rpx_api_key,
                     'format' => 'json',
                     'extended' => 'false');

   $curl = curl_init();
   curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
   curl_setopt($curl, CURLOPT_URL, 'https://rpxnow.com/api/v2/auth_info');
   curl_setopt($curl, CURLOPT_POST, true);
   curl_setopt($curl, CURLOPT_POSTFIELDS, $post_data);
   curl_setopt($curl, CURLOPT_HEADER, false);
   curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
   curl_setopt($curl, CURLOPT_FAILONERROR, true);
   $result = curl_exec($curl);
   if ($result == false){
      echo "\n".'Curl error: ' . curl_error($curl);
      echo "\n".'HTTP code: ' . curl_errno($curl);
      echo "\n"; var_dump($post_data);
   }
   curl_close($curl);

   /* STEP 3: Parse the JSON auth_info response */
   $auth_info = json_decode($result, true);

   if ($auth_info['stat'] == 'ok') {

      echo "\n You're in!";
      echo "\n auth_info:";
      echo "\n"; var_dump($auth_info);

      /* STEP 4: Use the identifier as the unique key to sign the user into your system.
         This will depend on your website implementation, and you should add your own
         code here. The user profile is in $auth_info.
      */

   } else {
      // Gracefully handle auth_info error.  Hook this into your native error handling system.
      echo "\n".'An error occured: ' . $auth_info['err']['msg']."\n";
      var_dump($auth_info);
      echo "\n";
      var_dump($result);
   }
} else {
   // Gracefully handle the missing or malformed token.  Hook this into your native error handling system.
   echo 'Authentication canceled.';
}

?>
      </pre>
   </body>
</html>

My widget accepts logins from Google, Facebook, Twitter, Yahoo, LinkedIn, and Windows Live. Everything works as advertised, as long as I use IE. If I try any provider using Firefox or Chrome, I seem to be authenticated, the signin dialog goes away, but I'm stuck on the page with the Open ID provider selection widget.

Any ideas?

Was it helpful?

Solution

It turns out that Janrain seems to rely on 3rd party cookies to make their mechanism work. While it may be documented somewhere, I didn't find it even after hours of looking.

In Firefox, Tools, Options, Privacy, and checking 3rd Party cookies allowed the Janrain example to start working.

In Chrome, the procedure is: chrome://chrome/settings/, Show advanced settings, Content Settings, uncheck "Block third-party cookies and site data".

The Janrain example continued working in IE9 regardless of the Block Third-party Cookies setting. I had the same experience with Safari on iOS. (It was set to accept cookies from visited sites only.)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top