首先,你得在微信开放平台的“管理中心”创建一个网站应用。这个网站应用的官网地址需要在工信部作ICP报备。
开通该功能需要作身份验证。上传公司营业执照等材料后,支付300米,会有指定的验证公司打电话给你核实身份。一切OK后就可以开通了。
开通后就可以使用微信登录功能啦!
我们先实现页面出现微信二维码的功能,也就是官方文档说的
第一步:请求CODE
创建一个login.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处理后传回,避免泄密。