一、背景
通常前端在对接第三方登录,比如微信登录时,基于oauth2.x微信端收到登录请求后会发起重定向并携带参数code到前端,前端再通过获取url中的code发起登录。但是由于本地开发都是用localhost,微信的重定向是基于信任域名,这就导致前端本地环境无法被重定向,从而使得前端本地对接登录时因此无法对接。
一个简单又麻烦的方法时,提交代码到服务器,通过域名访问客户端进行微信登录的调试,但是调试过程中每次调整都需要提交,使得debug很麻烦,即编写容易调试麻烦。
二、方案
-
思路
通过内网穿透,新增一个开发的子域名,将重定向的子域名映射到前端开发机器,当微信重定向时,又将重定向转发到本地,即可实现第三方如微信重定向本地localhost的场景,理论可行便实际可行。 -
内网穿透
什么是内网穿透?go 百度一下 -
条件
内网穿透需要外部条件- 公网ip,即携带公网ip的服务器,并安装内网穿透服务端
- 域名,如果是对接第三方,根据国内的场景,都要求域名必须备案,其他用途视情况。
- 本地安装内网穿透客户端
-
流程图
如下以微信登录举例:
三、内网穿透
-
安装
本文基于开源frp工具,先在服务器端部署,然后在本地安装客户端,并配置端口映射。
安装比较简单,压缩包解压之后, 服务端直接./frps
, 客户端直接./frpc
启动即可,服务端和客户端都默认读当前目录的配置文件,即frps对应frps.ini, frpc对应fprc.ini
,当然也可以根据参数-c
指定配置文件。 -
配置
该配置完全基于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,大概的原理如下:
四、开发
local-dev.example.com是我们映射到本地的端口,但是事实上在团队中,测试人员或者其他队友也会需要访问到网页,但是同事访问网页不能依赖我们的本地的服务是否启动。
所以有一个最简单的方案,需要两个域名:
- dev.example.com
- local-dev.example.com
第一个域名通过常规部署,映射到服务器的网页。
第二个域名提供给前端开发人员,开发人员用该域名进行本地开发。
至此,完美解决。