微信网页授权及使用微信jssdk

本文详细介绍了微信网页授权的两种方式,重点讲解了以snsapi_userinfo为scope的授权流程,包括前端获取code,后端通过code换取access_token及拉取用户信息。此外,还阐述了如何使用微信jssdk进行分享和支付,包括绑定域名、引入JS文件、生成签名以及调用支付接口的步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

微信网页授权

开发场景:公众号商城

网页授权有两种方式
一种为以snsapi_base为scope的网页授权,即静默授权,

优点:用户无感知
缺点:用户需关注公众

另一种为以snsapi_userinfo为scope的授权方式

优点:用户无需观众公众号
缺点:用户需手动统一授权

本场景使用第二种方式

前端部分

第一步:获取code

引导用户打开如下链接:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

APPID:公众号的唯一标识
redirect_uri:授权后重定向的回调链接地址

redirect_uri的地址配置:公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头;

授权页面:

用户同意授权后

如果用户同意授权后,页面将跳转至 redirect_uri/?code=CODE&state=STATE

通过截取url获取code,由于公众号的secret和获取到的access_token安全级别都非常高,因此将code传给后端,由后端处理接下来的流程,包括刷新access_token、通过access_token获取用户信息等步骤。

code说明 : code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。

后端部分

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

拿到前端传的code后,请求以下链接获取access_token:

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
第三步:拉取用户信息

拿到第二步接口返回的access_token和openid后,请求一下链接拉取用户信息:

GET: https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

使用微信jssdk(分享,支付)

绑定域名

在公众号的“公众号设置”的“功能设置”里填写“JS接口安全域名”
注意: 不需要 http:// 或 https:// ,只填域名或路径即可
要下载MP_verify_EZhQkscUv44pvLNO.txt文件到项目根目录下,本项目是使用nginx代理,项目放在服务器某个文件夹下的dist目录,所以MP_verify_EZhQkscUv44pvLNO.txt放在dist目录下即可

引入JS文件

可直接下载官方源码,在使用的地方引用即可
本项目使用npm
安装:

npm install weixin-js-sdk

使用

import wx from 'weixin-js-sdk';

通过config接口注入权限验证配置

1.后端签名
(1)获取 access_token
https请求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET

注意: access_token的有效期目前为2个小时,需定时刷新

(2)获取jsapi_ticket

用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket

https请求方式: GET https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

注意: jsapi_ticket的有效期目前为2个小时,需定时刷新

(3)生成签名

签名算法

参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分,一般由前端传给后端) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。

官方实例

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步骤2. 对string1进行sha1签名,得到signature:

//安装
npm install jssha --save
//使用
var jsSHA = require('jssha');

var shaObj = new jsSHA(string1, "TEXT");
signature = shaObj.getHash('SHA-1', 'HEX');
0f9de62fce790f9a083d5c99e95740ceb90c27ed
2.前端拿到签名后注入权限验证配置
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','chooseWXPay'] // 必填,需要使用的JS接口列表(本项目用到的分享和支付)
});

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

调用支付接口

支付签名方式与上面的验证config签名方式类似

wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串,不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
  signType: '', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
  paySign: '', // 支付签名
  success: function (res) {
    // 支付成功后的回调函数
  },
  cancel: function (res) {
  	// 取消支付的回调函数
  }
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值