uni-app 微信小程序授权登录

在这里插入图片描述

文章目录

          • 一、appID相关申请和配置
            • 1. appid获取方式
            • 2. appID配置
          • 二、获取用户基础数据
            • 2.1. 获取用户信息
            • 2.2. 获取用户信息2
          • 三、调用登录api
            • 3.1. 登录api
            • 3.2. 案例代码
          • 四、获取唯一标识信息
            • 4.1. 官网文档
            • 4.2. 接口简述
          • 五、绑定用户 实现登录
            • 5.1. 代码案例(未封装)
            • 5.2. 代码案例(封装)
          • 六、项目开源地址
            • 6.1. 前端
            • 6.2. 后端

一、appID相关申请和配置
1. appid获取方式

登录微信公众平台
官网链接:https://mp.weixin.qq.com/
第一次需要小伙伴们点击注册按钮,进行注册,如果有账号,直接扫描登录即可
在这里插入图片描述

官网小程序链接:

在这里插入图片描述

2. appID配置

在manifest.json中输入申请的微信小程序id
在这里插入图片描述

二、获取用户基础数据

这里给小伙伴们演示二种api

2.1. 获取用户信息

可以使用uni.getUserProfile请求用户授权获取用户信息, 也可以使用uni.getUserInfo获取
在这里插入图片描述
授权成功后获取到的用户信息在userInfo中:
在这里插入图片描述

  • 页面部分:
  <button class="login-btn" type="primary" @click="getUserInfo">微信用户一键登录</button>
  • js部分:
methods: {getUserInfo() {uni.getUserInfo({provider: 'weixin',success: (res) => {console.log('getUserInfo', res);},});},}
  • 获取的用户基础数据(无openid=》微信用户唯一标识)
    在这里插入图片描述
2.2. 获取用户信息2

可以使用uni.getUserInfo请求用户授权获取用户信息

  • 页面一样,js部分:
   getUserInfo() {uni.getUserProfile({desc: '登录后可同步数据',lang: 'zh_CN',success: (res) => {console.log('getUserProfile', res);},});},
  • 获取的用户基础数据(无openid=》微信用户唯一标识)
    在这里插入图片描述
    总结:uni.getUserProfile和uni.getUserInfo 二个api获取的用户数据基本一样,都无openid=》微信用户唯一标识。
三、调用登录api
3.1. 登录api

使用uni.login方法,provider参数输入’weixin’,成功的返回值中如果errMsg=“login:ok” 代表成功,
微信小程序端会返回一个code字符串
在这里插入图片描述

