H5之微信授权登陆（uniapp网页版微信授权登录）

今天来复盘代码了不然这个月过完我可能脑子里又啥都不剩了感觉自己跟个金鱼脑一样十分沧桑

1.首先要做微信授权登录你的有一个微信公众号因为授权登录要配置APPID 以及网页授权域名

这里的网页授权域名真的让我栽了好多的坑一言难尽啥也不说了直接上图
公众号的开发 —>基本配置中设置

**接下来在公众号的开发 —>接口权限中设置域名 **
这个域名一定要正确而且是安全域名因为不仅代码放在上面微信授权回调的域名也是这个

在网页服务中的页面授权用户基本信息中设置一共可以设置两个一个开发环境一个测试环境

设置完就可以开发了开发前建议看一变官方文档当然如果没看懂可以多看几遍链接我放在这里了
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0

然后就是页面了

因为后期我得代码都带了token请求头所以我写了一个跳转页面

在这个界面拉起授权授权成功获取到信息之后在跳转到首页
（ps：我把这个页面放在了pages.json）的第一个这样一进来就能授权了

废话不多说上代码：

对了请注意下面的那个拉取基本信息的链接中的重定向路径和appid被我隐藏了请大家自己配置
将URL 及 APPID 替换成自己的即可至于如何获取请看上面上面配置的域名就是这里重定向的路径

跳转界面springboard.vue

