首先,你得在微信开放平台的“管理中心”创建一个网站应用。这个网站应用的官网地址需要在工信部作ICP报备。
创建应用后,开通“微信登录”功能:
开通该功能需要作身份验证。上传公司营业执照等材料后,支付300米,会有指定的验证公司打电话给你核实身份。一切OK后就可以开通了。
开通后就可以使用微信登录功能啦!
我们先实现页面出现微信二维码的功能,也就是官方文档说的
第一步:请求CODE
创建一个login.html页面,代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
</head>
<body>
<div id='container'></div>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script type="text/javascript">
var obj = new WxLogin({
self_redirect:true,
id:"container",
appid: "@#……¥##%2",
scope: "snsapi_login", //网站都是这个参数
redirect_uri: "http://fenxiangyuntu.com/",
state: "",
style: "",
href: ""
});
</script>
</body>
</html>
redirect_uri是申请获取code的地址,该地址必须是你在微信开放平台申请的域名下的地址,并且要跟你的appid对应,否则会返回错误。访问
http://localhost/login.html就...!扫描二维码后就会指向redirect_uri。像上面的例子我扫描后二维码的位置会变成我的网站主页。
WxLogin的redirect_uri只能指向网址,不能带端口号,我们需要指向一个node.js的服务来处理接下来的操作,这里我们使用nginx来做反向代理,关于nginx的配置参见:
nginx反向代理
以及我的文章:
nginx的安装配置,使其可以访问nodejs
- 将redirect_uri修改为
redirect_uri: "http://fenxiangyuntu.com/getcode/",
- 在nginx的配置文件中增加
location /getcode/
{
proxy_pass http://我的内网IP:6060/code/;
}
这样微信扫描后就会转向node.js的code路由。
app.get('/code', function(req, res) {
var returnCode = req.query.code;
const url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + authoriz_data.appid + '&secret=' + authoriz_data.secret + '&code=' + returnCode + '&grant_type=' +
authoriz_data.grant_type;
request({
url: url, //请求路径
method: "GET", //请求方式,默认为get
headers: { //设置请求头
"content-type": "application/json",
}
}, function(error, response, body) {
if (!error && response.statusCode === 200) {
res.send(body); //发送access_token到发起请求的页面
res.end();
}
});
})
req.query返回redirect_uri?code=CODE&state=STATE
这样我们就获取了CODE !
第二步:通过code获取access_token
这步就比较简单了,我们按照腾讯的官方文档拼个url发起request get请求,返回的body就是我们想要的结果啦!
返回的结构如下:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
我们把这个结果发送回扫码的网页,扫码用户的openid就可以获取到了。
实际的应用场景中,建议把openid处理后传回,避免泄密。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。