Foundations of a Social Application Platform

Jonathan LeBlancTechnology Evangelist

Yahoo! Developer NetworkTwitter: @jcleblanc

The Foundations of a Social Application Platform

DEVELOPER.YAHOO.COMEXAMPLES | TUTORIALS | CODE SAMPLES

Review Topics – What Will We Explore

• Open Identification (OpenID)

• Open Authentication (OAuth)

• Software Development Kits (SDKs)

• OpenSocial and Using Social Data

• Application Security

• Querying Languages

Open ID – Single Account Sign-in

OAuth - Open Authentication

OAuth – What Does the End-User See?

OAuth – What Does the End-User See?

SDKs (Software Development Kits)

PHP, Python, Java, ActionScript 3,Objective-C, and OpenSocial REST APIs

http://www.github.com/yahoo

SDKs (Software Development Kits) – Abstraction Using PHP

//create session variables$ysession = YahooSession::requireSession(API_KEY,

API_SECRET, APP_ID);$yuser = $ysession->getSessionedUser();

//get user profile$yprofile = $yuser->loadProfile();

//get user connections$connections = $yuser->getConnections($start,$count,

$total);

What is OpenSocial?

For developing applications on social networks– Accessing social data (profiles, connections) – Fetching and inserting activities

Implemented by many containers– YAP, MySpace, Orkut, etc.– Develop once, distribute

broadly

Collecting User Data With OpenSocial 0.8

/* OpenSocial PERSON data request */

var req = opensocial.newDataRequest(); var params = {};params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [ opensocial.Person.Field.NAME, opensocial.Person.Field.THUMBNAIL_URL];

req.add(req.newFetchPersonRequest('VIEWER', params), 'viewer_profile');req.send(response);

Collecting User Data With OpenSocial 0.8

/* response handler */function response(data){ var viewer = data.get('viewer_profile').getData(); var aboutme = viewer.getField(opensocial.Person.Field.NAME);}

Fetching Updates with OpenSocial 0.8

Getting Updates With OpenSocial 0.8

var req = opensocial.newDataRequest();var spec = new opensocial.IdSpec();

spec.setField(opensocial.IdSpec.Field.USER_ID, opensocial.IdSpec.PersonId.OWNER);

req.add(req.newFetchActivitiesRequest(spec), 'ownerActivities');

req.send(handleActivities);

Getting Updates With OpenSocial 0.8

function handleActivities(dataResponse) { var ownerActivities = dataResponse.get('ownerActivities').getData(); //parse owner activities}

Inserting Updates with OpenSocial 0.8

var params = {}, activity;params[opensocial.Activity.Field.TITLE] = title;params[opensocial.Activity.Field.BODY] = body;activity = opensocial.newActivity(params);

opensocial.requestCreateActivity(activity,opensocial.CreateActivityPriority.LOW,callback);

Fetching Connections With OpenSocial 0.8

Fetching Connections With OpenSocial 0.8

/* get owner and owner friends */var idspec = opensocial.newIdSpec({ 'userId' :

'OWNER', 'groupId' : 'FRIENDS' });

var req = opensocial.newDataRequest();req.add(req.newFetchPeopleRequest(idspec),

'get_friends');

req.send(responseFriends);

Fetching Connections With OpenSocial 0.8

/* connection response function */function responseFriends(data){ var objFriends = data.get('get_friends').getData(); var html = ''; objFriends.each(function(person) { html += person.getDisplayName() + '<br />'; }); }

Front-end Security

Front-end Security: IFrames

IFrames - Pros• Quick to set up• Full content control for developers

IFrames - Cons• Drive-by downloads, etc.• No content restrictions

Front-end Security: Caja

Caja - Pros• Very secure model (whitelist)• Aims to protect end-users• Platform has full content control

Caja - Cons• Slow to set up• Difficult to configure• User does not have full

content control

Front-end Security: Caja Cajoling Process

<script type="text/javascript">function response(obj) { if (obj.text){

document.getElementById('interact').setInnerHTML('Populated!');

document.getElementById('population').setInnerHTML(obj.errors);

}}</script>

Front-end Security: Caja Cajoling Process

var $dis = $v.getOuters(); $v.initOuter('onerror'); $v.so('response', ___.markFuncFreeze(function () { function response$_caller($dis, obj) { if ($v.r(obj, 'text')) { $v.cm($v.cm($v.ro('document'), 'getElementById',

[ 'interact' ]), 'setInnerHTML', [ 'Populated!' ]); $v.cm($v.cm($v.ro('document'), 'getElementById',

[ 'population' ]), 'setInnerHTML', [ $v.r(obj, 'errors') ]); } } response$_caller.FUNC___ = 'response$_caller'; var response;; response = $v.dis(___.primFreeze(response$_caller), 'response'); return response;

Querying Languages

Querying Languages – Yahoo! Query Language (YQL)

Conclusion

• Use Open Source Technologies

• Abstract difficult programming tasks with SDKs

• Leverage the Social Graph

• Understand your application security

Questions?

http://www.slideshare.net/jcleblanc/foundations-of-a-social-platform