微信服务号本地调试微信网页授权

需求

微信网页授权要求配置授权回调页面域名，在没有域名，没有认证公众号的情况下，如何在本地调试呢。

实现

一、申请公众号开发测试账号

官方链接：mp.weixin.qq.com/debug/cgi-b… 扫描关注后登录,会获取

二、修改网页授权域名

体验接口权限表--网页服务--网页授权获取用户基本信息

1、直接填写IP

这种很简单了，本地启动项目服务，将这个IP地址配置上。（只能用于测试号）

2、填写一个自定义域名

这个要通过修改host文件，把域名映射到本地的ip

1、host域名解析

mac地址: 快捷键command+shift+G打开窗口输入/private/etc/进入找到host文件

首先了解下host文件是做什么的。

host文件

作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。

工作原理

浏览器访问网站，要首先通过DNS服务器把要访问的网站域名解析成其指定的IP地址，之后，浏览器才能对此网站进行定位并且访问其数据。操作系统规定，在进行DNS请求以前，先检查系自己的Hosts文件中是否有这个域名和IP的映射关系。如果有，则直接访问这个IP地址指定的网络位置，如果没有，再向已知的DNS服务器提出域名解析请求。也就是说Hosts的IP解析优先级比DNS要高。

修改host

host文件只允许管理员身份打开，否则不能修改。可以把权限先设为管理员，或者一个简单粗暴的方法，就是把host文件复制出来，修改后，把内容再覆盖到原来的文件。格式：端口号+Tab + 域名 + 空格。

在host文件添加上 x.x.x.x m.serve.com。这样配置后，当授权后，要回调到本地的页面，浏览器发现在host文件里，m.serve.com域名和本地ip，x.x.x.x有映射关系，就不会再发请求去DNS服务器了，这样即使这个域名不存在，也不妨碍我们继续往下走。

2、如何查看本机IP?

系统偏好设置 ---> 网络

屏幕快照 2022-10-25 下午3.31.48.png

host 文件中可以配置映射关系 (本机IP m.serve.com)

检验配置

打开命令行，ping+域名，显示的就是本地服务ip的回复

三、配置主机

在vue.config.js中配置主机, 让项目跑在m.serve.com

devServer: {
    // 配置服务器
    host: 'm.serve.com',
    port: 80,
}

为什么一定要配置80端口呢?

微信重定向不支持带端口的访问域名
配置80端口，就可以只输入网址

四、配置回调地址(在项目中)

/**
 * 重定向地址
 */
export function redirectUrl() {
  const appid = ""; // 微信appid
  const list = window.location.href.split("&");
  const url = list[0];
  const redirect_uri = encodeURIComponent(url);
  
  window.location.href =
    "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
    appid +
    "&redirect_uri=" +
    redirect_uri +
    "&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect";
}

五、启动项目

不过此时必须使用sudo来启动项目

sudo yarn serve

屏幕快照 2022-10-25 下午3.39.47.png

六、访问

在微信开发者工具打开项目

在地址栏输入项目地址m.serve.com 即可访问到页面了