微信网页开发

# 微信网页授权

简单来说就是，如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

具体而言，网页授权流程分为三步

引导用户进入授权页面同意授权，获取code
通过code换取网页授权access_token（与基础支持中的access_token不同）
通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

# 授权流程

测试号申请 https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

# 第一步：用户同意授权，获取code

(一) 公众平台网页授权在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面：

 Href: https://open.weixin.qq.com/connect/oauth2/authorize
 
 parasm: {
   appid: APPID, // 公众号的唯一标识
   redirect_uri: REDIRECT_URI, //需要公众号授权作用域相同，授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
   response_type: 'code', //返回类型
   scope: SCOPE, // 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
   state: STATE, // 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
   #wechat_redirect //无论直接打开还是做页面302重定向时候，必须带此参数
 }
 
 
// 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。

1
2
3
4
5
6
7
8
9
10
11
12
13

尤其注意：由于授权操作安全等级较高，所以在发起授权请求时，微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问

注意：

由于授权操作安全等级较高，所以在发起授权请求时，微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问;

对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知。

(二) 开放平台网页扫码授权（1）跳转微信授权域授权

 Href: https://open.weixin.qq.com/connect/qrconnect
 
 parasm: {
   appid: APPID, // 公众号的唯一标识
   redirect_uri: REDIRECT_URI, //需要公众号授权作用域相同，授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
   response_type: 'code', //返回类型
   scope: SCOPE, // 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login
   state: STATE, // 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
   #wechat_redirect //无论直接打开还是做页面302重定向时候，必须带此参数
 }
 
 
//若提示“该链接无法访问”，请检查参数是否填写错误，如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。

1
2
3
4
5
6
7
8
9
10
11
12
13

（2）授权码内嵌到自己页面授权步骤1：在页面中先引入如下JS文件（支持https）

https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

步骤2：在需要使用微信登录的地方实例以下JS对象：

 const obj = new WxLogin({
 self_redirect: false, // true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
 id:"login_container",  // 第三方页面显示二维码的容器id
 appid: "",  // 应用唯一标识，在微信开放平台提交应用审核通过后获得
 scope: "",  // 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
 redirect_uri: "", // 重定向地址，需要进行UrlEncode
 state: "", // 用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
 style: "", // 提供"black"、"white"可选，默认为黑色文字描述。
 href: "" // 自定义样式链接，第三方可根据实际需求覆盖默认样式。
 });

1
2
3
4
5
6
7
8
9
10

# 第二步：通过code换取网页授权access_token

第一步用户授权后会跳转至redirect_uri/?code=CODE&state=STATE

注意： code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期

GET: https://api.weixin.qq.com/sns/oauth2/access_token

params: {
  appid: APPID, // 公众号的唯一标识
  secret: SECRET, // 公众号的appsecret
  code: CODE, // 填写第一步获取的code参数
  grant_type: 'authorization_code' //填写为authorization_code
}

// 返回的JSON结果
{
  "access_token":"ACCESS_TOKEN", // 网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
  "expires_in":7200, //	access_token接口调用凭证超时时间，单位（秒）
  "refresh_token":"REFRESH_TOKEN", //用户刷新access_token
  "openid":"OPENID", //用户唯一标识，请注意，在未关注公众号时，用户访问公众号的网页，也会产生一个用户和公众号唯一的OpenID
  "scope":"SCOPE"  //用户授权的作用域，使用逗号（,）分隔
}

 
// 由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意： 由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。

校验授权凭证（access_token）是否有效

GET: https://api.weixin.qq.com/sns/auth
params: {
  openid: OPENID, // 用户的唯一标识
  access_token: ACCESS_TOKEN // 网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
}

// 返回JOSN结果
{ "errcode":0,"errmsg":"ok"}

1
2
3
4
5
6
7
8

刷新授权凭证（access_token）

GET: https://api.weixin.qq.com/sns/oauth2/refresh_token
params: {
  appid: APPID,
  grant_type: 'refresh_token',
  refresh_token: REFRESH_TOKEN
}

