How to implement Facebook login using Okta Angular SDK?

I need to authenticate and register a user using Facebook inside my Angular5/Spring application using the official Okta Angular SDK. Notice that to register a user using email and password I’m using the Okta’s beta program. Any example or guide to follow? Until now i found only this guide but it’s very unclear on how to use this:

idps: [
  {type: 'FACEBOOK', id: '$Your_FB_IDP_ID_Here'}
]
let oktaSignIn = new OktaSignIn({
  baseUrl: orgUrl,
  clientId: '0oabns6btmBqAXZQC0h7',
  redirectUri: 'http://localhost:3000',
  authParams: {
    issuer: 'default',
    responseType: 'id_token',
    scopes: ['openid', 'whatever'],
  },
  idps:[
    { type: 'google', id: '0oadrrh812O9sbabE0h7' },
    { type: 'facebook', id: '0oadtgaq74qR0qdD20h7'}
  ],
  idpDisplay: "PRIMARY",
  i18n: {
    en: {
      'password.forgot.email.or.username.placeholder': 'Email',
      'password.forgot.email.or.username.tooltip': 'Email',
      'errors.E0000095': 'Unable to reset password.  Did you put in a valid email?'
    }
  }
});

Above is a full-blown widget config. I’m going to flag this for the docs team, I think we should show a full example.

Thanks :slight_smile: but how do I show the Facebook button and bind facebook user data to the Okta’s one? My configuration is:

const config = {
  issuer: 'https://dev-928137.oktapreview.com/oauth2/default',
  redirectUri: BackendService.FRONTEND_URL + '/implicit/callback',
  clientId: BackendService.CLIENT_ID,
  idps: [
    {type: 'FACEBOOK', id: '150709542303146'}
  ]
};

I managed to understand why nothing was happening.
Your guides often refer to the widget as the JS one embedded in the dev’s frontend. Right now i’m using your hosted widget… Have you any guide about your hosted widget configuration?

For example, here you wrote that the redirectUri should be only one, but I’m trying to build 2 clients, Andorid and Angular, and it seems no matter what configuration I give, respectively, to the json and the config variable, your hosted widget will always use the configuration added by hand in your hosted widget. If i do not declare any in the hosted widget, it will just not load. What’t the point of a client side configuration at all with this behaviour? I’m not seeing a way out of this :persevere:

I see, yea, if you are redirecting to the hosted login page, the configuration will not work. Do you have the Custom Hosted Login Page beta?

You should have access to the hosted signin page where you can customize it:

Both your clients (android and angular) can use the hosted widget page.

So, what is happening here:

  1. You redirect to Hosted Login Page
  2. Your user clicks on facebook, and is redirected to facebooks IdP
  3. Your user logs in successfully and is redirected back to Okta with the facebook authorization code
  4. Okta exchanges the code for an id_token or access_token where Okta can get the user information from a user info route on facebook
  5. After Okta verifies the identity of the user, Okta will redirect back to your application with an Okta id_token and/or access_token
  6. The client will verify the information (this is why Okta needs the issuer) or use the access token to get additional user information.

Make sense?

Yes of course, but how do I provide the hosted widget the redirectUri once for the Angular client and once for the andorid client?

By the way, thanks you so much for the answers :slight_smile:

Not a problem!

The configuration in the hosted login page should account for it already:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="none" />

    <title>Sign in</title>
    {{{SignInWidgetResources}}}
</head>
<body>
    <div class="login-bg-image" style="background-image: {{bgImageUrl}}"></div>
    <div id="okta-login-container"></div>

    <!-- "OktaUtil" defines a global OktaUtil object that contains methods used to complete the Okta login flow. -->
    {{{OktaUtil}}}

    <script type="text/javascript">
        // "config" object contains default widget configuration
        // with any custom overrides defined in your admin settings.
        var config = {{{config}}};
		
		// social login
		config.idps = [
        	{ type: 'google', id: '0oadrrh812O9sbabE0h7' }
        ];
		config.idpDisplay = 'PRIMARY';

        // Render the Okta Sign-In Widget
        var oktaSignIn = new OktaSignIn(config);
        oktaSignIn.renderEl({ el: '#okta-login-container' },
            OktaUtil.completeLogin,
            function(error) {
                // Logs errors that occur when configuring the widget.
                // Remove or replace this with your own custom error handler.
                console.log(error.message, error);
            }
        );
    </script>
</body>
</html>

Okta will automatically configure the config object with the issuer / redirect URI based on how you ended on the login page.

  1. Your angular application redirects to Okta (using the authorization route, with the client_id, and redirect URI configured in angular)
  2. Okta renders the login page for OIDC / OAuth 2.0 understanding that the client_id and redirect for the {{{config}}} object, and the OktaUtil.completeLogin
  3. It just works, it will adapt to any client/redirect

The important thing isn’t to mess with and blow up the config object, you want to extend it like the code sample is showing above.

Let me know if this isn’t working as such. Hope this helps!
Tom

Well it’s definitely helping! Stuffs are now rendering properly as such:


Now the problem is that clicking on the Facebook button that error happens:

`The 'redirect_uri' parameter must be an absolute URI that is whitelisted in the client app settings.
{name: "OAUTH_ERROR", message: "The 'redirect_uri' parameter must be an absolute URI that is whitelisted in the client app settings."}`

If I’m not mistake, the redirectUrl should be
https://dev-928137.oktapreview.com/oauth2/v1/authorize/callback
but in the link it is:
https://dev-928137.oktapreview.com/login/login.htm?fromURI=%2Foauth2%2Fv1%2Fauthorize%2Fredirect %3Fokta_key%3DFolzZdneFsBLE4yzWj-NIXbhKCIyNsiDD1siaSi0rtYi0rtY
Furthermore, if I do not supply a clientId in the configuration of the hosted widget clicking on both register or facebook that error happens:

A clientId must be specified in the OktaAuth constructor to get a token 
{name: "OAUTH_ERROR", message: "A clientId must be specified in the OktaAuth constructor to get a token"}

So I’m assuming that somehow the hosted widget does not read the configuration from my clients.
You can try to register here :slight_smile:

EDIT: I’ve added Google as well and gives the same problem :confused:

Yea, I was able to reproduce. Okta has a bug with social login and the custom hosted login page beta. I’ll push to make sure this is added for early access of custom hosted login.

So you can be notified when the issue is fixed, can you send an email to developers@okta.com and reference OKTA-159649.

As a workaround, you could hard code the client_id and use an application type of Web, enabling implicit for hybrid. I believe that should support both angular and android

Thank you :slight_smile:

Can you make an example? Furthermore, right now i have 2 separated Applications on your dev page, one for Andorid and one for Anguar. Is that correct?