Foundations of a Social Platform

The Foundations of a Social Platform
Jonathan LeBlanc
Technology Evangelist
Yahoo! Developer Network
Twitter: @jcleblanc

EXAMPLES | TUTORIALS | CODE SAMPLES
developer.yahoo.com

Open ID – Single Account Sign-in

OAuth - Open Authentication

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

What is OpenSocial?

OpenSocial API
For developing applications on social networks

Accessing social data (profiles, connections)
Fetching and inserting activities

Implemented by many containers

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

/* get owner and owner friends */
var idspec = opensocial.newIdSpec({ 'userId' : 'OWNER', 'groupId' : 'FRIENDS' });
req.add(req.newFetchPersonRequest('OWNER'), 'get_owner');
req.add(req.newFetchPeopleRequest(idspec), 'get_friends');
req.send(responseFriends);

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

Making AJAX Requests With OpenSocial 0.8
var params = {};
var url = 'http://developer.yahoo.com/yql/console/?q=select%20*%20from%20flickr.photos.search%20where%20text%3D%22Times%20Square%22'
var callback = callbackFunc;
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
gadgets.io.makeRequest(url, callback, params);

Making AJAX Requests With OpenSocial 0.8
function callbackFunc(response){
if (response.text){
//use response.txt
}
}

Front-end Security

Front-end Security: IFrames
IFrames - Pros

Quick to set up
Full content control for developers

IFrames - Cons

Drive-by downloads
No content restrictions
Other known exploits

Front-end Security: Caja
Caja - Pros

Very secure model (blacklist all)
Aims to protect end-users
Full content control

Caja - Cons

Slow to set up
Difficult to configure
No 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;

Questions?