短的答案
- 在微信开放平台上注册一个网页应用的账号, 审批通过之后会生成一个 AppId 和 AppSecret
- 用户在网页上触发登录机制后, 浏览器会跳转到一个拼凑出来的的 url 上
例如, 在京东使用微信登录, 它的 url 是这样的
https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=4254CD505A1F4E17DDD96009D4EA2BB860FC6C77A08C92FF3928F27AF381BB92C770127B30BC8487D1703C5878979B10&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3Def5652d6750f404399e62e4e7510b066&response_type=code&scope=snsapi_login#wechat_redirect](https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=4254CD505A1F4E17DDD96009D4EA2BB860FC6C77A08C92FF3928F27AF381BB92C770127B30BC8487D1703C5878979B10&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3Def5652d6750f404399e62e4e7510b066&response_type=code&scope=snsapi_login#wechat_redirect)
观察一下, 这个 url 以 key1=value1&key2=value2 的形式携带了一些信息
那么, 当用户跳转到这个 url 上时, 这些信息就以查询参数的形式发送给微信的服务器, 微信服务器会返回一个页面, 用户在扫描微信上的二维码后, 微信服务器就会完成那那一部分的工作, 然后让用户端主动跳转到我们事先准备的一个 url 上, 例如 www.xxx.com/authcallback?code=xxxxxxx, 以查询参数的形式携带一个 code, 这样我们自己的服务器就能拿到这个 code - 我们服务器后台根据这个 code 再去请求微信服务器, 他会返回 openid, unionid, userinfo 等信息, 我们的服务器用 redis 或者其他数据库记录下这个信息
- 用 cookie 或类似的手段来给页面记录一下身份, 以便下次用户访问的时候会找到这个用户的 openid 等信息, 这样就完成了一个第三方登录的流程
长的答案(完整代码)
一. 前端跳转到微信的url上
这里使用的是在当前页面扫码登录的方式 (如果想使用类似京东直接跳转的登录, 可以直接平凑出来一个 url 然后跳转即可 )
- 引入微信登录的js文件
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> - 调用微信的接口
var obj = new WxLogin({
id: "login_container",
appid: "wx8725b9a19e0abc0e",
scope: "snsapi_login",
redirect_uri: "https://xxx.com/auth/callback",
state: "",
style: "",
href: ""
})
- 几个参数的含义
- id: 显示登录二维码的容器
- appid: 网站应用的id
- scope: 网页应用只用写 snsapi_login
- redirect_uri: 后端准备的回调地址, 用来接收code
- state: 会原路返回, 可用于防止csrf攻击, 非必须
- style: 二维码的样式, 提供"black", "white", 非必需
- href: 自定义样式链接
二. 后端接收 code
后端使用的是 express 的写法
同时也使用了由朴灵大神写的库 wechat-oauth, 它内部封装了获取用户信息的方法, 让我们不必纠结于这些细节
只需要知道它做了什么: 发送 code 到微信的服务器, 然后微信返回了用户的信息
可以命令行运行 npm i wechat-oauth 下载
代码如下
const OAuth = require('wechat-oauth')
const router = express.Router()
// 使用网页应用的 appid 和 secret 去初始化 wechat-oauth 的方法
const wxPcClient = new OAuth(WX_APP_ID, WX_APP_SECRET)
router.get('/callback', (req, res) => {
// 这里接收前端的 redirect_url 传递的 code
const { code } = req.query
wxPcClient.getAccessToken(code, (err, result) => {
if (!err) {
const accessToken = result.data.access_token
const openId = result.data.openid
const unionId = result.data.unionid
// 这里生成一个 sessionid
const sessionId = generateSessionId()
wxPcClient.getUser(openId, (err, result) => {
// 这里获取到了用户的信息, 可以存储在数据库中
const {nickname, sex, city, province, country, headimgurl} = result
// 设置一个 cookie 用于标记这个用户
res.cookie('wxsessionid', sessionId, { maxAge: 84600000, httpOnly: true })
// 登录成功后做一个跳转, 也可以不做
res.redirect('https://xxx.com/yyy.html')
})
}
})
})
