前言

略

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参数后，跳转到回调页面。

参考

微信公众号官方文档：网页授权
uni-app微信公众号授权登录
微信公众平台-服务号：网页授权域名设置

RuoYi-App移动版（uni-app）微信公众号授权登录相关推荐

【SpringBoot学习】46、SpringBoot 集成 Uniapp 实现微信公众号授权登录
文章目录一.公众号环境搭建二.Spring Boot 集成微信公众号 1.application.yml 微信配置 2.控制层接口三.Uniapp 实现授权登录一.公众号环境搭建本篇文章使用 ...
uni-app 对FastAdmin微信公众号授权登录实例
uni-app 对FastAdmin微信公众号授权登录实例 uniapp 微信公众号授权登录代码跳转获取code 提交fastadmin 第三方登录插件进行登录验证存储token onLoad( ...
uniapp微信公众号授权登录，本地调试
在项目如何集中微信公众号授权登录后端跳转获取code码,最后拼接, //保留登录前的页面参数.为了不让参数传到后台,并且在微信授权链接带来带去,可以将参数和登录前的地址存到本地缓存let route ...
微信公众号授权登录（asp.net + angular）
微信是时下最火的,上面有数以亿计的用户,如果能接入微信将大大减低注册门槛,当然,接入微信登录是有门槛的.微信登录一般有两个,一个是微信开放平台授权登录,一个是微信公众号授权登录,两者都需要认证才可以继 ...
vue移动端项目微信公众号授权登录
前言在我们做移动端项目时, 很多功能是以登录后才能进行后续的操作, 并且许多pc端的网页都有微信扫码登录功能, 为了做到pc与移动端统一, 往往移动端项目需要添加微信登录功能, 那么为什么手机端不能 ...
Java在Web端微信公众号授权登录
Java在Web端微信公众号授权登录 1.需要在微信开发平台配置 url:是自己服务中的微信需要推给你的地址(需要使用二级域名,可以去添加链接描述)购买9块钱1个月使用权或者白嫖都可 token 这个 ...
H5 微信公众号授权登录前后端分离篇(资料准备+前端01)
实现微信公众号授权登录,很简单,但是注意的地方要细心,小伙伴们跟着我的思路一起实现吧! 文章目录一.帐号申请 1. 正式账号 2. 测试帐号二.微信文档 2.1. 文档主页 2.2. 授权流程 2 ...
Spring boot 项目（十三）——实现微信公众号授权登录获取用户信息
引言微信公众号开发中,必不可少的一环:公众号授权登录.获取微信用户信息前期准备内网渗透=>生成本地指定端口映射的外网域名链接:内网渗透工具natapp使用详解域名生成之后修改yml文件 ...
基于Spring Boo微信公众号授权登录获取用户信息（附带完整源码）
简介微信公众号开发中,必不少可少的一环:公众号授权登录.获取微信用户信息. 本地完整运行环境准备内网渗透=>生成本地指定端口映射的外网域名传送门:内网渗透工具Natapp使用详解域名生成 ...

RuoYi-App移动版（uni-app）微信公众号授权登录

前言

uni-app 未提供微信公众号授权登录

微信公众号授权登录是否需要关注微信公众号

scope=snsapi_base 与 scope=snsapi_userinfo 的差别

静默授权

vue 开发时，回调页带`#`怎么办？

办法1：中转一下

办法2：uniapp项目时，在app.vue中处理回调

参考

RuoYi-App移动版（uni-app）微信公众号授权登录相关推荐

最新文章

热门文章

RuoYi-App移动版（uni-app）微信公众号授权登录

前言

uni-app 未提供微信公众号授权登录

微信公众号授权登录是否需要关注微信公众号

scope=snsapi_base 与 scope=snsapi_userinfo 的差别

静默授权

vue 开发时，回调页带#怎么办？

办法1：中转一下

办法2：uniapp项目时，在app.vue中处理回调

参考

RuoYi-App移动版（uni-app）微信公众号授权登录相关推荐

最新文章

热门文章

vue 开发时，回调页带`#`怎么办？