微信网页授权、用户信息获取和内网映射测试的进阶指南

1. 鉴权登录的整体流程

1. 用户在前端点击登录按钮。
2. 前端将用户重定向到微信的授权页面。
3. 用户在微信授权页面授权后，微信将用户重定向到前端的授权回调页面。
4. 前端获取微信返回的授权码。
5. 前端将授权码发送给后端。
6. 后端使用授权码向微信换取用户信息。
7. 后端将用户信息存储到数据库中。
8. 后端返回给前端一个登录凭证。
9. 前端使用登录凭证登录网站。

2. 前端和后端的分工

• 前端负责：
• 创建登录按钮。
• 将用户重定向到微信的授权页面。
• 获取微信返回的授权码。
• 将授权码发送给后端。
• 使用登录凭证登录网站。
• 后端负责：
• 使用授权码向微信换取用户信息。
• 将用户信息存储到数据库中。
• 返回给前端一个登录凭证。

3. 回到鉴权前的页面

前端可以在授权回调页面使用window.location.href来回到鉴权前的页面。例如：

window.location.href = "http://www.example.com";

4. 本地测试微信网页授权

1. 在本地机器上安装nginx。
2. 配置nginx的配置文件，使其能够代理请求到微信的授权页面。
3. 在本地机器上搭建一个网站，该网站包含一个登录按钮。
4. 在网站的登录按钮上添加一个点击事件监听器，该监听器负责将用户重定向到nginx代理的微信授权页面。
5. 在本地机器上运行网站。
6. 在微信中打开网站的URL，并点击登录按钮。
7. 微信将用户重定向到nginx代理的微信授权页面。
8. 用户在微信授权页面授权后，微信将用户重定向到网站的授权回调页面。
9. 网站的授权回调页面获取微信返回的授权码。
10. 网站的授权回调页面将授权码发送给本地机器上运行的后端。
11. 后端使用授权码向微信换取用户信息。
12. 后端将用户信息存储到数据库中。
13. 后端返回给网站的授权回调页面一个登录凭证。
14. 网站的授权回调页面使用登录凭证登录网站。

5. 搭建内网映射测试

1. 在内网机器上安装nginx。
2. 配置nginx的配置文件，使其能够代理请求到微信的授权页面。
3. 在内网机器上搭建一个网站，该网站包含一个登录按钮。
4. 在网站的登录按钮上添加一个点击事件监听器，该监听器负责将用户重定向到nginx代理的微信授权页面。
5. 在内网机器上运行网站。
6. 在外网机器上打开网站的URL，并点击登录按钮。
7. 微信将用户重定向到nginx代理的微信授权页面。
8. 用户在微信授权页面授权后，微信将用户重定向到网站的授权回调页面。
9. 网站的授权回调页面获取微信返回的授权码。
10. 网站的授权回调页面将授权码发送给外网机器上运行的后端。
11. 后端使用授权码向微信换取用户信息。
12. 后端将用户信息存储到数据库中。
13. 后端返回给网站的授权回调页面一个登录凭证。
14. 网站的授权回调页面使用登录凭证登录网站。