// 返回的JSON结果
{
  "access_token":"ACCESS_TOKEN", // 网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
  "expires_in":7200, //	access_token接口调用凭证超时时间，单位（秒）
  "refresh_token":"REFRESH_TOKEN", //用户刷新access_token
  "openid":"OPENID", //用户唯一标识，请注意，在未关注公众号时，用户访问公众号的网页，也会产生一个用户和公众号唯一的OpenID
  "scope":"SCOPE"  //用户授权的作用域，使用逗号（,）分隔
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 第三步：拉取用户信息(需scope为 snsapi_userinfo)

如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。

GET: https://api.weixin.qq.com/sns/userinfo
params: {
  access_token: ACCESS_TOKEN,
  openid: OPENID,
  lang: 'zh_CN'
}

// 返回JSON数据包
{   
  "openid":"OPENID", //用户的唯一标识
  "nickname": NICKNAME,  //用户昵称
  "sex":"1",  //用户的性别，值为1时是男性，值为2时是女性，值为0时是未知
  "province":"PROVINCE" //用户个人资料填写的省份
  "city":"CITY", //普通用户个人资料填写的城市
  "country":"COUNTRY", //国家，如中国为CN
  "headimgurl": "HEADIMG_URL", //用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"],  //	用户特权信息，json 数组，如微信沃卡用户为（chinaunicom）
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"  // 只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。(https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 需要知道

关于网页授权access_token和普通access_token的区别

1、微信网页授权是通过OAuth2.0机制实现的，在用户授权给公众号后，公众号可以获取到一个网页授权特有的接口调用凭证（网页授权access_token），通过网页授权access_token可以进行授权后接口调用，如获取用户基本信息；

2、其他微信接口，需要通过基础支持中的“获取access_token”接口来获取到的普通access_token调用。

关于UnionID机制

1、请注意，网页授权获取用户基本信息也遵循UnionID机制。即如果开发者有在多个公众号，或在公众号、移动应用之间统一用户帐号的需求，需要前往微信开放平台（open.weixin.qq.com）绑定公众号后，才可利用UnionID机制来满足上述需求。

2、UnionID机制的作用说明：如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为同一用户，对同一个微信开放平台下的不同应用（移动应用、网站应用和公众帐号），unionid是相同的。

关于特殊场景下的静默授权

1、上面已经提到，对于以snsapi_base为scope的网页授权，就静默授权的，用户无感知； 2、对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知。

# JSSDk功能简介

jssdk微信官方文档 (opens new window)

# 概述

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

# JSSDK使用步骤

# 步骤一：绑定域名

先登录微信公众平台 (opens new window)进入"公众号设置-->功能设置"里填写“JS接口安全域名”。

# 步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

# 步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

1
2
3
4
5
6
7
8

# 步骤四：通过ready接口处理成功验证

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

1
2
3

# 步骤五：通过error接口处理失败验证

wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

1
2
3

接口调用说明

所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：

success：接口调用成功时执行的回调函数。
fail：接口调用失败时执行的回调函数。
complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

# 常用接口举例

# 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

1
2
3
4
5
6
7
8
9
10
11

# 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
  wx.updateTimelineShareData({ 
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

1
2
3
4
5
6
7
8
9
10

# 操作界面

1. 关闭当前网页窗口接口
wx.closeWindow();

2. 批量隐藏功能按钮接口
wx.hideMenuItems({
  menuList: [] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
});

3. 批量显示功能按钮接口
wx.showMenuItems({
  menuList: [] // 要显示的菜单项，所有menu项见附录3
});

4.隐藏所有非基础按钮接口
wx.hideAllNonBaseMenuItem();
// “基本类”按钮详见附录3

5.显示所有功能按钮接口
wx.showAllNonBaseMenuItem();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 微信支付

JSAPI支付 (opens new window)：用户通过微信扫码、关注公众号等方式进入商家H5页面，并在微信内调用JSSDK完成支付

H5支付 (opens new window)：用户在微信以外的手机浏览器请求微信支付的场景唤起微信支付

# 附录

基本类

举报: "menuItem:exposeArticle"
调整字体: "menuItem:setFont"
日间模式: "menuItem:dayMode"
夜间模式: "menuItem:nightMode"
刷新: "menuItem:refresh"
查看公众号（已添加）: "menuItem:profile"
查看公众号（未添加）: "menuItem:addContact"

传播类

发送给朋友: "menuItem:share:appMessage"
分享到朋友圈: "menuItem:share:timeline"
分享到QQ: "menuItem:share:qq"
分享到Weibo: "menuItem:share:weiboApp"
收藏: "menuItem:favorite"
分享到FB: "menuItem:share:facebook"
分享到 QQ 空间/menuItem:share:QZone

保护类

编辑标签: "menuItem:editTag"
删除: "menuItem:delete"
复制链接: "menuItem:copyUrl"
原网页: "menuItem:originPage"
阅读模式: "menuItem:readMode"
在QQ浏览器中打开: "menuItem:openWithQQBrowser"
在Safari中打开: "menuItem:openWithSafari"
邮件: "menuItem:share:email"
一些特殊公众号: "menuItem:share:brand"

上次更新: 2024/01/18, 10:44:15

← 双向绑定原理微信小程序开发(uni-app)→