美文网首页
微信网页授权、JSSDK授权

微信网页授权、JSSDK授权

作者: X_Y发 | 来源:发表于2018-03-23 23:05 被阅读0次

微信授权使用以及填坑之路,请各路大神多多指教
如有冲突请以微信接口文档为准
本文为个人笔记形式展现,不喜勿喷

微信网页授权

  1. 用户同意授权,获取code,所需参数appid、url
var appid= 1234567890 // appid
var url = 'http://' // 回调链接地址,需转码为URI格式,必须去除#后的参数
var scope = 'snsapi_base' // snsapi_base静默授权,snsapi_userinfo弹出授权页面
var state= '' // 重定向带的参数
window.location.href = https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=url&response_type=code&scope=scope&state=state#wechat_redirect

在重定向的链接后获取返回的code参数

  1. 通过code换取网页授权access_token,所需参数appid、secret、code,通常在后台发起请求并获取数据
var appid = '987654321'
var secret = '123456789' // 密匙appsecret
var code = '987654321'
// 请求地址
var url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='+appid+'&secret='+secret+'&code='+code+'&grant_type=authorization_code'

获取json数据包,其中包括openid

3、刷新access_token

4、拉取用户信息,所需参数access_token、openid、lang

var access_token = 'xxxxxx'
var openid = 'xxxxxxxxxxxx'
var lang = 'zh_CN'
// 请求地址
var url = 'https://api.weixin.qq.com/sns/userinfo?access_token='+access_token +'&openid='+openid+'&lang='+lang

获取返回的微信用户信息

微信JSSDK授权

1、绑定域名
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
设置安全域名前需先下载文件(配置页面内有)上传至该域名(项目)根目录下

2、引入JS文件 (http://res.wx.qq.com/open/js/jweixin-1.2.0.js

3、通过config接口注入权限验证配置,所需资料在后台通过签名算法获取

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

4、通过ready接口处理验证

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

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

签名算法见文末的附录1,所有JS接口列表见文末的附录2

填坑

网页授权失败

1、获取code时,URL是否去除#后参数;
2、获取code是,URL是否转化为URI格式;
3、检查appid是否出错;
4、每次授权,code只能使用一次;
5、获取用户信息失败,获取code时scope参数设置错误;

JSSDK授权bug

授权调用接口失败

1、域名未设置或设置错误;
2、未引入js文件;
3、未在jsapilist数组中引用;
4、调用接口时不在ready方法内;

接口调用失败
分享失败

1、问题:分享标题、内容不显示
解决:a、jssdk授权失败;b、分享接口未在ready中引用

2、问题:分享内容显示但图片不显示
解决:a、图片地址错误,需为线上图片;b、分享内容中出现敏感词汇,参考该文章

以上为目前遇到的微信授权的问题以及解决方法,还有其他的坑等想起来后再补充,欢迎大家补充

相关文章

  • 微信网页授权、JSSDK授权

    微信授权使用以及填坑之路,请各路大神多多指教如有冲突请以微信接口文档为准本文为个人笔记形式展现,不喜勿喷 微信网页...

  • 微信公众号配置

    微信授权配置(WEB端设置) 微信JSSDK配置(WEB端设置) 微信JSSDK配置(后台设置)

  • 基于Node.js的微信JS-SDK后端接口实现(三)

    微信公众号开发之五微信网页授权 开始之前建议先阅读微信官方文档 微信公众号开发之五微信网页授权 一.网页授权的作用...

  • django: 微信网页授权

    微信网页授权基础知识 网页授权的最终目的就是获取微信的用户信息,微信的网页授权方式有两种 snsapi_base:...

  • 微信公众号开发(二)

    微信公众号开发文档 微信网页授权 微信客户端中访问第三方网页,可通过 微信网页授权机制 来获取用户信息。授权机制:...

  • 微信开发之微信网页授权

    微信网页授权 所谓的微信网页授权说白了就是 用户微信客户端内访问第三方网页,公众号可以根据网页授权这个机制来获取用...

  • 微信网页授权

    重新整理做过的功能,以及过程遇到问题,温故而知新 平台开发文档 一 准备工作 (a.接入 b.配置) a) 修改/...

  • 微信网页授权

    背景 用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。 配...

  • 微信网页授权

    微信通过网页授权可以在网页内获取微信用户信息,进而在网页内实现相关的业务逻辑。 微信网页授权的scope有两种,一...

  • 微信网页授权

    一、(测试号为例)大家可以先查看http://www.cnblogs.com/txw1958/p/weixin71...

网友评论

      本文标题:微信网页授权、JSSDK授权

      本文链接:https://www.haomeiwen.com/subject/zpmtcftx.html