用 Nging 给 code-server 编辑器添加 oAuth2 登录方式

admin 产品介绍操作案例 2024年5月30日 294 0 0

本文介绍了用 Nging 给 code-server 添加 oAuth2 登录功能的操作方法，以 Nging 后台账号作为案例来进行讲解。

按照本文操作，你将可以通过自己的 Nging 后台账号用 oAuth2 技术实现对 VSCode Web 版 ( 程序名 code-server ) 服务的访问认证。这样做有以下好处：
1. 可以充分利用 Nging 后台完善的账号体系和登录验证功能(包含防暴力破解的验证码、两步认证、WebAuthn免密登录认证等高级功能)
2. 在已经登录过 Nging 后台的情况下，可以直接一键免密登录你的 VSCode Web，避免重复进行登录操作

## Nging 最低版本要求

2024年5月29日后下载的v5.2.6和v5.3.2

下面按照步骤，逐一讲解

## 第一步：生成 oAuth2 认证账号
进入 Nging 后台，依次点击菜单“设置”-&gt;“后台oAuth应用”，点击“添加应用”按钮，依次填写“应用名”和“域名”两个输入框，在“域名”输入框里面填写后面访问 VSCode Web 服务所使用的域名，比如这里我们填写 vscode.coscms.com，提交保存
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304139661972865024.png)

![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304139687994327040.png)

在列表页点击刚刚添加的数据后面的编辑按钮：
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304140070514851840.png)

可以在编辑页面查看和复制 oAuth2 认证所需要的 Client ID (即APP ID) 和 Client Secret(即密钥)：
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304140395674075136.png)

## 第二步：安装和配置 code-server

### 安装 code-server
安装 code-server，在 macOS 执行以下命令：
```
brew install code-server
```
或者使用安装脚本来安装，执行以下命令：
```
curl -fsSL https://code-server.dev/install.sh | sh
```
更多最新安装方式可以参考官方文档 https://coder.com/docs/code-server/install

### 配置 code-server
这里通过修改配置文件关闭 code-server 自己的登录验证。

使用以下命令查看配置文件路径
```
ps -ef | grep code-server
```
如图所示：
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304141348452171776.png)

修改配置文件中的 `auth` 值为 none，`bind-addr` 值为 127.0.0.1:58080
> `bind-addr` 的端口默认是 8080，但我机器上的 8080 端口已经被其它程序使用了，你可以根据自身需要来修改这个端口号，但务必要指定 127.0.0.1 这个 IP，因为我们这里关闭了 code-server 自身的登录验证功能，所以需要通过指定 IP 为 127.0.0.1 来避免非法访问

![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304142804697743360.png)

## 第三步：添加反向代理和配置登录认证
点击菜单链接“添加网站”
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304143314658000896.png)

1. 填写监听地址和网站名称
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304143653691981824.png)
监听地址中的域名请填写你自己的域名，后面将会通过这个域名来访问你的 VSCode Web 版

2. 配置反向代理
填写“后端代理地址”，确保 IP 和 端口 与 code-server 配置文件中的保持一致：
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304145133157220352.png)
勾选附加选项：
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304146589721559040.png)

3. 配置JWT功能
按照下图所示进行填写：
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304145696720683008.png)
其中“允许值”里“sub”这一项用来指定允许使用 VSCode Web 版的用户名，这里我限制了只有用户名为 admin 的用户可以使用，如欲接受 Nging 后台的所有用户使用，可以删除这一项设置。
勾选令牌来源“Cookie”和保持“Cookie名称”默认值：
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304146797876477952.png)

4. 配置“登录认证”功能
按照下图所示填写：
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304147239503134720.png)
选择 “oAuth2认证” 中的 Nging 选项，并分别设置“Client ID”和“Client Secret”为第一步里面生成的信息：
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304147730052153344.png)

提交保存后访问你设置的域名就能看到效果：
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304148868906352640.png)

上述内容主要基于 code-server 和 Nging 安装在同一台服务器上的情况，不过笔者目前大部分的使用场景是在自己内网的开发机上运行 code-server+Nging，并在服务器上也运行一份 Nging，主要由服务器上的 Nging 对外提供服务，此时需要通过 Nging 的内网穿透功能来联通开发机和服务器，这就需要在服务器的 Nging 里配置好内网穿透的服务端，在开发机上的 Nging 里配置好内网穿透的客户端：

|   | 服务器Nging  | 内网电脑Nging |
| ------------ | ------------ | ------------ |
|  Nging内网穿透服务端配置  | ✅  |   |
|  Nging内网穿透客户端配置 |   | ✅  |

然后在服务器的 Nging 中按照本文前面相关描述来进行配置，且将反向代理“后端代理地址”中的端口改为内网穿透中`虚拟主机`的`HTTP端口`：
![](https://img.nging.admpub.com/public/upload/default/2024/05/30/304199070010834944.png)