How to setup the CORS configuration in keycloak to allow an ajax request?
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.

add a comment |
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.

add a comment |
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.

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.


asked Jan 1 at 18:00


Adrien PESSUAdrien PESSU
815
815
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
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
add a comment |
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.
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
add a comment |
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.
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.
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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