First off - you will need a Facebook Developer account. Go to Facebook Developers to create one.
Follow these steps to add Facebook as a social sign-in provider for your Ory Cloud project.
- Sign in to Ory Cloud Console and select Social Sign-in.
- Click the switch next to the Facebook logo to start the configuration.
- In your Facebook Developers account, go to My Apps >> Create App.
- Select Consumer and click Next.
- Enter you app's name and preferred contact email. Click Create App.
- You should now be on the dashboard. In the "Facebook Login" card, click Set Up. Disregard the quickstart - instead, in the sidebar, click Settings >> Basic.
- Copy the App ID and paste it into "Client ID" in Ory Console.
- Copy the App Secret and paste it into "Client Secret" in Ory Console.
- Copy the "Redirect URI" from Ory Console.
- On Facebook Developers, click Save Changes.
- In the left sidebar, click Facebook Login >> Settings.
- Under "Valid OAuth redirect URIs", paste the redirect URI from Ory Console. Click Save Changes.
- Click Save Configuration in Ory Console to enable Facebook as a social sign-in provider.
note
The Scopes and Data mapping fields are optional - you don't have to configure them to start using the social sign-in provider.
Additional configuration​
When adding a social sign-in provider, you can customize the integration by defining the OAuth scopes Ory requests from the provider and by setting up custom data mappings.
Scopes​
The Scopes section allows you to define the OAuth scopes Ory requests from the sign-in provider. Defining scopes allows you to interact with the provider's APIs on behalf of the user, or to access additional user data, which is exposed as claims for data mapping.
Leave this field blank to use the default scopes.
To learn more about the scopes available for Facebook, read the related documentation.
Data Mapping​
The Data Mapping section allows you to map the data returned by the sign-in provider to traits as defined in the identity schema. While optional, we highly recommend you add it. The user experience will be worse if left blank, as a user will have to supply their email address through an additional custom step after completing the OAuth flow.
To define the mapping, create a Jsonnet code snippet. Read the OpenID Connect and OAuth2 Credentials documentation for more details.
In this sample Jsonnet snippet, the user's email
, is mapped to email
in the
identity schema.
local claims = std.extVar('claims');
{
identity: {
traits: {
// The email might be empty if the user hasn't granted permissions for the email scope.
[if "email" in claims then "email" else null]: claims.email,
},
},
}
note
While you can use Facebook as an OIDC identity provider, Facebook only returns access_token and not id_token. Therefore, Ory Kratos makes a request to Facebook's graph.facebook.com/me API and adds the user info to std.extVar('claims').