共计 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
- 将 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 解决后传回,防止泄密。