[keycloak-user] External JS AJAX client for jax-rs backend API

Stian Thorgersen stian at redhat.com
Mon Mar 17 10:04:59 EDT 2014


I'm in the process of refining keycloak.js as well as creating a JS library for Cordova/Phonegap. Should be ready in a day or two.

Basically how it works is that it listens for events for when the url changes in the child window, if it's a OAuth2 callback extracts the code/error/state query params and closes the window. The window is closed before displaying the page so you can use http://localhost even without a web server listening on localhost, so the 'page not found' won't be displayed. 

With the ChildBrowser plugin something along the lines of this will work:

var keycloak = new Keycloak(...);
var loginUrl = keycloak.createLoginUrl();

window.plugins.ChildBrowser.onLocationChange = function (url) {
  if (window.oauth.callback) {
    return;
  }

  var code = /code=([^&]+)/.exec(url);
  var error = /error=([^&]+)/.exec(url);
  var state = /state=([^&]+)/.exec(url);

  if (code || error) {
    if (code && state) {
      window.oauth.code = code[1];
      window.oauth.state = state[1];
      window.oauth.callback = true;
    } else if (error && state) {
      window.oauth.error = error[1];
      window.oauth.state = state[1];
      window.oauth.callback = true;
    } 

    window.plugins.ChildBrowser.close();
  }
}

window.plugins.ChildBrowser.showWebPage(loginUrl, { showLocationBar: false });

----- Original Message -----
> From: "Rodrigo Del Canto" <delkant at gmail.com>
> To: "Stian Thorgersen" <stian at redhat.com>
> Cc: keycloak-user at lists.jboss.org
> Sent: Monday, 17 March, 2014 1:51:14 PM
> Subject: Re: [keycloak-user] External JS AJAX client for jax-rs backend API
> 
> Hi Stian,
> 
> I'm sorry for the lack of information. Yes you are right I was talking
> about a packaged/installed app and yes it is Cordova.
> 
> 
> * Use a child window to open the login form (our not yet released
> Cordova/PhoneGap adapter will use this approach)
> 
> If I open a child window for the login form I will need a callback
> page/script hosted on the server to process the response back from
> keycloak, right? could you give me some ideas on how to handle this?



