Close
Next
Prev

 

    Loading...

People are busy, and the last thing they want to do is remember multiple log-ins and passwords for multiple sites. Social Sign-On alleviates password fatigue. Not only is it easy for your customers, but it is also an easy implementation for you, as the widget drops the necessary cookie for contributions.

The Social Sign-On Application hooks your website into Facebook to tap users existing profile information. Users don’t have to fill out a form, and you acquire demographic information. Social SignOn also allows for easy Sharing, which in turn drives more traffic to your site.

Features

  • Facebook and Google+ Login Recognition
  • Social Bridging between Pluck Persona and Facebook
  • Native Support in Pluck Reviews, Forums and Comments
  • Integrated Badge Assignment
  • SSO Integration to Native Registration
  • Integrated Automated Login
  • Stand-alone Support Elsewhere in the Community

Works With

Comments, Forums, Reviews
  — Eases Sharing and Syndication.
Persona
  — Users can immediately find their Facebook friends who are also registered on your site.
Single SignOn
  — Eases log-ins and password memory for mutliple social sites.
Facebook, Google+, Twitter, LinkedIn, Pinterest
  — Users can connect to social sites and share content to them.

Install Social Sign-On

Minimal Sign-On Workflow

Set up a Facebook Application — The minimal approach is to set up a Facebook Application in order to integrate Pluck logins with Facebook logins on your site. You will need to provide your Pluck representative with the Facebook AppId, Secret Key and any other required fields. This is configured in your Pluck server, and only needs to be set once. This login workflow is effective, but it will not prevent duplicate logins on your site.

Get valid Google+ API Keys — If you are adding Google+, you need a valid API key so that Google will grant SocialSignOn access to the appropriate Google API for Google+. See the Google+ Platform and the Google APIs Dashboard for more information.

Optional Sign-On Workflow

The best practice workflow is to set up the Facebook Application and then add your own JavaScript and the HTTP endpoint to handle your users and to prevent duplicate users in your system:

Set up a Facebook Application — Set up a Facebook Application, to allow Pluck to use your user’s Facebook and then provide your Pluck representative with the Facebook AppId, Secret Key and any other required fields. This is configured in your Pluck server, and only needs to be set once. For more information, see Facebook Developers and Facebook Documentation.

Get valid Google+ API Keys — If you are adding Google+, you need a valid API key. See the Google+ Platform and the Google APIs Dashboard for more information.

Client-side JavaScript To Handle User Experience — The user’s experience through the login process must be built into a function called CompleteSocialAuthentication that you register on every page that performs Social Sign-On. The registration is invoked in JavaScript on every page load.

Create a HTTP endpoint to handle aspects of user login — You will need to create a HTTP endpoint and create the logic to handle some of the user login process. This endpoint must be called PreUserImport. You must provide the endpoint URL to Pluck, and it must be accessible by the Pluck Server over the Internet. This endpoint contains the logic on who the user is and what to do next. This Endpoint URL is set once in Pluck.

You can also use PostUserImport, which configures Pluck to send all the identity data to an external system endpoint and then immediately drop the at cookie, logging the user in without any further action. Note that this would make duplicate logins possible.

Social SignOn Workflow

The following diagram illustrates the authentication workflow Pluck uses with Facebook for the SocialSignOn process using the recommended PreUserImport method. The column to the right of the diagram describes the process.

Pluck Social SignOn Login Workflow

Social SignOn Workflow Description

  1. Pluck JavaScript calls the social identity providers (Facebook and/or Google+). The user goes through the login and App acceptance process for the social identity providers.
  2. Facebook and/or Google+ returns the user information to Pluck’s JavaScript.
  3. Pluck JavaScript calls the Pluck Server and passes the data from Facebook to the Pluck Server.
  4. Pluck Server calls the PreUserImport API on your server. Your server determines what to do. If there is enough information to log the user in, your server handles the necessary steps to log in the user in. However, the at (login) cookie is not dropped yet...
  5. Your server returns JSON to the Pluck Server (synchronously from the step above) indicating who the user is (SignedUserToken), or that more information is required (ClientSideLogin). All HTTP cookies that help establish this logged in state are communicated back to the Pluck Server. If the user is now logged in, all HTTP Cookies that your server uses to identify the logged in user are also included.
  6. Pluck Server passes all of the data and HTTP Cookies from Step 5 back to the Pluck JavaScript. Pluck JavaScript receives the information from your server PreUserImport component.

    If your server returns a SignedUserToken JSON object in Step 5, the process is completed, and the at cookie is dropped.

    If your server returns a ClientSideLogin JSON object in Step 5, the process continues to step 7.

