微信公众号开发：网页授权
一、背景介绍
微信公众号网页授权，目的就是获取用户相关信息，实现自己的业务逻辑，最终于会得到的信息如下表格，本文对应的任务获取到openid即可满足业务需求，本文内容包括环境、操作步骤及相关内容比较详细，要获取其他的内容也很容易了。
| openid | 用户的唯一标识 |
| nickname | 用户昵称 |
| sex | 用户的性别，值为1时是男性，值为2时是女性，值为0时是未知 |
| province | 用户个人资料填写的省份 |
| city | 普通用户个人资料填写的城市 |
| country | 国家，如中国为CN |
| headimgurl | 用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像 URL 将失效。 |
| privilege | 用户特权信息，json 数组，如微信沃卡用户为（chinaunicom） |
| unionid | 只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。 |
二、官方文档
背景 | 微信开放文档
网页授权 | 微信开放文档
概述 | 微信开放文档-调试微信网页授权
三、前置条件
微信公众号类型是“服务号”。详见本文7.12。
确认获取网页授权是否由前端发起，是，前端发起获取网页授权。
四、理解网页授权
4.1、理解：通过微信公众号网页授权获取微信可提供的相关的用户信息，包括openid、昵称、unionid等，供实现业务逻辑。
4.2、网页授权分类：静默授权、非静默授权
4.2.1、静默授权：用户无感的，有程序执行的授权。
4.22、非静默授权：出现弹窗的，需要用户点击确认的授权。
五、网页授权流程四步
1、引导用户进入授权页面同意授权，获取code
2、通过 code 换取网页授权access_token（与基础支持中的access_token不同）
3、如果需要，开发者可以刷新网页授权access_token，避免过期
4、通过网页授权access_token和 openid 获取用户基本信息（支持 UnionID 机制）五、
六、开发记录
项目环境 vite2 + vue3 + ts + pinia + jest + pnpm
6.1、微信开发者工具，点击微信公众号网页项目
6.2、输入网址，此时进入到微信环境
6.3、判断是否为微信环境
// 判断是否是微信环境
const isWechat = ()=> {return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
}6.4、 获取url里code值
// 获取url里code值
const getUrlCode = (name: string)=> {let reg = ((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)') as any).exec(location.href) || [, ''])[1].replace(/\+/g, '%20')return decodeURIComponent(reg) || null
}6.5、 判断字符串是否为空
// 判断字符串是否为空，没有值返回true，有值，返回false
const stringIsEmpty = function (obj: any){if(typeof obj == "undefined" || obj == null || obj == ""){return true;}else{return false;}
}6.6、 获取微信code
const getWxCode = (redirect_path: String) =>{console.log('31', redirect_path);if(isWechat()) {console.log('getWxCode33');// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId redirect_uri 是你的站点域名，一定要encodeURIComponentlet code = getUrlCode('code')console.log('37code', code)if (stringIsEmpty(code)) {console.log('39code', code)window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxappid&redirect_uri=' + encodeURIComponent('https://md.abc.com.cn/'+redirect_path) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'//redirect_uri地址里面不能多/，如果多一个/就会跳转不成功，所以redirect_path要注意是/pages/clue/cule// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1}} else {console.log('请在微信客户端打开！');}
}6.7、
6.8、近期已授权
七、相关记录
7.1、
解：
const getUrlCode = (name: string)=> {let reg = ((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)') as any).exec(location.href) || [, ''])[1].replace(/\+/g, '%20')return decodeURIComponent(reg) || null
}7.2、绑定网页开发者
如果遇到“未开启微信公众号接收功能”：
1、手机微信找到“公众平台安全助手”，点击右上角的icon
2、点击右上角icon
3、 点击设置
4、关闭消息免打扰、接收消息推送
绑定后再次操作，可以了：
邀请后手机收到推送消息：
点击：
概述 | 微信开放文档
该微信用户未开启“公众号安全助手”的消息接收功能，请先开启后再绑定的解决办法_采蘑菇的提莫队长的博客-CSDN博客
7.3、 微信公众号，查看appid：
7.4、微信H5页面禁用复制链接
js-禁止微信H5页面点击右上角菜单时出现“复制链接”，且分享仅支持微信分享 - MiniDuck - 博客园
微信H5页面禁用复制链接_~断点~的博客-CSDN博客
7.5、接入sdk，怎么接入，接入后能做什么
开发公众号sdk_微信公众号开发——微信JSSDK使用_程摸摸的博客-CSDN博客
7.6、微信公众号，网页版本，可以使用localstorage吗？
公众号菜单进入h5页面，存储在localStorage中的数据会丢失吗？ | 微信开放社区
使用cookie解决微信不能存储localStorage的问题 - crazymus的个人页面 - OSCHINA - 中文开源技术交流社区
关于微信中的localStorage及使用cookie的解决方案-电脑知识网
聊天窗口打开的链接，与在微信公众号底部菜单打开的链接，localstorage、cookie是否能同步？
7.7、h5获取移动端设备id：未得到方法
微信网页授权_哔哩哔哩_bilibili
https://segmentfault.com/q/1010000020066320
H5获取手机设备信息、app版本信息、ip地址 - 简书
H5移动端获取设备id兼容写法_猿2048
7.8、AppID、openid、unionid
| AppID | - AppID是不同类型的产品的帐号 ID ,是帐号的唯一标识符。 - 例如公众号的AppID、小程序的AppID、开放平台的AppID、第三方平台的AppID、移动应用的AppID、网站应用的AppID、小商店的 AppID 等等。 |
| openid | - openid是微信用户在不同类型的产品的身份ID。 - 微信用户访问公众号、小程序、移动应用、网站应用、小商店等都会有唯一的openid，但同一个微信用户访问不同的产品生成的 openid 也是不一样的。 - 例如，对于不同公众号，同一用户的 openid 不同；同理，对于不同的小程序，同一用户的 openid 也是不同的 |
| unionid | - unionid是微信用户在同一个开放平台下的产品的身份ID。 - 如果开发者拥有多个移动应用、网站应用、和公众帐号（即公众号和小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号，用户的 UnionID 是唯一的。即，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。 |
7.9、js-sdk说明文档
概述 | 微信开放文档
7.10、是否需要开启微信公众号的开发者模式？
无论是静默授权还是非静默授权，均不需要开启并使用开发者模式
7.11、redirect_uri参数错误的原因
redirect_uri参数错误的原因是由于在微信后台未设置安全域名
7.12、查看自己微信公众号是订阅号还是服务号
如何查看微信公众号是订阅号还是服务号_三思经验网
八、欢迎交流指正，关注我，一起学习
参考链接：
微信h5授权获取用户openId的方法和步骤，用于用户登录和注册_xiaopzi123123的博客-CSDN博客
【H5微信授权】简单实现H5页面微信授权功能，微信开发者工具报错 系统错误，错误码-1，undefined解决办法【详细】_接口写好了吗的博客-CSDN博客
微信公众平台的静默授权和网页授权区别详解
微信H5静默授权和非静默授权获取用户openid的方法 - 简书
H5移动端获取设备id兼容写法_猿2048
js-禁止微信H5页面点击右上角菜单时出现“复制链接”，且分享仅支持微信分享 - MiniDuck - 博客园
概述 | 微信开放文档
网页授权 | 微信开放文档
微信H5中静默登录及非静默登录的正确使用姿势 - 走看看
微信—前端获取openId方法和步骤_ftToday的博客-CSDN博客_前端获取openid
微信—前端获取openId方法和步骤_ftToday的博客-CSDN博客_前端获取openid
微信公众平台开发概述 | 微信开放文档
【微信开发】微信公众号网页授权获取用户基本信息实现微信登录_空影星辉的博客-CSDN博客