The usual process to implement a Social Login is stablishing a connection with the API of each Social Network you may have chosen as a registry method.

With the Xeerpa connect BackAuth product you will only need to stablish a connection with Xeerpa, as the product will take care of these connections itself. That way you don't need to know how each Social Network API works, Xeerpa Connect BackAuth will handle all these connections for you. How?

• When users click on the login button Xeerpa Connect BackAuth is activated and automatically establishes the connection with the API of the social network selected, authenticating the user.
• The solution also establishes the connection with the Xeerpa web service in order to analyze the user.
• Furthermore, Xeerpa Connect BackAuth allows for the addition of more social networks at a later stage, quicker and with greater ease, aleviating your IT team from the task of monitoring for changes to the APIs of the various social networks.

Moreover, Xeerpa Connect BackAuth offers the following advantages::

• Higher speed in the implementation of the Social Login. Once the connection with Xeerpa has been stablished, adding or removing Social Networks to your Social Login will be a matter of a few seconds.

• You will not have to worry about any change in the policies of privacy and use of social API data. We will take care of maintaining the product updated.

• Gather more advanced analytics which will allow you to know the details about the conditions the user has logged in with. We will have get more analytics of the users that have logged in from a SL connected to a XCBA.

This is the basic data flow designed for Xeerpa Connect BackAuth using Facebook:

This section assumes you are familiar with the creation and configuration of apps in the desired social networks. To learn more about this please visit the section Social Network Apps.

Step 1: Information you'll need to send us

After choosing and configuring your app with the appropiate Permissions and Callback URL, you need to send the following information about each of your apps to support@xeerpa.com :

Step 2: Implement the Social Network Login Buttons 

2.1 Render your social network buttons in your website or promotion

• Color: It must be the Social Network's official color.
• Logo: Use the official logo which will be available in the Brand Guidelines. Do not use old logos or custom variations.
• Copy: We recommend you to use a phrase related to the call to action. These messages help improve the conversion rate. For example: "Login with.." or "Continue with.."

These are some examples of the buttons:

When the user clicks on one of these buttons you must open a new window popup and make a call to your own server to respond to this onclick event.

2.2 In your server, create the entry point to receive the onclick event from step 2.1  (avoiding the use of the word “Xeerpa” in the url). From there make a GET request to Xeerpa using the following parameters:

Xeerpa will respond with a JSON. If errorCode is not 1 you should deal with the error. Otherwise you mut redirect the popup to the url specified in the response:

2.3 Create the socialLoginCallback point in your server (avoid using the word Xeerpa). This will be used one or more times (depending of the social network) to stablish a dialogue between Xeerpa and the social network. The information may arrive in your entry point by GET, POST or both, so it must be aggrupped and then sent to Xeerpa with a GET request. 

For example, if a social network returns “aaa=123" by GET and "bbb=456“ by POST, you should construct the call to Xeerpa like that:

The response from Xeerpa will be a JSON similar to the step 2.2, and the next step depends of the presence of the property "fields" in the JSON:

• if there is no "fields" property in the JSON, you can simply redirect the popup to the JSON's url property.

• If the response does contain the fields property, you will have to make a POST request to the JSON's url passing the fields value as the body of the request.

The response will always be a plain text that should be included as a query parameter called "data" to the popup's current url and redirect it to that new address.

2.4 Create the socialLoginCompleted point in your server as specified in Step1.1 (avoid using the word Xeerpa). The last redirection made by the socialLoginCallback entry point is to your own server, passing the user information in JSON format.

At this point you should pass the user information back to your page in the server, using postMessage, cookies or any other method of your preference. You may also securely process the user information and store it on your own database.

2.5 Completing registration and saving form data and data protection (GDPR, LDPR, etc.) opt-ins

Often it will be necessary to send to Xeerpa the values entered by a user in a registration form, or perhaps the selection made by the user in the opt-ins to accept marketing communications (Robinson field), or perhaps sending to Xeerpa the CRM ID of the user once this id is generated by your CRM/CDP.