Optional ClientSideLogin Path

  1. If the user is not completely logged in yet as determined in Steps 4 and 5, Pluck JavaScript invokes the CompleteSocialAuthentication function. Pluck passes all of the data from Step 5 to this JavaScript function.
  2. The CompleteSocialAuthentication function must do everything needed to properly identify and authenticate the user. This can also include prompting the user for additional information, as well as logging the user in.
  3. Pass the HTTP Cookies and other information necessary for a logged in user session back to the CompleteSocialAuthentication function.
  4. Once the user has been completely authenticated with your server, invoke the successCallback method in the CompleteSocialAuthentication function. Pluck requires the same information in the JavaScript call that is returned with the SignedUserToken (User, DisplayName, Email, AvatarUrl, & Sig).

    If the user cannot be authenticated, invoke the failCallback method to terminate the process.

  5. Pluck JavaScript then confirms with the Pluck Server that the Social ID provided by Facebook is associated with the given user ID.
  6. Pluck drops the at cookie and completes the process.

To set up Pluck Social Sign-On using JavaScript

  1. You must enable the social identity provider(s) that you want to use by setting the relevant preference for them. You can set these preferences from the Workbench. From the Community Management Workbench (CMW) navigate to Preferences → System Preferences, then select Social from the pull-down menu.

    must have FacebookPrefs.FacebookLoginEnabled set to true. The FacebookPrefs.FacebookLoginEnabled preference can be set in the Community Management Workbench. Your Pluck representative can help you with this preference and also determine what other preferences are relevant to your implementation and what settings should be made for Social Sign-On.

  2. If you are adding Facebook, go to Apps at Facebook and set up a Facebook Application. After you set the app up, give the App Id, Secret Key, and any other relevant information to your Pluck Representative so Pluck can be configured to talk with Facebook for you.
  3. If you are adding Google+, go to the Google+ Console and set up API access for Google+.
  4. Your Pluck representative will send you a shared secret, a string that you and Pluck use to sign and verify one-way hashes. These hashes ensure that communications between Pluck and your application environment remain secure. This is the same secret that is used to create an at cookie.
  5. Load the Pluck Libraries. Give your site access to the applications on the Pluck Application Server by including the following somewhere in the <head> tag:

    <script type="text/javascript" src="http://yourdomain.com/ver1.0/Content/ua/scripts/pluckApps.js"></script>
  6. Create a JavaScript function that handles your user’s experience when you need additional information. You must call the function CompleteSocialAuthentication; Pluck specifically looks for that name. This code must be present on any page where the Pluck Social Sign-On application is used.
  7. Place the JavaScript call for Social Sign-On on the page where you want the app to appear:

    <script type="text/javascript"> pluckAppProxy.embedApp("pluck_socialSignOn", { plckProviders: "facebook,googleplus", plckLogoutUrl: "/Security/Logout" }); </script>

    where plckLogoutUrl specifies where the user should be directed after being logged out. If not set, the app offers no logout option to the user.

    Valid parameters for the Pluck Social Sign-On Application

    Valid parameters for Social Sign-On are:

    • plckProviders — Specifies which social identity providers can be used. The order determines which login button appears first on the page.
    • plckLogoutUrl — Specifies the URL the logged out user is directed to. If not set, the app offers no logout option to the user.
    Alternative Call Method

    Using the JavaScript call to put Pluck application on the page is preferred, but in some circumstances you may need to use PAS tags. For more information, see PAS Tags.

  8. On any page you are invoking the Pluck Social Sign-On Application, register your CompleteSocialAuthentication function with the Pluck Application Proxy:

    	
    pluckAppProxy.registerActivityCallback("CompleteSocialAuthentication", function(response){
    	[your code]
    	}
    					
  9. Create a new HTTP endpoint on your web application that will handle the rest of your login. You have two options at this point. You can:

    1. configure Pluck to send all the identity data to an external system endpoint and then drop the at cookie to log the user in. This method would use PostUserImport. Note that this method is not pictured in the diagram above.
    2. configure Pluck to send all the identity data to an external system endpoint and then wait for a response. This method would use PreUserImport.
      1. The external system responds with cookies that may log the user in. These cookies are passed through to the Pluck response.
      2. If the external system response includes ClientSideLogin, then the CompleteSocialAuthentication function is invoked in the browser, and may prompt the user for additional information, and/or it may drop the at cookie if none has been dropped yet.
  10. Add any server-side application logic and endpoints necessary to support your CompleteSocialAuthentication function:

    	
    pluckAppProxy.registerActivityCallback("CompleteSocialAuthentication", function(response){
    	[your code]
    }
    						
  11. Once there is enough information to log in the user, pass it back to Pluck by calling successCallback:

    	
    response.successCallback({
    	"UserKey": "[User ID from Your Registration System]",
    	"DisplayName": "[Display Name]",
    	"Email": "[Email Address]",
    	"AvatarUrl": "[a valid path to an avatar. Note that this is this is optional]",
    	"Sig": "[MD5 hash of UserKey + Display Name + Email + Avatar Path + Pluck Shared Secret]"
    });
    						
  12. If you want to terminate the request, call the failCallback:

    response.failCallback();

Data Pluck Sends to Your Server

In order to use call-backs on successful login, you must configure the following preference: FacebookPrefs.PreUserImportCallbackUrl. When defined, it sends a POST request to the specified URL and includes the following parameters:

  • fbUser— All information Facebook provided about that user: Email, First Name, Gender, ID, Last Name, Link, Locale, Name, Timezone, Updated_Time, Verified.
  • pluckUser(s)— The user(s) that exists on the Pluck side. This is a JSON encoded version of the SDK User object, and shares the same properties.
  • access_token— FB Access Token to get more data if you want. The access token is a string (for example: AAthyCk7ftJEBAJZCbeUE1mex0jp4sEUn86zRKkKHaAO6TquGzsl5nmhGZAX2ZBu89bo4q2gAyd9t6MtXgHIDgw9ExATpbWfN2ShQvwgX6sq4S6eZBupx).
  • sig— A signature so you can verify that the request came from Pluck. This signature is a MD5 hash of fbUser, pluckUser, access_token and UrlPrefs.SharedSecret concatenated in that order with no delimiters. For example if your request comes in as:

    ?fbUser={"foo":"bar"}&pluckUser={"pants":"hello%20world"}&access_token={AccessToken}
    Where AccessToken is your access_token.

    and your shared secret is banana, then the signature would be an MD5 hash of:

    {"foo":"bar"}{"pants":"hello world"}{AccessToken}banana
    Where AccessToken is your access_token.

Data Your Server Responds With Back to Pluck

Your server must send a JSON response back that uses one of two options:

  1. Confirmed User — You know the user or have just created the user. Once you have authenticated or registered the user, return a SignedUserToken JSON object along with any additional session or custom cookies. This action will drop the correct at cookie and complete the login/authentication process.
    	{"SignedUserToken": {
    		"UserKey": "[User ID from Your Registration System]",
    		"DisplayName": "[Display Name]",
    		"Email": "[Email Address]",
    		"AvatarUrl": "[Some Path to an avatar ñ this is optional]",
    		"Sig": "[MD5 hash of UserKey + Display Name + Email + Avatar Path + Pluck Shared Secret]"
    	}}

    Note that you can set cookies on the response so that Pluck can forward the cookies to the client.

  2. Need More Information — You need more information to login the user, so return a ClientSideLogin JSON object with any additional relevant cookies:
    	{"ClientSideLogin": {
    		"suspectedUserId": "userFoo", 
    		"whateverElse": "some stuff"}
    	}

Once this is received, it is passed to the CompleteSocialAuthentication JavaScript callback function.

PreUserImport and CompleteSocialAuthentication Use Cases

The PreUserImport endpoint and CompleteSocialAuthentication function must be able to handle the following use cases.
  • Existing User already connected with Facebook — All is good - log this user in.
  • New User — The information from Facebook does not match any user at all. Should you capture more information, like a password, shipping address, or other details (i.e., send them through a registration process) or do you have enough information to go ahead and create the account?
  • Matches to a Single User — The information from Facebook does match a single user. Should the user be automatically logged in, or do you want to challenge the user with a password, verification of shipping address, etc...?
  • Insufficient Credentials to Match a Single User — The information from Facebook does not provide enough detail to match to one user in your database. For example, you may have two users with the same email address, so you must find out which user gets associated with this Facebook account.
  • Known user, but disallowed from logging in — Matches a user, but one that you don't allow to log in.

Implementation Notes

  • Note that there is currently no way to override the default login button image with CSS. This is the same way that Facebook logins are done across all PAS widgets.
  • Your CSS may need some adjustment to handle the anchor on the button depending on how the you wrap the widget with other elements on your site.
  • To use the logout "Sign Out" link, you must either add the plckLogoutUrl parameter to pluck/login/login.prefs using the Pluck Application Workbench (for example, something like: plckLogoutUrl: http://example.yoursite.com/security/logout ) or you can also use the parameter on the call itself as in the example above.
  • Other logout links previously included a plckRedirectUrl on the query string in the past, providing the URL of the calling page. This method currently does not.
  • When Facebook authenticates the user, Pluck sends user data to your server and you must respond with a specific JSON response. See the following chart for more information.

Implementation Sample Code

When you send back a ClientSideLogin response, Pluck widgets invoke the CompleteSocialAuthentication event. You must listen for this event and handle it appropriately or the widget will hang waiting for the response. The following is an example of the code you must use:


//Register Callback
pluckAppProxy.registerActivityCallback("CompleteSocialAuthentication", function(response){
	alert ("Please provide more information. We think you are " + response.hint.UserName +" ?");
	var decision = "false";
	[Some logic to make a decision.]
	If (decision == "true"){
		//Pass user information Pluck to drop the 'at' cookie and terminate application
		response.successCallback({
			"UserKey": "[User ID from Your Registration System]",
			"DisplayName": "[Display Name]",
			"Email": "[Email Address]",
			"AvatarUrl": "[Some Path to an avatar. This is optional.]",
			"Sig": "[MD5 hash of UserKey + Display Name + Email + Avatar Path + Pluck Shared Secret]"
		});
	} else {
		//Terminate application
		response.failCallback();		
	}
});


//Pluck Social Sign-On Application
var opts = {}
pluckAppProxy.embedApp("pluck_login_withFacebook", {
	plckLogoutUrl: "[Customer Logout Url]"
}, opts);









					
					
					
					
					
					
					

    

    

    

Setting Up Pluck Social With Google+

Following is a step by step example of setting up Google+ with Pluck Social. Your installation may vary slightly, and Google may change their workflow at any time, but this can serve as a guide.

  1. Create the Application in Google. Go to https://cloud.google.com/console#/project and either use an existing Project or create a new one.

    Google Cloud Console

  2. Select the project name to open up that API Project.
  3. Select APIs and auth from the left-hand menu. APIs appears.
  4. Turn on Google+ API and Google+ Domains API.

    Google API Projects

  5. Select Registered Apps from the left-hand menu. The Register App page appears.

    Registered Google Apps

  6. Select the Register App button. The Register new application page appears.

    Register a New Google App

  7. Give your application a name, choose Web Application, then select Register.
  8. Expand the Oauth 2.0 Client ID section in the settings for your app. Copy the Client ID and the Secret: you need to enter them into your preferences in the Community Management Workbench (CMW). Add the URL to your site where Pluck Social SignOn will be implemented. For instance: http://www.yoursite.com.

    Google App Authorization Credentials

  9. Select the Update button on the Consent Screen page to modify the information that displays on the application permissions consent screen, which is presented to the end-user the first time they attempt to login.

    Google API Consent

  10. From the Community Management Workbench (CMW) at http://yourpluckdomain.com/ver1.0/cmw/overview navigate to Preferences→System Preferences→Social, and scroll down to the Google+ settings. Enter the Client ID from step 8 into the App ID field. Enter the Client Secret into the Secret Key field. Set Google Plus Login Enabled to True.

    It’s also recommended to include a particular scope—this is what level of information to ask the user for. https://www.googleapis.com/auth/userinfo.email is a good choice, that will get all the basic info plus email. If you want just the basics use https://www.googleapis.com/auth/userinfo.profile.

    Community Management Workbench

  11. Implement the widget on a page that is on the site you have listed in the Web Origins list using a call like:
  12. <script type="text/javascript">
    	pluckAppProxy.embedApp("pluck_socialSignOn",
    	{ plckProviders: "facebook,googleplus", plckLogoutUrl: "/Security/Logout" }
    	, {});
    </script>
    		
    	

    6.0.11 Release        © 2014 DemandMedia                                   Teacher’s Edition