微信扫描小程序码登录 PC 网站 Demo
本文主要介绍如何基于小程序页面授权，使用微信扫描PC端小程序码实现获取用户信息进行系统登录。
之前介绍过一个Demovue项目：基于网页授权的微信扫码登录Demo，最近了解到小程序也可以实现这个功能，所以突发奇想自己实现一个备用吧。
# 实现思路
简要介绍
PC 端点击使用小程序登录时会生成一个 uuid 并弹出一个小程序码，小程序码的 scene 值附带了生成的 uuid 对应到一个线上的小程序页面，微信扫码后打开小程序页面，小程序内解析 scene 值中的 uuid ，用户点击按钮进行授权登录，页面内拿到用户信息后通过云函数将 uuid 及 用户信息传递给服务端后存入云数据库中，PC 端通过轮询方式根据打开页面时生成的 uuid 作为参数来获取用户的 openid 等基础信息进行登录操作从而进入系统。
# 使用技术栈
主要技术介绍：
- vue:2.6.11
- vuex:3.1.2
- vue-router:3.1.5
- element-ui:2.13.0
- koa:2.11.0
- 小程序云开发
# 主要问题
- 小程序全局 access_token 项目需要在 web 端生成小程序码，二维码生成需要小程序全局 access_token，所以选择了在打开页面的时候预生成全局 access_token 以备用
- 小程序码更新问题 本示例项目的小程序页面授权获取信息采用了两种方式
- 云端免鉴权：用户扫码打开小程序页面时就利用云函数获取到用户的 openid 信息
- 按钮获取：通过用户主动点击授权按钮获取开放数据，包含昵称、头像数据 两种处理方式不同，所以生成的小程序码的 scene 值也是不同的，用户切换两种方式的时候需要实时更新二维码
# 项目开发
# 服务端启动
服务端基于 koa 框架开发，在根目录的 server 文件夹下。
安装依赖
cd server
npm install配置小程序，复制一份 config.sample.js 重命名为 config.js 填好如下配置
module.exports = {
port: '', // 服务端端口号
appId: '', // 小程序appid
appSecret: '' // 小程序secrect
}然后启动服务
node app.js访问地址
http://localhost:2002接着我们来配置 web 端
# web 端
修改env环境变量配置，项目使用的后台服务端口为 2002
VUE_APP_BASE_API = 'http://localhost:2002'安装依赖
npm install开发
npm run serve访问
http://localhost:9556web 端默认使用9556端口
# 小程序修改
项目的主角是小程序，所以当然需要一个小程序，个人主体就可以。 有了小程序之后首先要在微信开发者工具内开通云开发。 接着进行下面的操作。
- 新建云函数 例：openid_login 作用主要是为了获取用户信息并存入云数据库 index.js 内容：
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
try {
let openid = wxContext.OPENID
// 防止重复存储
let uuids = await db
.collection('uuids')
.where({
uuid: event.uuid,
})
.get()
if (uuids.data.length) {
await db
.collection('uuids')
.doc(uuids.data[0]._id)
.update({
data: {
openid: openid,
},
})
return uuids
}
const result = await db.collection('uuids').add({
data: {
...event,
uuid: event.uuid,
openid: openid,
},
})
return result
} catch (err) {
console.log(err)
return err
}
}package.json 内容：
{
"name": "openid_login",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"wx-server-sdk": "latest"
}
}- 在云数据库新建一个集合，比如 uuids，主要为了存储 uuid 以及用户信息的。
- 新建一个小程序页面，扫码登录用的。 这里我是用的个人博客小程序，框架用的 mpvue ，下面是核心代码。
onLoad(options) {
let params = []
// 扫码进来时的处理
if (options.scene) {
params = decodeURIComponent(options.scene).split('&')
this.uuid = params[0].split('=')[1]
this.useAuth = params[1].split('=')[1]
} else {
this.uuid = options.uuid
this.useAuth = options.useAuth
}
if (+this.useAuth === 0) {
wx.cloud.callFunction({
name: 'openid_login',
data: {
uuid: this.uuid,
},
})
}
},需要注意的是小程序码里对应的页面必须是线上的页面，所以要审核通过之后才能进行测试。
# 在线 Demo
可以用这个来体验一下扫描小程序码登录的有趣玩法。 http://mpscan.tiaocaoer.com
# 项目总结
一个字：有意思。 首先又可以多拉几个用户了，用户每次登录都需要扫码二维码，无形当中增加了很多日活啊，妙哉~ 另外巧妙运用了云开发的免鉴权，如果只是需要 openid 或者 unionid 的话，会变得很是方便。 缺点就是万一依附的小程序有什么意外，这个功能就用不了，另外这个适合做成一个插件，这样子就比较通用了。