（十二）.NET6 + React ：升级！升级！还是***升级！！！+ IdentityServer4实战
<h2 id="一前言">一、前言</h2><p><strong>此篇内容较多，我是一步一个脚印(坑)，以至于写了好久，主要是这几部分：后台升级 .NET6 VS2022、前台升级Ant Design Pro V5 、前后台联调 IdentityServer4 实战，以及各部分在Linux环境下部署等等。</strong></p>
<h2 id="二后台升级net6">二、后台升级.NET6</h2>
<p><strong>WebApi和类库都升级到.NET6，依赖包都升级到6.0以上最新，好像没什么感知，略感easy。（附一张写完后最新的项目结构图）</strong><br>
<img src="https://img2022.cnblogs.com/blog/1780813/202204/1780813-20220422101400332-1039947071.png" alt="" loading="lazy"><img src="https://img2022.cnblogs.com/blog/1780813/202204/1780813-20220422100156239-58634689.png" alt="" loading="lazy"><img src="https://img2022.cnblogs.com/blog/1780813/202205/1780813-20220530121416228-147030239.png" alt="" loading="lazy"></p>
<h2 id="三identityserver4实战">三、IdentityServer4实战</h2>
<h4 id="1用户管理">1、用户管理</h4>
<p><strong>还好上篇持久化已经做了90%的工作，不过是在Demo里面，现在搬到主项目里来，用户部分、客户端配置部分根据实际情况稍加改动。</strong></p>
<blockquote>
<p>这里需要解释一下，用户、角色管理这块可以用Identity进行管理，也可以在业务系统里管理，id4只做登录鉴权，这里只是举个例子，ApplicationUser继承IdentityUser，定义字段UserInfoId关联UserInfo表，具体需求根据项目实际情况来设计。</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/1780813/202204/1780813-20220423135935026-1500801190.png" alt="" loading="lazy"><img src="https://img2022.cnblogs.com/blog/1780813/202205/1780813-20220528164047845-1795345249.png" alt="" loading="lazy"><img src="https://img2022.cnblogs.com/blog/1780813/202204/1780813-20220423162459503-1228161340.png" alt="" loading="lazy"></p>
<h4 id="2配置修改">2、配置修改</h4>
<p><strong>简化、授权码是给React前端用的，混合模式给 Mvc 客户端用的（一个空.NET6 Mvc项目，也搬到主项目了，具体的可以看代码）</strong><br>
<img src="https://img2022.cnblogs.com/blog/1780813/202205/1780813-20220528211459000-1170320134.png" alt="" loading="lazy"></p>
<h4 id="3数据迁移">3、数据迁移</h4>
<p><strong>依次在程序包管理器控制台输入迁移命令，其他表结构数据相同就不贴了，上篇持久化过程都有详细步骤和结果。</strong><br>
<img src="https://img2022.cnblogs.com/blog/1780813/202205/1780813-20220528164605841-112275738.png" alt="" loading="lazy"></p>
<h2 id="四前台升级-ant-design-pro-v5">四、前台升级 Ant Design Pro V5</h2>
<p><strong>前台升级 Ant Design Pro V5，之前用的是V5预览版，已经是一年前的事情了。。。我反思。。。😅</strong></p>
<h4 id="1安装组件-oidc-client">1、安装组件 oidc-client</h4>
<p><strong>cnpm install oidc-client --save，新建认证服务类 auth.ts ，跟后台 IdentityServer4 认证服务配合使用。</strong></p>
<pre><code class="language-ts">import { Log, User, UserManager } from 'oidc-client';
export class AuthService {
public userManager: UserManager;
constructor() {
// const clientRoot = 'http://localhost:8000/';
const clientRoot = 'https://homejok.wintersir.com/';
const settings = {
authority: 'https://login.wintersir.com',
//client_id: 'antdview',
//response_type: 'id_token token',
client_id: 'antdviewcode',
client_secret: 'antdviewcode',
response_type: 'code',
redirect_uri: `${clientRoot}callback`,
post_logout_redirect_uri: `${clientRoot}`,
// silent_redirect_uri: `${clientRoot}silent-renew.html`,
scope: 'openid profile HomeJokScope'
};
this.userManager = new UserManager(settings);
Log.logger = console;
Log.level = Log.WARN;
}
public login(): Promise<void> {
//记录跳转登录前的路由
return this.userManager.signinRedirect({ state: window.location.href });
}
public signinRedirectCallback(): Promise<User> {
return this.userManager.signinRedirectCallback();
}
public logout(): Promise<void> {
return this.userManager.signoutRedirect();
}
public getUser(): Promise<User | null> {
return this.userManager.getUser();
}
public renewToken(): Promise<User> {
return this.userManager.signinSilent();
}
}
</code></pre>
<h4 id="2登录认证设置">2、登录认证设置</h4>
<p><strong>修改app.tsx，初始化认证服务类，判断登录状态，设置请求后台拦截器，添加 headers 和 token</strong></p>
<pre><code class="language-ts">import type { Settings as LayoutSettings } from '@ant-design/pro-layout';
import { PageLoading } from '@/components/PageLoading';
import type { RequestConfig, RunTimeLayoutConfig } from 'umi';
import { history, Link } from 'umi';
import RightContent from '@/components/RightContent';
import { BookOutlined, LinkOutlined } from '@ant-design/icons';
import { AuthService } from '@/utils/auth';
const isDev = process.env.NODE_ENV === 'development';
const authService: AuthService = new AuthService();
/** 获取用户信息比较慢的时候会展示一个 loading */
export const initialStateConfig = {
loading: <PageLoading />
};
/**
* @seehttps://umijs.org/zh-CN/plugins/plugin-initial-state
* */
export async function getInitialState(): Promise<{
settings?: Partial<LayoutSettings>;
}> {
const init = localStorage.getItem('init');
const token = localStorage.getItem('token');
const user = localStorage.getItem('user');
if (!token && !init && !user) {
localStorage.setItem('init', 'true');
authService.login();
}
return {
settings: {}
};
}
// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
const token = localStorage.getItem('token');
const user = localStorage.getItem('user');
return {
rightContentRender: () => <RightContent />,
disableContentMargin: false,
waterMarkProps: {
//content: initialState?.currentUser?.name,
},
// footerRender: () => <Footer />,
onPageChange: () => {
const { location } = history;
if (!token && !user && location.pathname != "/callback") {
authService.login();
}
},
links: isDev
? [
<Link to="/umi/plugin/openapi" target="_blank">
<LinkOutlined />
<span>OpenAPI 文档</span>
</Link>,
<Link to="/~docs">
<BookOutlined />
<span>业务组件文档</span>
</Link>,
]
: [],
menuHeaderRender: undefined,
// 自定义 403 页面
// unAccessible: <div>unAccessible</div>,
...initialState?.settings,
//防止未登录闪屏菜单问题
pure: token ? false : true
}
};
const authHeaderInterceptor = (url: string, options: RequestOptionsInit) => {
const token = localStorage.getItem('token');
const authHeader = { Accept: 'application/json', 'Content-Type': 'application/json', Authorization: 'Bearer ' + token };
return {
url: `${url}`,
options: { ...options, interceptors: true, headers: authHeader },
};
};
export const request: RequestConfig = {
//timeout: 10000,
// 新增自动添加AccessToken的请求前拦截器
requestInterceptors: ,
};
</code></pre>
<h4 id="3登录回调获取用户登出">3、登录回调、获取用户、登出</h4>
<p><strong>（1）添加callback.tsx，这是登录成功的回调地址，保存登录状态token、user等，跳转页面。</strong></p>
<pre><code class="language-ts">import { message, Result, Spin } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { AuthService } from '@/utils/auth';
import { useRequest } from 'umi';
import { login } from '@/services/accountService';
const authService: AuthService = new AuthService();
const callback: React.FC = () => {
const = useState('玩命登录中......');
const authRedirect = useRef("/");
const { run, loading } = useRequest(login, {
manual: true,
onSuccess: (result, params) => {
if (result && result.responseData) {
localStorage.setItem('user', JSON.stringify(result.responseData));
window.location.href = authRedirect.current;
} else {
setMsg('登录失败，即将跳转重新登录......');
setTimeout(() => {
localStorage.removeItem('init');
localStorage.removeItem('token');
window.location.href = authRedirect.current;
}, 3000);
}
},
onError: (error) => {
message.error(error.message);
}
});
useEffect(() => {
authService.signinRedirectCallback().then(auth => {
authRedirect.current = auth.state;
localStorage.setItem('token', auth.access_token);
run({ account: auth.profile.sub });
})
}, [])
return (
<>
<Result status="success" title={<Spin spinning={loading} tip={msg}></Spin>} />
</>
)
};
export default callback;
</code></pre>
<p><strong>（2）accountService.tsx Umi的useRequest、Request 配合使用</strong></p>
<pre><code class="language-ts">import { request } from 'umi';
export async function login(payload: { account: string }, options?: { : any }) {
return request('/api/Account/Login', {
method: 'POST',
params: payload,
...(options || {}),
});
}
</code></pre>
<p><strong>AvatarDropdown.tsx 登出核心方法</strong></p>
<pre><code class="language-ts">const onMenuClick = useCallback(
(event: MenuInfo) => {
const { key } = event;
if (key === 'logout') {
localStorage.removeItem('init');
localStorage.removeItem('user');
localStorage.removeItem('token');
authService.logout();
return;
}
history.push(`/account/${key}`);
},
[],
);
</code></pre>
<h4 id="4自定义其他配置">4、自定义其他配置</h4>
<p><strong>如：PageLoading 等待框组件、defaultSettings.ts 颜色、图标等配置项、routes.ts 路由，详细见代码。</strong></p>
<h2 id="五linux服务器部署">五、Linux服务器部署</h2>
<h4 id="1net6-环境">1、.NET6 环境</h4>
<p><strong>坑1有CentOS7安装.NET6的步骤，其他linux版本参考</strong></p>
<h4 id="2服务资源分配">2、服务资源分配</h4>
<p><strong>因为只有一台服务器，用nginx进行转发：React前端端口80，IdentityServer4端口5000，WebApi资源端口8000，Mvc网站端口9000</strong><br>
<img src="https://img2022.cnblogs.com/blog/1780813/202205/1780813-20220530144333924-463697186.png" alt="" loading="lazy"><strong>启动命令分两步，举个栗子：</strong></p>
<pre><code class="language-linux">cd /指定目录
nohup dotnet ./BKYL.WEB.API.dll &
</code></pre>
<h4 id="3nginx配置https">3、nginx配置https</h4>
<p><strong>因为全部使用了https，所有域名、二级域名都搞了ssl证书，一一对应，通过 nginx 配置部署，贴上nginx.conf关键部分以供参考。</strong></p>
<blockquote>
<p>如何设置二级域名、申请ssl证书、nginx配置ssl证书，网上资料很多，不再赘述，有需要的可以私</p>
</blockquote>
<pre><code class="language-nginx">server {
listen 80;
server_name*.wintersir.com;
rewrite ^(.*)$ https://$host$1;
#charset koi8-r;
error_page 500 502 503 504/50x.html;
location = /50x.html {
root html;
}
}
server {
listen 443 ssl;
server_namewww.wintersir.com wintersir.com;
ssl_certificate /app/nginx/conf/index/cert.pem;
ssl_certificate_key/app/nginx/conf/index/cert.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout5m;
ssl_ciphersHIGH:!aNULL:!MD5;
ssl_prefer_server_cipherson;
location / {
root /app/wintersir/index;
indexindex.html index.htm;
}
}
server {
listen 443 ssl;
server_namehomejok.wintersir.com;
ssl_certificate /app/nginx/conf/view/cert.pem;
ssl_certificate_key/app/nginx/conf/view/cert.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout5m;
ssl_ciphersHIGH:!aNULL:!MD5;
ssl_prefer_server_cipherson;
location / {
proxy_set_header X-Forearded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';
root /app/wintersir/view;
indexindex.html index.htm;
}
location /api/ {
proxy_set_header X-Forearded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';
proxy_pass https://www.wintersir.com:8000;
}
}
server {
listen 443 ssl;
server_namemvc.wintersir.com;
ssl_certificate /app/nginx/conf/mvc/cert.pem;
ssl_certificate_key/app/nginx/conf/mvc/cert.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout5m;
ssl_ciphersHIGH:!aNULL:!MD5;
ssl_prefer_server_cipherson;
location / {
proxy_set_header X-Forearded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';
proxy_pass https://www.wintersir.com:9000/;
}
}
server {
isten 443 ssl;
server_namelogin.wintersir.com;
ssl_certificate /app/nginx/conf/login/cert.pem;
ssl_certificate_key/app/nginx/conf/login/cert.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout5m;
ssl_ciphersHIGH:!aNULL:!MD5;
ssl_prefer_server_cipherson;
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';
return 200;
}
proxy_set_header X-Forearded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';
proxy_pass https://www.wintersir.com:5000/;
}
}
</code></pre>
<h2 id="六效果图">六、效果图</h2>
<h4 id="1react前端">1、React前端</h4>
<p><img src="https://img2022.cnblogs.com/blog/1780813/202205/1780813-20220530143323826-348525557.gif" alt="" loading="lazy"></p>
<h4 id="2mvc网站测试">2、Mvc网站测试</h4>
<p><img src="https://img2022.cnblogs.com/blog/1780813/202205/1780813-20220530143329034-2012384505.gif" alt="" loading="lazy"></p>
<h2 id="七各种踩坑">七、各种踩坑</h2>
<h4 id="1centos8不支持-net6">1、CentOS8不支持 .NET6</h4>
<p><strong>当初阿里云装了CentOS8，现在想哭，边哭边装CentOS7.9，把数据库、nginx等环境又都装一遍（前几篇都有）😂</strong><br>
<strong>CentOS7 安装 .NET6 官方教程 ，分别执行以下命令，中间输入了两次y</strong></p>
<pre><code class="language-C#">sudo rpm -Uvh https://packages.microsoft.com/config/centos/7/packages-microsoft-prod.rpm
sudo yum install dotnet-sdk-6.0
</code></pre>
<h4 id="2nginx传输数据过大转发跨域">2、nginx传输数据过大、转发跨域</h4>
<p><strong>简单模式 token 等信息带在了回调页面url里，nginx 502 无法跳转，解决参考，nginx http 添加以下代码：</strong><br>
<img src="https://img2022.cnblogs.com/blog/1780813/202204/1780813-20220427224436345-683266032.png" alt="" loading="lazy"></p>
<pre><code class="language-nginx">proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;
large_client_header_buffers 4 16k;
</code></pre>
<p><strong>处理proxy_pass转发：</strong></p>
<pre><code class="language-nginx">proxy_set_header X-Forearded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';
</code></pre>
<p><strong>处理OPTIONS预检</strong></p>
<pre><code class="language-nginx">if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';
return 200;
}
</code></pre>
<h4 id="3js客户端token传输授权">3、js客户端token传输、授权</h4>
<p><strong>js（react、vue等）客户端需要在授权服务配置时，设置允许将token通过浏览器传递 AllowAccessTokensViaBrowser = true，客户端设置禁用了授权页面，登录鉴权后直接跳回对应 RequireConsent = false</strong><br>
<img src="https://img2022.cnblogs.com/blog/1780813/202204/1780813-20220428093759500-353565832.png" alt="" loading="lazy"></p>
<h4 id="4前端统一接口返回格式">4、前端统一接口返回格式</h4>
<p><strong>Umi框架默认格式与后台接口返回不一致就会导致获取不到，config.ts 加上以下代码，就可以使用后台自定义返回的数据格式了</strong></p>
<pre><code class="language-ts">request: {
dataField: ""//忽略框架处理
}
</code></pre>
<h4 id="5postlogoutredirecturis无效">5、PostLogoutRedirectUris无效</h4>
<p><strong>本以为配置了退出跳转路由就OK了，结果还是得自己加代码手动跳转，在授权服务中AccountController，Logout方法</strong><br>
<img src="https://img2022.cnblogs.com/blog/1780813/202205/1780813-20220528221038792-482411485.png" alt="" loading="lazy"></p>
<h4 id="6efcore连接数据库偶尔异常an-exception-has-been-raised-that-is-likely-due-to-a-transient-failure">6、EFCore连接数据库偶尔异常：An exception has been raised that is likely due to a transient failure.</h4>
<p><strong>查资料说是ssl问题，连接字符串server改成https的，不太确定，大佬懂的可以说一下</strong></p>
<h2 id="八前人栽树后人乘凉">八、前人栽树，后人乘凉</h2>
<p>https://github.com/skoruba/react-oidc-client-js</p>
<h2 id="九代码已上传">九、代码已上传</h2>
<p>https://github.com/wintersir</p>
<h2 id="十后续">十、后续</h2>
<p><strong>后面学习要往容器、微服务方向走了，Docker、Jenkins、DDD 等等，想学哪个学哪个，写了也不一定学，哈哈~~~，还是那句话：</strong><br>
<em><sub>（个人学习记录分享，坚持更新，也有可能烂尾，最终解释权归本人所有，哈哈哈哈，嗝~~~）</sub></em></p>
<h2 id="写在最后">写在最后</h2>
<p><strong>博客名：WinterSir，学习目录 https://www.cnblogs.com/WinterSir/p/13942849.html</strong></p>
</div>
<div id="MySignature" role="contentinfo">
测试签名<br><br>
来源：https://www.cnblogs.com/WinterSir/p/16147929.html
頁:
[1]