---
updatedAt: 2026-04-07T10:10:43.000Z
agentTools:
  siteIndex: https://developers.liveramp.com/llms.txt
  projectIndex: https://developers.liveramp.com/authenticatedtraffic-api/v1.0/llms.txt
---

# 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. Below are a handful of examples how you can use social login integrations to resolve authenticated users to identity envelopes.

[block:callout]
{
  "type": "warning",
  "title": "Example Code Only",
  "body": "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."
}
[/block]

[block:api-header]
{
  "title": "Facebook"
}
[/block]

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/1d38873-Screen_Shot_2019-11-21_at_4.59.44_PM.png",
        "Screen Shot 2019-11-21 at 4.59.44 PM.png",
        238,
        50,
        "#659cf2"
      ]
    }
  ]
}
[/block]

[block:callout]
{
  "type": "warning",
  "title": "Facebook Platform Policy",
  "body": "Ensure you review the current [Facebook Platform Policy](https://developers.facebook.com/policy/) to ensure proper handling of user data."
}
[/block]

Assuming you are using the [Facebook Javascript SDK](https://developers.facebook.com/docs/facebook-login/web), 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

[block:code]
{
  "codes": [
    {
      "code": "<a onclick=\"onLogin()\">Login with Facebook</a>",
      "language": "html"
    }
  ]
}
[/block]

Your `onLogin` function might look something like this:

[block:code]
{
  "codes": [
    {
      "code": "function onLogin() {\n  FB.login(function(response) {\n    if (response.authResponse) {\n      window.FB.api('/me?fields=email', function(response) {\n        callATS(response.email);\n      });\n    } else {\n      console.log('not logged in...');\n    }\n  }, {scope: 'email'})\n}",
      "language": "javascript"
    }
  ]
}
[/block]

[block:callout]
{
  "type": "success",
  "body": "Note that the `email` scope is not included by default. You must include this scope to obtain user email address information.",
  "title": "Including the email scope"
}
[/block]

[block:api-header]
{
  "title": "Google"
}
[/block]

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/1e93c97-Screen_Shot_2019-11-22_at_7.32.03_AM.png",
        "Screen Shot 2019-11-22 at 7.32.03 AM.png",
        137,
        57,
        "#f7f7f7"
      ]
    }
  ]
}
[/block]

[block:callout]
{
  "type": "warning",
  "title": "Google User Data Policy",
  "body": "Review the [Google User Data Policy](https://developers.google.com/terms/api-services-user-data-policy) and other relevant agreements to ensure that you are in compliance with Google Sign In."
}
[/block]

Using [Google Sign In](https://developers.google.com/identity/sign-in/web/sign-in) on the web might be even easier than Facebook!

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:

[block:code]
{
  "codes": [
    {
      "code": "function onSignIn(googleUser) {\n  var profile = googleUser.getBasicProfile();\n  var email = profile.getEmail());\n  callATS(email);\n}",
      "language": "javascript"
    }
  ]
}
[/block]

[block:api-header]
{
  "title": "Yahoo Japan"
}
[/block]

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/f345150-Screen_Shot_2019-11-22_at_9.24.39_AM.png",
        "Screen Shot 2019-11-22 at 9.24.39 AM.png",
        204,
        42,
        "#fd6483"
      ]
    }
  ]
}
[/block]

**Implicit Workflow**

If you have implemented the implicit workflow [as described here](https://developer.yahoo.co.jp/yconnect/v2/javascript_sdk/), you will just need to call ATS within the `onSuccess` event handler:

[block:code]
{
  "codes": [
    {
      "code": "onSuccess: function(res) {\n  callATS(res.email);\n},",
      "language": "javascript"
    }
  ]
}
[/block]

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

[block:code]
{
  "codes": [
    {
      "code": "authorization: {\n  clientId: \"\",    // 登録したClient IDを入力してください\n  redirectUri: \"\", // 本スクリプトを埋め込むページのURLを入力してください\n  scope: \"openid email\",\n  windowWidth: \"500\",\n  windowHeight: \"400\"\n},",
      "language": "javascript"
    }
  ]
}
[/block]