| 微信小程序实现扫码登录网站 | 您所在的位置：网站首页 › 微信扫码登录器有风险吗 › 微信小程序实现扫码登录网站 |
微信小程序实现扫码登录网站
|
最近使用腾讯云时，用的都是微信扫码登入，发现会跳转到腾讯云助手小程序进行确认登入。感觉挺好用的，就想做一个扫码登入。 实现原理： 打开网站，使用云开发，进行匿名登入用户点击微信登入，调用云函数，获取匿名用户uid，并生成一个带参数 uid 的小程序码用户微信扫码进入小程序，获取 uid 并和用户_openid 进行绑定web 端通过 uid 获取用户信息，小程序端通过_openid 获取用户信息web端1.匿名登入 进入腾讯云云开发控制台，在登入授权选项下，开启匿名登入  匿名登入2.安全域名配置  安全配置3.在数据库选项下，新建 user 集合，进入详情页，进行权限设置  权限设置代码语言：txt复制{
"read": "doc._openid == auth.openid||doc.uid == auth.uid",
"write": "doc._openid == auth.openid||doc.uid == auth.uid"
}4.新建 index.html 页面 主要更能：点击微信登入后，调用 weblogin 云函数，获取小程序码，并渲染到页面。根据uid，监听 user 集合，当用户在小程序登入后，把用户的信息渲染到页面。 代码语言：txt复制 小程序扫码登录 小程序扫码登录 微信登入 const app = cloudbase.init({ env: "ww" // 此处填入你的环境ID }); const auth = app.auth(); async function login() { await auth.anonymousAuthProvider().signIn(); // 匿名登录成功检测登录状态isAnonymous字段为true const loginState = await auth.getLoginState(); console.log(loginState.isAnonymousAuth); // true } login(); //调用云函数，获取带参数的小程序码 async function getQRCode() { const result = await app.callFunction({ name: "weblogin" }) const { uid, fileId } = result.result; const linkresult = await app.getTempFileURL({ fileList: [fileId] }) const QRCodeUrl = linkresult.fileList[0].tempFileURL; window.uid = uid; window.QRCodeUrl = QRCodeUrl; const qrcodeimg = document.createElement('img'); qrcodeimg.src = QRCodeUrl; document.getElementById('qrcode').appendChild(qrcodeimg); interval(); } //获取用户信息 async function getUserInfo() { const uid = window.uid; const userInfo = await app .database() .collection("user") .where({ uid: uid, }) .get(); console.log("获取到的用户信息", userInfo); return userInfo; } // 监听集合中符合查询条件的数据的更新事件 const interval = async function () { const watcher = await app .database() .collection("user") .where({ uid: uid }) .watch({ onChange: async function (snapshot) { const userData = await getUserInfo(); if (userData.data.length != 0) { const { avatarUrl, city, nickName } = userData.data[0]; document.getElementById('qrcode').style.visibility = 'hidden'; document.getElementById('avatar').innerHTML = `新建 weblogin 云函数 主要功能：获取匿名登入用户的 uid ，并生成带参数的小程序码 代码语言：txt复制const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const tcb = require("@cloudbase/node-sdk") const app = tcb.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const auth = app.auth(); const axios = require('axios') const APPID = "******" //换成你的小程序appid const APPSECRET= "******" //换成你的小程序key exports.main = async (event, context) => { const { userInfo } = await auth.getEndUserInfo(); console.log(userInfo); const {uid} = userInfo const tokenurl = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}` const res = await axios.get(tokenurl) const {access_token} = res.data const qrcodeurl=`https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}` const wxacodeResult = await axios({ method: 'post', url: qrcodeurl, responseType: 'arraybuffer', data: { scene:uid, page:"pages/login/login" } }); const uploadResult = await cloud.uploadFile({ cloudPath: `${uid}.jpeg`, fileContent: wxacodeResult.data }) return { uid:uid, fileId:uploadResult.fileID } }在 package.json 文件中，添加以下模块 代码语言：txt复制{ "dependencies": { "@cloudbase/node-sdk": "^2.7.1", "axios": "^0.21.1", "wx-server-sdk": "~2.5.3" } }新建 userInfo 云函数 主要功能：管理用户信息，查询、添加和更新 代码语言：txt复制// 云函数入口文件 const cloud = require('wx-server-sdk') const TcbRouter = require('tcb-router'); cloud.init({ // API 调用都保持和云函数当前所在环境一致 env: cloud.DYNAMIC_CURRENT_ENV }) const db = cloud.database() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() const app = new TcbRouter({ event }) const collection = "user" //数据库的名称 app.use(async (ctx, next) => { ctx.data = {} await next(); }); app.router('checkUser', async (ctx, next) => { ctx.body = await db.collection(collection).where({ _openid: wxContext.OPENID // 填入当前用户 openid }).get() }) app.router('addUser', async (ctx, next) => { ctx.body = await db.collection(collection) .add({ data: { _openid: wxContext.OPENID, ...event.data } }) }) app.router('updateUser', async (ctx, next) => { ctx.body = await db.collection(collection).where({ _openid: wxContext.OPENID }).update({ data: { uid: event.uid }, }) }) return app.serve(); }在 package.json 文件中添加以下模块 代码语言：txt复制{ "dependencies": { "wx-server-sdk": "~2.5.3", "tcb-router": "latest" } }小程序端新建 login 页面 在 login.wxml 文件中，渲染用户信息 代码语言：txt复制 确认登入 你已经成功登入！在 login.js 文件中，编写业务逻辑 代码语言：txt复制Page({ /** * 页面的初始数据 */ data: { hasUser: 0, uid: '', isLogin: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.checkUser() if (options.scene) { const scene = decodeURIComponent(options.scene) this.setData({ uid: scene }) } }, /** * 调用云函数--查询数据库有没有该用户 */ checkUser() { wx.cloud.callFunction({ name: 'userInfo', data: { $url: "checkUser" } }).then(res => { this.setData({ hasUser: res.result.data.length }) }).catch(console.error) }, getUserProfile() { wx.showLoading({ title: '加载中', }) if (this.data.hasUser) { wx.cloud.callFunction({ name: 'userInfo', data: { $url: "updateUser", uid: this.data.uid }, }).then(res => { this.setData({ isLogin: true }) wx.showToast({ title: '登入成功', icon: 'success', duration: 2000 }) }).catch(console.error) } else { const that = this; wx.getUserProfile({ desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { wx.cloud.callFunction({ name: 'userInfo', data: { $url: "addUser", data: { uid: that.data.uid, ...res.userInfo } }, }).then(res => { console.log(res.result) this.setData({ isLogin: true }) wx.showToast({ title: '登入成功', icon: 'success', duration: 2000 }) }).catch(console.error) } }) } } })最终实现效果 扫码登入
|
【本文地址】
公司简介
联系我们