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

编程问答 2022-06-05

问题描述

我的问题陈述是：用户将登录到IdentityServer，使用由IdentityServer发出的访问令牌调用We​​b 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对象具有一个配置文件属性，其中包含该用户的声明。添加以下代码以检测用户是否登录到JavaScript应用程序：

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

接下来，我们要实现login，api和logout函数。 UserManager提供用于登录用户的signinRedirect和用于注销用户的signoutRedirect。我们在上面的代码中获得的User对象也具有access_token属性，可用于对Web API进行身份验证。 access_token将通过带有承载方案的Authorization标头传递到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",};
var mgr = new Oidc.UserManager(config);

解决方法

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

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

使用令牌，您仍然可以使用mgr.getUser()函数获取公开的用户信息。

identityserver4identityserver4javascriptopenid-connectusermanagerusermanager