虽然O'Auth是最流行的,但这不是你唯一的选择。今天,我教你如何通过 React and..NET Core 简单完成Windows的识别。
探索我们的选择
在我们进一步讨论之前,让我们简要回顾一下其他一些可能性,了解你的选择,使你能够在个人情况中作出最佳(知情)决定,这绝不是全面概述其他选择,而只是一些最常见的选择。
Okta是一家管理身份识别和访问的公司。提供云服务。他们有一个活动目录插件/提供者 。他们的网站上可提供辅导。如何开始将认证添加到您的 React App 中 。在商业解决办法方面,经常建议使用这一解决办法。
Auth0是另一个有趣的商业选择。它们提供的课程是特别为将活动目录/LDAP与反应相结合而设计的。
身份服务员是一种自由和开放源码的解决办法。就像其他人一样，其中包括执行Windows识别指示。它们提供了一个如何创建名人客户的例子(例如反应)。这是关于如何使用身份服务器 4 的 SPA(反应/角)UI 的辅导。
当然,我们今天考虑的选项是 引入你自己的解决方案。
为什么不采用统包式解决办法呢?
虽然你的理由可能不同,但我相信有几个原因。
好吧,也许最后的更有趣一点。一般而言, 使用现成的解决方案是最好的选择, 但这不是你的选择。这不是我想要的, 在我遇到的具体例子中。
入门
我们需要两个设备来建造这个应用程序:
NET核心API项目C将处理登录、授权和API电话。
我们的图形用户界面(GUI)由反应应用程序C提供。
在这个项目中,我学到并使用的是谷歌-fu的掌握和反复测试代码的组合。 预计汇编我的经验将使你(我的读者)比我(我的读者)更简单。
我首先为我的 API 和 React 应用程序制作了一个文件夹 。然后着手建立一个新的API项目。这确是虚伪。我用视觉工作室来制造应用程序。尽管如此,我们还是假装利用CLI。从那里开始，我启动了一个简单的反应应用程序。就个人而言，我喜欢和微软工作室合作 网络代码VSCode几乎可用于其他每一种内容。所以我在视觉工作室创建了一个新的 API项目 并创建了一个解决方案文件。
从现在起,我们可以开始使用反应, 和.. NET Core 支持 Windows ID!
框架网核心API
第一步是确保我们的程序作为Winperformws运行。 因为我利用视觉工作室开发项目并给予Docker支持,我不得不做一些你可能不需要做的事。
打开 Windows 验证 。
第一步是将调试触发器从多克改为IIS Express。
切换默认启动
然后我打开我的 把它放下
打开 Windows 验证 。
好吧，让我们稍等一秒钟。要让 Windows 运行,您必须使用 IIS 或IIS Express 。要执行此程序, 您可以使用 Kestrel 和 HTTP. Soys 主机 。但出于本文的方便，让我们开始使用IIS快递。如果你想在Docker或Linux上运行它,你将带走凯斯特尔
我们的程序现在可以用 Winperformws 认证来使用, 但如果我们今天开始, 程序将不会被使用。 我们还有很多工作要做 。
设置 Windows 验证
现在我们已经配置了一个 API 来通过 IIS 验证 Windows, 我们需要让 API 了解这一点。 为此, 我们需要做出一些修改 。 MSDN 提供了一个文件, 但我们也可以在这里读读 。
第一步是使用命名空间在方法上添加任何位置。
包括 Windows 验证 。
接下来，您需要设置 Windows 验证需要保护哪些控制器或动作。顺便说一下，这就是为什么我们独自留在。这里的一个用例是，如果您使用的是Swagger，并且希望匿名访问文档并且仅保护API本身。
在我的用例中，我似乎希望所有API控制器都得到授权鉴于此，我创建了一个，然后用质量来美化它。请注意，要标记每个控制器, 请使用 [授权] 。就是说，我的理由确实有押韵意义。后来在第二部分,我稍后再详细谈这个现在，只需滚动即可。
标记 [授权] 在 Web 控制器库中需要认证 。
然后,让我们目前的控制者和新的控制者继承他们,而不是继承他们。
我们现有的控制器现在来自Web ConsultantsBase。
网络上的一些个人可能声称您需要添加这个方法。 而不是只为 IIS / IIS Express。 这意味着添加它不会伤害您。 如果您想要的话, 我不打算判断。 我的源代码包含它 。
测试一下！
现在，我们来测试一下天气预报主计长的顶端休息: 以调试模式获取和执行 Web 应用程序 。达到断点时，俯冲 并增加监视。(可选)在方法顶部添加这一行:并观察结果。您的程序现在显示您当前的 Windows 用户名,对吗？
等等,你还没完呢!
我们已经接近了，然而,如果我们想在反应中利用它,我们还有很多工作要做。CORS。别说了。什么是CORS？CORS是跨域资源共享的缩略语。这是一种非常真实的方法,允许[这 进入[这 。在现实世界中，默认情况下,浏览器设置为防止脚本启动 HTTP 请求 。除非接收端明确允许。
现在,让我们构建这个系统, 这样这个 API 就可以接受来自 React apps 的 CORS 请求, 对不对? 我们不会在这里变得太复杂。 为了让这个操作成功, 我们需要添加某些参数, 然后对它做更多的修改 。
appsettings.json
首先，现在让我们补充以下内容:是的，它是数组类型。为什么？这主要是因为它给了你一个选择假设在开发中，我打开了机器的门这样我的自我(甚至我) 就能用另一个设备来查看程序。显然，他们无法使用本地主机名或 IP 地址连接到本地主机 。所有这些都是我可能想要配置的设置 。
启动文件
接下来,我们需要在服务和中间产品中加入CORS。请在托管服务中加入以下代码:
// 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).Get())
.AllowCredentials());
});
此代码的简要说明。它可以通过任何指示。这是我第一次听说 一位处于紧急情况的女士POST，PUT，DELETE等），它必须来自配置指定来源之一 。也允许将文档传送到信头 。在你自己的节目里有几个参数可以修改。你不允许更改其中任何一项。至少 你现在知道他们是谁了
接下来,我们必须将它纳入我们的方法中。 请记住, 这是中间和中间的顺序。 在此情况下, 它必须前后来。 顺便说一句, 如果您包括中间, 中间的注册顺序如果运行不正确, 将会被验证 。
现在使用该应用程序。 配置 Cors (“ 政策 ” ) 。
我们现在准备将我们的“反应”应用程序与 Windows ID 连接起来!
Windows IDC 与反应集成!
我知道,这比你想象的简单,你准备好了吗?
您必须在请求中提供两个特性:和 。
将会发生的情况是，如果您访问的网址与您不在同一域(或计算机),浏览器将提示您输入活动目录证书,LDAP或计算机的例子。成功识别后,它保存在浏览器中,供今后使用。如果你都在同一台电脑或域名上则不会提示凭据。
话虽如此，您可以(而且也许应该)配置如何使用 services f 。因此,它不必在任何地方输入同样的垃圾。当我开始使用"反应"时我很快意识到，使用一些访问应用程序开始比较简单。我所意识到的第二点是将一切输入反应代码。 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",
}),
};
} else
return {
method: "POST",
credentials: "include",
// mode: 'cors',
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
};
})();
值得一提的是,如果不是 NodeJS( 重编), 它可能会返回另一个对象。 差异很难引起注意, 但是没有浏览器版本将页眉设置为页眉对象的例子, 而浏览器版本只是设置了 JSON 对象 。
weather-api.js
接下来，让我们来看看我们的服务 如何利用接货员。首先，整个 URL 在下面以 apibase 表示 。显然，您不会这样做，另一方面,反应基Url则在较高一级(通常在HTML一级)建立。这是示例代码，请加一点盐。
import { handleResponse, requestBase } from "../_helpers";
const apiBase = "https://localhost:44387/weatherforecast";
class WeatherForecastService {
getForecasts() {
let request = Object.assign({}, requestBase, { method: "GET" });
let url = `$`;
return fetch(url, request).then(handleResponse);
}
getProtectedForecast() {
let request = Object.assign({}, requestBase, { method: "GET" });
let url = `$/5`;
return fetch(url, request).then(handleResponse);
}
}
const instance = Object.freeze(new WeatherForecastService());
export { instance as WeatherForecastService };
我在这里所做的就是让它们以我想要的方式公诸于众, 让他们能进入它们, 把它们包起来, 然后用我的东西处理反应, 然后把它还给打电话的人。
最后但并非最不重要的是, 建立连接!
我们把管子都铺好了现在是时候把一切连接起来了我只是在为App. Js工作告我。对于该示例，我会把所有三个API服务文件都带进来然后为我要合作的每个按钮创建一些函数 。他们都被注销了 到控制站。而不是花很多精力最后，当然是按钮本身。因为文件更新后太大了所以我只拍了一个按钮事件 和反应按钮组件本身 并删节了它。
const getProtectedForecast = () => {
console.log("attempting...");
WeatherForecastService.getProtectedForecast()
.then((response) => {
console.log("response: ", JSON.stringify(response));
console.log("oh boy!");
})
.catch((err) => {
console.error(err);
});
};
Get protected forecast
基于角色安保的Windows ID是一个关键连接。
虽然上述结构简单,但并非没有困难。然而,它却缺少一个关键组成部分。不是吗？基于角色的安全性。下面是我们要考虑的。以下是对第二部分的非常基本概述。此外,我计划在不久的将来发表一篇论文。如果你把鼠标悬在代码上而阅读这篇文章，您可能在“ 启动”. cs: 配置服务中看到下列行 :如果你不知道这一点,那是可以的，所以,我现在要谈谈它。
一旦查明用户身份,但在允许其识别之前,确定用户身份是不可行的。如果您提供了自定义信息,经授权的提供者会使用该信息。参见MSDN。正如我所意识到的,你会看到,我刚刚添加了"超赞"这个角色 和我们用来做这种语句的同一种语句。
理赔者是执行“转帐要求”。
接下来，你会注意到我给电话加了一个方法这项战略需要一位了不起的个性。在此之下，我包括了一种技巧该方法将始终失败，因为用户不是以"管理者"的身份行事的。这些方法都与React App无关。您必须在浏览器中立即点击它们以确定它们是否合法( 也可能无效 ) 。
无法关闭临时文件夹:%s。
结论
将 Windows 认证纳入您的 React 应用程序是简单的 。这也是非常基本的。如果你使用统包解决方案,你会走得更快。更远，然而,如果你缺乏基础设施或资金,它仍然能够自己这样做。和往常一样，我博客文章中的代码可在GitHub上查阅。