javascript - Keycloak login with API - Stack Overflow

admin管理员组

文章数量:1288087

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:

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:

• javascript
• keycloak

Share Improve this question Follow edited Feb 22, 2019 at 11:06 Yellown asked Feb 21, 2019 at 15:45 YellownYellown 50633 gold badges77 silver badges1919 bronze badges 13

• 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 Commented Feb 21, 2019 at 16:04
• i tried both and same result (here is where i got the example from) ... yes it should be curl (i edited the question) – Yellown Commented Feb 21, 2019 at 16:16
• 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 Commented Feb 21, 2019 at 17:19
• 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 Commented Feb 22, 2019 at 7:25
• 1 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 Commented Feb 22, 2019 at 10:16

 |  Show 8 more ments

1 Answer 1

Sorted by: Reset to default 8

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);
    });

本文标签： javascriptKeycloak login with APIStack Overflow