Sign in with Facebook using the Widget

Identity Engine

This guide describes how to allow users to sign in with the Facebook social Identity Provider by using the Sign-In Widget.

---

Learning outcomes

Set up your app to support the sign-in flow with Facebook IdP use cases by using the Sign-In Widget.

What you need

• An app that uses the embedded Okta Sign-In Widget and Identity Engine SDK
• An Okta org already set up for a social IdP use case
• A Sign-In Widget and SDK set up for your own app

Sample code

Java Identity Engine embedded Widget sample app (opens new window)

---

Configuration updates

Before building the Facebook IdP sign-in flow using the widget, ensure that you've set up your Okta org for a social IdP use case.

After you've set up your Okta org for the social IdP use case, download and configure the SDK, Sign-In Widget, and sample app. These steps guide you to the appropriate repository and location of the embedded Sign-In Widget sample app. They also identify the packages to install and describe other changes to the Okta org that are required for the widget.

Summary of steps

Note: The Okta Java SDK uses the Spring Boot framework to handle the OAuth 2.0 authentication flow. See Spring Boot Getting Started (opens new window).

The following diagram shows the sequence of steps to sign in to an app by using the embedded Sign-In Widget and the Facebook sign-in option:

Integration steps

The user signs in with Facebook

After you complete the Configuration updates and then configure your app to load the Sign-In Widget, the Sign in with Facebook option appears. No coding is required.

When the user selects Sign in with Facebook in the Sign-In Widget, they’re directed to the Facebook sign-in page.

The user enters their Facebook credentials (email and password) on the Facebook sign-in page, which the Facebook platform hosts.

Note: You can use the Facebook test user account that you've created in Set up the Facebook test user.

Facebook redirects the user to your Okta org

After the user signs in to Facebook, Facebook redirects the user. You defined the redirect location in the Valid OAuth Redirect URIs field on the Facebook developer site.

Note: The Valid OAuth Redirect URIs value for your Okta org is in the format: https://{yourOktaDomain}/oauth2/v1/authorize/callback. See Create a Facebook app in Facebook for details on configuring the Valid OAuth Redirect URIs value.

The Okta org redirects the request to your app

After your Okta org receives a successful Facebook sign-in request, your org redirects the request to your app's Sign-in redirect URIs setting.

Note: For the Java SDK embedded authentication sample app, the Sign-in redirect URIs is set to http://localhost:8080.

Handle the callback from Okta

Okta returns the interaction code to the Sign-in redirect URI that's specified during the create application step.

String issuer = oktaOAuth2Properties.getIssuer();
// the widget needs the base url, just grab the root of the issuer
String orgUrl = new URL(new URL(issuer), "/").toString();

ModelAndView mav = new ModelAndView("login");
mav.addObject(STATE, state);
mav.addObject(NONCE, nonce);
mav.addObject(SCOPES, oktaOAuth2Properties.getScopes());
mav.addObject(OKTA_BASE_URL, orgUrl);
mav.addObject(OKTA_CLIENT_ID, oktaOAuth2Properties.getClientId());
mav.addObject(INTERACTION_HANDLE, idxClientContext.getInteractionHandle());
mav.addObject(CODE_VERIFIER, idxClientContext.getCodeVerifier());
mav.addObject(CODE_CHALLENGE, idxClientContext.getCodeChallenge());
mav.addObject(CODE_CHALLENGE_METHOD, CODE_CHALLENGE_METHOD_VALUE);

// from ClientRegistration.redirectUriTemplate, if the template is change you must update this
mav.addObject(REDIRECT_URI,
   request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() +
   request.getContextPath() + "/authorization-code/callback"
);
mav.addObject(ISSUER_URI, issuer);

session.setAttribute(CODE_VERIFIER, idxClientContext.getCodeVerifier());

Request the tokens from Okta

The Spring security framework doesn't understand the Okta interaction code flow. Therefore, your app needs to intercept Spring’s OAuth authentication code flow, exchange the interaction code that is obtained from Okta for an access token, populate the user profile attributes, and construct OAuth2AuthenticationToken.java (opens new window) before handing over the authentication flow back to Spring.

In the following example, the helper function exchangeCodeForToken() is used to obtain the access and refresh tokens.

final JsonNode jsonNode = helperUtil.exchangeCodeForToken(interactionCode, codeVerifier);
final OAuth2AccessToken oAuth2AccessToken = helperUtil.buildOAuth2AccessToken(jsonNode);
final OAuth2RefreshToken oAuth2RefreshToken = helperUtil.buildOAuth2RefreshToken(jsonNode);

Get the user profile information

Retrieve the user profile attributes with the access token object. Then, populate the Spring framework’s OAuth2AuthenticationToken (opens new window) object reference to continue with the rest of the authentication flow. See the helper class method getUserAttributes() (opens new window).

final Map<String, Object> userAttributes =
      helperUtil.getUserAttributes(clientRegistration.getProviderDetails().getUserInfoEndpoint().getUri(),
            oAuth2AccessToken);