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 
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 
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:
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
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.
{{{config}}} object, and the OktaUtil.completeLogin
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:
`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 
EDIT: I’ve added Google as well and gives the same problem 
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 
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?
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.