> 
> Thanks again,
> 
> 
> 
> 
> On Mon, Mar 17, 2014 at 5:24 AM, Stian Thorgersen <stian at redhat.com> wrote:
> 
> > Hi,
> >
> > Are you referring to a packaged html5 based app for smarthpones (and not
> > one that is access through the smartphones browser)?
> >
> > There are several ways available to use Keycloak from a packaged/installed
> > app:
> >
> > * Register a custom URI schema for the application (something like
> > myapp://oauth-callback) - recommended for a native app (our not yet
> > released iOS and Android adapters will use this approach)
> > * Start a temporary web server on http://localhost on any available port
> > - installed app on a desktop (our cli example uses this approach)
> > * Use a child window to open the login form (our not yet released
> > Cordova/PhoneGap adapter will use this approach)
> >
> > If you are using PhoneGap/Cordova the adapter should be ready soon. It
> > won't be "released" until early May, but will also work with alpha3. If
> > you're using another technology for your packaged html5 apps, let me know
> > what you're using and I can give you some hints (it should just require a
> > few minor changes to the PhoneGap/Cordova adapter).
> >
> > ----- Original Message -----
> > > From: "Rodrigo Del Canto" <delkant at gmail.com>
> > > To: "Stian Thorgersen" <stian at redhat.com>
> > > Cc: keycloak-user at lists.jboss.org
> > > Sent: Sunday, 16 March, 2014 8:09:38 AM
> > > Subject: Re: [keycloak-user] External JS AJAX client for jax-rs backend
> > API
> > >
> > > Hello Stian,
> > >
> > > I was testing this today. My problem is that the keycloak.js script
> > assumes
> > >  that the client application is hosted in a app/web server. I'm trying to
> > > build a html 5 based app for smartphones. So there is no way to use the
> > > redirect functionality, I need a way to provide to keycloak a username
> > and
> > > password and receive as response the token id.
> > >
> > > Do you think that is possible? Is there any example available.
> > >
> > > Thanks.
> > >
> > >
> > > On Mon, Mar 10, 2014 at 10:34 AM, Stian Thorgersen <stian at redhat.com>
> > wrote:
> > >
> > > > Hi,
> > > >
> > > > We have a JS library, it's available at
> > > > http://localhost:8080/js/keycloak.js. There's no documentation for it
> > > > yet, and the example needs a bit of TLC, but the example is
> > customer-app-js
> > > > and will be included in the alpha3 downloads that is due this week.
> > > >
> > > > A quick overview to get you started:
> > > >
> > > > Keycloak constructor takes a single object with the following
> > properties:
> > > >
> > > > * client_id (required) - the name of the application/client in the
> > admin
> > > > console
> > > > * client_secret (optional) - not recommended, instead select public
> > client
> > > > option for your application/client in the admin console
> > > > * realm (required)
> > > > * url (optional) - the base url of the server, if not specified it will
> > > > infer it from the url of the keycloak.js script
> > > > * onload (optional) - valid options: login-required, check-sso. Login
> > > > required will redirect to login form when init is called. Check-sso
> > will
> > > > also redirect to login form, but won't display login form (used to
> > check if
> > > > user is logged into to sso realm)
> > > >
> > > > For example:
> > > >
> > > >   var keycloak = Keycloak({ client_id: 'myapp', realm: 'myrealm' })
> > > >   keycloak.init(function() { alert('authenticated') }, function() {
> > > > alert('auth failed') } );
> > > >
> > > > Addition methods:
> > > >
> > > > * login - redirect to login form
> > > > * logout - log out
> > > > * hasRealmRole(role) - returns true if user has the realm role
> > > > * hasResourceRole(role, resource) - return true if user has the role
> > for
> > > > the specified resource (application)
> > > > * loadUserProfile(success, failure) - loads the profile (in the future
> > > > profile will be retrieved with IDToken from OpenID Connect spec, so
> > this
> > > > will probably not be required)
> > > > * onValidAccessToken(success, failure) - invoke methods with a valid
> > > > token. If the token is expired the refresh token is used to retrieve a
> > new
> > > > token before invoking the success callback
> > > >
> > > > Once authenticated the following properties are available as well:
> > > >
> > > > * token - base64 encoded token (use this as the value for the
> > > > 'Authorization' header, for example
> > > > "xMLHttpRequest.setRequestHeader('Authorization', 'Bearer ' +
> > > > keycloak.token)")
> > > > * tokenParsed - parsed token
> > > > * authenticated - true if authenticated, false otherwise
> > > > * subject - userId
> > > >
> > > > Please let me know how you get on with it, any feedback would be
> > > > appreciated.
> > > >
> > > > Cheers,
> > > > Stian
> > > >
> > > >
> > > > ----- Original Message -----
> > > > > From: "Rodrigo Del Canto" <delkant at gmail.com>
> > > > > To: keycloak-user at lists.jboss.org
> > > > > Sent: Saturday, 8 March, 2014 5:54:44 AM
> > > > > Subject: [keycloak-user] External JS AJAX client for jax-rs backend
> > API
> > > > >
> > > > > Hello guys,
> > > > >
> > > > > Congrats on the release of project! I think this is the most useful
> > > > project
> > > > > for developers in the whole history of internet :D
> > > > >
> > > > > I would like to know if you have any example on how to perform a
> > login
> > > > from
> > > > > an external JavaScript client?
> > > > >
> > > > > How would you recommend to do this. I heard you have a JS/jQuery lib
> > to
> > > > do
> > > > > this, where can it be found?
> > > > >
> > > > > Thanks,
> > > > >
> > > > > delkant
> > > > >
> > > > > _______________________________________________
> > > > > keycloak-user mailing list
> > > > > keycloak-user at lists.jboss.org
> > > > > https://lists.jboss.org/mailman/listinfo/keycloak-user
> > > >
> > >
> >
> 


More information about the keycloak-user mailing list