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;

Top