Skip to main content

Integrating Social Logins with ats.js

Social logins can be powerful tools to register users with minimal friction and high confidence in the validity of the provided information. You can then pass the collected identifiers directly to the ATS library using Direct Mode. Below are a handful of examples how you can use social login integrations to resolve authenticated users to identity envelopes.

Note

Are you working with providers that are not listed on this page? Contact our support team via the Messenger in Console to receive help.

Caution

Example Code Only

The examples below are intended to illustrate, in general terms, how to integrate with social logins. They may not work for your use case or cover potential error states and edge cases.

Facebook

PP-Integrating_Social_Logins_with_ATS_Facebook.png

Caution

Facebook Platform Policy

Ensure you review the current Facebook Platform Policy to ensure proper handling of user data.

Assuming you are using the Facebook JavaScript SDK, it is easy to obtain your user's emails from Facebook's APIs for use with ats.js.

Let's assume that you've implemented your own "Log in with Facebook" button, like:

<a onclick="onLogin()">Login with Facebook</a>

Your onLogin function might look something like this:

function onLogin() {
FB.login(function(response) {
if (response.authResponse) {
window.FB.api('/me?fields=email', function(response) {
ats.setAdditionalData({'type':'email','id': response.email});
});
} else {
console.log('not logged in...');
}
}, {scope: 'email'})
}

Note

Note that the email scope is not included by default. You must include this scope to obtain useremail address information.

Google

PP-Integrating_Social_Logins_with_ATS_Google.png

Caution

Google User Data Policy

Review the Google User Data Policy and other relevant agreements to ensure that you are in compliance with Google Sign In.

Assuming you have followed the standard documentation, you'll just need to modify your onSignIn function to call ATS with the user's email address:

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  var email = profile.getEmail();
  ats.setAdditionalData({'type':'email','id': response.email});
}

Yahoo Japan

PP-Integrating_Social_Logins_with_ATS_Yahoo_Japan.png

Implicit Workflow

If you have implemented the implicit workflow as described here, you will just need to call ATS within the onSuccess event handler:

onSuccess: function(res) {
  ats.setAdditionalData({'type':'email','id': response.email});
},

Double-check that you have included email within the scope property under authorization :

authorization: {
  clientId: "", // 登録したClient IDを入力してください
  redirectUri: "", // 本スクリプトを埋め込むページのURLを入力してください
  scope: "openid email",
  windowWidth: "500",
  windowHeight: "400"
},
In this section: