uniapp微信公众号静默登录(node实现后台)
- 时间:2023-11-02 11:08:17
- 228人已阅读
其实实现微信公众号的静默登录,仔细的查阅微信公众号的官方文档就能按照介绍就能实现,这里为了方便一些没有做过的小伙伴简单介绍一下,同时也是方便自己以后查阅做个记录。
如果只需要拿到微信用户的openid只需要两步。 1. 前端获取code 2. 前端把code传给自己的后端,后端调腾讯接口返回openid。
实际详细的步骤看官方文档,下面我贴一下自己使用uniapp+node实现的代码。
uniapp
App.vue 代码
<script>
import {
getWxAuthorize
} from '@/api/common/index.js'
export default {
async onLaunch(options) {
console.warn('当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!')
console.log('App Launch')
let optionsCode = this.getQueryVariable('code');
const openid = uni.getStorageSync('OPENID');
const code = uni.getStorageSync('CODE');
if (!code && !optionsCode && !openid) {
// 不存在存储的code,不存在地址栏参数code,不存在openid
// 存储当前初始页面历史列表数量
uni.setStorageSync('authHistory', options.path);
// 拼接参数获取code
let appid = this.$appConfig.appid;
let redirect_uri = encodeURIComponent(this.$appConfig.websetUrl);
let response_type = 'code';
let scope = 'snsapi_base'; // snsapi_base:静默授权,snsapi_userinfo:弹出授权窗
let state = '123';
let wechat_redirect = '#wechat_redirect';
document.location.replace(
``https://open.weixin.qq.com/connect/oauth2/authorize?appid=NULL&redirect_uri=NULL&response_type=NULL&scope=NULL&state=NULL#wechat_redirect``
);
} else if (optionsCode && !openid) {
// 存在地址栏参数code,不存在openid
uni.setStorageSync('CODE', optionsCode);
const authHistory = uni.getStorageSync('authHistory');
// 跳转回初始页面
document.location.replace(``${location.origin}${location.pathname}``)
} else if (code && !openid) {
// 存在存储的code,不存在openid
uni.removeStorageSync('CODE');
// 请求后端接口获取用户的信息
await getWxAuthorize({
code: code,
scope: 'snsapi_base'
}).then(res => {
uni.setStorageSync('OPENID', res.openid)
})
}
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
methods: {
getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
}
}
</script>
<style lang="scss">
</style>
node
项目是用express初始化的,下面是其中的一个users.js路由文件的代码。/users/auth 接口是后端获取openid的接口。
var express = require('express');
var router = express.Router();
const request = require('request');
/* GET users listing. */
router.get('/', function (req, res, next) {
const data = [{ "name": '张三' }, { "name": '李四' }, { "name": '王五' }]
const scriptStr = ``${JSON.stringify(data)}``
res.send(scriptStr);
});
router.post('/auth',function(req,res,next){
console.log(req.body);
let url = ``https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx068551192bad5ca2&secret=8cc3d6bb54897350e90ab302f1269a43&code=${req.body.code}&grant_type=authorization_code``
request.get(url,function(error,response,body){
console.log(body);
res.send(JSON.parse(body))
})
})
module.exports = router;
上一篇:博客网站开通啦
下一篇:记录网站被黑的一次经历