IdentityServer4 move login UI на клиенте

Question

Я реализую IdentityServer4 с множеством клиентов. Один из клиентов - это приложение Javascript, я реализовал неявный поток для аутентификации, и все работает нормально.

В моем приложении Javascript у меня есть кнопка для входа в систему, как только я нажимаю на кнопку, я перенаправляюсь на IdentityServer, и после успешного входа я перенаправляюсь обратно в свое приложение вместе с токеном доступа.

Теперь, что я хочу сделать, переместите логин на клиентскую сторону, чтобы каждое приложение могло иметь свой собственный интерфейс входа в систему (со своей собственной темой).

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 - это анти-шаблон.