微信公众号网页静默授权/非静默授权（uniapp版）_微信公众号静默授权-程序员宅基地

技术标签：微信公众平台前端 javascript uni-app

一、问题

为什么要进行网页授权？

首先我们进行网页授权的需求是，获取用户信息、最主要是获取openid唯一值，可以用于用户登录、支付等功能，这时候就需要进行网页授权获取用户的信息以及openid。

二、静默授权/非静默授权

在操作之前可以先提前看看网页授权官方文档

静默授权

snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid；
用来获取进入页面的用户的openid的，并且自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）。

非静默授权

snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）；
用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

三、使用uniapp进行网页授权（h5）

网页授权之前，需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。

1.提前准备

appid：公众号的唯一标识
redirect_uri ：授权后重定向的回调链接地址
scope：授权方式

const appid = "xxxxxxxxxxx";//公众号的唯一标识
const redirect_uri = "http://xxx.xxxx.xxx";//授权后重定向的回调链接地址
const scope = "snsapi_userinfo";//非静默授权：snsapi_userinfo  静默授权：snsapi_base

2.授权

在onLaunch生命周期操作

1.不存在openid进行获取code

onLaunch(e){
    
	const openid = uni.getStorageSync(OPENID);
	//不存在code
	if(!openid){
    
		//获取code
		document.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
      appid}&redirect_uri=${
      redirect_uri}&response_type=code&scope=${
      scope}&state=STATE#wechat_redirect`);
	}
}

2.通过code换取用户信息

执行了第一步的获取code后就会跳转至 redirect_uri/?code=CODE&state=STATE，此时url地址会带有code参数
拿到code后调用就后端的getWxAuthorize接口获取

async onLaunch(e){
    
	const openid = uni.getStorageSync('OPENID');
	if((e&&e.query&&e.query.code)&&!openid){
    
		//请求后端接口获取用户的信息
		let result = await getWxAuthorize({
    code:e.query.code,scope:"snsapi_userinfo"});
		//保存用户的openid
		uni.setStorageSync('OPENID',result.data.openid);
	}
}

尤其注意：由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。

3.使用node获取用户信息接口（此处主要是2.中的getWxAuthorize接口）

如果只需要了解前端的步骤，此步骤可以忽略

appid：公众号的唯一标识
secret：公众号的appsecret

大概的流程如下：

const axios = require("axios");
const appid = "xxxxxxxxxxx";//公众号的唯一标识
const secret  = "xxxxxxxxxxx";//公众号的appsecret
function setAuthorize(params){
      
	return new Promise(async(resolve)=>{
      
		let userinfo = {
      };
		//通过code换取网页授权access_token
		let result = await axios(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${
        appid}&secret=${
        secret}&code=${
        params.code}&grant_type=authorization_code`);
		result = result.data;
		console.log("access_token结果",result )
		if(result.errcode)resolve({
      code:403,msg:''})
		userinfo.openid = result.openid;
		// scope=snsapi_userinfo弹出网页授权
		if(params.scope=='snsapi_userinfo'){
      
			// 获取用户信息
			let info = await axios(`https://api.weixin.qq.com/sns/userinfo?access_token=${
        result.access_token}&openid=${
        result.openid}&lang=zh_CN`);
			info = info.data;
			console.log("用户信息",info)
			if(info.errcode)resolve({
      code:403,msg:''});
			userinfo = info;
		}
		//----------------------------------------
		//对数据库进行新增用户或者更新用户信息操作
		//----------------------------------------
		resolve({
      code:0,msg:'',data:userinfo})
	})
}

3.完整的uniapp代码

async onLaunch(e){
      
	const openid = uni.getStorageSync('OPENID');
	if(!(e&&e.query&&e.query.code)!openid){
      
		//不存在code 不存在openid
		//获取code
		document.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
        appid}&redirect_uri=${
        redirect_uri}&response_type=code&scope=${
        scope}&state=STATE#wechat_redirect`);
	}else if((e&&e.query&&e.query.code)&&!openid){
      
		//存在code 不存在openid
		//请求后端接口获取用户的信息
		let result = await getWxAuthorize({
      code:e.query.code,scope:"snsapi_userinfo"});
		//保存用户的openid
		uni.setStorageSync('OPENID',result.data.openid);
	}
}

可能会存在的问题：

授权后回调页面，此处如果再返回，会跳转到空白页
1.初次授权时先存储页面历史列表的长度

// 第一次进入页面
uni.setStorageSync("historyLength",history.length);

2.在code回调页面之后，进行history.go返回到1.初始页面

const historyLength = uni.getStorageSync("historyLength");
history.go(-(history.length -historyLength));

此处需要留意通过code获取用户信息这个步骤最好放在回到初始页面的时候进行。

更新完整代码

import {
       getWxAuthorize} from "@/api/wx.js";
