How to integrate Ember.JS and Keycloak SSO system - javascript

My question is quite simple : does anybody know how to integrate Ember.JS and Keycloak (the SSO system) ? We currently face a problem using the Keycloak JS Bower library (https://github.com/keycloak/keycloak-js-bower) to redirect users to Keycloak own login page, and to generally integrate Ember.JS with Keycloak. Our problems are :
Double page reload on page reloading,
401 unauthorized HTTP code on login to the Ember App.
Thanks for your (precious) support.

You can use script JS:
Check that you have script in your keycloak: https://yourdoamin.com/auth/js/keycloak.js
If you have, add this code to your login page:
<head>
<script src="https://yourdoamin.com/auth/js/keycloak.js"></script>
<script>
var keycloak = Keycloak({
"realm": "relam_name",
"url": "https://yourdomain.com/auth",
"ssl-required": "external",
"resource": "client_id",
"verify-token-audience": true,
"credentials": {
"secret": "secret_code"
},
"use-resource-role-mappings": true,
"confidential-port": 0,
"policy-enforcer": {},
"onLoad":'login-required',
"clientId": "client_id"
});
var keycloak = Keycloak();
keycloak.init().success(function(authenticated) {
console.log(keycloak);
alert(authenticated ? 'authenticated' : 'not authenticated');
}).error(function() {
alert('failed to initialize');
});
</script>
</head>
In console.log(keycloak); Keycloak return token and other information about user.
More info:
Keycloak JavaScript API to get current logged in user
JavaScript Adapter
MicroProfile JWT Authentication with Keycloak and React

There are a couple ember cli addons that deal with Keycloak and Ember integration:
https://www.npmjs.com/package/ember-cli-keycloak
https://www.npmjs.com/package/ember-keycloak-auth

Related

React Okta sign up responses with E0000060 error code

I am integrating okta with react using OktaService. I am using Reacts and Okta sign in widget. I am trying to integrate okta signup widget to my application but its resulting in error
this.oktaSignIn = new OktaSignIn({
logo: 'assets/images/logo.png',
baseUrl: myAppConfig.oidc.issuer.split('/oauth2')[0],
clientId: myAppConfig.oidc.clientId,
redirectUri: myAppConfig.oidc.redirectUri,
authParams: {
pkce: true,
issuer: myAppConfig.oidc.issuer,
scopes: myAppConfig.oidc.scopes,
},
authClient: oktaAuth,
features: {
registration: true
});
When I hit the signup button from okta widget there is an API call happening HTTP GET request to https://dev-XXX.okta.com/api/v1/registration/form responses with E0000060 error code.
But I get 501 error with below error code
{
"errorCode": "E0000060",
"errorSummary": "Unsupported operation.",
"errorLink": "E0000060",
"errorId": "oaeFIcE87d5SxSNJ9Z19tIomQ",
"errorCauses": [ ]
}
Can any one help me on this?

msal redirect call back is not getting called in Cordova app

I am creating a mobile app using Cordova version 9. I use msal.js (v1.3.0) library for authentication with Azure AD B2C.
This is my msal configuration for the instance const myMSALObj = new Msal.UserAgentApplication(msalConfig);
const msalConfig = {
auth: {
clientId: "1234",
authority: ''url,
validateAuthority: false,
redirectUri: 'msauth.[budleID]://auth'
},
cache: {
cacheLocation: "localStorage", // This configures where your cache will be stored
storeAuthStateInCookie: false
}
};
From the Cordova application (iOS) on clicking login, Safari browsers open up. After i enter the credentials, I am able to redirect back to the app. but the redirect callback handler myMSALObj.handleRedirectCallback(authRedirectCallBack); is not getting triggered.
How to trigger the handler and whether the redirecturi formate for Cordova app is correct?

Ionic Android "the redirect_uri is not supported" Facebook

I am new in this of authentication with social networks, but I am developing an application with Ionic, Node, Mongo and Satellizer https://github.com/sahat/satellizer to make the auth with facebook and It's working fine on the browser but when I test it on android emulator I get this error:
https://drive.google.com/file/d/0B3vlNJIDJA6RTHlpeml5YjFxNUU/view?usp=sharing
My local configuration:
// Satellizer configuration
// Configuration common for all providers.
var commonConfig = {
// Popup should expand to full screen with no location bar/toolbar.
popupOptions: {
location: 'no',
toolbar: 'no',
width: window.screen.width,
height: window.screen.height
},
};
// Change the platform and redirectUri only if we're on mobile
// so that development on browser can still work.
if (ionic.Platform.isIOS() || ionic.Platform.isAndroid()) {
commonConfig.redirectUri = 'http://localhost:3000';
}
api = "http://127.0.0.1:3000/";
//api = "https://testing-miguelcrespo.c9.io/";
$authProvider.loginUrl = api+'auth/login';
$authProvider.signupRedirect = '/';
$authProvider.facebook({
clientId: '1553815514880424',
url: api+"auth/facebook"
});
My facebook app details:
APP ID: 1553815514880424
Site URL: http://localhost:3000/
App Domains: localhost
I had a similar issue with a web client and Google giving the same response. Will it work for you if you go for implicit flow. Try:
$authProvider.google({
clientId: '1553815514880424',
url: api+"auth/facebook",
responseType: 'token'
});

authorize() method doesn't fire for CustomAuthorizer

I've upgraded an ember-cli app with a custom authenticator and authorizer for simple-auth from 0.0.40 and ember-cli-simple-auth 0.6.3 to versions 0.0.46 and 0.6.7, respectively.
Authentication works fine, but the authorize() method doesn't fire, so the security token isn't added to the header and http 401 errors are returned.
I've read elsewhere that this could be a lack of crossOriginWhitelist issue, but I have this in my index.html:
<script>
window.EmberENV = {{EMBER_ENV}};
<!-- Ember Simple Auth relies on window.ENV to read its configuration -->
window.ENV = window.EmberENV;
window.ENV['simple-auth'] = {
authorizer: 'authorizer:custom',
crossOriginWhitelist: window.EmberENV.APP.crossOriginWhitelist
};
</script>
which seems fine to me.
I can eliminate the 401 error by adding this to the ajax call in my beforeModel() authorization check:
beforeSend: function (request)
{
request.setRequestHeader('Authorization', 'Bearer ' + self.get('session.token'));
},
but that ain't right, of course; it's just a band-aid.
Anyone have any ideas?
Thanks,
BillyB
I found the problem.
The only changes I made other than upgrading the ember-cli version was to switch from ember-simple-auth to ember-cli-simple-auth, the Ember Simple Auth base library packaged as an Ember CLI Addon.
The latter accepts its configuration in ember-cli's environment.js instead of in an inline script in index.html, as I had done above. This worked:
ENV['simple-auth'] = {
authenticationRoute: 'login',
routeAfterAuthentication: 'index',
routeIfAlreadyAuthenticated: 'index',
authorizer: 'authorizer:custom',
crossOriginWhitelist: ENV.APP.crossOriginWhitelist
Note to folks at simple-auth: this was not well-documented, or at least I missed it.
-BillyB

How to change meteor smart package redirect url?

I have used the built in accounts-facebook smart package with meteor, and would like to know how to change the redirect url from localhost to to some other site.
#Shane Chin - Here is what I have in /helpers/config/:
// http://docs.meteor.com/#accounts_config
Accounts.ui.config({
requestPermissions: {
facebook: ['user_likes']
// others tbd
},
requestOfflineToken:{
// tbd
},
passwordSignupFields: 'USERNAME_AND_OPTIONAL_EMAIL'
});
In addition I would take a look at the link for configuring user accounts: http://docs.meteor.com/#accounts_config
Once this is setup it should ask you for details to setup the app AppID and Secrect which you can acquire from https://developers.facebook.com once you setup a new app with Facebook.

Categories