支付宝网站开发流程,能解析国外网站的dns,文化创意设计公司,注册公司每年需要缴纳什么费用有很多方法可以向您的应用程序添加身份验证。虽然OAuth是最常见的一种#xff0c;但这并不是您唯一的选择。今天#xff0c;我将向您展示如何通过React和.NET Core简单地完成Windows身份验证。探索我们的选择在深入探讨之前#xff0c;让我们简要讨论一些可用的其他选项。了… 有很多方法可以向您的应用程序添加身份验证。虽然OAuth是最常见的一种但这并不是您唯一的选择。今天我将向您展示如何通过React和.NET Core简单地完成Windows身份验证。探索我们的选择在深入探讨之前让我们简要讨论一些可用的其他选项。了解您的选择可以使您根据自己的情况做出最佳受过良好教育的决定。这绝不是关于替代方案的详尽讨论而只是其中一些较流行的替代方案。Okta是一家身份和访问管理公司提供基于云的解决方案。他们有Active Directory的插件/提供程序。他们的站点包含一个教程如何开始向您的React应用程序添加身份验证。在商业解决方案方面该解决方案经常被推荐使用。Auth0是另一个具有良好关注度的商业解决方案。他们有专门针对将Active Directory / LDAP与React结合使用的教程。IdentityServer是开源替代方案。就像其他人一样他们提供了有关如何实施Windows身份验证的说明。他们有一个有关如何实现javascript客户端例如React的示例。这是有关在Identity Server 4中使用SPA反应/角度UI的文章。当然我们今天在这里讨论的选择是推出您自己的解决方案。为什么不选择交钥匙解决方案尽管您的原因可能有所不同但我想出了一些原因。基础结构/资源不足无法设置服务适用于Identity Server 4。资金/预算不足无法支付SAAS提供商的费用。您位于防火墙之内并且React和.NET应用程序都位于同一网络上。您喜欢挑战和/或喜欢重新发明轮子哈好的也许最后一个有点有趣。一般来说使用交钥匙解决方案是最好的选择但不是您的选择。在我遇到的这个特殊用例中这不是我想要的。然而。入门为了构建此应用程序我们需要两件事.NET Core API项目–该项目将处理身份验证授权以及API调用React应用程序–该项目是我们的GUI我为该项目学习和应用的东西是Google-fu精通和反复试验编码的结合。希望汇总我的经验将使您我的读者比我更容易。我首先创建一个文件夹来包含我的API和React项目然后运行dotnet new api -o ReactWindowsAuth以搭建一个新的API项目。这实际上是一个谎言我使用VS来创建应用程序但是我们假装使用了CLI。从那里开始我运行npm create-react-app test-app了一个名为的基本React应用程序test-app。就个人而言我喜欢将Visual Studio用于.NET代码将VSCode用于几乎所有其他内容因此我在VS中打开了新的API项目并生成了解决方案文件。从这里开始我们现在可以开始使用React和.NET Core实施Windows身份验证了框架.NET Core API我们需要做的第一件事就是确保我们的应用程序以Windows身份验证运行。由于我使用VS生成了项目并提供了Docker支持因此我不得不做一些您可能不需要做的事情。启用Windows身份验证我要做的第一件事是将调试启动器从Docker切换到IIS Express。切换默认启动接下来我需要打开我的launchSettings.json并windowsAuthentication: true在iisSettings下进行设置。启用Windows身份验证好吧让我们稍等一秒钟。为了使Windows身份验证起作用您将需要在IIS或IIS Express中进行托管。您也可以使用Kestrel和HTTP.sys托管来完成此操作但出于本文的方便让我们集中讨论IIS Express。如果您想使它在Docker和/或Linux上运行您将要使用Kestrel。我们的应用程序现在可以与Windows身份验证一起使用了但是如果我们现在启动它它仍然不会使用。我们还有很多工作要做。配置Windows身份验证现在我们已经设置了API以通过IIS使用Windows身份验证我们需要使API本身意识到这一点。为此我们需要对进行一些调整Startup.cs。MSDN上有文档但我们也可以在这里进行阅读。您需要做的第一件事是services.AddAuthentication(IISDefaults.AuthenticationScheme);在您的ConfigureServices方法中添加任何位置。这利用了Microsoft.AspNetCore.Server.IISIntegration命名空间。添加Windows身份验证接下来您需要配置Windows身份验证需要保护哪些控制器或动作。顺便说一下这就是为什么我们anonymousAuthentication: true独自留在launchSettings.json。这里的一个用例是如果您使用的是Swagger并且希望匿名访问文档并且仅保护API本身。在我的用例中我假装我希望所有API控制器都需要身份验证。鉴于此我创建了一个WebControllerBase.cs并用[Authorize]属性对其进行了装饰。请注意您可以改为用[Authorize]标记每个控制器。就是说我的理由实际上是押韵的在以后的第二部分中我将进一步阐述这个想法。现在只需滚动即可。WebControllerBase将[Authorize]标记为需要身份验证接下来只需让我们现有的控制器和新控制器继承自WebControllerBase而不是即可ControllerBase。现在我们现有的控制器继承自WebControllerBase在网络上的其他示例中您可能会看到人们说您需要添加app.UseAuthentication()该Configure(IApplicationBuilder app, IWebHostEnvironment env)方法。如果仅针对IIS / IIS Express则不会。也就是说添加它不会伤害您。我不会判断你是否愿意。我的源代码有它。测试一下现在我们可以对其进行测试了。在WeatherForecastController顶部打一个断点以调试模式获取并运行Web应用程序。达到断点时添加监视HttpContext.User并向下钻取.Identity.Name。可选只需在方法顶部添加此行var user HttpContext.User?.Identity?.Name ?? N/A;并查看结果。您的应用程序现在正在报告您当前的Windows用户名对吗哇等等您还没有完成我们已经接近了但是如果我们想在React中使用它我们还有很多工作要做。CORS。别说了。什么是CORSCORS是跨域资源共享这是您要允许[this]访问[that]的一种非常真实的方式。在现实世界中默认情况下将浏览器配置为禁止通过脚本发起的HTTP请求除非接收端明确允许。所以……让我们做一下这样这个API可以接受来自React应用程序的CORS请求对吧我们不会在这里变得很花哨。为了使此操作生效我们需要在中添加一些设置appsettings.json然后在中进行其他设置Startup.cs。appsettings.json首先我们去appsettings.json添加以下内容CorsOrigins: [ http://localhost:3000 ],。是的它是数组类型。为什么主要是因为它为您提供了选择。假设在开发中我打开了通往机器的通道以便某人甚至我可以从另一台设备访问该应用程序。显然它们不会通过本地主机名或IP地址连接到localhost。所有这些都是我可能要设置的选项。启动文件接下来我们需要将CORS添加到我们的服务和中间件中。在ConfigureServices中请添加以下代码// add this class somewhere outside of the Startup class
public class Constants
{
public const string CORS_ORIGINS CorsOrigins;
}services.AddCors(opt
{
opt.AddPolicy(CorsPolicy, builder builder.AllowAnyHeader().AllowAnyMethod().WithOrigins(Configuration.GetSection(Constants.CORS_ORIGINS).Getstring[]()).AllowCredentials());
});此代码的简要说明。它允许传递任何标头使用任何http方法GETPOSTPUTDELETE等必须来自配置中特定的来源之一并允许在标头中传递凭据。在您自己的应用程序中您可以更改许多设置。您可能不会更改其中任何一个。至少您现在知道它们了。接下来我们需要添加app.UseCors(CorsPolicy)到我们的Configure(app, env)方法中。请注意这是中间件和中间件顺序。在这种情况下它需要跟从app.UseRouting()但在此之前app.UseAuthentication()和app.UseAuthorization()。顺便说一句如果您添加了中间件但中间件工作不正常则应检查其注册顺序。现在使用app.UseCors“ CorsPolicy”配置方法现在我们准备好让我们的React应用程序与Windows身份验证挂钩了带有React的Windows身份验证–连接起来对此感到兴奋吗我知道我是。这比您想象的要容易。准备好了吗您需要做的就是在fetch请求中添加两个属性credentials: include和mode: cors。将会发生的情况是如果您访问的站点与您不在同一域或计算机上则浏览器将提示您输入该Active DirectoryLDAP或计算机实例的凭据。成功进行身份验证后浏览器将其存储以备将来使用。如果您在完全相同的计算机或域上则不会提示凭据。话虽如此您可以并且可能应该设置服务f调用的方式因此不必在各处都输入相同的垃圾。当我第一次开始使用React时我很快意识到设置一些获取帮助程序来启动它比较容易。我意识到的第二件事是在React代码中将所有.NET API控制器与“服务”进行匹配更加容易。考虑到这一点让我们看一下我的提取帮助器和示例服务。fetch-helpers.js这是我在此测试应用程序中拥有的一些基础知识export const handleResponse (response) {return response.text().then((text) {const data text JSON.parse(text);if (!response.ok) {const error (data data) || response.statusText;return Promise.reject(error);}return data;});
};export const requestBase (() {if (typeof window ! undefined) {return {method: POST,credentials: include,mode: cors,headers: new Headers({Accept: application/json,Content-Type: application/json,}),};} elsereturn {method: POST,credentials: include,// mode: cors,headers: {Accept: application/json,Content-Type: application/json,},};
})();值得注意的是requestBase如果它不是NodeJS经过渲染的React则可以具有不同的返回对象。很难发现差异但是无浏览器版本将标头设置为Headers对象的实例而浏览器版本仅设置JSON对象。weather-api.js接下来让我们看看我们的服务如何使用fetch-helpers。首先下面的apiBase是完整的URL。显然您不会这样做但实际上会将React的baseUrl设置为更高的级别通常在HTML级别。这是示例代码请加一点盐。import { handleResponse, requestBase } from ../_helpers;const apiBase https://localhost:44387/weatherforecast;class WeatherForecastService {getForecasts() {let request Object.assign({}, requestBase, { method: GET });let url ${apiBase};return fetch(url, request).then(handleResponse);}getProtectedForecast() {let request Object.assign({}, requestBase, { method: GET });let url ${apiBase}/5;return fetch(url, request).then(handleResponse);}
}const instance Object.freeze(new WeatherForecastService());
export { instance as WeatherForecastService };我在这里所做的只是公开我希望React可以访问的方法将它们包装在baseRequestfrom的周围并fetch-helpers使用我的handleResponsefrom 来处理响应fetch-helpers然后传递回调用方。最后但同样重要的是将其连接起来现在我们已经铺设了所有管道现在该连接所有东西了。我只是直接编辑App.js。告我。对于该示例我将导入所有三个API服务文件然后const为我要处理的每个按钮设置一些功能。其中的每一个都仅注销到控制台而不用花费大量精力。最后当然是按钮本身。由于该文件在修改后相当庞大因此我仅摘录了按钮事件之一以及调用它的React按钮组件本身。const getProtectedForecast () {
console.log(attempting...);WeatherForecastService.getProtectedForecast().then((response) {
console.log(response: , JSON.stringify(response));
console.log(oh boy!);}).catch((err) {
console.error(err);});
};button typebutton onClick{getProtectedForecast}
Get protected forecast
/button重要环节– Windows身份验证基于角色的安全性虽然上述设置是非常基本的但它缺少一个非常重要的部分不是吗基于角色的安全性。在这里考虑一下此内容这是对第2部分的非常简短的介绍而我将在不久的将来写一篇文章。如果你已经点击周围的代码而阅读这篇文章你可能已经注意到在Startup.cs以下行ConfigureServicesservices.AddTransient();。如果您没有注意到它那是可以的因为我现在将谈论它。在对用户进行身份验证之后但在获得授权之前授权提供者将调用您的自定义IClaimsTransformation实现如果提供。参见MSDN。在我的实现中位于中ClaimsTransformer您将看到我只是在随意添加角色“ Super-awesome”作为我们WindowsIdentity用于其声明类型的相同声明类型。IClaimsTransformation的ClaimsTransformer实现者接下来您可能已经注意到WeatherForecastController我添加了一个GetAnother方法调用该方法调用需要“超级棒”角色。在此之下我还添加了一种GetFail方法该方法将始终失败因为用户不在“管理员”角色中。这些方法都没有连接到React应用程序中并且要求您直接在浏览器中单击它们以查看它们是否有效或可能无效。基于Controller动作的基于角色的Windows身份验证结论将Windows身份验证连接到您的React应用程序并不困难。这也是非常基本的。交钥匙解决方案可以使您走得更快更远但是如果您没有基础设施或现金仍然可以自己动手做。和往常一样我博客文章中的代码可以在GitHub上找到。
