How to setup the CORS configuration in keycloak to allow an ajax request?












0















I am trying to use keycloak as an authentication server.
I try to get the token with an ajax request. It works fine in curl but not in my angular due to CORS.
I have set the client to Direct access grant enable to true and I have added * to Web Origin.



fetch("http://localhost:8080/auth/realms/master/protocol/openid-connect/token", {
body: "grant_type=password&client_id=admin-cli&username=adrien&password=adrien&undefined=",
headers: {
Accept: "application/json, text/plain, */*,application/x-www-form-urlencoded",
"Access-Control-Allow-Headers": "Origin, Content-Type, Authorization, Content-Length, X-Requested-With",
"Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS",
"Access-Control-Allow-Origin": "*",
"Cache-Control": "no-cache",
"Content-Type": "application/x-www-form-urlencoded",
Dnt: "1",
"Postman-Token": "cfd33776-882d-4850-b2e7-d66629da3826"
},
method: "POST"
})


Do you know what I am missing?



Thanks in advance.










share|improve this question



























    0















    I am trying to use keycloak as an authentication server.
    I try to get the token with an ajax request. It works fine in curl but not in my angular due to CORS.
    I have set the client to Direct access grant enable to true and I have added * to Web Origin.



    fetch("http://localhost:8080/auth/realms/master/protocol/openid-connect/token", {
    body: "grant_type=password&client_id=admin-cli&username=adrien&password=adrien&undefined=",
    headers: {
    Accept: "application/json, text/plain, */*,application/x-www-form-urlencoded",
    "Access-Control-Allow-Headers": "Origin, Content-Type, Authorization, Content-Length, X-Requested-With",
    "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS",
    "Access-Control-Allow-Origin": "*",
    "Cache-Control": "no-cache",
    "Content-Type": "application/x-www-form-urlencoded",
    Dnt: "1",
    "Postman-Token": "cfd33776-882d-4850-b2e7-d66629da3826"
    },
    method: "POST"
    })


    Do you know what I am missing?



    Thanks in advance.










    share|improve this question

























      0












      0








      0








      I am trying to use keycloak as an authentication server.
      I try to get the token with an ajax request. It works fine in curl but not in my angular due to CORS.
      I have set the client to Direct access grant enable to true and I have added * to Web Origin.



      fetch("http://localhost:8080/auth/realms/master/protocol/openid-connect/token", {
      body: "grant_type=password&client_id=admin-cli&username=adrien&password=adrien&undefined=",
      headers: {
      Accept: "application/json, text/plain, */*,application/x-www-form-urlencoded",
      "Access-Control-Allow-Headers": "Origin, Content-Type, Authorization, Content-Length, X-Requested-With",
      "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS",
      "Access-Control-Allow-Origin": "*",
      "Cache-Control": "no-cache",
      "Content-Type": "application/x-www-form-urlencoded",
      Dnt: "1",
      "Postman-Token": "cfd33776-882d-4850-b2e7-d66629da3826"
      },
      method: "POST"
      })


      Do you know what I am missing?



      Thanks in advance.










      share|improve this question














      I am trying to use keycloak as an authentication server.
      I try to get the token with an ajax request. It works fine in curl but not in my angular due to CORS.
      I have set the client to Direct access grant enable to true and I have added * to Web Origin.



      fetch("http://localhost:8080/auth/realms/master/protocol/openid-connect/token", {
      body: "grant_type=password&client_id=admin-cli&username=adrien&password=adrien&undefined=",
      headers: {
      Accept: "application/json, text/plain, */*,application/x-www-form-urlencoded",
      "Access-Control-Allow-Headers": "Origin, Content-Type, Authorization, Content-Length, X-Requested-With",
      "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS",
      "Access-Control-Allow-Origin": "*",
      "Cache-Control": "no-cache",
      "Content-Type": "application/x-www-form-urlencoded",
      Dnt: "1",
      "Postman-Token": "cfd33776-882d-4850-b2e7-d66629da3826"
      },
      method: "POST"
      })


      Do you know what I am missing?



      Thanks in advance.







      angular cors keycloak






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Jan 1 at 18:00









      Adrien PESSUAdrien PESSU

      815




      815
























          1 Answer
          1






          active

          oldest

          votes


















          2














          I think you are trying it to use it in the wrong way. There is plugin for angular and i think you should use it. So here are the clifnotes. Install the plugin:



          npm i keycloak-angular


          then initialize the keycloack:



          import {KeycloakService} from 'keycloak-angular';

          export function initializer(keycloak: KeycloakService): () => Promise<any> {
          return (): Promise<any> => {
          return new Promise(async (resolve, reject) => {
          try {
          await keycloak.init({
          config: {
          url: 'http://localhost:8080/auth',
          realm: 'MySecureRealm',
          clientId: 'myAngularApplication'
          },
          initOptions: {
          onLoad: 'login-required',
          checkLoginIframe: false,
          responseMode: 'fragment',
          flow: 'standard'
          }
          });
          resolve();
          } catch (error) {
          reject(error);
          }
          });
          };
          }


          and then in app.module.ts



          import { BrowserModule } from '@angular/platform-browser';
          import {APP_INITIALIZER, NgModule} from '@angular/core';


          import { AppComponent } from './app.component';
          import {KeycloakService} from 'keycloak-angular';
          import {initializer} from '../environments/environment';
          import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
          import {TokenInterceptor} from './token-interceptor';

          @NgModule({
          declarations: [
          AppComponent
          ],
          imports: [
          BrowserModule,
          HttpClientModule
          ],
          providers: [
          KeycloakService,
          {
          provide: APP_INITIALIZER,
          useFactory: initializer,
          multi: true,
          deps: [KeycloakService]
          },
          {
          provide: HTTP_INTERCEPTORS,
          useClass: TokenInterceptor,
          multi: true
          },
          ],
          bootstrap: [AppComponent]
          })
          export class AppModule { }


          you will also need this TokenInterceptor:



          import { Injectable } from '@angular/core';
          import {
          HttpRequest,
          HttpHandler,
          HttpEvent,
          HttpInterceptor
          } from '@angular/common/http';
          import { Observable } from 'rxjs/Observable';
          import 'rxjs/add/operator/mergeMap';
          import 'rxjs/add/observable/fromPromise';

          import { KeycloakService, KeycloakAuthGuard, KeycloakAngularModule } from 'keycloak-angular';
          import {HttpHeaders} from '@angular/common/http/src/headers';

          @Injectable()
          export class TokenInterceptor implements HttpInterceptor {

          constructor(protected keycloak: KeycloakService) {}

          intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
          return Observable
          .fromPromise(this.keycloak.getToken())
          .mergeMap(
          token => {

          console.log('adding heder to request');
          console.log(token);

          const headers: HttpHeaders = req.headers;
          const hedersWithAuthorization: HttpHeaders = headers.append('Authorization', 'bearer ' + token);
          const requestWithAuthorizationHeader = req.clone({ headers: hedersWithAuthorization });
          return next.handle(requestWithAuthorizationHeader);
          }
          );
          }
          }


          And that should do it. When you enter application and you are not logged in you will be redirected to the keycloak login screen and the back to your app. And to all outgoing request will be added the authentication header. Let me know if you have nay trouble I know the technology quite well.






          share|improve this answer
























          • Thank you for your quick response, but in your solution, the keycloak login page is used. For my use case, I want to use my own login form and then call keycloak via the rest api to retrieve the token. Maybe it is not possible, and the only recommended way is to use the keycloak login page

            – Adrien PESSU
            Jan 2 at 13:07













          • It is possible but it is hard to do. You have to implement whole OpenIDConnect flow in your app. If you want I can help you with that. But I do not recommend it. Setting the fact that it might be insecure (you app will have access to username and password) it will take some time. Can you tell me why you can't use keycloak the way it is meant to be used? As delegated authorization provider?

            – piotr szybicki
            Jan 2 at 13:18













          • Ok thank you very much for the explanation, I will use the keycloak login page. I have no valid reason not to use it.

            – Adrien PESSU
            Jan 3 at 13:12











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997701%2fhow-to-setup-the-cors-configuration-in-keycloak-to-allow-an-ajax-request%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          2














          I think you are trying it to use it in the wrong way. There is plugin for angular and i think you should use it. So here are the clifnotes. Install the plugin:



          npm i keycloak-angular


          then initialize the keycloack:



          import {KeycloakService} from 'keycloak-angular';

          export function initializer(keycloak: KeycloakService): () => Promise<any> {
          return (): Promise<any> => {
          return new Promise(async (resolve, reject) => {
          try {
          await keycloak.init({
          config: {
          url: 'http://localhost:8080/auth',
          realm: 'MySecureRealm',
          clientId: 'myAngularApplication'
          },
          initOptions: {
          onLoad: 'login-required',
          checkLoginIframe: false,
          responseMode: 'fragment',
          flow: 'standard'
          }
          });
          resolve();
          } catch (error) {
          reject(error);
          }
          });
          };
          }


          and then in app.module.ts



          import { BrowserModule } from '@angular/platform-browser';
          import {APP_INITIALIZER, NgModule} from '@angular/core';


          import { AppComponent } from './app.component';
          import {KeycloakService} from 'keycloak-angular';
          import {initializer} from '../environments/environment';
          import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
          import {TokenInterceptor} from './token-interceptor';

          @NgModule({
          declarations: [
          AppComponent
          ],
          imports: [
          BrowserModule,
          HttpClientModule
          ],
          providers: [
          KeycloakService,
          {
          provide: APP_INITIALIZER,
          useFactory: initializer,
          multi: true,
          deps: [KeycloakService]
          },
          {
          provide: HTTP_INTERCEPTORS,
          useClass: TokenInterceptor,
          multi: true
          },
          ],
          bootstrap: [AppComponent]
          })
          export class AppModule { }


          you will also need this TokenInterceptor:



          import { Injectable } from '@angular/core';
          import {
          HttpRequest,
          HttpHandler,
          HttpEvent,
          HttpInterceptor
          } from '@angular/common/http';
          import { Observable } from 'rxjs/Observable';
          import 'rxjs/add/operator/mergeMap';
          import 'rxjs/add/observable/fromPromise';

          import { KeycloakService, KeycloakAuthGuard, KeycloakAngularModule } from 'keycloak-angular';
          import {HttpHeaders} from '@angular/common/http/src/headers';

          @Injectable()
          export class TokenInterceptor implements HttpInterceptor {

          constructor(protected keycloak: KeycloakService) {}

          intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
          return Observable
          .fromPromise(this.keycloak.getToken())
          .mergeMap(
          token => {

          console.log('adding heder to request');
          console.log(token);

          const headers: HttpHeaders = req.headers;
          const hedersWithAuthorization: HttpHeaders = headers.append('Authorization', 'bearer ' + token);
          const requestWithAuthorizationHeader = req.clone({ headers: hedersWithAuthorization });
          return next.handle(requestWithAuthorizationHeader);
          }
          );
          }
          }


          And that should do it. When you enter application and you are not logged in you will be redirected to the keycloak login screen and the back to your app. And to all outgoing request will be added the authentication header. Let me know if you have nay trouble I know the technology quite well.






          share|improve this answer
























          • Thank you for your quick response, but in your solution, the keycloak login page is used. For my use case, I want to use my own login form and then call keycloak via the rest api to retrieve the token. Maybe it is not possible, and the only recommended way is to use the keycloak login page

            – Adrien PESSU
            Jan 2 at 13:07













          • It is possible but it is hard to do. You have to implement whole OpenIDConnect flow in your app. If you want I can help you with that. But I do not recommend it. Setting the fact that it might be insecure (you app will have access to username and password) it will take some time. Can you tell me why you can't use keycloak the way it is meant to be used? As delegated authorization provider?

            – piotr szybicki
            Jan 2 at 13:18













          • Ok thank you very much for the explanation, I will use the keycloak login page. I have no valid reason not to use it.

            – Adrien PESSU
            Jan 3 at 13:12
















          2














          I think you are trying it to use it in the wrong way. There is plugin for angular and i think you should use it. So here are the clifnotes. Install the plugin:



          npm i keycloak-angular


          then initialize the keycloack:



          import {KeycloakService} from 'keycloak-angular';

          export function initializer(keycloak: KeycloakService): () => Promise<any> {
          return (): Promise<any> => {
          return new Promise(async (resolve, reject) => {
          try {
          await keycloak.init({
          config: {
          url: 'http://localhost:8080/auth',
          realm: 'MySecureRealm',
          clientId: 'myAngularApplication'
          },
          initOptions: {
          onLoad: 'login-required',
          checkLoginIframe: false,
          responseMode: 'fragment',
          flow: 'standard'
          }
          });
          resolve();
          } catch (error) {
          reject(error);
          }
          });
          };
          }


          and then in app.module.ts



          import { BrowserModule } from '@angular/platform-browser';
          import {APP_INITIALIZER, NgModule} from '@angular/core';


          import { AppComponent } from './app.component';
          import {KeycloakService} from 'keycloak-angular';
          import {initializer} from '../environments/environment';
          import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
          import {TokenInterceptor} from './token-interceptor';

          @NgModule({
          declarations: [
          AppComponent
          ],
          imports: [
          BrowserModule,
          HttpClientModule
          ],
          providers: [
          KeycloakService,
          {
          provide: APP_INITIALIZER,
          useFactory: initializer,
          multi: true,
          deps: [KeycloakService]
          },
          {
          provide: HTTP_INTERCEPTORS,
          useClass: TokenInterceptor,
          multi: true
          },
          ],
          bootstrap: [AppComponent]
          })
          export class AppModule { }


          you will also need this TokenInterceptor:



          import { Injectable } from '@angular/core';
          import {
          HttpRequest,
          HttpHandler,
          HttpEvent,
          HttpInterceptor
          } from '@angular/common/http';
          import { Observable } from 'rxjs/Observable';
          import 'rxjs/add/operator/mergeMap';
          import 'rxjs/add/observable/fromPromise';

          import { KeycloakService, KeycloakAuthGuard, KeycloakAngularModule } from 'keycloak-angular';
          import {HttpHeaders} from '@angular/common/http/src/headers';

          @Injectable()
          export class TokenInterceptor implements HttpInterceptor {

          constructor(protected keycloak: KeycloakService) {}

          intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
          return Observable
          .fromPromise(this.keycloak.getToken())
          .mergeMap(
          token => {

          console.log('adding heder to request');
          console.log(token);

          const headers: HttpHeaders = req.headers;
          const hedersWithAuthorization: HttpHeaders = headers.append('Authorization', 'bearer ' + token);
          const requestWithAuthorizationHeader = req.clone({ headers: hedersWithAuthorization });
          return next.handle(requestWithAuthorizationHeader);
          }
          );
          }
          }


          And that should do it. When you enter application and you are not logged in you will be redirected to the keycloak login screen and the back to your app. And to all outgoing request will be added the authentication header. Let me know if you have nay trouble I know the technology quite well.






          share|improve this answer
























          • Thank you for your quick response, but in your solution, the keycloak login page is used. For my use case, I want to use my own login form and then call keycloak via the rest api to retrieve the token. Maybe it is not possible, and the only recommended way is to use the keycloak login page

            – Adrien PESSU
            Jan 2 at 13:07













          • It is possible but it is hard to do. You have to implement whole OpenIDConnect flow in your app. If you want I can help you with that. But I do not recommend it. Setting the fact that it might be insecure (you app will have access to username and password) it will take some time. Can you tell me why you can't use keycloak the way it is meant to be used? As delegated authorization provider?

            – piotr szybicki
            Jan 2 at 13:18













          • Ok thank you very much for the explanation, I will use the keycloak login page. I have no valid reason not to use it.

            – Adrien PESSU
            Jan 3 at 13:12














          2












          2








          2







          I think you are trying it to use it in the wrong way. There is plugin for angular and i think you should use it. So here are the clifnotes. Install the plugin:



          npm i keycloak-angular


          then initialize the keycloack:



          import {KeycloakService} from 'keycloak-angular';

          export function initializer(keycloak: KeycloakService): () => Promise<any> {
          return (): Promise<any> => {
          return new Promise(async (resolve, reject) => {
          try {
          await keycloak.init({
          config: {
          url: 'http://localhost:8080/auth',
          realm: 'MySecureRealm',
          clientId: 'myAngularApplication'
          },
          initOptions: {
          onLoad: 'login-required',
          checkLoginIframe: false,
          responseMode: 'fragment',
          flow: 'standard'
          }
          });
          resolve();
          } catch (error) {
          reject(error);
          }
          });
          };
          }


          and then in app.module.ts



          import { BrowserModule } from '@angular/platform-browser';
          import {APP_INITIALIZER, NgModule} from '@angular/core';


          import { AppComponent } from './app.component';
          import {KeycloakService} from 'keycloak-angular';
          import {initializer} from '../environments/environment';
          import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
          import {TokenInterceptor} from './token-interceptor';

          @NgModule({
          declarations: [
          AppComponent
          ],
          imports: [
          BrowserModule,
          HttpClientModule
          ],
          providers: [
          KeycloakService,
          {
          provide: APP_INITIALIZER,
          useFactory: initializer,
          multi: true,
          deps: [KeycloakService]
          },
          {
          provide: HTTP_INTERCEPTORS,
          useClass: TokenInterceptor,
          multi: true
          },
          ],
          bootstrap: [AppComponent]
          })
          export class AppModule { }


          you will also need this TokenInterceptor:



          import { Injectable } from '@angular/core';
          import {
          HttpRequest,
          HttpHandler,
          HttpEvent,
          HttpInterceptor
          } from '@angular/common/http';
          import { Observable } from 'rxjs/Observable';
          import 'rxjs/add/operator/mergeMap';
          import 'rxjs/add/observable/fromPromise';

          import { KeycloakService, KeycloakAuthGuard, KeycloakAngularModule } from 'keycloak-angular';
          import {HttpHeaders} from '@angular/common/http/src/headers';

          @Injectable()
          export class TokenInterceptor implements HttpInterceptor {

          constructor(protected keycloak: KeycloakService) {}

          intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
          return Observable
          .fromPromise(this.keycloak.getToken())
          .mergeMap(
          token => {

          console.log('adding heder to request');
          console.log(token);

          const headers: HttpHeaders = req.headers;
          const hedersWithAuthorization: HttpHeaders = headers.append('Authorization', 'bearer ' + token);
          const requestWithAuthorizationHeader = req.clone({ headers: hedersWithAuthorization });
          return next.handle(requestWithAuthorizationHeader);
          }
          );
          }
          }


          And that should do it. When you enter application and you are not logged in you will be redirected to the keycloak login screen and the back to your app. And to all outgoing request will be added the authentication header. Let me know if you have nay trouble I know the technology quite well.






          share|improve this answer













          I think you are trying it to use it in the wrong way. There is plugin for angular and i think you should use it. So here are the clifnotes. Install the plugin:



          npm i keycloak-angular


          then initialize the keycloack:



          import {KeycloakService} from 'keycloak-angular';

          export function initializer(keycloak: KeycloakService): () => Promise<any> {
          return (): Promise<any> => {
          return new Promise(async (resolve, reject) => {
          try {
          await keycloak.init({
          config: {
          url: 'http://localhost:8080/auth',
          realm: 'MySecureRealm',
          clientId: 'myAngularApplication'
          },
          initOptions: {
          onLoad: 'login-required',
          checkLoginIframe: false,
          responseMode: 'fragment',
          flow: 'standard'
          }
          });
          resolve();
          } catch (error) {
          reject(error);
          }
          });
          };
          }


          and then in app.module.ts



          import { BrowserModule } from '@angular/platform-browser';
          import {APP_INITIALIZER, NgModule} from '@angular/core';


          import { AppComponent } from './app.component';
          import {KeycloakService} from 'keycloak-angular';
          import {initializer} from '../environments/environment';
          import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
          import {TokenInterceptor} from './token-interceptor';

          @NgModule({
          declarations: [
          AppComponent
          ],
          imports: [
          BrowserModule,
          HttpClientModule
          ],
          providers: [
          KeycloakService,
          {
          provide: APP_INITIALIZER,
          useFactory: initializer,
          multi: true,
          deps: [KeycloakService]
          },
          {
          provide: HTTP_INTERCEPTORS,
          useClass: TokenInterceptor,
          multi: true
          },
          ],
          bootstrap: [AppComponent]
          })
          export class AppModule { }


          you will also need this TokenInterceptor:



          import { Injectable } from '@angular/core';
          import {
          HttpRequest,
          HttpHandler,
          HttpEvent,
          HttpInterceptor
          } from '@angular/common/http';
          import { Observable } from 'rxjs/Observable';
          import 'rxjs/add/operator/mergeMap';
          import 'rxjs/add/observable/fromPromise';

          import { KeycloakService, KeycloakAuthGuard, KeycloakAngularModule } from 'keycloak-angular';
          import {HttpHeaders} from '@angular/common/http/src/headers';

          @Injectable()
          export class TokenInterceptor implements HttpInterceptor {

          constructor(protected keycloak: KeycloakService) {}

          intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
          return Observable
          .fromPromise(this.keycloak.getToken())
          .mergeMap(
          token => {

          console.log('adding heder to request');
          console.log(token);

          const headers: HttpHeaders = req.headers;
          const hedersWithAuthorization: HttpHeaders = headers.append('Authorization', 'bearer ' + token);
          const requestWithAuthorizationHeader = req.clone({ headers: hedersWithAuthorization });
          return next.handle(requestWithAuthorizationHeader);
          }
          );
          }
          }


          And that should do it. When you enter application and you are not logged in you will be redirected to the keycloak login screen and the back to your app. And to all outgoing request will be added the authentication header. Let me know if you have nay trouble I know the technology quite well.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Jan 1 at 18:33









          piotr szybickipiotr szybicki

          6611511




          6611511













          • Thank you for your quick response, but in your solution, the keycloak login page is used. For my use case, I want to use my own login form and then call keycloak via the rest api to retrieve the token. Maybe it is not possible, and the only recommended way is to use the keycloak login page

            – Adrien PESSU
            Jan 2 at 13:07













          • It is possible but it is hard to do. You have to implement whole OpenIDConnect flow in your app. If you want I can help you with that. But I do not recommend it. Setting the fact that it might be insecure (you app will have access to username and password) it will take some time. Can you tell me why you can't use keycloak the way it is meant to be used? As delegated authorization provider?

            – piotr szybicki
            Jan 2 at 13:18













          • Ok thank you very much for the explanation, I will use the keycloak login page. I have no valid reason not to use it.

            – Adrien PESSU
            Jan 3 at 13:12



















          • Thank you for your quick response, but in your solution, the keycloak login page is used. For my use case, I want to use my own login form and then call keycloak via the rest api to retrieve the token. Maybe it is not possible, and the only recommended way is to use the keycloak login page

            – Adrien PESSU
            Jan 2 at 13:07













          • It is possible but it is hard to do. You have to implement whole OpenIDConnect flow in your app. If you want I can help you with that. But I do not recommend it. Setting the fact that it might be insecure (you app will have access to username and password) it will take some time. Can you tell me why you can't use keycloak the way it is meant to be used? As delegated authorization provider?

            – piotr szybicki
            Jan 2 at 13:18













          • Ok thank you very much for the explanation, I will use the keycloak login page. I have no valid reason not to use it.

            – Adrien PESSU
            Jan 3 at 13:12

















          Thank you for your quick response, but in your solution, the keycloak login page is used. For my use case, I want to use my own login form and then call keycloak via the rest api to retrieve the token. Maybe it is not possible, and the only recommended way is to use the keycloak login page

          – Adrien PESSU
          Jan 2 at 13:07







          Thank you for your quick response, but in your solution, the keycloak login page is used. For my use case, I want to use my own login form and then call keycloak via the rest api to retrieve the token. Maybe it is not possible, and the only recommended way is to use the keycloak login page

          – Adrien PESSU
          Jan 2 at 13:07















          It is possible but it is hard to do. You have to implement whole OpenIDConnect flow in your app. If you want I can help you with that. But I do not recommend it. Setting the fact that it might be insecure (you app will have access to username and password) it will take some time. Can you tell me why you can't use keycloak the way it is meant to be used? As delegated authorization provider?

          – piotr szybicki
          Jan 2 at 13:18







          It is possible but it is hard to do. You have to implement whole OpenIDConnect flow in your app. If you want I can help you with that. But I do not recommend it. Setting the fact that it might be insecure (you app will have access to username and password) it will take some time. Can you tell me why you can't use keycloak the way it is meant to be used? As delegated authorization provider?

          – piotr szybicki
          Jan 2 at 13:18















          Ok thank you very much for the explanation, I will use the keycloak login page. I have no valid reason not to use it.

          – Adrien PESSU
          Jan 3 at 13:12





          Ok thank you very much for the explanation, I will use the keycloak login page. I have no valid reason not to use it.

          – Adrien PESSU
          Jan 3 at 13:12




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997701%2fhow-to-setup-the-cors-configuration-in-keycloak-to-allow-an-ajax-request%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          MongoDB - Not Authorized To Execute Command

          in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

          How to fix TextFormField cause rebuild widget in Flutter