利用内网穿透提供前端对接微信等第三方重定向域名的方案

一、背景

通常前端在对接第三方登录，比如微信登录时，基于oauth2.x微信端收到登录请求后会发起重定向并携带参数code到前端，前端再通过获取url中的code发起登录。但是由于本地开发都是用localhost，微信的重定向是基于信任域名，这就导致前端本地环境无法被重定向，从而使得前端本地对接登录时因此无法对接。

一个简单又麻烦的方法时，提交代码到服务器，通过域名访问客户端进行微信登录的调试，但是调试过程中每次调整都需要提交，使得debug很麻烦，即编写容易调试麻烦。

二、方案

1. 思路
   通过内网穿透，新增一个开发的子域名，将重定向的子域名映射到前端开发机器，当微信重定向时，又将重定向转发到本地，即可实现第三方如微信重定向本地localhost的场景，理论可行便实际可行。

2. 内网穿透
   什么是内网穿透？go 百度一下

3. 条件
   内网穿透需要外部条件

   1. 公网ip，即携带公网ip的服务器，并安装内网穿透服务端
   2. 域名，如果是对接第三方，根据国内的场景，都要求域名必须备案，其他用途视情况。
   3. 本地安装内网穿透客户端

4. 流程图
   如下以微信登录举例：

   请求登录

   申请code

   基于frp的重定向

   本地

   业务后端

   微信端

三、内网穿透

1. 安装
   本文基于开源frp工具，先在服务器端部署，然后在本地安装客户端，并配置端口映射。
   安装比较简单，压缩包解压之后, 服务端直接 ./frps, 客户端直接 ./frpc 启动即可，服务端和客户端都默认读当前目录的配置文件，即frps对应frps.ini, frpc对应fprc.ini，当然也可以根据参数 -c 指定配置文件。

2. 配置
   该配置完全基于frp的文档配置，见配置说明
   
   这里提供最简的服务端和客户端的配置，开箱即用：

# 服务端 frps.ini
[common]
bind_port = 7000
vhost_http_port = 7001

# 客户端 frpc.ini
[common]
#frps所在的公网ip
server_addr = x.x.x.x 

#frps所占用的端口
server_port = 7000 

[web]
type = http

# 本地前端开发占用的端口
local_port = 8080

# 可用通过这个公网域名访问到本地启动的网页
custom_domains = local-dev.example.com

其中域名local-dev.example.com为映射到本地的域名，该域名是公网域名，并且需要在域名解析中把该域名解析到公网ip，大概的原理如下：

请求登录

请求申请code

重定向

NAT转发

本地/frpc

业务后端/frps

微信

四、开发

local-dev.example.com是我们映射到本地的端口，但是事实上在团队中，测试人员或者其他队友也会需要访问到网页，但是同事访问网页不能依赖我们的本地的服务是否启动。
所以有一个最简单的方案，需要两个域名：

1. dev.example.com
2. local-dev.example.com
   第一个域名通过常规部署，映射到服务器的网页。
   第二个域名提供给前端开发人员，开发人员用该域名进行本地开发。

至此，完美解决。