Google Friend Connect API

Introduction to the Google Friend Connect APIs

Transcript

1. Introduction to Google Friend Connect and Friend Connect API Eric Lin-Chieh Shangkuan (ericsk) 2010/01/06
2. AGENDA •What's Google Friend Connect •Using Google Friend Connect in Your Web Sites •Google Friend Connect API •Q & A
3. Google Friend Connect •http://www.google.com/friendconnect/ •Google provides Social Components to socialize your web sites. ◦ Membership (connect w/ Google/twitter/Yahoo/others) ◦ Comments, polls, forms, ... ◦ Data analysis ◦ ... •There're 2 ways for integrating with GFC and your web sites: ◦Built-in gadgets ◦Friend Connect API
4. Setting You Web Site 1.Fill in your web's name and URL
5. Pick Favorite Gadgets Select a gadget and put it on your website
6. Personalize the Gadgets Adjust the colors, size that makes the gadget fit in your web styles
7. Sample: Members Gadget Users can easily join your web site with their Google/twitter/Yahoo/others account.
8. Sample: Members Gadget Communication with each other
9. Sample: Data Analysis Design questions to gather members' interests
10. Sample Website Members Polls Feature Contents Newsletter Comments
11. Friend Connect API for site owners...
12. Friend Connect API •http://code.google.com/apis/friendconnect/ •Based-on OpenSocial •For site owners: integrating their sites with GFC. Besides the built-in gadgets: ◦ JavaScript API (client-side, gadget, AJAX) ◦ REST/RPC protocols (server-side) •3 types of social data: ◦ People ◦ Activity ◦ App Data (persistence)
13. GFC API: People Data Fields •OWNER ◦Site profile •OWNER FRIENDS ◦Site members •ADMINS ◦Site admins •VIEWER ◦Logged-in (GFC) user •VIEWER FRIENDS ◦Logged-in (GFC) user's friends ◦Friends are also site members.
14. JavaScript API
15. GFC API: Usage (setup) <!-- Load the Google AJAX API Loader --> <script type="text/javascrtip" src="http://www.google.com/jsapi" ></script> <script type="text/javascrtip"> // load friendconnect api google.load('friendconnect', '0.8'); // wait for the API loader google.setOnLoadCallback(function(){ // set path of rpc_relay.html and canvas.html google.friendconnect.container.setParentUrl('/'); // initialize OpenSocial API google.friendconnect.container.initOpenSocialApi({ site: 'PUT_YOUR_SITE_ID', onload: function(securityToken) { // Start your friendconnect operations } }); }); </script>
16. GFC API: Usage (OWNER Data) <script type="text/javascrtip"> ... var init = function(securityToken) { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest('OWNER'), 'owner_data'); req.send(function(data) { if (!data.get('owner_data').hadError()) { var owner = data.get('owner_data').getData(); // owner.getDisplayName() } }); } ... google.friendconnect.container.initOpenSocialApi({ site: 'PUT_YOUR_SITE_ID', onload: init }); ... </script>
17. GFC API: OWNER Friends <script type="text/javascrtip"> ... var init = function(securityToken) { var req = opensocial.newDataRequest(); var idspec = new opensocial.IdSpec({ 'userId': 'OWNER', 'groupId': 'FRIENDS' }); req.add(req.newFetchPersonRequest(idspec), 'site_members'); req.send(function(data) { if (!data.get('site_members').hadError()) { var members = data.get('site_members').getData(); members.each(function(member){ ... }); } }); } ... google.friendconnect.container.initOpenSocialApi ({ site: 'PUT_YOUR_SITE_ID', onload: init }); ... </script>
18. GFC API: Usage (VIEWER Data) <script type="text/javascrtip"> ... var init = function(securityToken) { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest('VIEWER'), 'viewer_data'); req.send(function(data) { if (!data.get('viewer_data').hadError()) { var viewer = data.get('viewer_data').getData(); // viewer.getDisplayName() } else { // user has not logged in, render a sign-in button. google.friendconnect.renderSignInButton({ ... }); } }); } ... </script>
19. GFC API: Viewer's Control <!-- Click here to setup the profiles --> <a href="#" onclick="google.friendconnect.requestSettings();">Settings</a> <!-- Invite friends to join this site --> <a href="#" onclick="google.friendconnect.requestInvite();">Invite</a> <!-- Signout the site --> <a href="#" onclick="google.friendconnect.requestSignout();">Sign out</a>
20. GFC API: Usage (Persistent Data) // Store data. var req = opensocial.newDataRequest(); req.add(req.newUpdatePersonAppDataRequest('VIEWER', 'MyKey', data), 'set_data'); req.send(function(data){ if (!data.get('set_data').hadError()) { // Correct } else { // Something wrong } }); ... // fetch data var req = opensocial.newDataRequest(); var idspec = opensocial.newIdSpec({'userId': 'VIEWER', 'groupId': 'SELF'}); req.add(req.newFetchPersonAppDataRequest(idspec, ['MyKey']), 'vdata'); req.send(function(data){ if (!data.get('vdata').hadError()) { var data = data.get('vdata').getData(); .... } });
21. REST/RPC Protocols
22. REST/RPC Services •2 types Auth: ◦FCAuth ◦Two-legged auth •After user sign-in with GFC, GFC will store a cookie for further authentication. •OpenSocial client library: http://goo.gl/Fd6u • REST service endpoint: ◦ http://www.google.com/friendconnect/api/people/ ◦ http://www.google.com/friendconnect/api/activities/ ◦ http://www.google.com/friendconnect/api/appdata/ ◦ http://www.google.com/friendconnect/api/rpc/
23. REST/RPC FCAuth •Signed request through an auth token: ◦ stored in cookie, field: fcauth<siteId> •CRUD current user's data •Sample request: (get current user's profile) http://www.google.com/friendconnect/api/people/@viewer/@self? fcauth=<token>
24. REST/RPC Two-Legged Auth •Full controls on site data and the joined members ◦Offline processing the social data ◦Without user signed in •GFC will generate a pair keys to build hash/signature •Sample request: http://www.google.com/friendconnect/api/people/ <ID of the user to fetch>/@self?oauth_consumer_key=<yourconsumer key>&oauth_signature_method =HMAC-SHA1&oauth_timestamp=<the time right now in millis>&oauth_nonce=<some nonce>&oauth_signature=<signed using your secret>
25. Conclusion
26. Conclusion •If your site hasn't been socialized, use GFC to socialize your site. ◦ built-in/custom gadgets •If your site has been a social site, integrate GFC to expand your the social network. ◦ Social gadgets ◦ Merge member data