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

首先,你得在微信开放平台的“管理中心”创建一个网站应用。这个网站应用的官网地址需要在工信部作ICP报备。

创建应用后,开通“微信登录”功能:
image.png

开通该功能需要作身份验证。上传公司营业执照等材料后,支付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处理后传回,避免泄密。

10 声望
0 粉丝
0 条评论
推荐阅读
微信小程序写入数据库报错E11000 duplicate key error collection
微信小程序对数据库进行set或update操作时,会报错误: {代码...} 通常我们在开放平台调用云函数来进行数据库写入后,在微信小程序里进行更新,就会报这个错误,因为:你修改的这条数据不是你创建的。解决办法:1...

娄靖宇阅读 2.6k

CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 3.9k评论 2

封面图
CSS 如何让auto height完美支持过渡动画?
欢迎关注我的公众号:前端侦探众所周知,高度在设置成auto关键词时是不会触发transition过渡动画的,下面是伪代码 {代码...} 效果如下如果希望展开时有过渡动画,例如这样通常是借助 JS 动态去获取元素的高度(还...

XboxYan17阅读 1.2k评论 2

封面图
前端开发工具
前端教程阿西河前端教程丨一个助你成为全栈开发的网站前端高手进阶JavaScript利用js实现表单的校验KeyCode 查询表现代 JavaScript 教程时间戳(Unix timestamp)转换工具HTML minifierJavaScript代码压缩-js代码压...

寒青14阅读 2.6k

你可能不知道的dialog弹窗
想必大家都知道 HTML5 中有 dialog 这样一个标签,顾名思义,就是“弹窗”。除了有良好的语义外,随着浏览器的不断更新迭代,还出现了许多你可能不知道的特性,快速了解一下吧~

XboxYan9阅读 881

封面图
那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

阿山7阅读 389评论 4

封面图
go html/template 模板的使用实例
模板文件,建议为每个模板文件显式的定义模板名称:{{ define &quot;tplName&quot; }},否则会因模板对象名与模板名不一致,无法解析(条件分支很多,不如按一种标准写法实现),另展示一些基本的模板语法。

big_cat4阅读 12.5k

10 声望
0 粉丝
宣传栏