将 JavaScript 客户端添加到 IdeniityServer4 并使用用户名和密码进行日志记录

Posted 2023-02-25

【中文标题】将 JavaScript 客户端添加到 IdeniityServer4 并使用用户名和密码进行日志记录

【英文标题】：Add a JavaScript client to IdeniityServer4 & logging using username & password

【发布时间】：2021-02-12 18:32:53

【问题描述】：

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

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

我要求您在回答之前先浏览该链接。现在，我有一个 API /connect/token，它接受用户名、密码、client_id、client_secret、scope 和 grant_type 并返回一个 access_token，然后我将该访问令牌用作其他所有请求作为授权承载。

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

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

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 异步返回结果。返回的 User 对象有一个 profile 属性，其中包含用户的声明。添加此代码以检测用户是否登录到 JavaScript 应用程序：

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

接下来，我们要实现登录、api和注销功能。 UserManager 提供了一个 signinRedirect 来让用户登录，以及一个 signoutRedirect 来让用户注销。我们在上述代码中获得的 User 对象还有一个 access_token 属性，可用于对 Web API 进行身份验证。 access_token 将通过带有承载方案的授权标头传递给 Web 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();

我正在寻找这样的东西（作为响应，mgr 应该包含用户和 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);

【参考方案1】：

你想要达到的目标是不可能的。 IdentityServer4 基于 OAuth2，其想法是用户不必在您的客户端应用程序中输入他的凭据，而只需在授权机构的登录页面上输入。

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

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