export default {
       
	async onLaunch(e){
       
		const openid = uni.getStorageSync('OPENID');
		const code = uni.getStorageSync('CODE');
		if(!code&&!(e&&e.query&&e.query.code)!openid){
       
			//不存在存储的code 不存在地址参数code 不存在openid
			//存储当前初始页面历史列表数量
			uni.setStorageSync("historyLength",history.length);
			//获取code
			document.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
         appid}&redirect_uri=${
         redirect_uri}&response_type=code&scope=${
         scope}&state=STATE#wechat_redirect`);
		}else if((e&&e.query&&e.query.code)&&!openid){
       
			//存在地址参数code 不存在openid
			uni.setStorageSync('CODE',e.query.code);
			const historyLength = uni.getStorageSync("historyLength");
			//跳转回初始页面
			history.go(-(history.length -historyLength));
		}else if(code&&!openid){
       
			//存在存储的code 不存在openid
			uni.removeStorageSync('CODE');
			//请求后端接口获取用户的信息
			let result = await getWxAuthorize({
       code,scope:"snsapi_userinfo"});
			//保存用户的openid
			uni.setStorageSync('OPENID',result.data.openid);
		}
	}
}

本文链接：https://blog.csdn.net/weixin_41891519/article/details/123602836

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

软件测试流程包括哪些内容？测试方法有哪些？_测试过程管理中包含哪些过程-程序员宅基地

文章浏览阅读2.9k次，点赞8次，收藏14次。测试主要做什么？这完全都体现在测试流程中，同时测试流程是面试问题中出现频率最高的，这不仅是因为测试流程很重要，而是在面试过程中这短短的半小时到一个小时的时间，通过测试流程就可以判断出应聘者是否合适，故在测试流程中包含了测试工作的核心内容，例如需求分析，测试用例的设计，测试执行，缺陷等重要的过程。..._测试过程管理中包含哪些过程

政府数字化政务的人工智能与机器学习应用：如何提高政府工作效率-程序员宅基地

文章浏览阅读870次，点赞16次，收藏19次。1.背景介绍政府数字化政务是指政府利用数字技术、互联网、大数据、人工智能等新技术手段，对政府政务进行数字化改革，提高政府工作效率，提升政府服务质量的过程。随着人工智能(AI)和机器学习(ML)技术的快速发展，政府数字化政务中的人工智能与机器学习应用也逐渐成为政府改革的重要内容。政府数字化政务的人工智能与机器学习应用涉及多个领域，包括政策决策、政府服务、公共安全、社会治理等。在这些领域，人工...

ssm+mysql+微信小程序考研刷题平台_mysql刷题软件-程序员宅基地

文章浏览阅读219次，点赞2次，收藏4次。系统主要的用户为用户、管理员，他们的具体权限如下：用户：用户登录后可以对管理员上传的学习视频进行学习。用户可以选择题型进行练习。用户选择小程序提供的考研科目进行相关训练。用户可以进行水平测试，并且查看相关成绩用户可以进行错题集的整理管理员：管理员登录后可管理个人基本信息管理员登录后可管理个人基本信息管理员可以上传、发布考研的相关例题及其分析，并对题型进行管理管理员可以进行查看、搜索考研题目及错题情况。_mysql刷题软件

根据java代码描绘uml类图_Myeclipse8.5下JAVA代码导成UML类图-程序员宅基地

文章浏览阅读1.4k次。myelipse里有UML1和UML2两种方式，UML2功能更强大，但是两者生成过程差别不大1.建立Test工程，如下图，uml包存放uml类图package com.zz.domain;public class User {private int id;private String name;public int getId() {return id;}public void setId(int..._根据以下java代码画出类图

Flume自定义拦截器-程序员宅基地

文章浏览阅读174次。需求：一个topic包含很多个表信息，需要自动根据json字符串中的字段来写入到hive不同的表对应的路径中。发送到Kafka中的数据原本最外层原本没有pkDay和project，只有data和name。因为担心data里面会空值，所以根同事商量，让他们在最外层添加了project和pkDay字段。pkDay字段用于表的自动分区，proejct和name合起来用于自动拼接hive表的名称为 ..._flume拦截器自定义开发 kafka

java同时输入不同类型数据,Java Spring中同时访问多种不同数据库-程序员宅基地

文章浏览阅读380次。原标题：Java Spring中同时访问多种不同数据库多样的工作要求，可以使用不同的工作方法，只要能获得结果，就不会徒劳。开发企业应用时我们常常遇到要同时访问多种不同数据库的问题，有时是必须把数据归档到某种数据仓库中，有时是要把数据变更推送到第三方数据库中。使用Spring框架时，使用单一数据库是非常容易的，但如果要同时访问多个数据库的话事件就变得复杂多了。本文以在Spring框架下开发一个Sp..._根据输入的不同连接不同的数据库