INCLUDE_DATA

Authenticate Users In an Iframe on Myspace Opensocial Using PHP

Posted on March 17th, 2008 in Myspace API, OpenSocial, PHP by jason

This code will get the viewer’s myspace id, authenticate them, and then open the results in an iframe, then it checks to make sure it is the same user in the iframe. This lets you safely and securely display user specific details inside your app surfaces, allowing for more complex and social based apps.

This code is written for php 5.2.3, so your results may very if you aren’t using it.

First up is the code you plug into the ”edit app source” section. you will need to change the auth.php and user.php urls to ones that correspond to your server. This code gets the viewers id, and opens up a user.php page into the iframe with a $_GET variable “id” that contains the user’s myspace id. the script also sends the myspace Oauth data to auth.php, which contains a security routine to make sure the user id in the $_GET variable is actually the real user.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<iframe FRAMEBORDER="0" FRAMEBORDER="0" FRAMEBORDER="0" ID="frame" NAME="frame" WIDTH="790" HEIGHT="1000" FRAMEBORDER="0" FRAMEBORDER="0" FRAMEBORDER="0" FRAMEBORDER="0"></iframe>
<script TYPE="text/javascript">      
function init() {      
MYOS_TRACE = true;       
var os = opensocial.Container.get();      
var dataReqObj = os.newDataRequest();      
var viewerReq = os.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER);      
dataReqObj.add(viewerReq);      
dataReqObj.send(dataLoadCallback);      
}        
 
var serverURL='http://www.yourdomain.com/auth.php';  //change to your domain and page      
 
function dataLoadCallback(dataResponse) {      
var viewerData = dataResponse.get(opensocial.DataRequest.PersonId.VIEWER).getData();      
var viewerName = viewerData.getField(opensocial.Person.Field.ID);      
 
    var params = {};      
    params[opensocial.ContentRequestParameters.METHOD] = opensocial.ContentRequestParameters.MethodType.GET;      
    params[opensocial.ContentRequestParameters.CONTENT_TYPE] = opensocial.ContentRequestParameters.ContentType.HTML;      
    params[opensocial.ContentRequestParameters.AUTHENTICATION] = opensocial.ContentRequestParameters.AuthenticationType.SIGNED;      
    opensocial.Container.get().makeRequest(serverURL, loadiframe, params);      
//change to your user page and domain      
document.getElementById('frame').src="http://www.yourdomain.com/user.php?id=" mce_src="http://www.yourdomain.com/user.php?id="+ viewerName;      
 
function loadiframe() {      
//here if wanted but needed due to my crappy js skills      
}      
 
}      
 
init();      
 
</script>

Up next is the auth.php page, that actually  does the authentication process. You will need to change some of the vars to correspond to your app. the skeleton_key var is used to encrypt the data so only people who have that key can decrypt it. This key can be anything, a string of text, numbers, whatever you can think of, just don’t tell anyone.
The script takes all the vars sent by Myspace, and checks to make sure the user is valid using Oauth. If everything is kosher, a file is written, on your server named the same as the user id. This file contains the user id, the given Oauth sig, the checked Oauth sig, and an encrypted version of the user id. This file can then be read and parsed by the user.php page code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$this_url = strtolower('http://www.yourdomain.com/auth.php'); //the url to this page 
$myspace_secret="YOUR MYSPACE SECRET KEY"; //your myspace secret key 
$skeleton_key="xxxxxx"; //your encryption key can be changed to whatever 
$test_mode =0; //change to 1 if you want to print out ids to test script    
 
$opensocial_viewer_id=$_GET[opensocial_viewer_id]; 
$oauth_signature=$_GET[oauth_signature];    
 
// check the sigs and make sure its  the real deal 
$remote_signature = $_GET['oauth_signature']; 
unset($_GET['oauth_signature']); 
ksort($_GET); 
$url=urlencode($this_url); 
$g_me=urlencode(http_build_query($_GET)); 
$base_string = "GET&amp;$url_me&amp;$g_me"; 
$secret = "$myspace_secret&amp;"; 
$local_signature = base64_encode(hash_hmac("sha1", $base_string, $secret, TRUE));    
 
