如何使用 Angular 2 进行 oAuth2 基本身份验证？

Posted 2023-02-27

【中文标题】如何使用 Angular 2 进行 oAuth2 基本身份验证？

【英文标题】：How to do oAuth2 Basic authentication with angular 2?

【发布时间】：2018-02-08 22:10:09

【问题描述】：

我正在使用角度 2 进行 oauth2。

这里是 POST URL = "http://localhost:8080/OAuth2Example/oauth/token?grant_type=password&username=bill&password=abc123"。

如何使用经过验证的用户之一在前端传递 clientId 和客户端密码并获取访问令牌？

如果在 angular2 或任何配置中有任何插件可用，请建议我！

我试过了，

private getHeaders()
    // I included these headers because otherwise FireFox
    // will request text/html
    let headers = new Headers();
    let auth_data = 'username=my-trusted-client&password=secret';
    headers.append('Accept', 'application/json');
    headers.append('Authorization', auth_data);
    return headers;
  

  testRequest() 
     let data = 'grant_type=password&username=bill&password=abc123';
     let postResponse = this.http
      .post(`$this.baseUrl/oauth/token?`, data, headers: 
         this.getHeaders())
       .toPromise()
      .then(this.mapResult);
     return postResponse;

当我执行 Post 调用时，

XMLHttpRequest 无法加载 http://localhost:8080/OAuth2Example/oauth/token?/。 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:4200” 使用权。响应的 HTTP 状态代码为 401。

我在控制台看到的这个错误。

我有一个邮递员集合快照来快速确定我需要什么，我从邮递员那里获得了 oauth2，如下所示。

这正是我需要从 angular 2 中获取的。

谢谢，

【问题讨论】：

http://localhost:8080/SpringSecurityOAuth2Example/oauth/token?/ 是实际显示的文字路径吗？因为token?/ 部分看起来像是一个错误。它也完全不匹配问题中显示的http.get 请求代码。并且该请求代码与问题开头显示的“POST URL”不匹配。所以很难弄清楚这里可能发生了什么，但无论如何，如果您发送该请求的服务器使用 401 响应该路径的 OPTIONS 请求，那么您将无法让浏览器甚至尝试该 POST 请求

无论如何要清楚，因为您的请求添加了一个 Authorization 标头，它会触发您的浏览器在尝试从您的代码中进行 POST 之前自动执行 CORS 预检 OPTIONS 请求。并且错误消息表明预检失败，因为对 OPTIONS 请求的响应是 401 而不是浏览器需要看到的 200 OK 或 204 才能认为预检成功。

Auth0 有一个非常好的分步文档来执行此操作和其他内容，在搜索第三方插件之前绝对需要阅读：auth0.com/blog/angular-2-authentication、auth0.com/docs/quickstart/spa/angular2/01-login、auth0.com/docs/quickstart/spa/angular2/01-login

试试.post(`$this.baseUrl/oauth/token`, data, headers: this.getHeaders())。即从请求 URL 的末尾删除?。

事情是我需要设置授权标头与客户端密码和用户名。稍后我需要使用用户的凭据登录。这正是我需要的。如果您阅读了正确的 oauth2 结构以与我分享 angular2，那么上述操作对我不起作用。

【参考方案1】：

如果任何插件在 angular2 或任何配置中可用，请 建议我！

当您要求 angular 2 时，有很多不同平台的示例，您可以点击此链接，该链接对我有用 LINK

你的例外看起来像关于 cors。

【讨论】：

正在寻找插件。

你浏览完整页了吗？

是的.. 他们谈论 JWT 令牌.. 但这里的问题是 oauth2 令牌。