Web API 安全 javascript 客户端答案

【问题标题】：Web API securisation javascript clientWeb API 安全 javascript 客户端
【发布时间】：2020-01-24 16:02:57
【问题描述】：

我有一个 ASP .Net core razor pages 应用程序，它被配置为使用 IdentityServer 4 与 Windows 提供程序进行身份验证。此剃须刀页面 Web 应用程序可以联系管理所有业务逻辑的 .Net 核心 Web API（单独的项目）。

Razor 页面包含执行对此 Web API 的 AJAX 请求的 Javascript。目前我正在使用剃须刀页面控制器作为代理，因此 javascript 调用调用 Web API 的剃须刀页面控制器。一切正常，但我想直接从 javascript 调用 Web API 并保护这部分。

在我的 razor pages Web 应用程序中，我可以访问用户声明，并且可以管理授权以检查是否允许用户联系 Web API 以获取更新。如何保护我的 Web API 并允许直接 Javascript 调用？

谢谢。

【问题讨论】：

欢迎来到 Stack Overflow。我没有直接查看 IS4，但调用 API 控制器应该与调用 Razor 页面（更改路径）相同。你在设置验证令牌吗？

标签： javascript asp.net-mvc asp.net-core-webapi identityserver4 razor-pages

【解决方案1】：

正如您在问题中提到的那样，您使用 IdentityServer4 作为授权提供者

您可以使用以下方式。

Adding a javascript client

Javascript 文件模板 oidc-client JavaScript files

HTML

 <html> <head>
     <meta charset="utf-8" />
     <title></title> </head> <body>
     <button id="login">Login</button>
     <button id="api">Call API</button>
     <button id="logout">Logout</button>

     <pre id="results"></pre>

     <script src="oidc-client.js"></script>
     <script src="app.js"></script> </body> </html>

JavaScript：

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

使用UserManagerClass 连接到 IdentityServer4

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

在 WebApi 部分：为javascript客户端添加一个新客户端。

// JavaScript Client
new Client
{
    ClientId = "js",
    ClientName = "JavaScript Client",
    AllowedGrantTypes = GrantTypes.Code,
    RequirePkce = true,
    RequireClientSecret = false,

    RedirectUris =           { "http://localhost:5003/callback.html" },
    PostLogoutRedirectUris = { "http://localhost:5003/index.html" },
    AllowedCorsOrigins =     { "http://localhost:5003" },

    AllowedScopes =
    {
        IdentityServerConstants.StandardScopes.OpenId,
        IdentityServerConstants.StandardScopes.Profile,
        "api1"
    }
}

更多关于how to add new client的参考

更新： Ajax 调用 Identity Server 并获取 Token

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://localhost:5000/connect/token",
  "method": "POST",
  "headers": {
    "content-type": "application/x-www-form-urlencoded",
    "cache-control": "no-cache",
    "postman-token": "a19f4ba3-b5aa-c61a-8078-c1a6ee39d5df"
  },
  "data": {
    "grant_type": "password",
    "username": "Test1@test.com",
    "password": "123456",
    "client_id": "client",
    "client_secret": "client123",
    "scope": "scope1"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

【讨论】：

这种方法的问题是重定向，当用户进入应用程序时，只有当用户通过身份验证时才会从服务器呈现一个剃刀页面（这是 Index.cshtml ）。在此页面中，当文档准备好时，我对 web api 进行了 AJAX 调用，并且根据用户操作进行了其他 javascript 调用。有没有办法通过javascript调用验证用户而无需重定向？我想留在主页上，因为它只是 javascript 正在呈现的一部分。
您的意思是说您的用户在 index.cshtml 上通过了身份验证？您可以在 javascript 中获取授权令牌并将其传递给您的 Ajax 调用。无需重定向
是的，当页面呈现时，这意味着用户已通过身份验证。如何从 Ajax 调用传递授权令牌？
从服务器端变量，你可以把token拿到javascript变量var cleintSideTokenVariable= @Html.Raw(tokenvariableServerSide); // declare a javascript variable参考stackoverflow.com/a/53446977/7262120
好的，但是如何将此令牌传递给 Web API？在 ajax 请求标头中？你能举个例子吗？