将 JavaScript 客户端添加到 Identity Server 4 并使用用户名和密码登录

Question

我的问题陈述是：用户将登录到 IdentityServer，使用 IdentityServer 颁发的访问令牌调用 Web API，然后注销 IdentityServer。所有这些都将由浏览器中的 JavaScript 运行驱动。

我找到的最接近的 link 是 https://docs.identityserver.io/en/latest/quickstarts/4_javascript_client.html

我要求您在回答之前先完成 link。现在，我有一个 API /connect/token，它接受用户名、密码、client_id、client_secret、范围 & grant_type & returns 和 access_token & 然后我将访问令牌用于每个其他请求作为授权承载。

如何使用 UserManager 将我的 API 与 OIDC 集成？

link 说它使用以下代码登录用户，但我无法理解它如何在不获取其凭据的情况下登录用户？

var config = {
    authority: "https://localhost:5001",
    client_id: "js",
    redirect_uri: "https://localhost:5003/callback.html",
    response_type: "code",
    scope:"openid profile api1",
    post_logout_redirect_uri : "https://localhost:5003/index.html",
};
var mgr = new Oidc.UserManager(config);

接下来，UserManager 提供一个 getUser API 来了解用户是否登录到 JavaScript 应用程序。它使用 JavaScript Promise 异步地 return 结果。 returned 用户 object 有一个配置文件属性，其中包含用户的声明。添加此代码以检测用户是否登录到 JavaScript 应用程序：

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

接下来，我们要实现登录、api、退出功能。 UserManager 提供了一个 signinRedirect 来让用户登录，以及一个 signoutRedirect 来让用户注销。我们在上面的代码中获得的用户 object 还有一个 access_token 属性可用于对 Web API 进行身份验证。 access_token 将使用承载方案通过授权 header 传递到网络 API。添加此代码以在我们的应用程序中实现这三个功能：

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

function api() {
    mgr.getUser().then(function (user) {
        var url = "https://localhost:6001/identity";

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

我正在寻找这样的东西（作为回应，经理应该包含用户 & access_token）：

var config = {
    authority: "https://localhost:5001/connect/token",
    **username: "Username",
    password: "Password",**
    client_id: "js",
    redirect_uri: "https://localhost:5003/callback.html",
    response_type: "code",
    scope:"openid profile api1",
    post_logout_redirect_uri : "https://localhost:5003/index.html",
};
var mgr = new Oidc.UserManager(config);

Answer 1

您想要实现的目标将无法实现。 IdentityServer4 基于 OAuth2，其理念是用户不必在您的客户端应用程序中输入其凭据，而只需在授权机构的登录页面上输入即可。

mgr.signinRedirect() 将用户重定向到用户登录权限的登录页面。在整个登录过程中，您的应用程序本身不会处理用户凭据，而只会接收令牌作为结果。这是 OAuth2 的基本思想。

有了token，您仍然可以通过mgr.getUser()函数获取暴露的用户信息

将 JavaScript 客户端添加到 Identity Server 4 并使用用户名和密码登录

Add a JavaScript client to IdeniityServer4 & logging using username & password

javascript

identityserver4

openid-connect

usermanager