Sign in with Facebook

Identity Engine

Note: In proxy model architectures, where a server-side app using the embedded SDK is used as a proxy between client apps and Okta servers, a request context for the client apps is required. The expectation is that security enforcement is based on the client request context's IP address and user agent.

However, since these values are currently derived from the server app rather than the client, this enforcement isn't available. As a result, network zones or behaviors that drive their conditions based on these request context values (geolocation, IP Address, or user agent) won't work until a solution to the issue is found.

This guide covers a sequence of steps that you can follow to build an app that allows users to sign in with the Facebook social Identity Provider.

---

Learning outcomes

• Configure your Okta org to use Facebook as an Identity Provider.
• Challenge a user's identity using Facebook.

What you need

• An app that uses the embedded Identity Engine SDK
• Okta org already set up for a social IdP use case
• Identity Engine SDK set up for your own app

Sample code

ASP.NET Identity Engine sample app (opens new window)

---

Configuration updates

Before you build the Facebook IdP sign-in flow, ensure that you've completed the following steps:

• Set up your app for a password factor only use case

• Set up your Okta org for a social IdP use case

Summary of steps

The following diagram shows the sequence of steps for the Facebook sign-in flow.

Integration steps

1: The user navigates to the sign-in page

The first step is to make a call to GetIdentityProvidersAsync() when the sign-in page loads. This method retrieves all the Identity Providers that were added to the routing rule (Use this identity provider field) in Set up your Okta org for a social IdP use case.

ViewBag.ReturnUrl = returnUrl;
IdentityProvidersResponse identityProvidersResponse = await
      _idxClient.GetIdentityProvidersAsync();
Session[identityProvidersResponse.State] = identityProvidersResponse.Context;
LoginViewModel loginViewModel = new LoginViewModel
   {
       IdpOptions = identityProvidersResponse.IdpOptions,
   };

...

return View(loginViewModel);

The code calls GetIdentityProvidersAsync(), which returns a list of Identity Providers. This list is sent to the view in a view model.

2: Display the available Identity Providers

The next step is to loop through the Identity Provider list and show links for each of the configured Identity Providers. In this use case, only the Facebook Identity Provider is shown.

Code from sample app

The following code from the sample app shows the loop of Identity Providers that build the buttons on the sign-in page. In this use case, only the Facebook Identity Provider is shown. The Name and HRef properties set the link's text and hyperlink.

   @foreach (IdpOption idpOption in Model)
   {
   <div class="form-group">
       <div class="col-md-offset-2 col-md-10">
           <input type="submit" value="Sign In with @(idpOption.Name)" class="btn btn-primary btn-stretch-wide" onclick="goTo(event, '@idpOption.Href')" />
       </div>
   </div>
   }

Sample page for the sign-in with Facebook link

The following wireframe shows a typical sign-in form with Facebook sign-in button.

3: The user selects the Facebook Identity Provider

The user clicks the sign-in link, which sends them initially to the Okta org. The HRef property contains a URL that's linked to the Okta org. From the org, the request gets routed to Facebook for user sign-in. You don't need to implement additional code changes to perform this step.

4: The user signs in to Facebook

Next, the user enters their email and password, and clicks Log in. This page is hosted by Facebook. The user information that you enter originates from a test user that you configured in Set up your Okta org for a social IdP use case. You don't need to make any code changes in your app to perform this step.

5: Redirect the request to the Okta org

If the user signed in to Facebook successfully, Facebook routes the user to the values that were configured in Valid OAuth Redirect URIs and Site URL in Set up your Okta org for a social IdP use case. The values use the https://{yourOktaDomain}/oauth2/v1/authorize/callback format (for example, https://dev-12345678.okta.com/oauth2/v1/authorize/callback).

6: Redirect the request to the client

After Facebook sends the successful login request to your Okta org, the org redirects the request to your app through the Application's Sign-in redirect URIs field that was configured in Create a new application.

The value for the sample app is https://localhost:44314/interactioncode/callback.

The callback to your app contains the sign-in tokens that need to be stored in the session state. See the following example:

public async Task<ActionResult> Callback(string state = null, string interaction_code = null, string error = null, string error_description = null)
{
    IIdxContext idxContext = Session[state] as IIdxContext;

    Okta.Idx.Sdk.TokenResponse tokens =
          await _idxClient.RedeemInteractionCodeAsync(idxContext, interaction_code);

    ClaimsIdentity identity = await AuthenticationHelper.GetIdentityFromTokenResponseAsync
          (_idxClient.Configuration, tokens);

     _authenticationManager.SignIn(new AuthenticationProperties
             { IsPersistent = false }, identity);

      return RedirectToAction("Index", "Home");
}

7: Redirect the user to the default home page

The user is now successfully signed in and can be sent to the default sign-in page. In the sample application, the default sign-in page is the user profile page.