<template><view class="springboard"><view class="">code:{{res}}</view><view class="">access_token接口：{{result}}</view><view class="">access_token :{{access_token}}<view class="">openid:{{openid}}</view></view><view class="">用户信息 {{userInfo}}</view><!-- 跳板页面   这个界面主要用来 获取缓存的信息 如果没有缓存的信息则跳转去授权 如果有直接跳转去商城界面--></view>
</template><script>export default {data() {return {src:'',result:'',option:'',res:'',userInfo:'',access_token:'',openid:'',index:0};},methods:{getpower() {let url ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=URL&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect"window.location.href = url},sendCode(code){uni.showToast({title:code})uni.request({url: 'XXXXXXX/login/login_controller/access_token',method:'POST',data: {code: code},success: (res) => {console.log(res.data);this.result = res.datathis.access_token = this.result.data.access_tokenthis.openid = this.result.data.openiduni.request({url: 'XXXXXXX/login/login_controller/access_user', //仅为示例，并非真实接口地址。method:'POST',data: {access_token:this.access_token,openid: this.openid},success: (respones) => {this.userInfo = responesconsole.log(res.respones);}});    }});},},onLoad(option) {this.option = optionif (option.code == null) {this.getpower()} else {this.res =  option.code// uni.showToast({//    title:option.code// })this.sendCode(option.code)}}}
</script><style lang="less" scoped>
.springboard{height: 99vh;position: relative;text-align: center;background-size: cover;// background-image: url('http://zons.oss-cn-shenzhen.aliyuncs.com/upload/20200703/20200703/1593768723d3eb9a9233e52948740d7eb8c3062d14.jpg');// background-image: url('http://zons.oss-cn-shenzhen.aliyuncs.com/upload/20200703/20200703/1593768995d3eb9a9233e52948740d7eb8c3062d14.jpg');
}
.LoginBtn{width: 50%;border: 1px solid  #409eff;padding:20rpx  ;display: inline-block;background-color: #409eff ;color: #fff;border-radius: 10rpx;
}
</style>

这里说明一下做授权的时候无法在线测试就是说本地的代码无法测试必须发包放到服务器上测试

所以我把返回值都展示在页面上就知道接口是否有问题了后期自行屏蔽即可

另外踩了一个巨坑就是微信授权返回40029 code码失效的问题
查了很多资料也设置了好几种方法

最后根据自身情况就是第一发包以后到手机端测试或者在微信开发者工具中测试注意就算是微信开发者工具中测试也是跑的线上的代码其次为了防止发生302不稳定跳转防止code码失效我添加了connect_redirect=1

踩坑二：如果在微信开发者工具中运行时出现 response_type 参数错误那么就是拉起授权的链接有问题了请重新配置

踩坑三 后端的接口配置的使用到的APPID 要与前端一致

最后说一下两个接口

第一个接口时获取到code码以后将code码传给后端后端用code码获取到 openID 然后可以根据 openID 获取到用户个人信息

这里第二个接口就是根据第一个接口的返回值获取用户个人信息的抓到用户信息代表授权成功了
**注意注意注意！！！**请求要使用post

好啦到这里基本就讲解完毕了下一篇在具体讲下踩到的坑以及几种解决方法

希望对大家有用

H5之微信授权登陆（uniapp网页版微信授权登录）相关推荐

Ubuntu16.04下安装类似于windows下微信软件，非网页版微信(内附安装包和详细安装指令)
一.下载安装包安装包下载地址: 链接:https://pan.baidu.com/s/1M8i6mdC952exhyFoLp84rg 提取码:nt5q 然后解压压缩包,获得文件夹如下: 然后进入文件 ...
简单实用微信授权登陆（网页版）
备注:使用该方法前要将你的微信公众号绑定到你的微信开放平台上面 private $APP_ID = 'wx7b2a3-----------' ; //APP_IDprivate $APP_SECRET ...
网页版微信和微信公共号扫码登陆原理分析
看到知乎上有关于微信扫码登陆原理的讨论.现将自己的分析结果写出来,供大家参考,不正确的地方望指正. 用户打开网页版微信: https://wx.qq.com/,微信为用户生成了一张包含uuid的二维码 ...
ubuntu安装微信，解决网页版微信不能登陆问题
1.下载附件deb包wine-wechat_1.0-windows2.8.6_all.deb 2.sudo dpkg -i wine-wechat_1.0-windows2.8.6_all.deb 1 ...
jquery 背景特效实现_html5实现的仿网页版微信聊天界面效果源码
码农那点事儿关注我们,一起学习进步这是一款基于html5实现的仿网页版微信聊天界面效果源码,可实现微信网页版聊天界面效果,在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上.整 ...
问题：网页版微信协议如何获取语音消息并播放
这是一个坑等待解决. 在使用网页版微信协议的过程中发现,是相同地址,通过网页登陆上去后,就能获取并收听到音频,而通过程序的就不行. https://wx.qq.com/cgi-bin/mmwebwx- ...
网页版微信自动群发消息
操作步骤: 登陆网页版微信打开开发者工具打开 console 控制台粘贴一下代码到控制台并回车实现原理遍历好友列表修改输入框文本点击发送 // 拿到所有聊天对象(仅限当前网页上展示的内容 ...
网页版linux客户端,网页版微信将关闭，Linux开发者哭惨
原标题:网页版微信将关闭,Linux开发者哭惨微信目前已经成为了大部分人的通讯方式之一,尤其是在职场人士之间,超过了QQ的地位.而最近微信网页端已经逐渐被关停,部分用户已经出现了无法登陆的情况. 在 ...
python爬虫+网页版微信实时获取消息程序
项目需求: 目的是24小时爬取各种软件的讯息并且以一种统一的方式集中发送给自己. 实现方法: 利用python的requests库以及wxpy库,前者用来爬取网页,后者用来将爬到的内容发送给自己. 程 ...
再见，itchat！再见，网页版微信！
点击上方"编程派",选择设为"设为星标" 优质文章,第一时间送达! 有一个词叫做"三月爬虫",指的是有些学生临到毕业了,需要收集数据写毕业论 ...

H5之微信授权登陆（uniapp网页版微信授权登录）

H5之微信授权登陆（uniapp网页版微信授权登录）相关推荐

最新文章

热门文章

H5之微信授权登陆 （uniapp网页版微信授权登录）

H5之微信授权登陆 （uniapp网页版微信授权登录）相关推荐

最新文章

热门文章

H5之微信授权登陆（uniapp网页版微信授权登录）

H5之微信授权登陆（uniapp网页版微信授权登录）相关推荐