将 IdentityServer3 与单页应用程序一起使用 (UseIdentityServerBearerTokenAuthentication)

Question

背景

我正在使用这些技术来保护 WebApi 应用程序：

• ThinkTecture.IdentityServer3
• OWIN（蔚蓝）
• 单页应用程序 - javascript 客户端
• 参考简单的 OAuth2 演练示例 (github)

在上面的示例中，.NET 控制台应用程序客户端从 IdentityServer 请求令牌并使用它来访问 WebApi 应用程序。这在示例中工作正常。

我想将 .NET 控制台应用程序客户端更改为 javascript 单页应用程序客户端。我已经尝试添加一个代理登录控制器，它代表 javsacript 客户端向 IdentityServer 发出请求，并 returns 将令牌返回给 cookie 中的客户端。

代码

[HttpPost]
[Route("login")]
public HttpResponseMessage Login(LoginRequest request) // Proxy to IdentityServer3
{

    var tokenClient = new TokenClient(
            "https://localhost:44333/connect/token",
            "javascript client",
            "client secret");

    var tokenResponse = _tokenClient.RequestResourceOwnerPasswordAsync(request.username, request.password, "api1").Result;

    var cookie = new CookieHeaderValue("access_token", tokenResponse.AccessToken);
    cookie.Expires = DateTimeOffset.Now.AddDays(1);
    cookie.Domain = "localhost";
    cookie.Path = "/";            
    var response = new HttpResponseMessage();
    response.Headers.AddCookies(new CookieHeaderValue[] { cookie });
    return response;
}

我在 javascript 客户端中成功取回了访问令牌，但是 API 无法识别它。

问题

如何将 IdentityServer 生成的令牌传递给 javascript 应用程序，以及如何使用它来访问 WebApi？

Answer 1

假设您的令牌终点是“https://localhost:44333/connect/token”（如您所述）。使用带有 body 的 POST 请求命中该端点，如下所示将 return 一个令牌：

grant_type=password&client_id=youtclientid&client_secret=yourclientsecret&username=yourUserName&password=YourPassword&scope=list_of_requested_scopes

您使用一个 JS 变量来存储您的令牌，然后为了使用该令牌访问受保护的 API，您必须将其作为请求中 header 的一部分发送，类似于以下内容: 在您的请求 header 中，您将拥有：

Authorization: Bearer eyJ0eXAiOiJKV...

其中 "eyJ0eXAiOiJKV..." 是您在第一步中收到的令牌。

Answer 2

使用 oidc-client.js 或在这些行上创建类似的东西，因为这个 js 库很大。

检查此 link。 https://github.com/IdentityModel/oidc-client-js/tree/master/sample

和视频 https://vimeo.com/131636653

我们正在使用 IdentityServer 基础设施进行初始登录，然后使用令牌 id/access 进行所有进一步的通信。