Web API安全化javascript客户端_Javascript_Asp.net Mvc_Asp.net Core Webapi_Identityserver4_Razor Pages

Web API安全化javascript客户端

javascript asp.net-mvc identityserver4

Web API安全化javascript客户端,javascript,asp.net-mvc,asp.net-core-webapi,identityserver4,razor-pages,Javascript,Asp.net Mvc,Asp.net Core Webapi,Identityserver4,Razor Pages,我有一个ASP.Net core razor pages应用程序，配置为使用IdentityServer 4与windows提供程序进行身份验证。允许此razor pages web应用程序联系管理所有业务逻辑的.Net核心web API（单独的项目） Razor页面包含Javascript，用于执行对该Web API的AJAX请求。目前我使用razor页面控制器作为代理，因此javascript调用razor页面控制器，后者调用Web API。一切正常，但我想直接从javascript调用We

我有一个ASP.Net core razor pages应用程序，配置为使用IdentityServer 4与windows提供程序进行身份验证。允许此razor pages web应用程序联系管理所有业务逻辑的.Net核心web API（单独的项目）

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

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

谢谢。

正如您在问题中提到的，您正在使用

IdentityServer 4

作为授权提供程序

您可以使用以下方法

Javascript文件模板

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>

使用

UserManager

类连接到IdentityServer 4

 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"
    }
}

更多关于

更新日期： Ajax调用Identity Server并获取令牌

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）的情况下，服务器才会呈现一个razor页面。在这个页面中，当文档准备就绪时，我有一个对webapi的AJAX调用，其他javascript调用取决于用户的操作。有没有一种方法可以在不重定向的情况下通过javascript调用对用户进行身份验证？我想留在主页上，因为它只是javascript呈现的一部分。你的意思是说你的用户在index.cshtml上经过身份验证吗？您可以使用javascript获取授权令牌，并将其传递给Ajax调用。无需重定向是的，当呈现页面时，表示用户已通过身份验证。如何从Ajax调用传递授权令牌？从服务器端变量，可以将令牌传递到javascript变量

var cleintSideTokenVariable=@Html.Raw（tokenvariableServerSide）；//声明一个javascript变量

以供参考Ok，但如何将此令牌传递给web API？在ajax请求头中？你能给我举个例子吗？欢迎来到堆栈溢出。我没有看过IS4 directy，但是调用API控制器应该与调用Razor页面（通过更改路径）相同。您正在设置验证令牌吗？

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