RuoYi-App移动版（uni-app）微信公众号授权登录
sayyy · 收录于 2023-09-24 06:05:18 · source URL
前言
略
uni-app 未提供微信公众号授权登录
uni.login是一个客户端API，统一封装了各个平台的各种常见的登录方式，包括App手机号一键登陆、三方登录（微信、微博、QQ、Apple、google、facebook）、各家小程序内置登录。但，不支持Web。
因此，当需要微信公众号授权登录时，需要根据微信公众号文档中关于网页授权的描述进行开发。
微信公众号授权登录是否需要关注微信公众号
- scope=snsapi_base时，无须关注微信公众号
- scope=snsapi_userinfo时，无须关注微信公众号，但需要用户手动同意
scope=snsapi_base 与 scope=snsapi_userinfo 的差别
- 差别1：scope=snsapi_base时，仅获取openid；scope=snsapi_userinfo时，可获取昵称、头像、性别等用户基本信息
- 差别2：scope=snsapi_base时，是静默授权并自动跳转到回调页的，用户无感知；scope=snsapi_userinfo时，需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息
静默授权
- scope=snsapi_base 的网页授权，为静默授权的，用户无感知
- 从公众号的会话或者自定义菜单进入，且scope=snsapi_userinfo 的网页授权，为静默授权的，用户无感知
vue 开发时，回调页带#怎么办？
到目前为止，微信授权页面还不支持带#的回调页面，所以，还不能办。
所以，只能迂回解决，解决办法：
- 办法1：中转一下
- 办法2：uniapp项目时，在app.vue中处理回调
办法1：中转一下
正常情况是这样的：发起登录页面—>微信授权页面—>回调页面
中转一下后：发起登录页面—>微信授权页面—>中转页面—>回调页面
uniapp项目
static
中转页面.html
...
...
App.vue
...
将 中转页面.html 作为静态资源存放于static目录中。中转页面.html代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<script>
let code = getQueryVariable("code");
let state = getQueryVariable("state");
console.log("/static/weixin-web-callback.html, code is : ", code);
console.log("/static/weixin-web-callback.html, state is : ", state);
console.log("/static/weixin-web-callback.html, location is : ", window.location);
console.log("/static/weixin-web-callback.html, location is : ", "../#/pages/oauth2/weixin-web/callback"+window.location.search);
window.location.href = "../#/pages/oauth2/weixin-web/callback"+window.location.search;
function 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>
</head>
<body>
<noscript>
<strong>本站点必须要开启JavaScript才能运行.</strong>
</noscript>
</html>
办法2：uniapp项目时，在app.vue中处理回调
识别到code参数后，跳转到回调页面。