• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

在网页中实现微信扫码登录

互联网 diligentman 3个月前 (02-08) 44次浏览

首先,你得在微信开放平台的“管理中心”创建一个网站应用。这个网站应用的官网地址需要在工信部作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

  1. 将redirect_uri修改为
redirect_uri: "http://fenxiangyuntu.com/getcode/",
  1. 在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处理后传回,避免泄密。


程序员灯塔
转载请注明原文链接:在网页中实现微信扫码登录
喜欢 (0)