//if its real do it 
if ($remote_signature == "$local_signature"){ 
$token=mcrypt_ecb(MCRYPT_3DES, $skeleton_key, $opensocial_viewer_id, MCRYPT_ENCRYPT); 
//if we are in testing mode 
if($test_mode =='1'){ 
$test=mcrypt_ecb(MCRYPT_3DES, $skeleton_key, $token, MCRYPT_DECRYPT); 
$feed=fopen($opensocial_viewer_id,"w"); 
fwrite($feed,"$opensocial_viewer_id|$oauth_signature|$local_signature|$token|$test"); 
fclose($feed); 
}else{ 
//now its live mode 
$feed=fopen($opensocial_viewer_id,"w"); 
fwrite($feed,"$opensocial_viewer_id|$oauth_signature|$local_signature|$token"); 
fclose($feed); 
} // end modes 
} // end if its the real deal

This is pretty simple, using the $_GET var id, we can read the user id file, into a string, explode it into an array, and decrypt the data, and check to make sure the user is who they say they are. Make sure your skeleton_key var is the same as in your auth.php.

1
2
3
4
5
6
7
8
9
10
11

//#################################search user##############################// 
$user=$_GET[id]; 
$skeleton_key="xxxxxx"; //your encryption key must be the same as on auth.php 
$file=file_get_contents($user); 
//echo $file; //uncomment to test output 
$user_info_array=explode("|",$file); 
//print_r($user_info_array); //uncomment to test output 
$token=mcrypt_ecb(MCRYPT_3DES, $skeleton_key, $user_info_array[3], MCRYPT_DECRYPT); 
//echo "$token - $user"; //uncomment to test output 
if($token != "$user"){die ("you are not authorized");} 
//#################################search user##############################//

I can’t take credit for all of this, the javascript code and Oauth codes were modified and mashed up from these
forum posts. http://developer.myspace.com/Community/forums/t/426.aspx and http://developer.myspace.com/Community/forums/t/538.aspx

Also keep in mind the security routine is very basic and you would want to be even more thorough in your checks, to ensure your user is who they are telling you they are. I know i do :)

4 Responses to 'Authenticate Users In an Iframe on Myspace Opensocial Using PHP'

Subscribe to comments with RSS

  1. getparesh19 said,

    on April 8th, 2008 at 12:39 am

    Hello really nice post,
    Can you please tell me what will be the auth.php content?
    and how you will get this parameter value $_GET['oauth_signature'] ?

    Thanks

  2. jason said,

    on April 14th, 2008 at 12:46 am

    the auth.php will contain a line sperated by pipes “|” with the user’s id, the oauth sig sent by myspace and the oauth sig you generated with the code.

    the last code box shows how you read and convert the line of text into an array with php, so according to the script
    $user_info_array[0] == open social/myspace id
    $user_info_array[1] == the oauth sig from myspace
    $user_info_array[2] == the oauth sig generated from the script
    $user_info_array[3] == the encoded open social/myspace id received from myspace

  3. Sikkerhet said,

    on July 2nd, 2009 at 1:41 am

    Hi Jason,
    thanks for sharing, first of all.
    But, I do not understand completely and I couldn’t get it work.
    We are working on a flash-application which is using social-network authentification as a login for users. we planned to have the authentification within an iframe. Is your tutorial explaining that? Or is it something for the canvaspage of myspace?
    Thanks!

  4. jason said,

    on July 12th, 2009 at 10:29 am

    this would be for the canvas page using an iframe based on the api available at the time of writing. Myspace may have changed the routines or added parameters to the call. Best bet is to echo out all the $_GET vars and see if anything is different than what i have

Post a comment

You must be logged in to post a comment.