使用 Javascript 发出 HTTP POST 身份验证基本请求

Posted 2023-02-19

【中文标题】使用 Javascript 发出 HTTP POST 身份验证基本请求

【英文标题】：Make an HTTP POST authentication basic request using Javascript

【发布时间】：2015-10-07 00:47:30

【问题描述】：

我想使用 javascript 使用常见的“授权：基本”方法执行 POST 请求。服务器托管一个 OWIN C# 应用程序，并且在成功验证后它应该给我一个 JSON 格式的令牌。

这是我想要使用纯 Javascript 完成的 Wireshark 等价物：

    POST /connect/token HTTP/1.1
    Authorization: Basic c2lsaWNvbjpGNjIxRjQ3MC05NzMxLTRBMjUtODBFRi02N0E2RjdDNUY0Qjg=
    Content-Type: application/x-www-form-urlencoded
    Host: localhost:44333
    Content-Length: 40
    Expect: 100-continue
    Connection: Keep-Alive

    HTTP/1.1 100 Continue

    grant_type=client_credentials&scope=api1HTTP/1.1 200 OK
    Cache-Control: no-store, no-cache, max-age=0, private
    Pragma: no-cache
    Content-Length: 91
    Content-Type: application/json; charset=utf-8
    Server: Microsoft-HTTPAPI/2.0
    Date: Fri, 17 Jul 2015 08:52:23 GMT

    "access_token":"c1cad8180e11deceb43bc1545c863695","expires_in":3600,"token_type":"Bearer"

可以这样做吗？如果有，怎么做？

【问题讨论】：

查看文档 - developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Vanilla Javascript 或 jQuery 也是？

关于这个问题的任何更新？

【参考方案1】：

这是 javascript 请求：

var clientId = "MyApp";
var clientSecret = "MySecret";

// var authorizationBasic = $.base64.btoa(clientId + ':' + clientSecret);
var authorizationBasic = window.btoa(clientId + ':' + clientSecret);

var request = new XMLHttpRequest();
request.open('POST', oAuth.AuthorizationServer, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.setRequestHeader('Authorization', 'Basic ' + authorizationBasic);
request.setRequestHeader('Accept', 'application/json');
request.send("username=John&password=Smith&grant_type=password");

request.onreadystatechange = function () 
    if (request.readyState === 4) 
       alert(request.responseText);
    
;

这是 jQuery 版本：

var clientId = "MyApp";
var clientSecret = "MySecret";

// var authorizationBasic = $.base64.btoa(clientId + ':' + clientSecret);
var authorizationBasic = window.btoa(clientId + ':' + clientSecret);

$.ajax(
    type: 'POST',
    url: oAuth.AuthorizationServer,
    data:  username: 'John', password: 'Smith', grant_type: 'password' ,
    dataType: "json",
    contentType: 'application/x-www-form-urlencoded; charset=utf-8',
    xhrFields: 
       withCredentials: true
    ,
    // crossDomain: true,
    headers: 
       'Authorization': 'Basic ' + authorizationBasic
    ,
    //beforeSend: function (xhr) 
    //,
    success: function (result) 
       var token = result;
    ,
    //complete: function (jqXHR, textStatus) 
    //,
    error: function (req, status, error) 
    alert(error);
    
);

在这两种情况下，我都使用 jquery plugin 在字符串 base64 中编码了 clientId 和 clientSecret。我很确定你可以在普通的 javascript 中找到类似的东西。

这是一个project，您有一个在控制台中运行的 Owin Web Api 和一个项目，您可以在其中使用 jQuery 或普通的 vanilla javascript 在网页中测试您的请求。您可能需要更改请求的 url。

【讨论】：

感谢阿尔贝托！奥拉罗普罗沃

Prego :-) 告诉我。

看起来普通的window.btoa 应该为$.base64.btoa 做这项工作...

代码中clientId和username有什么区别？

@Nuhman：ClientId 标识您的客户端应用程序：它可以是移动应用程序、桌面或其他 Web 应用程序。您可以为每一个提供不同的配置。