uniapp微信公众号静默登录(node实现后台)

目录

• uniapp微信公众号静默登录(node实现后台)
  • • • uniapp
      • node

uniapp微信公众号静默登录(node实现后台)

其实实现微信公众号的静默登录，仔细的查阅微信公众号的官方文档就能按照介绍就能实现，这里为了方便一些没有做过的小伙伴简单介绍一下，同时也是方便自己以后查阅做个记录。

如果只需要拿到微信用户的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=${appid}&redirect_uri=${redirect_uri}&response_type=${response_type}&scope=${scope}&state=${state}#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;