如何将IdentityServer4与带有ClientCredentials ASP.NET Core的Javascript客户端一起使用

Question

我正在实现IdentityServer4,我正在制作3个不同的proyects:

• IdentityServer(http:// localhost:5000)
• API(http:// localhost:5001)
• Javascript客户端(http:// localhost:5003)

所有项目都是使用ASP.NET Core创建的,但JS Client使用静态文件.

我需要JS Client只使用身份令牌(不是访问令牌)与API连接,因为我只需要访问API,我不需要管理用户身份验证.

我正在阅读快速入门帖子https://identityserver4.readthedocs.io/en/dev/quickstarts/1_client_credentials.html

在我阅读时,我认为我需要使用Implicit Grand Type,我不需要OpenID Connect,只需要OAuth2.

另外我读了这篇文章 https://identityserver4.readthedocs.io/en/dev/quickstarts/7_javascript_client.html 但他们使用访问令牌,我不需要它,连接到我正在使用的API oidc-client-js库https ://github.com/IdentityModel/oidc-client-js和我搜索使用Implicit Grand Type的方式,但我使用的方法将我重定向到http:// localhost:5000/connect/authorize页面(I认为这是我需要使用OpenID Connect的时候)

实现这一目标的最佳方法是什么？我错了什么？如何使用api进行认证并调用http:// localhost:5001/values

IdentityServer项目

Config.cs

public static IEnumerable<Client> GetClients()
        {
            return new List<Client>
            {
                new Client
                {
                    ClientId = "client",
                    ClientName = "JavaScript Client",
                    // no interactive user, use the clientid/secret for authentication
                    AllowedGrantTypes = GrantTypes.Implicit,
                    AllowAccessTokensViaBrowser = true,



                    RedirectUris = new List<string>
                    {
                        "http://localhost:5003/oidc-client-sample-callback.html"
                    },
                    AllowedCorsOrigins = new List<string>
                    {
                        "http://localhost:5003"
                    },

                    // scopes that client has access to
                    AllowedScopes = new List<string>
                    {
                        "api1"
                    }
                }
            };
        }

Startup.cs

    public void ConfigureServices(IServiceCollection services)
    {
        // configure identity server with in-memory stores, keys, clients and scopes
        services.AddDeveloperIdentityServer()
            .AddInMemoryScopes(Config.GetScopes())
            .AddInMemoryClients(Config.GetClients());
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(LogLevel.Debug);
        app.UseDeveloperExceptionPage();

        app.UseIdentityServer();
    }

API项目

Startup.cs

public void ConfigureServices(IServiceCollection services)
{

    // Add framework services.
    services.AddMvc();

    services.AddSingleton<ITodoRepository, TodoRepository>();

    services.AddCors(options =>
    {
        // this defines a CORS policy called "default"
        options.AddPolicy("default", policy =>
        {
            policy.WithOrigins("http://localhost:5003")
                .AllowAnyHeader()
                .AllowAnyMethod();
        });
    });

    services.AddMvcCore()
        .AddAuthorization()
        .AddJsonFormatters();


}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();

    app.UseCors("default");

    app.UseIdentityServerAuthentication(new IdentityServerAuthenticationOptions
    {
        Authority = "http://localhost:5000",
        ScopeName = "api1",

        RequireHttpsMetadata = false
    });

    app.UseMvc();

}

ValuesController.cs

[Route("api/[controller]")]
    [Authorize]
    public class ValuesController : Controller
    {
        // GET api/values
        [HttpGet]
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value3" };
        }

        // GET api/values/5
        [HttpGet("{id}")]
        public string Get(int id)
        {
            return "value";
        }
}

Javascript客户端项目

OIDC-客户sample.html

<!DOCTYPE html>
<html>
<head>
    <title>oidc-client test</title>
    <link rel='stylesheet' href='app.css'>
</head>
<body>
    <div>
        <a href='/'>home</a>
        <a href='oidc-client-sample.html'>clear url</a>
        <label>
            follow links
            <input type="checkbox" id='links'>
        </label>
        <button id='signin'>signin</button>
        <button id='processSignin'>process signin response</button>
        <button id='signinDifferentCallback'>signin using different callback page</button>
        <button id='signout'>signout</button>
        <button id='processSignout'>process signout response</button>
    </div>

    <pre id='out'></pre>

    <script src='oidc-client.js'></script>
    <script src='log.js'></script>
    <script src='oidc-client-sample.js'></script>
</body>
</html>

OIDC-客户sample.js

///////////////////////////////
// UI event handlers
///////////////////////////////
document.getElementById('signin').addEventListener("click", signin, false);
document.getElementById('processSignin').addEventListener("click", processSigninResponse, false);
document.getElementById('signinDifferentCallback').addEventListener("click", signinDifferentCallback, false);
document.getElementById('signout').addEventListener("click", signout, false);
document.getElementById('processSignout').addEventListener("click", processSignoutResponse, false);
document.getElementById('links').addEventListener('change', toggleLinks, false);

///////////////////////////////
// OidcClient config
///////////////////////////////
Oidc.Log.logger = console;
Oidc.Log.level = Oidc.Log.INFO;

var settings = {
    authority: 'http://localhost:5000/',
    client_id: 'client',
    redirect_uri: 'http://localhost:5003/oidc-client-sample-callback.html',
    response_type: 'token',
    scope: 'api1'
};
var client = new Oidc.OidcClient(settings);

///////////////////////////////
// functions for UI elements
///////////////////////////////
function signin() {
    client.createSigninRequest({ data: { bar: 15 } }).then(function (req) {
        log("signin request", req, "<a href='" + req.url + "'>go signin</a>");
        if (followLinks()) {
            window.location = req.url;
        }
    }).catch(function (err) {
        log(err);
    });
}
function api() {
    client.getUser().then(function (user) {
        var url = "http://localhost:5001/values";

        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.onload = function () {
            log(xhr.status, JSON.parse(xhr.responseText));
        }
        xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);
        xhr.send();
    });
}

