使用koa2开发微信公众号之网页授权

最近做需求要对接微信公众号,看了两天文档,基本算是理清楚了,在这里做下记录。

准备工作

了解公众号类型和接口权限

微信公众号分为订阅号服务号,两种账号都可以进行微信认证以获取更多接口权限(个人注册的订阅号不能进行微信认证)。

具体接口权限见:官方文档 >>

获取微信公众平台测试号

如果没有申请好的公众号,可以使用官方提供的测试账号,使用自己微信号扫描登录即可。

登录地址:微信公众平台测试号 >>

网页授权回调域名设置

我们要想在我们的网页中获取用户信息,就必须通过网页授权来实现。网页回调域名是指获取用户信息后需要跳转的域名地址,因为获取用户信息是微信提供的链接,获取后需要再重定向到我们自己的页面。

  1. 使用之前需要到公众号里把我们的域名设置成网页授权域名。
    设置方法:登录微信公众平台 > 设置 > 公众号设置 > 功能设置 > 网页授权域名

  2. 配置规范为全域名(不需要加http://https://),设置后可以在该域名下所有的页面使用,但不能在该域名的二级域名下使用。

如:设置了 www.raydom.wanghttp://www.raydom.wang/index.html 中可以使用,但 http://note.raydom.wang 中不能使用。

后台环境搭建

为了安全起见,微信的接口调用都需要放到后台进行。这里使用的是基于node环境的koa2服务环境。


开始

第一步:用户同意授权,获取code

引导用户打开如下链接:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

参数说明:

参数 必填 说明
appid 公众号的唯一标识
redirect_uri 授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理
response_type 返回类型,请填写code
scope 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
state 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
#wechat_redirect 无论直接打开还是做页面302重定向时候,必须带此参数

注意:redirect_uri 的值需要经过 urlEncode 处理。
js中没有提供原生方法,可以使用工具处理以后使用: urlEncode处理工具 >>

如果用户关注了公众号,scope 使用 snsapi_userinfo 获取用户信息时,也不会弹出授权框(测试公众号每次都会弹)

第二步:通过code获取用户信息
  1. 跳转到我们自己的页面以后,url中会自动添加code。
    示例:http://test.raydom.wang/?code=081tRRYX1Bk2IT0JNqVX16RAYX1tRRYT&state=123

  2. 获取url中的code到后台
    前端代码示例:

// 获取url中的参数
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}

// 这里使用的axios进行ajax请求
axios.get("http://testapi.raydom.wang/login", {
        params: {
            code: GetQueryString("code")
        }
    })
    .then((res) => {
        console.log(res)
    })

  1. 在后台用拿到的 code 获取 ACCESS_TOKENopenid和更多信息
    后台代码示例:
const router = require('koa-router')()  // 引入router
const superagent = require('superagent') // 一个node环境http(s)请求中间件
const cache = require('memory-cache')  // 缓存处理中间件

const appid = "xxxxxxxxxxxxxxx"  // appid
const appsecret = "xxxxxxxxxxxxxxxxxxx"  // appsecret

router.get("/login", async(ctx, next) => {
    let ACCESS_TOKEN = "",
        openid = "";
    
    // 使用code获取openid和access_token 
    await superagent
        .get("https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + 
            appid + "&secret=" + 
            appsecret + "&code=" + 
            ctx.query.code + "&grant_type=authorization_code")
        .then(res => {
            // 此处本来应该用res.body获取返回的json数据,但总是获取不到,只能用text代替
            let result = JSON.parse(res.text)
            ACCESS_TOKEN = result.access_token
            openid = result.openid
        })
        .catch(res => {
            console.log(res)
        })
    
    // 使用ACCESS_TOKEN和openid
    await superagent
        .get("https://api.weixin.qq.com/sns/userinfo?access_token=" + 
        access_token + "&openid=" + openid + "&lang=zh_CN")
        .then(res => {
            console.log(JSON.parse(res.text))
            ctx.body = {
                state: 1,
                msg: '获取access_token成功!'
            }
        })
        .catch(res => {
            console.log(res)
        })
})
  1. 刷新access_token(如果需要)
    由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token有效期为30天,当refresh_token失效之后,需要用户重新授权。
    请求方法:
    获取第二步的refresh_token后,请求以下链接获取access_token:https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
    返回结果:
参数 描述
access_token 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
expires_in access_token接口调用凭证超时时间,单位(秒)
refresh_token 用户刷新access_token
openid 用户唯一标识
scope 用户授权的作用域,使用逗号(,)分隔
关于UnionID机制(测试账号无法获取)
  1. 如果开发者拥有多个移动应用、网站应用和公众帐号,可通过获取用户基本信息中的unionid来区分用户的唯一性,因为同一用户,对同一个微信开放平台下的不同应用(移动应用、网站应用和公众帐号),unionid是相同的。

  2. 获取 unionid 需要 scope 使用 snsapi_userinfo

检验授权凭证(access_token)是否有效

请求接口:http:GET(请使用https协议) https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID

有效返回的JSON结果:

{ "errcode":0,"errmsg":"ok"}

错误时的JSON返回示例:

{ "errcode":40003,"errmsg":"invalid openid"}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351

推荐阅读更多精彩内容

  • title: 微信公众号开发:获取openId和用户信息 tags: 微信公众号 categories: 笔记 ...
    行径行阅读 140,204评论 5 63
  • 微信服务号开发 整体流程 域名报备,服务器搭建 Python开发环境和项目的初始化搭建; 微信公众号注册及开发模式...
    飞行员suke阅读 4,488评论 0 14
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,918评论 25 707
  • 一、公众号介绍 微信公众号分类 订阅号:主要偏于为用户传达资讯(类似报纸杂志),认证前后都是每天只可以群发一条消息...
    小花的胖次阅读 6,402评论 3 37
  • 过去一段时间曾在无数个夜里被梦惊醒 满身是汗。醒了吓得不敢再睡,也害怕黑夜的到来,一个人无法熬过,不能入眠。 过去...
    春风十里w阅读 311评论 0 2