3.2. 案例代码
      uni.login({provider: 'weixin',success: (res) => {console.log('res-login', res);this.code = res.code;console.log('code', res.code);if (res.errMsg == 'login:ok') {//TODO 获取code 携带code参数调用后端接口}
四、获取唯一标识信息
4.1. 官网文档

官网文档
使用获取到的code请求微信登录接口,获取 openid 和 session_key
在这里插入图片描述

4.2. 接口简述

在这里插入图片描述

请求方式:GET
APPID:小程序唯一标识,上面有获取方式
SECRET:小程序唯一标识的秘钥,上面参考APPID获取方式,就在他的下面
JSCODE:这个前端调用  uni.login获取
GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

在这里插入图片描述

五、绑定用户 实现登录

获取到微信用户的唯一id后,就可以绑定至自己系统中的用户,我的做法是在用户表中加入weixinId字段,跳转至自己的用户绑定界面,如果用户选择绑定微信,则更新该行用户数据的weixinId。下次用户使用微信登录时,如果通过openId能够查询到一条用户数据,说明已经绑定,则登录该用户

5.1. 代码案例(未封装)
  • 前端部分:
 /**** 获取用户信息*/getUserInfo() {// 展示加载框uni.showLoading({title: '加载中',});uni.getUserProfile({desc: '登录后可同步数据',success: async (obj) => {console.log('obj', obj);// 调用 action ,请求登录接口// await this.login(obj);uni.login({provider: 'weixin',success: (res) => {console.log('res-login', res);this.code = res.code;console.log('code', res.code);if (res.errMsg == 'login:ok') {uni.request({url:'http://127.0.0.1:8080/wxh5/wx/user/' +'wx55822xxxx75e422' +'/login/',data: {code: this.code,},}).then((res) => {//获取到 openid 和 session_k后,自己的逻辑console.log('授权登录', res[1].data);console.log(res[1].data.openid);console.log(res[1].data.session_key);// DoSomeThing.................});console.log('res', res);}},});},fail: () => {uni.showToast({title: '授权已取消',icon: 'error',mask: true,});},complete: () => {// 隐藏loadinguni.hideLoading();},});},
  • 后端部分
   @GetMapping("/login")public String login(@PathVariable String appid, String code) {if (StringUtils.isBlank(code)) {return "empty jscode";}final WxMaService wxService = WxMaConfiguration.getMaService(appid);try {WxMaJscode2SessionResult session = wxService.getUserService().getSessionInfo(code);this.logger.info(session.getSessionKey());this.logger.info(session.getOpenid());//TODO 可以增加自己的逻辑,关联业务相关数据return JsonUtils.toJson(session);} catch (WxErrorException e) {this.logger.error(e.getMessage(), e);return e.toString();}}
5.2. 代码案例(封装)
  /**** 获取用户信息*/getUserInfo() {// 展示加载框uni.showLoading({title: '加载中',});uni.getUserProfile({desc: '登录后可同步数据',success: async (obj) => {// this.userInfo = obj.userInfo;// 调用 action ,请求登录接口uni.login({provider: 'weixin',success: async (res) => {this.code = res.code;// console.log('登录获取code', res.code);if (res.errMsg == 'login:ok') {await this.loginAuth({userProfile: obj,appid: 'wx558xxxxxxxxxxxxxxx2',code: this.code,});}},});},fail: () => {uni.showToast({title: '授权已取消',icon: 'error',mask: true,});},complete: () => {// 隐藏loadinguni.hideLoading();},});},},

user.js

/*** 微信用户授权登录,携带appid和code参数,调用后端接口获取Openid*/
export function loginAuth(data) {return request({url: '/wx/user/' + data.appid + '/login/',data: {code: data.code,},});
}

vuex user模块(user.js)

  // 微信用户授权登录,携带appid和code参数,调用后端接口获取Openidasync loginAuth(context, data) {console.log('data', data);const userInfo = data.userProfile;const { content: res } = await loginAuth({appid: data.appid,code: data.code,});// 解析后端传送过来的json对象const userAuthInfo = JSON.parse(res);const openid = userAuthInfo.openid;// console.log('sessionKey', userAuthInfo.sessionKey);console.log('openid', openid);// 保存到vuex中,通过committhis.commit('user/setOpenid', userAuthInfo.openid);this.commit('user/setUserInfo', JSON.parse(userInfo.rawData));},

在这里插入图片描述
在这里插入图片描述

六、项目开源地址
6.1. 前端

applet-chock-in

6.2. 后端

weixin-java-miniapp

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/516286.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从图森未来的数据处理平台,看Serverless工作流应用场景

Serverless工作流来了&#xff01; 发布会传送门 抢先了解Serverless技术干货 4月&#xff0c;阿里云Serverless工作流正式商业化&#xff0c;这是一款用于协调多个分布式任务执行的全托管 Serverless 云服务。产品致力于简化开发和运行业务流程所需要的任务协调、状态管理以及…

uniapp 开发基础环境搭建和配置

文章目录一、下载并安装开发工具1. 官网下载2. 点击 DOWNLOAD3. 版本选择二、安装 sass 依赖2.1. 打开 HBuilder X2.2. 打开插件地址2.3. 导入插件2.4. 在弹出框中点击2.5. 点击【是】2.6. 下载状态2.7. 等待完成即可三、创建 uni-app 项目3.1. 创建项目3.2. 项目目录介绍一、下…

大厂技术文档:Python基础+爬虫+数据分析+面试经精选

有段时间没跟各位粉丝分享编程资源福利了&#xff0c;看了下自己的资料夹&#xff0c;就剩下我认为比较好的Python学习资料了。相信这套资料可以对你进阶高级工程师有帮助&#xff01;为什么只有Python这么火&#xff0c;能有机会成为通用语言&#xff1f;核心还是因为企业需要…

重温前端基础(二) 移动WEB开发

目录 1. 移动端基础2. 视口2.1 meta标签3. 二倍图3.1 物理像素 & 物理像素比3.2 背景缩放 background-size4. 移动开发选择和技术解决方案4.1 移动端主流方案4.2 移动端技术解决方案4.3 CSS3盒子模型 box-sizing4.4 移动端特殊样式5. 移动端常见布局5.1 流式布局5.2 flex布…

金融业务数字化,用户体验和安全防护双重挑战,你该怎么办?

在数字化转型的浪潮中&#xff0c;金融行业一直是最活跃的行业之一。受到新冠疫情影响&#xff0c;各商业银行、券商、保险企业的线上流量迅速攀升&#xff0c;线上金融业务将从互金时代直接跃迁到全面线上化时代。2月24日&#xff0c;中国银保监会下发的《关于进一步做好疫情防…

怎样用CDN防篡改、抗攻击、控内容?一份CDN安全指南请查收

5大安全产品全面升级&#xff0c;抢先了解&#xff1a;https://developer.aliyun.com/topic/securityapril 预约观看发布会&#xff1a;https://yq.aliyun.com/live/2670 阿里云CDN经过10多年的技术沉淀和实践&#xff0c;已经从传统的加速&#xff0c;逐渐构筑起一个边缘云的安…

Cannot read property ‘forceUpdate‘ of undefined

文章目录现象解决方案现象 VM46 WAService.js:2 TypeError: Cannot read property ‘forceUpdate’ of undefined 解决方案 解决 Cannot read property forceUpdate of undefined 的错误 这个错误的原因非常简单&#xff0c;是因为我们没有为项目配置 appID 的原因&#xf…

如何应对云原生之旅中的安全挑战?

作者 |Pavan Belagatti译者 | 弯月头图 | CSDN 下载自东方 IC来源 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;以下为译文&#xff1a;如果你已经接受了云原生计算的概念和原理&#xff0c;那么代表你已经处于领先地位。在当今先进且竞争激烈的IT环境中&#xff0c;…

阿里云:构建全球企业内外安全网络最佳实践

5大安全产品全面升级&#xff0c;抢先了解&#xff1a;https://developer.aliyun.com/topic/securityapril 预约观看发布会&#xff1a;https://yq.aliyun.com/live/2670 全球连接&#xff0c;立体防护 网络安全的最大挑战之一来自于不同地域的网络之间的访问&#xff0c;连接…

超详细前端开发案例:品优购商场项目(一)

目录 1. 品优购项目介绍2. 项目背景3. 设计目标4. 几点思考5. 代码规范6. 前期准备工作目录文件夹样式文件的分类7. 网站ico图标7.1 使用ico图标7.2 制作ico图标8. 网站优化三大标签8.1 网页title 标题8.2 Description 网站说明8.3 Keywords 关键字8.4 总结9. 字体图标9.1 字体…

[sitemap 索引情况提示] 根据 sitemap 的规则[0],当前页面 [pages/index/index] 将被索引

[sitemap 索引情况提示] 根据 sitemap 的规则[0]&#xff0c;当前页面 [pages/index/index] 将被索引 微信小程序默认开启了索引功能&#xff0c;但是因为我们没有配置索引策略&#xff0c;导致出现了这么一个警告的问题。具体情况可以参考&#xff1a;https://developers.weix…

Argo 项目入驻 CNCF,一文解析 Kubernetes 原生工作流

作者 | 遥鹭、郡宝 导读&#xff1a;近期&#xff0c;CNCF 技术监督委员会&#xff08;Technical Oversight Committee&#xff0c;TOC&#xff09;投票决定接受 Argo 作为孵化级别的托管项目。作为一个新加入的项目&#xff0c;Argo 主要关注于 Kubernetes 原生的工作流&…

腾讯智慧出行和现代汽车集团创新中心(北京)正式建立创新战略合作伙伴关系

2020年10月16日&#xff0c;腾讯智慧出行与现代汽车集团创新中心(北京)&#xff08;Hyundai CRADLE Beijing&#xff09;正式在汽车出行领域建立创新战略合作伙伴关系&#xff0c;双方将充分利用各自在智慧出行和互联网生态的优势资源&#xff0c;共同助力中国优秀初创企业&…

五项措施,让阿里云存储更安全

5大安全产品全面升级&#xff0c;抢先了解&#xff1a;https://developer.aliyun.com/topic/securityapril 预约观看发布会&#xff1a;https://yq.aliyun.com/live/2670 一、存储面临的安全新挑战 1、 安全合规成为必选项 2017 年 6 月 1 日&#xff0c;《中华人民共和国网络…

超详细前端开发案例:品优购商场项目(二)

目录 续前一篇内容10. 品优购首页布局10.4 nav 导航栏制作10.5 footer 底部制作10.6 mod_service 服务模块制作10.7 main 主体模块制作10.8 newsflash 新闻快报模块10.9 news 新闻模块10.10 lifeservice 生活服务模块10.11 recommend 推荐模块~ 未完待续,请看下一篇续前一篇内…

微信小程序 AppID和AppSecret的获取方式

微信公众平台&#xff1a;https://mp.weixin.qq.com/ 第一次需要注册&#xff0c;有账号直接扫扫码登陆即可

阿里云:助力数字经济新基建,打造物联网安全基石

5大安全产品全面升级&#xff0c;抢先了解&#xff1a;https://developer.aliyun.com/topic/securityapril 预约观看发布会&#xff1a;https://yq.aliyun.com/live/2670 新基建大势之下的物联网 近日&#xff0c;中央政治局常委会会议提出&#xff0c;加快发展5G、数据中心、…

官宣!1024 程序员节日程发布,第一代程序员求伯君将出席大会

‍‍‍‍10月23-25日&#xff0c;“长沙 中国 1024 程序员节”将盛大举行。程序员节活动以开源为主议题&#xff0c;包括 2 场岳麓尖峰对话&#xff1b;2020 开源技术英雄会&#xff1b;10场热门技术分论坛/峰会&#xff1b;创意集市&#xff1b;体验感超强的科技文化嘉年华、…

运行项目到 微信开发者工具和浏览器

文章目录一、运行项目到 微信开发者工具1. 下载安装2. HBuilder X配置3. 设置【微信开发工具路径】4. 运行5. 运行到浏览器一、运行项目到 微信开发者工具 1. 下载安装 下载地址 安装&#xff0c;一路下一步即可 2. HBuilder X配置 uniapp 支持10个平台&#xff0c;我们已…

医生的小助手,医疗AI赋能诊断新冠肺炎新方案!

春节前夕至今的一场肺炎病毒危机席卷了中国乃至整个世界&#xff0c;目前通过肺部CT的检测可迅速判断疑似患者的身体情况&#xff0c;但是由于疑似患者基数较大所以纯粹靠人工阅片&#xff0c;会耗费医生极大的精力。   为此阿里云视觉智能开放平台&#xff08;vision.aliyun…