失眠网 > 微信公众号开发：网页授权

微信公众号开发：网页授权

时间：2022-07-08 04:34:25

相关推荐

微信公众号开发：网页授权

一、背景介绍

微信公众号网页授权，目的就是获取用户相关信息，实现自己的业务逻辑，最终于会得到的信息如下表格，本文对应的任务获取到openid即可满足业务需求，本文内容包括环境、操作步骤及相关内容比较详细，要获取其他的内容也很容易了。

二、官方文档

背景 | 微信开放文档

网页授权 | 微信开放文档

概述 | 微信开放文档-调试微信网页授权

三、前置条件

微信公众号类型是“服务号”。详见本文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，有值，返回falseconst stringIsEmpty = function (obj: any){if(typeof obj == "undefined" || obj == null || obj == ""){return true;}else{return false;}}

6.6、获取微信code

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：