使用内网穿透开发第三方授权登录、第三方支付等（微信扫码登录、微信支付、支付宝支付等）

r囧r小猫 2022-11-21 11:33 321阅读 0赞

**前后端分离项目：前端代码在内网，后端代码在外网，操作流程图**

![前端代码在内网，后端代码在外网][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214c2t5bXg_size_16_color_FFFFFF_t_70]

**前后端分离项目：前端代码在内网，后端代码也在内网，操作流程图**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214c2t5bXg_size_16_color_FFFFFF_t_70 1][]

**其他开发注意：**

请先申请好的域名及服务器；

微信、支付宝等第三方api开发详细见官方文档介绍；

了解oauth2.0授权认证机制，可以直接使用第三方集成好的sdk如JustAuth.jar等；

勿必申请好相关第三方平台appid, appsecret等

**这里以微信WEB端扫码登录为例介绍使用**  
\#1\# 登录微信开放平台：https://open.weixin.qq.com  
    >管理中心 >网站应用（移动应用or小程序...） >查看应用 >\[开发信息\]设置：授权回调域=vue.\{youDomain\}.com

\#2\# 在阿里云上设置DNS解析，添加记录：  
    记录类型：\[A-将域名指向一个IPV4地址\]  
    主机记录：vue.\{youDomain\}.com  
    解析路线：默认  
    记录值：120.78.180.104 (小米球ngrok2.xiaomiqiu.cn对应的IP地址)

\#3\# 配置内网穿透工具：登录小米球网站：http://ngrok.ciqiuwl.cn/  
    3.1 操作流程 >>> 登录管理后台系统：https://manager.xiaomiqiu.com/  
        注册账号并登录 >系统管理 >账户管理 >我的账户 >复制 \[小米球Token\]

3.2 下载ngrok-windows\_amd64  
        网盘：https://pan.baidu.com/share/init?surl=aks8uJx0s9XrDj7oMsvqmw  密码：74ex  
        在window本机解压打开  
        修改配置 ngrok-windows\_amd64 > ngrok.conf  
            找到第4行： auth\_token: "\[小米球Token\]"   
            修改本地应用\[httptun\]端口号： http: 127.0.0.1:8888(我自己的是8888，改成自己程序的端口)  
            修改本地应用\[httpstun\]端口号： https: 127.0.0.1:8888(我自己的是8888，改成自己程序的端口)  
        修改配置 > 小米球Ngrok一键启动工具.bat  
            找到第38行改为：ngrok.exe -config=ngrok.conf -hostname ngrok.\{youDomain\}.com 8888

3.3 双击启动【小米球Ngrok一键启动工具.bat】  
        请输入需要启动的隧道名称：  
            如果用http访问填写: httptun；用https访问填写: httpstun  
            回车 > 提示：http://vue.\{youDomain\}.com -> 127.0.0.1:8888

\#4\# 启动程序调试  
    4.1 前端启动nodejs，后端启动java / php 等  
    4.2 启动【小米球Ngrok一键启动工具.bat】 > 输入【httptun】 见3.3  
    4.3 访问远程二维码扫码页面：https://api.\{youDomain\}.com/auth/wxopen/user/login  
    4.4 扫码回调进入前端页面：http://vue.\{youDomain\}.com/wx\_auth.html?code=xxx&state=xx  
    4.5 后端api回调接口：https://api.\{youDomain\}.com/auth/wxopen/user/callback?code=xxx&state=xx  
    4.6 登录成功返回用户信息，测试调用获取用户信息接口：http://api.\{youDomain\}.com/auth/user/getInfo

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214c2t5bXg_size_16_color_FFFFFF_t_70]: /images/20221120/64624ff700f945a1879d52979a9fd53f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214c2t5bXg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201101105354590.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214c2t5bXg=,size_16,color_FFFFFF,t_70