javascript - 如何在 JavaScript 中使用 POST 方法获取 API 的访问 token ？

Question

我想要获取凭据的 API 使用 OAuth2。API 的文档列出了以下内容:

Request access token:

POST: auth/access_token

Url Parms:
grant_type    : "client_credentials"
client_id     :  Client id
client_secret :  Client secret

我从中得出的结论是，我需要将 JSON 对象作为字符串发送，因此我在 JavaScript 中尝试了这一点。

var xhr = new XMLHttpRequest();
    xhr.open("POST","url for the api",false);
    
    var obj = {
       
       "POST": "auth/access_token",
       "Url Parms": [   
          {
             "grant_type":'\"client_credentials\"',
             "client_id": "My Client id",
             "client_secret": "My Client secret"
          }
       ]
    };
    
    var clientcred = JSON.stringify(obj);
    xhr.send(obj);

这给了我一个 JSON，它表示我犯了一个错误。

{"error":"invalid_request","error_description":"The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed. Check the \"grant_type\" parameter."}

由于“同源策略”，该代码实际上甚至无法工作。我使用了一个扩展来解决这个问题。但我已经完成了。我想不通。我需要学习php之类的东西吗？如何获取我的访问 token 。

编辑:

It might need the parameters in the URL, so POST auth/access_token?grant_type=client_credentials&client_id=id‌​&client_secret=clien‌​t_secret or possibly POST auth/access_token/client_credentials/id/client_secret – Sara Tibbetts 8 hours ago

这样就成功了。我醒来后，我尝试的第一件事就成功了。非常感谢@Sara Tibbetts 和其他所有试图帮助我的人。

编辑2:

The extension was a poor workaround, since then I have learned about Cross Origin Resource Sharing. I should've made my API call from the server rather than doing it client side, which is actually secure as well.

Answer 1

这就是我在工作的 Prod 程序中执行此操作的方式(它使用我之前获得的身份验证代码 - 但这并不重要，这只是不同的参数 - 将我的具有身份验证代码的东西替换为客户端 key 要求并尝试一下......我认为你只是太努力了。

var xhr = new XMLHttpRequest();

我使用字符串作为参数:

var data =
'resource=[my resource]' +
'&client_id=' + clientId +
'&code=' + authCode +
'&grant_type=authorization_code' +
'&response_type=token';
var dataFinal = encodeURI(data);

然后我将其发布为:

xhr.open('POST', url, true);
xhr.withCredentials = true;
xhr.setRequestHeader('Access-Control-Allow-Origin', '[something]');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        //do something
    }
}
xhr.send(dataFinal);