node.js实现微信开发之获取用户授权
本篇主要讲述,如何在微信中打开自家页面后,弹窗请求用户授权,以便拿到用户的微信信息。
首先说一下,完成自定义分享信息的,从无到有的流程:
基础硬件服务:
需要一个公网可以访问的有效域名:
- 购买域名,并备案,我是在阿里云购买的,备案需要十几个工作日。
- 购买ip,然后设置上面的域名,解析到该ip,这个时间可以快到忽略。
拥有自己的服务器,来存放自己页面项目:
我还是在阿里云购买购买服务器,这个花费最大,几百元一年的使用权。
而且这个服务器,本质就是一台电脑,是电脑就有配置,我目前只是自己学习使用,配置几乎是最低的,而且购买的套餐自带公网ip,这么一来我连上面购买ip的钱也省了。
综上所述,最终我只购买了域名和一个套餐自带公网ip的服务器,服务器用来放置前端项目和后台项目。
阿里云ECS:https://cn.aliyun.com/product/ecs
微信公众平台,开发者认证
打开微信公众平台https://mp.weixin.qq.com/,使用邮箱注册,注意,一个邮箱只能注册一个微信公众平台账号,一个账号只能选择一种账号分类且不能更改,这里一定要慎重,这里选择订阅号。
可选个人类型、企业类型等等,其中,个人类型是不没有分享定制功能的,但企业类型我又不符合。。。最终我还是选择的个人类型,因为即使我的账号没有权限,但微信公众号里面,提供一个功能全开的测试账号,使用测试账号可以进行学习和测试,还是没问题的。
填写信息,绑定微信,注册完成,登录进去。
为了进行开发,需要在这里和你的后台项目和前端项目进行对应的配置,让微信确认后台项目和前台项目都是你的之后,才会提供服务。
有关服务器端和后台项目的配置:
首先需要说明,由于订阅号的功能比较少,如果只是进行学习,建议在开发=>开发者工具中选择使用公众平台测试帐号进行学习性开发,这样可以使用全功能的微信服务,配置也比较少。
下面的配置步骤均是使用自己的账号需要进行的配置
- 开发=>基本配置=>公众号开发信息,在这里记下开发者ID(AppID),接着开通服务,记下开发者密码(AppSecret),开发中会需要输入。
- 设置IP白名单,这里写的是自己的服务器IP地址,因为功能上线后,需要使用这台服务器,通过开发者ID和密码来向微信服务区获取自己服务的access_token
- 进行下面的后台项目,目的是让微信确定这个后台项目是你的,检验方法是微信发起一个get请求,你返回正确的返回值,启用此配置时调用:
- url:接口地址,比如http://wx.my.com/forWx
- Token:完全自定义的一个字符串,相当于个暗号,你的返回值需要这个字符串参与拼装。
- EncodingAESKey:随机生成即可
- 消息加解密方式:自选,这里我使用的是明文模式
有关前端项目的配置:
设置=>公众号设置=>功能设置=>JS接口安全域名在此处添加你的要使用微信sdk功能的网站的域名,比如wx.qq.com或者wx.qq.com/user,最多可写三个,且需要验证。
>验证的方式,就是将一个微信提供的txt文件,放在此域名对应的放置于服务器中的web项目的访问根目录中,需要和主文件(大部分默认为```index.html```)放在同一级,当提交的时候,微信会进行访问,来获取文件,确认此域名是你的。
配置完成后,就可以进行开发了。
下面进入代码阶段。
证明后台项目和前端项目时我自己的
首先,上面证明服务是自己的部分,我们需要实现一个接口,我用http://wx.my.com/forWx打的比方,那么为了启用配置,我需要实现/forWx给微信调用,下面是代码:
node的基础环境搭建省略,这里只写接口内部方法了,关键是参数加密拼装
constcrypto=require('crypto')//引入加密模块 constconfig=require('./config')//引入配置文件 //提供给微信调用 server.get('/forWx',function(req,res){ res.header('Access-Control-Allow-Origin','*') //1.获取微信服务器Get请求的参数signature、timestamp、nonce、echostr letsignature=req.query.signature//微信加密签名 lettimestamp=req.query.timestamp//时间戳 letnonce=req.query.nonce//随机数 letechostr=req.query.echost//随机字符串 //2.将token、timestamp、nonce三个参数进行字典序排序,其中token就是设置在微信页面中的那个自定义字符串 letarray=[config.token,timestamp,nonce] array.sort() //3.将三个参数字符串拼接成一个字符串进行sha1加密 lettempStr=array.join('') consthashCode=crypto.createHash('sha1')//创建加密类型 letresultCode=hashCode.update(tempStr,'utf8').digest('hex') //4.开发者获得加密后的字符串可与signature对比,标识该请求来源于微信 if(resultCode===signature){ res.send(echostr) }else{ res.send('mismatch') } })
完成,上面是证明服务器是我的,后面还需要证明前端项目是我的,这个就跳过了,因为太简单,直接下载那个文件,放到自己服务器中,前端项目的index.html同级即可
上面的操作,是只要想进行微信公页面开发,必须要有的步骤,一切的基础。
首先顺着功能使用流程,顺一下实现此功能的方法:
用户在微信打开页面后,立即或者通过方法触发ajax,把当前url和一些state(自定义的数据,因为弹窗请求用户授权,是需要跳转页面的,这个state就是会帮你带到下个页面链接中的数据)作为请求参数,请求自己的后台接口。
后台请求微信服务器,把以下作为参数,拼装到某个固定的微信指定的url后,返回给前端,参数为:
- appId:自己的AppId
- redirect_uri:前端给的url
- scope:授权方式,是静默授权(只能获取用户openId)还是弹窗授权(能获取用户微信个人信息)
- state:要带到新页面的参数
前端拿到后端拼好的这个url,直接window.location.href暴力跳转
如果静默授权,则直接用户无感,如果是弹窗授权,则新页面(微信方提供的页面)会弹窗询问用户,是否授权
用户同意授权后,微信再次跳转页面,即跳转到之前传的你的url地址中,还会把state参数给你带上,此外,还多了个code参数,即openId
新页面中,可以使用用户的openId,再加上自己的AppId和AppSecret,调用微信的接口,获取用户的access_token
最后再使用用户的openId和access_token,成功获取用户信息
下面是前端获取微信授权的...html页面
微信 获取微信授权(静默)