In these occasions you can use the following call:

DATA may be a JSON string in this format:

data={"profile":{

 "email":"", - String

 "first_name":"", - String

 "middle_name":"", - String

 "last_name":"", - String

 "gender":"", - String with possible values: "f" for female or "m" for male

 "birthday":"", - String. Format YYYY/MM/DD

 "locale":"", - String in standard locale format according to: https://developers.facebook.com/docs/messenger-platform/messenger-profile/supported-locales/

 "hometown":"", - String. Place of Birth 

 "location":"" - String. City or location where the user currently lives

 },

"":"" – String. Supports an unlimited number of extra fields

}

profile may contain some or all of the specific fields indicating above; These values will replace the data facilitated by the social network. For instance, include first_name if you want the name entered by the user in the registration form to replace the name that the user has in her/his social media profile. Or include Birthday if this value is not being obtained from the social network.

A complete example could be:

data={"profile":{ "email":"an-email@email.com", "first_name":"Marc",  "last_name":"Palms", "gender":"m",  "birthday":"1976/4/13", "location":"Madrid" },  "favouriteColor":"blue", "postCode":"28037", "phone":"1234567890"}

The following calls serve similar purposes, but they are DEPRECATED:

Sending additional profile data to Xeerpa

Xeerpa Connect Back-Auth will retrieve all the user data from the social network based on the consents granted by the user in the social login process. Additionally, other information related to the user can be sent to Xeerpa so it is stored as part of the user profile. For instance, fields populated by the user in the registration form, or sales lines, can be sent into Xeerpa so they become part of the profile.

There are three ways of doing this:

1) With the DATA call and parameter:

2) With the DATA call and IDDATA parameter:

3) A combination of both DATA call and the DATA and IDDATA parameters:

Enforcing user data points

Typically, the values sent to Xeerpa in the DATA parameter are added as additional information, but not as the main data points for the user. However, sometimes it is necessary to enforce the values obtained through the form as part of the user profile in Xeerpa. For instance, if the Facebook permission for Birthday is not enabled, the user’s date of birth requested in the registration form can be used instead. In these occasions where the fields from the form will override the data coming from the social network, the parameter data.profile will be used.

In case of sending one or more of the details from this list in data parameter, the JSON should have this format:

data={

"profile":{

 "email":"", - String

 "first_name":"", - String

 "middle_name":"", - String

 "last_name":"", - String

 "gender":"", - String with possible values: "f" for female or "m" for male

 "birthday":"", - String. Format YYYY/MM/DD

 "locale":"", - String in standard locale format according to: https://developers.facebook.com/docs/messenger-platform/messenger-profile/supported-locales/

 "hometown":"", - String. Place of Birth 

 "location":"" - String. City or location where the user currently lives

 },

"":"" – String. Supports an unlimited number of extra fields

}

Finally you can close the popup or display a widget that helps you getting some social networks' special permissions. For more information read the next step.

Step 3: Obtain advanced user permissions

For Xeerpa to be able to gather and process the most important social information from the Facebook users, the Facebook Application linked to your Facebook Xeerpa Connection must be allowed to request the permissions to extract the advanced details. You can find more information about these permissions here.

Facebook reviews all the permission requests for every Facebook App, and this approval must be granted once for each Facebook App. You can use the Xeerpa Connect Summary Widget to obtain these permissions (user_birthday, user_location, user_posts, user_tagged_places, user_gender, user_friends and user_likes) - please feel free to request any further information about this Widget, contacting us through support@xeerpa.com.

Using Xeerpa Connect Summary Widget for Facebook

This Widget will be returned by Xeerpa as a JSON with some basic HTML which can be customized to match the look and feel of your website, mobile applicaiton, or WiFi hotspot, and can be extended to provide a more personalized user experience. Please check our Summary Widget article.

The Summary Widget call is already implemented in the Connect BackAuth PHP files, though in case you prefer to add the calls to your own PHP file, you can manually implement the Summary Widget making this call: