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

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

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

娄靖宇

微信小程序写入数据库报错E11000 duplicate key error collection

CSS transition 小技巧！如何保留 hover 的状态？

CSS 如何让auto height完美支持过渡动画？

前端开发工具

你可能不知道的dialog弹窗

那些不用js也能实现的效果

go html/template 模板的使用实例

娄靖宇