官方文档:网站应用微信登录开发指南
流程图
使用步骤
- 在使用的页面中引入:
http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
在需要使用微信登录的地方实例以下JS对象:
var obj = new WxLogin({ id:"containerId", // 需要显示的容器id self_redirect:true,/*true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri,false:手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。*/ appid: "wx*****", // 公众号appid wx******* scope: "snsapi_login", // 应用授权作用域,以逗号隔开。网页应用目前仅支持snsapi_login redirect_uri: "", // 授权成功后回调的url state: "", /* 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),可设置为简单的随机数加session用来校验*/ style: "black", // 提供"black"、"white"可选。二维码的样式 href: "" // 外部css文件url,需要https });
- 过程详解:
当使用微信扫码,微信校验成功后,会访问redirect_uri,并在redirect_uri的参数上添加code和设置的state。在node层,添加一个redirect_uri对应的路由,当路由接受到对应请求,先校验一下state,然后将拿到的code和appid, secret, grant_type参数请求 https://api.weixin.qq.com/sns…,拿到用户的ACCESS_TOKEN
通过ACCESS_TOKEN访问https://api.weixin.qq.com/sns…,便可以拿到用户的微信信息了。
将拿到的用户信息(有用户的唯一的openid),调用后台的微信登录接口,成功redirect到进入登录页面之前的url便可以了。
备注:有的情况可能需要校验或刷新用户的ACCESS_TOKEN.