IdentityServer4在客户端上移动登录UI

Question

我正在使用各种客户端实现IdentityServer4,其中一个客户端是一个Javascript应用程序,我已经实现了隐式流程进行身份验证,一切正常.

在我的Javascript应用程序上,我有一个登录按钮,一旦我点击按钮,我被重定向到IdentityServer,成功登录后,我被重定向回我的应用程序以及我的访问令牌.

现在我想要做的是,将登录名移到客户端,这样每个应用程序都可以拥有自己的登录UI(具有自己的主题).

app.js

function log() {
    document.getElementById('results').innerText = "";

    Array.prototype.forEach.call(arguments, function (msg) {
        if (msg instanceof Error) {
            msg = "Error:" + msg.message;
        }
        else if (typeof msg !== 'string') {
            msg = JSON.stringify(msg, null, 2);
        }

        document.getElementById('results').innerHTML += msg + "\r\n";
    });
}

document.getElementById("login").addEventListener('click', login, false);
document.getElementById('api').addEventListener('click', api, false);
document.getElementById("logout").addEventListener("click", logout, false);

//configure client
var config = {
    authority: "http://localhost:5000",
    client_id: "js",
    redirect_uri: "http://localhost:5004/callback.html",
    response_type: "id_token token",
    scope: "openid profile api1 role",
    post_logout_redirect_uri: "http://localhost:5004/index.html"
};

//init user manager
var mgr = new Oidc.UserManager(config);

//check if user is logged in already

mgr.getUser().then(function (user) {
    if (user) {
        log("User logged in", user.profile);
    } else {
        log("User is not logged in.");
    }
});

function login() {
    mgr.signinRedirect();
}

function api() {
    mgr.getUser().then(function (user) {
        var url = "http://localhost:5001/identity/getfree";

        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();
    });
}

function logout() {
    mgr.signoutRedirect();
}

IdentityServer StartUp.cs

 public void ConfigureServices(IServiceCollection services)
        {
            // Add framework services.
            var connectionString = "Server=localhost;port=3306;database=netcore;uid=root;Password=Liverpool1";
            services.AddApplicationInsightsTelemetry(Configuration);
            services.AddDbContext<ApplicationDbContext>(options => options.UseMySQL(connectionString));

            services.AddIdentity<ApplicationUser, IdentityRole>()
                .AddEntityFrameworkStores<ApplicationDbContext>()
                .AddDefaultTokenProviders();

            services.AddMvc();

            // Add application services.
            services.AddTransient<IEmailSender, AuthMessageSender>();
            services.AddTransient<ISmsSender, AuthMessageSender>();

            services.AddIdentityServer()
                  .AddTemporarySigningCredential()
                    .AddInMemoryScopes(Config.GetScopes())
                    .AddInMemoryClients(Config.GetClients())
                  // .AddConfigurationStore(builder => builder.UseMySQL(connectionString))
                  //.AddOperationalStore(builder => builder.UseMySQL(connectionString))
                  .AddAspNetIdentity<ApplicationUser>();
        }

Answer 1

这是不可能的,并且打破了隐式流的所有点和所有其他联合签名流.隐式流程的重点是您不通过客户端传递用户凭据,而是转到身份提供者.

您有两种选择:

1. 找出一种方法,在ASP.NET Core中为每个"租户"提供不同的登录.
2. 使用资源所有者流并通过客户端传递用户凭据.

选项1可能是最好的,但需要更多的工作,选项2是一个警察,使用RO流是一种反模式.