[keycloak-user] Angular app, login on click and not on load.

Marek Posolda mposolda at redhat.com
Mon Aug 3 11:16:29 EDT 2015


In that case, I would likely invoke the redirection to some suffixed URL 
when user click to your "Login" button. And the call to the 
keycloak.init() will be done only when URL ends with this suffix (or you 
can use the query parameter).

For example in the onClick event called when your button is clicked you 
will have:

var myLoginCallback = function() {
    if (auth.loggedIn) {
        // User is already logged in. Don't do anything or do whatever 
you want based on your app logic
    } else {
        // Redirect to the suffixed URL
        window.location = '/myapp/login';
    }
}

The angular bootstrap can then look like this:

angular.element(document).ready(function ($http) {
     var keycloakAuth = new Keycloak('keycloak.json');
     auth.loggedIn = false;

     if (window.location.endsWith('/myapp/login')) {
         keycloakAuth.init({ onLoad: 'login-required' 
}).success(function ()
         /// ... Use the code like in the example app
     } else {
         // Automatically bootstrap angular. Application would be in 
anonymous mode
         angular.bootstrap(document, ["product"]);
     }
});

Marek

On 29.7.2015 14:39, Fabio Monteiro wrote:
> Hi ,
>
> I'm looking for a simple way to login to keycloak with an AngularJS app.
> If i use the example (angular-produt-app) one can find with the 
> keyCloak appliance, the js adapter redirects the user to the Keycloak 
> login pase "onload " (keycloakVar.init({onLoad: 'login-required'})...)
>
> But i want to login only when I specifically click on some button. 
> From what I can gatherthe method keycloakVar.login()
> from the docs & JS reference is the way to go.. but replacing the 
> .init() method with the .login() method doesn't seem to work...
>
> Also, in the "normal" case,  the init() regular example itself lets 
> me, after logging-in succesfully, with still empty Javasript objects 
> once I am successfully redirected to my app page. (the auth global 
> variable)
>
>
> The official angular + js-adapter : 
> https://github.com/keycloak/keycloak/blob/master/examples/demo-template/angular-product-app/src/main/webapp/js/app.js
>
>
> Could you help me ? I must be missing something.
>
>
> Thanks a lot
>
> Fabio M
>
>
> _______________________________________________
> keycloak-user mailing list
> keycloak-user at lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/keycloak-user

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.jboss.org/pipermail/keycloak-user/attachments/20150803/d76a6639/attachment-0001.html 


More information about the keycloak-user mailing list