uniapp-微信公众号静默授权

第一次开发公众号，以为静默授权非常的复杂，后面才发现静默授权本质上就是跳一个微信的内部链接，拿到code，通过code再去获取openid即可。

在网上找到了一个比较详细的教程进行了一些改造

首先跳转静默授权的地址：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

只有appid和uri是自己的，其他的都是固定的
appid: 就是自己配置测试账号的appid
uri： 是静默授权后要跳转的地址，（需要上线的地址，否则跨域）

（这里一定要注意，跳转的地址是一定要进行转码的） 也可以直接用代码转码，更加方便

转码地址：http://www.ab173.com/gongju/enc/urlencode.php

接下来就是具体的实现代码：

import store from '@/store'// 微信公众号授权
export function wxAuthorize() {// 非静默授权，第一次有弹框let local = '跳转的地址'; // 获取页面urllet appid = 'appid' // 公众号appidlet code = getUrlCode().code; // 截取code// 获取之前的codelet oldCode = uni.getStorageSync('wechatCode')//判断是否存在code,不存在或者过期将重新授权if (code == null || code === '' || code == 'undefined' || code == oldCode) {// 如果没有code，就去请求获取codeconsole.log('当前没有code，进入授权页面')//转码let uri = encodeURIComponent(local)// 设置旧的code为0，避免死循环uni.setStorageSync('wechatCode',0)window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`} else {console.log('存在code，使用code换取用户信息')// 保存最新codeuni.setStorageSync('wechatCode',code)uni.request({method: 'GET',url: this.userUrl+'/sys/getOpenId', // 你的接口地址data: {code:code},success: res => {console.log(res)//根据后端返回的结果和需求自行修改，这里直接讲openid本地存储了uni.setStorageSync('OPEN_ID',res.data.openid)  //正式},fail: (err) => {window.alert('请求失败')console.log(err)}});}
}function getUrlCode() {// 截取url中的code方法var url = location.search;// this.winUrl = url;var theRequest = new Object();if (url.indexOf('?') != -1) {var str = url.substr(1);var strs = str.split('&');for (var i = 0; i < strs.length; i++) {theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];}}return theRequest;
}

使用：
在main.js中全局引入即可

需要静默授权的页面调用该方法：

注意：一般微信公众号的静默授权都是进入首页就授权
这样我们在配置公众号菜单的时候可以直接让他跳转静默授权的地址
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect
这也避免了进入这个页面之后再去静默授权，出现页面闪动的效果。

注意点：

刚开始开发的时候，非常纠结于这个静默授权是否好用的问题，其实完全可以先去开发页面，因为他的影响并不大，就是拿到openid。
如何测试静默授权是否能够成功：
首先开发测试阶段要用 微信开发者工具中的公众号网页 项目测试
浏览器根本无法测试，运行项目也不会自动跳转，需要把运行地址手动赋值到里面

跳转的地址需要是放到服务器上，外网能够访问的，本地不可以
（如果能够配置跨域也是可以的，或者用花生壳穿透）

uniapp-微信公众号静默授权相关推荐

微信公众号网页授权--前端获取code及用户信息（vue）
前段时间开发微信公众号网页授权,虽然网上已经有很多关于这方面的博客或者教程,但是第一次开发还是遇到挺多坑的,以下分享一下我的踩坑填坑之路. 一.测试号相关配置首先在你公司申请的测试号上配置好相关信息 ...
微信公众号网页授权--前端获取code及用户信息（vue）【简单详细版】
嗨喽大家好,前段时间开发微信公众号网页授权,虽然网上已经有很多关于这方面的博客或者教程,但是第一次开发还是遇到挺多坑的,以下分享一下我的遇到的一些问题的见解,希望对你们有帮助. 一.测试号相关配置首 ...
微信公众号网页授权思路解析及具体代码
微信公众号网页授权思路解析及具体代码微信开发文档实现方式也是两种: 1.静默授权登录授权登录以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静 ...
微信公众号网页授权登录的超简单实现步骤
微信开放平台为第三方移动程序提供分享.传播的接口, 使用户可将第三方程序的内容发布给好友或分享至朋友圈, 下面这篇文章主要给大家介绍了关于微信公众号网页授权登录的超简单实现方法, 需要的朋友可以参考下 ...
微信公众号网页授权，获取用户信息以及openid -- PHP后台
微信公众号网页授权,获取用户信息以及openid 这几天做项目,想通过公众号的appid获取用户的openid就,然后在网上查资料,问朋友,最后找到了方法,就是这个网页授权. 起初一直很蒙,这个怎么弄 ...
【微信公众号H5授权登录】
微信公众号H5授权登录废话不多,直接上代码(这里只写代码的实现) 废话不多,直接上代码(这里只写代码的实现) 页面进来判断微信环境 onShow() {//设置初始值为false,微信环境下才能打开 ...
uni-app微信公众号（5）——新增、修改地址
承接上面一篇文章,没有看到上篇文章的童鞋请点这里uni-app微信公众号(4)--地址管理页面_徐小硕-心之所向,素履以往-CSDN博客当然在一个类似商城的公众号中,自然也少不了用户地址的添加,下面我 ...
微信公众号第三方授权开发——推送component_verify_ticket协议
微信公众号第三方授权--接受微信推送component_verify_ticket协议作者:凌晨四点的newyork 接收component_verify_ticket 在第三方平台创建审核通过后, ...
微信公众号网页授权时序图
微信公众号网页授权时序图公众号网页授权时序图
uniapp 微信公众号支付demo
uniapp 微信公众号支付 demo 效果图如下 demo 下载链接:uniapp微信公众号支付demo-HTML5文档类资源-CSDN下载

uniapp-微信公众号静默授权

注意点：

uniapp-微信公众号静默授权相关推荐

最新文章

热门文章