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

一、背景介绍

微信公众号网页授权，目的就是获取用户相关信息，实现自己的业务逻辑，最终于会得到的信息如下表格，本文对应的任务获取到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

微信公众平台开发概述 | 微信开放文档

【微信开发】微信公众号网页授权获取用户基本信息实现微信登录_空影星辉的博客-CSDN博客

微信公众号开发：网页授权相关推荐

微信公众号用户绑定 php,微信公众号开发——网页授权实现简化用户绑定
本教程的学习条件: 了解微信公众号开发的基本知识.已经申请了微信公众号并设置了开发模式等.如果不了解,请先到微信官方平台学习需要服务器端开发的基本技能,本文主要讲解流程,基本不涉及具体开发语言. 首 ...
微信公众号开发-网页授权——配置测试账号
思路分析: 1.创建测试账号并且配置测试账号的授权回调域名. 2.由前端发起授权请求,微信收到请求后(若是首次打开,并且未关注公众号,微信会弹出授权页,提示用户授权)将重定向到请求url中配置的red ...
vue 微信公众号开发网页授权配置业务域名
服务号! 服务号! 服务号! 1.官网下载xxx.txt文件 2.将文件放入vue项目的static文件夹中(注意不是src的static) 3.输入域名网址www.xxx.com/static/xx ...
微信公众号开发之授权
微信公众号开发之授权开发前准备首先准备自己的服务器资源,已有服务器的请忽略服务器资源. 我这里演示新浪云服务器环境搭建:(新注册号有免费云豆可用) 服务器资源(https://sae.sina.c ...
微信公众号的网页授权如何在本地调试？
调试微信公众号的网页授权时,要填写网页授权域名(如图1),否则授权的时候会提示redirect_uri参数错误(图2),可是我得在localhost先调试成功才能上传到实际的网站上吧,可是这里不支持l ...
微信公众号-测试号-网页授权
微信公众号-测试号-网页授权自己摸索几天,总算搞清楚了第一步登录微信公众号平台,开发者工具菜单进入公众平台测试账号第二步设置网页帐号网页授权获取用户基本信息的域名,测试号是可以用ip和域名 ...
微信公众号开发之授权登录（前端vue篇）
前序: 由于之前一直是后端直接调用微信授权后,拿到相关信息后再返回给我(就是以前的前后端不分离),所以对微信公众号开发的微信授权登录还一直处于懵逼情况,直到今天有一个项目需要前后端分离,要前端主动去获 ...
微信公众号第三方网页授权
如果用户在微信公众号客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域名的说明 1.在微信公众号请求用户网页授权之前,开发者需要先到公众 ...
uniapp开发微信公众号之网页授权
目录公众号网页授权的步骤网页授权步骤献上官网地址参考:公众号网页授权先要拥有微信公众号,注意此处的公众号是服务号(需要认证),因为个人订阅号没有跳转外部链接的权限项目要能被公网访问到(这样才 ...
微信公众号开发之授权获取用户信息
微信开发交流群:148540125 系列文章参考地址极速开发微信公众号欢迎留言.转发.打赏项目源码参考地址点我点我--欢迎Start 前几篇文章已讲完如何导入项目,如何启动配置项目,如何成为开 ...

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

微信公众号开发：网页授权相关推荐

最新文章

热门文章