OIDC-客户采样callback.html

<!DOCTYPE html>
<html>
<head>
    <title>oidc-client test</title>
    <link rel='stylesheet' href='app.css'>
</head>
<body>
    <div>
        <a href="oidc-client-sample.html">back to sample</a>
    </div>
    <pre id='out'></pre>
    <script src='log.js'></script>
    <script src='oidc-client.js'></script>
    <script>
            Oidc.Log.logger = console;
            Oidc.Log.logLevel = Oidc.Log.INFO;
            new Oidc.OidcClient().processSigninResponse().then(function(response) {
                log("signin response success", response);
            }).catch(function(err) {
                log(err);
            });
    </script>
</body>
</html>

Answer 1

据我所知，您的代码应该可以工作，它可以完成所有操作。

1. 您的 JavaScript 应用程序 (localhost:5003) 请求令牌 ( function signin())。这将导致重定向到 IdentityServer
2. IdentityServer (localhost:5000) 已设置，并且客户端设置 (Client.cs) 与请求匹配。尽管缺少用户和资源的配置：请参阅此处：https: //github.com/IdentityServer/IdentityServer4.Samples/blob/release/Quickstarts/3_ImplicitFlowAuthentication/src/QuickstartIdentityServer/Startup.cs
3. 您的 JavaScript 应用程序有一个正确的“登录页面”，这是 IdentityServer 在成功登录后重定向回来的页面。该页面获取新发行的token ( new Oidc.OidcClient().processSigninResponse())
4. 您的 JavaScript 应用程序随其 API 请求发送令牌 ( xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);)
5. 您的 API (localhost:5001) 已正确设置并将针对您的 IdentityServer 进行授权

所以我认为代码是正确的，但对术语存在一些误解。

• 您需要隐式授予。忘记 ClientCredentials，因为它是为另一个工作流程设计的，不应该在浏览器中使用，因为客户端机密正在暴露。这意味着任何人都可以发行有效的令牌（“窃取”），并且您的安全性会受到损害。（如果必须使用 ClientCredentials，请创建服务器代理方法）。
• 您需要 OpenID Connect (OIDC) 和 OAuth2。（这些不是准确的定义！）OIDC 为您颁发令牌（“让用户登录”），而 OAuth2 验证令牌。别担心，IdentityServer 会处理这一切。
• 您需要访问令牌。为请求者（您的 localhost:5003 JavaScript 应用程序）颁发身份令牌，访问令牌应“转发”到 API（您的 localhost:5001 API）
• “登录”的重定向是正常的。这是 Web 应用程序的典型工作流程：您离开应用程序 (localhost:5003) 并最终到达 IdentityServer ( http://localhost:5000 )。成功登录后，您将被重定向回您的应用程序 (localhost:5003)