Programming Social Applications. Building Viral Experiences with OpenSocial, OAuth, OpenID, and Distributed Web Frameworks (e-book) Katowice

Social networking has made one thing clear: websites and applications need to provide users with experiences tailored to their preferences. This in-depth guide shows you how to build rich social frameworks, using open source technologies and specifications. Youll learn how to create third-party applications for existing sites, build engaging social graphs, and develop products to host your own socialized experience. Programming Social Apps focuses on the OpenSocial platform, along with Apache Shindig, OAuth, OpenID, and other tools, demonstrating how they work together to help you solve practical issues. Each chapter uncovers a new layer in the construction of highly viral social applications and platforms. Learn how to build applications on top of social containers, and leverage existing user data Map user relationships with a social graph, and extend social links between users Customize your application with user profile information and encourage growth through friendships Build a scalable social application container with OpenSocial and Shindig Dive into advanced OpenSocial topics such as templating and data pipelining methods Protect your container and its users against malicious code Spis treści: Programming Social Applications Dedication Preface Audience Contents of This Book Using an Open Source Technology Stack Conventions Used in This Book Using Code Examples Safari Books Online How to Contact Us Acknowledgments 1. Social Application Container Core Concepts What Is a Social Application Container? The User Profile User Friends and Connections The User Activity Stream Implementing Proprietary Versus Open Standards Proprietary Implementation Open Source Implementation Why This Book Covers Open Standards The Embedded Application: Building in a Black Box Embedded Application Security Cross-Site Scripting Same-Origin Policy and Older Browsers Drive-by Downloads Securing Applications The External Application: Integrating Social Data Outside the Container Application Views The Home View (Small View) The Profile View (Small View) The Canvas View (Large View) The Default View (Any View) Application Permission Concepts Client-Side Versus Server-Side Applications Using Template Systems for the Markup Layer Using a Blended Server and Client Environment Deferring the Loading of Noncritical Content When Good Applications Go Bad The Portable Flash Application The Underdeveloped View The Copycat View Application The Oversharing Application The Unmonetized Application The Feed Application Application Model Case Studies Case Study: Friendship-Based Social Gaming Understanding user targeting Building a relevant graph in the game Allowing connections to interact with one another in the game Providing clear benefits for actions taken in a game Integrating social channels through email, notifications, and activities Monetizing through the sale of virtual goods Case Study: Product Sales Applications Its not all about games Taking an old idea and making it new Opening up discussions to get and provide feedback Gifting a service Case Study: Location-Based Applications Meeting friends Providing badges and points Offering competition (mayorships and leaderboards) Location- and profile-based ad targeting Offering promotions through local businesses Quick-Start Tips Understand Your Audience Build Social Integration Points Early Build with Monetization in Mind Create Comprehensive Views That Play Off One Another 2. Mapping User Relationships with the Social Graph The Online Social Graph Applying the Real-Life Social Graph Online Clustering Users Automatically Privacy and Security Establishing Trust Sharing Private User Data: Opt-in Versus Opt-out The Opt-in Sharing Model The Opt-out Sharing Model Understanding Relationship Models The Follower Model Example Privacy The Connection Model Example Privacy The Group Model Simple group model: User-defined groups Example Privacy Complex group model: Automatic clustering Example Privacy Relationships Versus Entities Building Social Relevance: Exploring the Facebook Social Graph Building Upon Real Identity Understanding the Viral Channels Building User Groups Avoiding Irrelevant Social Graphs Defining Entity Likes and Dislikes Through the OpenLike Protocol Integrating the OpenLike Widget How the Shared Likes Appear Conclusion 3. Constructing the Foundation of a Social Application Platform What Youll Learn Apache Shindig Setting Up Shindig Installing Shindig on Mac OS X (Leopard) Requirements Installing Shindig on Windows Requirements Testing Your Shindig Installation Partuza Requirements Installing Partuza on Mac OS X (Leopard) Installing Partuza on Windows Testing the Partuza Installation The OpenSocial Gadget XML Specification Configuring Your Application with ModulePrefs Require/Optional Preload Icon Locale Link Defining User Preferences Enum Data Types Application Content Defining Content Views Creating a Content section Creating multiple Content sections Creating one Content section with multiple views Creating cascading Content sections Navigating between views Passing data between views Creating and working with subviews Defining error view states Inline Versus Proxy Content Putting It All Together 4. Defining Features with OpenSocial JavaScript References What Youll Learn Including the OpenSocial Feature JavaScript Libraries Dynamically Setting the Height of a Gadget View Inserting Flash Movies in Your Gadget Displaying Messages to Your Users Creating a Message Dismissible messages Static messages Timer messages Positioning the Message Windows Positioning a single message Positioning all messages Styling the Message and Window Styling message content Styling a single message window Styling all displayed message windows Saving State with User Preferences Setting Your Gadget Title Programmatically Integrating a Tabbed Gadget User Interface The Basic Gadget Creating a Tab from Markup Creating a Tab from JavaScript Getting and Setting Information About the TabSet Aligning tabs Showing and hiding tabs Obtaining the parent container Obtaining the currently selected tab Obtaining all tabs Removing a tab Setting the selected tab Swapping tab positions Getting and setting information about a tab Getting the callback of a tab Obtaining the content container Obtaining the tab position Obtaining the tab name Obtaining the tab label Extending Shindig with Your Own JavaScript Libraries Putting It All Together Building the Gadget XML File Displaying the Gadget Using Shindig 5. Porting Applications, Profiles, and Friendships What Youll Learn Evaluating OpenSocial Container Support Core Components of the OpenSocial Specification Core API Server Specification Core Gadget Container Specification Social API Server Specification Social Gadget Container Specification OpenSocial Container Specification Cross-Container Development and Porting Use a Blended Client-Server Environment Decouple Social Features from Mainstream Application Code Avoid Using Container-Specific Tags Porting Applications from Facebook to OpenSocial Employ iframes for Non-Social-Application Constructs Abstract Facebook Function Logic Separate Visual Markup from Programming Logic Use REST Endpoints, Not FQL Employ a Server-Side Heavy Code Implementation Personalizing Applications with Profile Data The Person Object Person Data Extraction Methods osapi.people.get Parameter list Example request osapi.people.getViewer Parameter list Example request osapi.people.getViewerFriends Parameter list Example request osapi.people.getOwner Parameter list Example request osapi.people.getOwnerFriends Parameter list Example request Fields Available Within the Person Object opensocial.Person.Field.ABOUT_ME opensocial.Person.Field.ACTIVITIES opensocial.Person.Field.ADDRESSES opensocial.Person.Field.AGE opensocial.Person.Field.BODY_TYPE opensocial.Person.Field.BOOKS opensocial.Person.Field.CARS opensocial.Person.Field.CHILDREN opensocial.Person.Field.CURRENT_LOCATION opensocial.Person.Field.DATE_OF_BIRTH opensocial.Person.Field.DRINKER opensocial.Person.Field.EMAILS opensocial.Person.Field.ETHNICITY opensocial.Person.Field.FASHION opensocial.Person.Field.FOOD opensocial.Person.Field.GENDER opensocial.Person.Field.HAPPIEST_WHEN opensocial.Person.Field.HAS_APP opensocial.Person.Field.HEROES opensocial.Person.Field.HUMOR opensocial.Person.Field.ID opensocial.Person.Field.INTERESTS opensocial.Person.Field.JOB_INTERESTS opensocial.Person.Field.JOBS opensocial.Person.Field.LANGUAGES_SPOKEN opensocial.Person.Field.LIVING_ARRANGEMENT opensocial.Person.Field.LOOKING_FOR opensocial.Person.Field.MOVIES opensocial.Person.Field.MUSIC opensocial.Person.Field.NAME opensocial.Person.Field.NETWORK_PRESENCE opensocial.Person.Field.NICKNAME opensocial.Person.Field.PETS opensocial.Person.Field.PHONE_NUMBERS opensocial.Person.Field.POLITICAL_VIEWS opensocial.Person.Field.PROFILE_SONG opensocial.Person.Field.PROFILE_URL opensocial.Person.Field.PROFILE_VIDEO opensocial.Person.Field.QUOTES opensocial.Person.Field.RELATIONSHIP_STATUS opensocial.Person.Field.RELIGION opensocial.Person.Field.ROMANCE opensocial.Person.Field.SCARED_OF opensocial.Person.Field.SCHOOLS opensocial.Person.Field.SEXUAL_ORIENTATION opensocial.Person.Field.SMOKER opensocial.Person.Field.SPORTS opensocial.Person.Field.STATUS opensocial.Person.Field.TAGS opensocial.Person.Field.THUMBNAIL_URL opensocial.Person.Field.TIME_ZONE opensocial.Person.Field.TURN_OFFS opensocial.Person.Field.TURN_ONS opensocial.Person.Field.TV_SHOWS opensocial.Person.Field.URLS Extending the Person Object Addresses (opensocial.Address) Body type (opensocial.BodyType) Email (opensocial.Email) Enum (opensocial.Enum) Name (opensocial.Name) Organization (opensocial.Organization) Phone (opensocial.Phone) Url (opensocial.Url) Capturing the User Profile Old method New method Using Friendships to Increase Your Audience Making a Request to Capture User Friendships Putting It All Together The Gadget Specification The Content Markup The JavaScript Running the Gadget 6. OpenSocial Activities, Sharing, and Data Requests What Youll Learn Promoting Your Applications with OpenSocial Activities Personalizing an Application Experience by Consuming Activity Updates Driving Application Growth by Producing Activity Updates Pushing an activity to the user activity stream Setting an update priority Including visual media in an update Direct Sharing Versus Passive Sharing Direct Sharing Passive Sharing Balanced Sharing Making AJAX and External Data Requests Making Standard Data Requests Pushing Content with Data Requests Using Signed Requests to Secure a Data Connection Making a signed request Validating a signed request on the server Making the signed JavaScript request Validating the signed request on the server (RSA-SHA1 with public key certificate) Validating the signed request on the server (HMAC-SHA1) Putting It All Together 7. Advanced OpenSocial and OpenSocial Next What Youll Learn Data Pipelining Data Request Types Container requests with External data requests with People data requests with Viewer and owner data requests with os:ViewerRequest and os:OwnerRequest Activity data requests with Making Data Available to Proxied Data Requests Working with Pipelined Data on the Client Getting data objects Adding content to an existing data object Listening for changes to the data object Handling Errors Produced by the Data Pipe Dynamic Parameters Using values from UserPrefs and ViewParams as attributes Using values from a data pipe as attributes OpenSocial Templating A Different Approach to Markup and Data Dynamically creating the DOM nodes Building an InnerHTML string The OpenSocial templating approach Rendering Templates Automatic rendering Ensuring that data is available for a template prior to loading Rerendering templates with updated data sources Rendering data using custom tags Passing parameters through custom tags Expressions Special Variables Context Cur Explicitly setting the source of cur My Top Conditionals Method 1: Escaped values Method 2: Nonescaped values Rendering content on the existence of a value Looping Content Method 1: Escaped values Method 2: Nonescaped values Working with nested repeaters Specifying an index variable for the repeater Looping with context Looping with conditionals Marrying Data Pipelining and Templating Other Special Tags os:Html os:Render Template Libraries Creating a template library Loading template libraries JavaScript API Obtaining and processing the template Obtaining the template Processing the template Disabling templating autoprocessing Rendering the template Rendering the template to a variable Rendering the template to a DOM node A practical example A Few More Tags: The OpenSocial Markup Language Displaying a Persons Name: os:Name Creating a Person Selector: os:PeopleSelector Display a Persons Badge: os:Badge Loading External HTML: os:Get Localization Support with Message Bundles The OpenSocial REST API Libraries Which Libraries Are Available OpenSocial Next: Areas of Exploration Enterprise Containers Mobile Transitions Distributed Web Frameworks OpenSocial and Distributed Web Frameworks Activity Streams How would this change OpenSocial? PubSubHubbub How would this change OpenSocial? Salmon Protocol How would this change OpenSocial? Open Graph Protocol How would this change OpenSocial? Putting It All Together 8. Social Application Security Concepts What Youll Learn Hosting Third-Party Code Through iframes A Secure Approach: The Caja Project Why Use Caja? Attack Vectors: How Caja Protects Redirecting Users Without Their Consent Mining a Users Browser History Arbitrary Code Execution with document.createElement Logging the Users Keystrokes Setting Up Caja Cajoling Scripts from the Command Line Cajoling HTML and JavaScript Running the cajoler The cajoled HTML The cajoled JavaScript Modifying the Cajoler Rendering Format Running Caja from a Web Application Running Caja with an OpenSocial Gadget Adding Caja to a Gadget A Practical Example Using JSLint to Spot JavaScript Issues Early Playing in the Caja Playground Tips for Working in a Caja Environment Implement Code Modularity: Dont Cajole an Entire Project Use Precajoled JavaScript Libraries Dont Rely on Firebug or the Cajoled JavaScript Source Code Dont Embed Events in Markup Centralize JavaScript: Request Data and Markup Only A Lighter Alternative to Caja: ADsafe ADsafe Versus Caja: Which One Should You Use? How to Implement ADsafe Setting Up the ADSafe Object The DOM Object DOM Selection with the Query Method Working with pecker selectors Property selectors Attribute selectors State selectors Building advanced querying methods with hunter and pecker selectors Working with Bunch Objects Bunch GET methods Bunch SET methods Bunch miscellaneous methods Attaching Events Defining Libraries Putting It All Together The Data Source The Head: Script Includes and Styles The Body: Markup Layer The Body: JavaScript Layer The Final Result Conclusion 9. Securing Social Graph Access with OAuth Beyond Basic Auth Basic Auth Implementation: How It Works The Reasons Against Using Basic Authentication The client needs to store login information Having to send login information with every request Users cant control or view which applications have their information The OAuth 1.0a Standard OAuth 1.0a Workflow Obtain a consumer key and secret Get the request token Get the user-verified request token Exchange the verified request token for an access token The End-User Experience Two-Legged Versus Three-Legged OAuth Implementing two-legged OAuth in JavaScript The includes Constructing the OAuth request URI Making and parsing the request Three-Legged OAuth Implementation Example Implementing OAuth 1.0a in PHP Common variables and functions Request token fetch and authorization forwarding Request token exchange and data requests Implementing OAuth 1.0a in Python Configuration file Common variables Fetching the request token and forwarding the user for authorization Token exchange and making authenticated private data requests Tools and Tips for Debugging Signature Issues Missing or duplicate parameters Double encoding the signature parameters Incorrect URI endpoints Invalid signature method Token expiration OAuth 2 OAuth 2 Workflow Steps 12: Client requests authorization, and provider grants access Steps 34: Client requests access token, and provider grants access token Steps 56: Client requests protected resources, and provider grants protected resources Optional steps 78: Refreshing the access token Implementation Example: Facebook Creating your application Implementing OAuth 2 using PHP Common variables and functions Making the authorization request Obtaining the access token Making signed requests Implementing OAuth 2 using Python The App Engine configuration file Modules, common variables, and paths Obtaining authorization, acquiring the access token, and making requests Implementation Example: Requesting More User Information in the Facebook OAuth Process Data permissions Publishing permissions Page permissions Implementation Example: End-User Experience Tips for Debugging Request Issues Checking your request data Tracking access token expiration Responding to error codes Conclusion 10. The Future of Social: Defining Social Entities Through Distributed Web Frameworks What Youll Learn The Open Graph Protocol: Defining Web Pages As Social Entities The Rise and Fall of Metadata How the Open Graph Protocol Works Implementing the Open Graph Protocol Defining page metadata Specifying geolocation data Specifying contact information Attaching video data Attaching audio data Defining products using object types A Real-World Example: The Facebook Open Graph The markup Practical Implementation: Capturing Open Graph Data from a Web Source PHP implementation: Open Graph node Python implementation: Open Graph node The Shortcomings of the Open Graph Protocol Inability to implement tiered definitions to differentiate similar objects Page versus object definitions Activity Streams: Standardizing Social Activities Why Do We Need to Define a Standard for Activities? Implementing Activity Streams Object Types General object types Verbs General verbs WebFinger: Expanding the Social Graph Through Email Addresses Finger to WebFinger: The Origin of WebFinger Implementing WebFinger The Shortcomings of the WebFinger Protocol Public data Provider implementation differences OExchange: Building a Social Sharing Graph How Does OExchange Work? The Uses of OExchange Implementing OExchange 1. Service provider (target) integrates discovery and publishing tools 2. Publisher (source) performs discovery on service provider Directly via the XRD file Through hostname discovery Through individual page discovery 3. Publisher sends content offer to service provider PubSubHubbub: Content Syndication How Does PubSubHubbub Work? 1. Subscriber polls publishers feed 2. Subscriber requests subscription to the publishers feed updates from the hub 3. Hub verifies subscriber and request 4. Publisher notifies hub of content updates 5. Hub shares new content with subscribers The Benefits: From Publishers to Subscribers Publisher: No repeated polling from multiple sources Subscriber: No need for repeated polling Publisher and subscriber: Identical content across multiple subscribers Hosted Hubs and Implementation Services Workflow Libraries Subscriber clients Publisher clients Building a Publisher in PHP Building a Publisher in Python Building a Subscriber in PHP Building a Subscriber in Python The Salmon Protocol: Unification of Conversation Entities The Salmon Protocol Workflow 1. Publisher pushes updated content to subscriber Subscriber pushes updated content back upstream to publisher Publisher pushes updated content to all subscribers Building on the Foundation of PubSubHubbub Abuse and Spam Protection Implementation Overview Conclusion 11. Extending Your Social Graph with OpenID The OpenID Standard Decentralization Is Key Improvement over Traditional Login Accessing the Existing Membership Database and Social Graph Do I Already Have an OpenID? How Do I Sign Up for One? The OpenID Authentication Flow Step 1: Request Login with OpenID Identifier Step 2: Perform Discovery to Establish the Endpoint URL Step 3: Request User Authentication Step 4: Provide Passed or Failed State OpenID Providers Bypassing Domain Discovery Errors in OpenID OpenID Extensions Simple Registration Extension Attribute Exchange Extension Attribute exchange types: Addresses Attribute exchange types: Audio and video greetings Attribute exchange types: Date of birth Attribute exchange types: Email Attribute exchange types: Images Attribute exchange types: Instant messaging Attribute exchange types: Name Attribute exchange types: Telephone Attribute exchange types: Websites Attribute exchange types: Work Attribute exchange types: Other personal details and preferences Provider Authentication Policy Extension Phishing-resistant authentication Multifactor authentication Physical multifactor authentication NIST assurance levels Extensions Currently Under Development OpenID user interface work group proposal Contract exchange OpenID and OAuth hybrid extension Implementation Example: OpenID Implementing OpenID Using PHP The discovery form The common includes, functions, and globals The authentication request The authentication callback Checking the OpenID authentication state Capturing values returned by Simple Registration Checking the PAPE policy states Capturing values returned by Attribute Exchange Implementing OpenID Using Python Getting the required OpenID library The markup file The discovery form The authentication request OpenID identifier discovery and request setup Setting up the OpenID extension requests Displaying the authentication login Printing messages and initiating program execution The authentication callback Completing authentication Capturing the return values of the OpenID extension requests Printing out our response objects Common Errors and Debugging Techniques Callback URL Mismatch Undiscoverable OpenID Identifier Conclusion 12. Delivering User-Centric Experiences with Hybrid Auth The OpenID OAuth Hybrid Extension Current Implementers When Should I Use OpenID Versus Hybrid Auth? Questions to Ask Yourself Before Choosing Does the provider I am working with support hybrid auth? Where can I find out? What information about the user am I trying to obtain? Pros and Cons: Standard OpenID Pros and Cons: Hybrid Auth The OpenID OAuth Hybrid Auth Flow Step 1â2: Perform Discovery (OpenID Steps 1â2) Step 3: Request User Authentication Permissions Step 4: Provide OpenID Approved/Failed State and Hybrid Extension Parameters Step 5: Exchange the Preapproved Request Token for an Access Token Step 6: Make Signed Requests for Privileged User Data Implementation Example: OpenID, OAuth, and Yahoo! Application Setup: Getting Your OAuth Keys for the Hybrid Auth Process Implementing Hybrid Auth Using PHP The discovery form The common includes, functions, and globals The authentication request The authentication callback Completing the OpenID process Checking the OpenID response and processing the Attribute Exchange data Turning the OpenID preapproved request token into an OAuth access token Making requests with the OAuth access token Implementing Hybrid Auth Using Python Library dependencies OpenID OAuth The markup file The request form Common variables The authentication request Performing discovery and building an OpenID consumer object Attaching extensions and OAuth hybrid parameters Helpful function and initialization The authentication callback Capturing response objects and preparing the OpenID consumer request object Completing the OpenID process and extracting the data Checking the OpenID status and obtaining the access token Making signed requests for protected user resources Conclusion A. Web Development Core Concepts A Brief Tour of Open Source Standards What Are the Benefits and Drawbacks of Using Open Source Standards? Benefits Drawbacks Are Open Source Standards the Solution to Everything? Web Service APIs HTTP Response Status Codes Understanding the Same-Origin Policy How Is Origin Determined? Bypassing the Same-Origin Policy Requirements REST Requests GET Request POST Request PUT Request DELETE Request HEAD Request Microformats and the Semantic Web Installing Subversion (SVN) Installing on Mac OS X Installing on Windows Installing Apache HTTP Server Installing on Mac OS X Installing on Windows Setting Up Your PHP Environment Installing on Mac OS X Installing on Windows Setting Up Your Python Environment Glossary Index About the Author Colophon Copyright