关于html:在网页中实现微信扫码登录

5次阅读

共计 1985 个字符,预计需要花费 5 分钟才能阅读完成。

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