Keycloak login with API

Question

i have a html page with javascript where i want to auto-login the user. I have the following code:

var url = "http://localhost:8180/auth/realms/Myrealm/protocol/openid-connect/token";

const response = await fetch(url, {
    mode: 'no-cors',
    method: "POST",
    body: JSON.stringify({
        "client_id":"myclientid",
        "username":"admin",
        "password":"123",
        "grant_type":"password"
    }),
    headers:{
        //"Content-type":"application/x-www-form-urlencoded", 
        "Content-Type": "application/json"
    }
})

On the keycloak server i added Web Origins '*'. I get the following error :

POST http://localhost:8180/auth/realms/Myrealm/protocol/openid-connect/token 400 (Bad Request)

I dont know why it is not working. When i use the terminal it works fine:

curl -i -d "client_id=myclientid" -d "username=admin" -d "password=123" -d "grant_type=password" http://localhost:8180/auth/realms/Myrealm/protocol/openid-connect/token

(keycloak version 4.8.3)

Update

const response = await fetch(url, {
    method: "POST",
    body: 'client_id=myclientid&password=123&username=admin&grant_type=password',
    headers:{
        "Content-type":"application/x-www-form-urlencoded"
    }
})

and i get the following response:

Is that supposed to say curl in your terminal example? If so, -d sends application/x-www-form-urlencoded, not JSON. Does your API accept JSON input …? — 04FS
i tried both and same result (here is where i got the example from) ... yes it should be curl (i edited the question) — Yellown
ok when i use 'client_id=myclientid&password=123&username=admin&grant_type=password' as a body and 'application/x-www-form-urlencoded' it works but i get type 'cors' as a response and no access token like with curl — Yellown
You mean you get a CORS error? If you are not making this call from http://localhost:8180/, then of course you need to enable CORS. (If this endpoint is supposed to be called from the client side to begin with - if you have to actually put credentials into client-side code(?), then probably rather not.) — 04FS
Well then the two requests are maybe not a 100% identical … I’d try and debug that first, by setting up a script of your own, that logs the received headers and POST parameters to a file - and then call it once using your cURL request, and once from your JS code … and then see if there are any differences. (You might want to address that script via localhost:8080, so that you are not dealing with any additional CORS issues in this test scenario.) — 04FS

Yellown Yellown · Accepted Answer · 2019-02-22T11:05:41

its now working. The problem was sending JSON and not application/x-www-form-urlencoded and also getting a ReadableStream instead of an string as a response. So here is my code now:

    const response = await fetch(url, {
        method: "POST",
        body: "client_id=myclientid&password=123&username=admin&grant_type=password",
        headers:{
            "Content-type":"application/x-www-form-urlencoded"
        }
      });
    response.body.getReader().read().then(function (data){
        var string = new TextDecoder("utf-8").decode(data.value);
        console.log(string);
    });

Keycloak login with API

Update

1 Answers