Giter VIP home page Giter VIP logo

Comments (4)

ebondu avatar ebondu commented on August 13, 2024 1

Hi,
You are right, oauth params are parsed from the callback url and you have to configure the angular router properly (I used the fragment mode). Notes that after auth sucess, the keycloak module will replace your current window URL and clean your navigation history to prevent to re-login when navigating back, so that is normal the oauth parameters diappears after the page loading.

In my case, the keycloak is initialized in the ngOnInit() :

ngOnInit() {

        this.keycloakAuthz.init();

        this.keycloak.init({
            checkLoginIframe: true,
            onLoad: 'login-required',
            responseMode: "fragment"
        });

        Keycloak.authenticatedObs.subscribe(authenticated => {
            if (authenticated) {
               ...
            }
        });
}

Check your routing module configuration (useHash param) :

@NgModule({
  imports: [
    RouterModule.forRoot(LAYOUT_ROUTES, { useHash: false })
  ],
  exports: [
    RouterModule
  ]
})

from angular2-keycloak.

RakeshLchanSarma avatar RakeshLchanSarma commented on August 13, 2024

Hello,
I am facing same kinda issue. My application reloads after it encounters keycloak.init() .

My code look like-

` ngOnInit() {
    // Configure the Keycloak
    this.keycloakAuthz.init();
    Keycloak.config = '../assets/keycloak.json';
    // Initialise the Keycloak
    this.keycloak.init({
            checkLoginIframe: true,
            onLoad: 'login-required',
            responseMode: "fragment"
    });
     Keycloak.authenticatedObs.subscribe(auth => {
      this.isAuthenticated = auth;
      this.parsedToken = Keycloak.tokenParsed;
      console.info('APP: authentication status changed...');
    });
  }`

Routing moduel-

`@NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: false }),
    TooltipModule.forRoot()
    ],
  exports: [RouterModule],
  providers: []
})`

module.ts-

`@NgModule({
  imports: [
    TooltipModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    SharedModule,
    AppRoutingModule,
    SelectModule,
    Select2Module,
    CKEditorModule,
    Ng2Bs3ModalModule,
    BrowserAnimationsModule,
    Ng2KeycloakModule.forRoot()
  ],
  declarations: [
    AppComponent
  ],
  providers: [AppConstants,SharedService,Keycloak,KeycloakAuthorization],
  bootstrap: [ AppComponent ]
})`

Virsions:

"dependencies": {
    "@angular/core": "^4.2.5",
    "@angular/compiler-cli": "^4.2.5",
    "@ebondu/angular2-keycloak": "^0.8.3",
    "@angular/http": "^4.2.5",
    "@angular/router": "^4.2.5",

.........................
}
Please help me out with this. Let me know if any more info is needed.

from angular2-keycloak.

rraksi avatar rraksi commented on August 13, 2024

Hi,

@ebondu, the oauth parameters disappear before page loading, at least in my app. I tracked back the problem to the asynchronous load of the keycloak.json configuration file and therefore the remaining part of the initialization process. I made it synchronous (hardcoded the configuration for now) and it works like a charm.

The initOptions I'm using now are below, and changed the routing to useHash: false. Further more as I mentioned earlier, I put the initialization in one of my module's constructor.

checkLoginIframe: true,
responseMode: 'query',
flow: 'standard',

I need further customization of the http proxy as my app requires three types of http requests and the current proxy only supports two (first and third):

  • no auth headers needed
  • auth headers are optional, send them if available, don't login if not available
  • auth headers are required, do login if not available

from angular2-keycloak.

 avatar commented on August 13, 2024

@RakeshLchanSarma

Could be a little late, but I secured my application using a guard and an interceptor.
Here is a gist: https://gist.github.com/jderuere/ed94520959811157dc0954cfc4aab204

In my example, I'm supporting multi-tenant using 'realm' as a part of my URL.

from angular2-keycloak.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.