Question

我尝试使用授权类型password验证对WordPress rest-api的请求。 WordPress中的OAuth2身份验证由WP OAuth Server插件提供。

当我使用Postman Chrome应用程序请求访问令牌时，服务器会使用预期的访问令牌对象进行响应，但类似的请求在Angular中不起作用。它给出了状态302，并且由于xhr重定向到登录页面，我无法获得访问令牌对象。我使用的是Angular 5.

以下是我在Angular中请求访问令牌的方法：

/* Example token url
  AuthProvider.TOKEN_URL: 
  https://www.example-wordpress.com/oauth/token
*/

const body = {
  grant_type: 'password',
  username: username,
  password: password,
};

const headers = new HttpHeaders()
  .set('Authorization', 'Basic ' + btoa(AuthProvider.CLIENT_ID + ':' + AuthProvider.CLIENT_SECRET));

this.http.post(AuthProvider.TOKEN_URL, body, { headers: headers });

上述请求生成302，位置标头设置为：

https://www.example-wordpress.com/login/?redirect_to=https%3A%2F%2Fwww.example-wordpress.com%2Foauth%2Ftoken

然后向上面的位置发出xhr GET请求，该请求以登录页面的HTML响应，因此没有获得访问令牌。

Postman中对访问令牌的类似POST请求工作正常并产生预期的访问令牌对象，但我无法在Angular中使用它。

修改
调试时我从Postman生成了用于访问令牌请求的JavaScript代码，并在导入jQuery后粘贴到Chrome的控制台中。请求也在控制台中按预期工作，不会发生重定向。响应是带访问令牌的JSON。

这是Postman为POST请求生成的代码：

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://example-wordpress.com/oauth/token",
  "method": "POST",
  "headers": {
    "content-type": "application/x-www-form-urlencoded",
    "authorization": "Basic M0wzakE3d080VmxxbXB0UUF1dUI5RkxicWxmeE8yR25Zdk4xQmxvbTp4TktTYnJ1Mno5cEp2VDFMbTNGNFhEQm10eDZzUGsya1FqZDg3VmQ2",
    "cache-control": "no-cache",
    "postman-token": "46339abe-2d1a-1032-f5d8-36e3193d9a81"
  },
  "data": {
    "grant_type": "password",
    "username": "my-username",
    "password": "my-password",
    "client_id": "3L3jA7wO4VlqmptQAuuB9FLbqlfxO2GnYvN1Blom",
    "client_secret": "xNKSbru2z9pJvT1Lm3F4XDBmtx6sPk2kQjd87Vd6"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

以上代码记录了响应：

{
  access_token: "rksen3p351fj0povsrpfv2eeuahrciglc3ilphhy",
  expires_in: 3600, 
  token_type: "Bearer",
  scope: "basic",
  refresh_token: "fudju8tecbnwly2e1xgfv92tykvpsniwkfpvrd7d"
}

当我们通过Angular请求并且没有使用访问令牌JSON响应时，我无法弄清楚为什么会发生重定向。

感谢任何帮助。

Answer 1

access_token（我想象的是你所期望的）不是Angular能够在不设置服务器的情况下读取的少数标题的一部分。

Angular只读取“基本”标题，例如Content-type。这是因为默认的CORS配置只读取Cache-Control，Content-Language，Content-Type，Expires，Last-Modified和Pragma。说到自定义标头，您必须告诉服务器公开标头。

这是通过Access-Control-Expose-Headers标题完成的。

Answer 2

完全没有问题。这是一个非常愚蠢的错误。我道歉。

我正在同时测试两个网站，两者都有类似的配置。唯一的区别是一个安装了OAuth插件而另一个没有安装。因此，当我尝试使用未安装OAuth2插件的网站授权来自Angular的请求时，将其重定向到登录页面。 AuthProvider.TOKEN_URL的常量设置设置不正确，而当我使用其他工具测试时，我使用的是正确的网址。

无论如何，这都是我的错。当你不休息时，它有时会发生。：）

Angular HttpClient

2 个答案: