设为首页收藏本站
开启辅助访问 切换到宽版

安徽论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

安徽论坛»论坛 › 大国徽商 › 计算机 › uni-app 微信小程序授权登录的实现步骤
返回列表 发新帖
查看: 7867|回复: 0

uni-app 微信小程序授权登录的实现步骤

[复制链接]
万胜

90

主题

523

回帖

1063

积分

金牌会员

Rank: 6Rank: 6

积分
1063
发表于 2022-3-26 10:58:36 | 显示全部楼层 |阅读模式
网站内容均来自网络，本站只提供信息平台，如有侵权请联系删除，谢谢！
目录



一、appID相关申请和配置


1. appid获取方式

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

官网小程序链接：


2. appID配置

在manifest.json中输入申请的微信小程序id


二、获取用户基础数据
  1. 这里给小伙伴们演示二种api
复制代码
2.1. 获取用户信息

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

授权成功后获取到的用户信息在userInfo中：

页面部分：
  1.   <button class="login-btn" type="primary" @click="getUserInfo">
  2.         微信用户一键登录
  3.       </button>
复制代码
js部分：
  1. methods: {
  2.     getUserInfo() {
  3.       uni.getUserInfo({
  4.         provider: 'weixin',
  5.         success: (res) => {
  6.           console.log('getUserInfo', res);
  7.         },
  8.       });
  9.     },
  10.    }
复制代码
获取的用户基础数据（无openid=》微信用户唯一标识）


2.2. 获取用户信息2

可以使用uni.getUserInfo请求用户授权获取用户信息
页面一样，js部分：
  1.    getUserInfo() {
  2.       uni.getUserProfile({
  3.         desc: '登录后可同步数据',
  4.         lang: 'zh_CN',
  5.         success: (res) => {
  6.           console.log('getUserProfile', res);
  7.         },
  8.       });
  9.     },
复制代码
获取的用户基础数据（无openid=》微信用户唯一标识）

总结：uni.getUserProfile和uni.getUserInfo 二个api获取的用户数据基本一样，都无openid=》微信用户唯一标识。

三、调用登录api


3.1. 登录api

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


3.2. 案例代码
  1.       uni.login({
  2.             provider: 'weixin',
  3.             success: (res) => {
  4.               console.log('res-login', res);
  5.               this.code = res.code;
  6.               console.log('code', res.code);
  7.               if (res.errMsg == 'login:ok') {
  8.               //TODO 获取code 携带code参数调用后端接口}
复制代码
四、获取唯一标识信息


4.1. 官网文档

官网文档
使用获取到的code请求微信登录接口，获取 openid 和 session_key


4.2. 接口简述


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


五、绑定用户 实现登录
  1. 获取到微信用户的唯一id后，就可以绑定至自己系统中的用户，我的做法是在用户表中加入weixinId字段，跳转至自己的用户绑定界面，如果用户选择绑定微信，则更新该行用户数据的weixinId。下次用户使用微信登录时，如果通过openId能够查询到一条用户数据，说明已经绑定，则登录该用户
复制代码
5.1. 代码案例（未封装）

前端部分：
  1. /**
  2.      *
  3.      * 获取用户信息
  4.      */
  5.     getUserInfo() {
  6.       // 展示加载框
  7.       uni.showLoading({
  8.         title: '加载中',
  9.       });
  10.       uni.getUserProfile({
  11.         desc: '登录后可同步数据',
  12.         success: async (obj) => {
  13.           console.log('obj', obj);
  14.           // 调用 action ，请求登录接口
  15.           // await this.login(obj);
  16.           uni.login({
  17.             provider: 'weixin',
  18.             success: (res) => {
  19.               console.log('res-login', res);
  20.               this.code = res.code;
  21.               console.log('code', res.code);
  22.               if (res.errMsg == 'login:ok') {
  23.                 uni
  24.                   .request({
  25.                     url:
  26.                       'http://127.0.0.1:8080/wxh5/wx/user/' +
  27.                       'wx55822xxxx75e422' +
  28.                       '/login/',
  29.                     data: {
  30.                       code: this.code,
  31.                     },
  32.                   })
  33.                   .then((res) => {
  34.                   //获取到 openid 和 session_k后，自己的逻辑
  35.                     console.log('授权登录', res[1].data);
  36.                     console.log(res[1].data.openid);
  37.                     console.log(res[1].data.session_key);
  38.                     // DoSomeThing.................
  39.                   });
  40.                 console.log('res', res);
  41.               }
  42.             },
  43.           });
  44.         },
  45.         fail: () => {
  46.           uni.showToast({
  47.             title: '授权已取消',
  48.             icon: 'error',
  49.             mask: true,
  50.           });
  51.         },
  52.         complete: () => {
  53.           // 隐藏loading
  54.           uni.hideLoading();
  55.         },
  56.       });
  57.     },
复制代码
后端部分
  1.    @GetMapping("/login")
  2.     public String login(@PathVariable String appid, String code) {
  3.         if (StringUtils.isBlank(code)) {
  4.             return "empty jscode";
  5.         }

  7.         final WxMaService wxService = WxMaConfiguration.getMaService(appid);

  9.         try {
  10.             WxMaJscode2SessionResult session = wxService.getUserService().getSessionInfo(code);
  11.             this.logger.info(session.getSessionKey());
  12.             this.logger.info(session.getOpenid());
  13.             //TODO 可以增加自己的逻辑，关联业务相关数据
  14.             return JsonUtils.toJson(session);
  15.         } catch (WxErrorException e) {
  16.             this.logger.error(e.getMessage(), e);
  17.             return e.toString();
  18.         }
  19.     }
复制代码
5.2. 代码案例（封装）
  1.   /**
  2.      *
  3.      * 获取用户信息
  4.      */
  5.     getUserInfo() {
  6.       // 展示加载框
  7.       uni.showLoading({
  8.         title: '加载中',
  9.       });
  10.       uni.getUserProfile({
  11.         desc: '登录后可同步数据',
  12.         success: async (obj) => {
  13.           // this.userInfo = obj.userInfo;
  14.           // 调用 action ，请求登录接口
  15.           uni.login({
  16.             provider: 'weixin',
  17.             success: async (res) => {
  18.               this.code = res.code;
  19.               // console.log('登录获取code', res.code);
  20.               if (res.errMsg == 'login:ok') {
  21.                 await this.loginAuth({
  22.                   userProfile: obj,
  23.                   appid: 'wx558xxxxxxxxxxxxxxx2',
  24.                   code: this.code,
  25.                 });
  26.               }
  27.             },
  28.           });
  29.         },
  30.         fail: () => {
  31.           uni.showToast({
  32.             title: '授权已取消',
  33.             icon: 'error',
  34.             mask: true,
  35.           });
  36.         },
  37.         complete: () => {
  38.           // 隐藏loading
  39.           uni.hideLoading();
  40.         },
  41.       });
  42.     },
  43.   },
复制代码
user.js
  1. /**
  2. * 微信用户授权登录，携带appid和code参数，调用后端接口获取Openid
  3. */
  4. export function loginAuth(data) {
  5.   return request({
  6.     url: '/wx/user/' + data.appid + '/login/',
  7.     data: {
  8.       code: data.code,
  9.     },
  10.   });
  11. }
复制代码
vuex user模块（user.js）
  1.   // 微信用户授权登录，携带appid和code参数，调用后端接口获取Openid
  2.     async loginAuth(context, data) {
  3.       console.log('data', data);
  4.       const userInfo = data.userProfile;
  5.       const { content: res } = await loginAuth({
  6.         appid: data.appid,
  7.         code: data.code,
  8.       });

  10.       // 解析后端传送过来的json对象
  11.       const userAuthInfo = JSON.parse(res);
  12.       const openid = userAuthInfo.openid;
  13.       // console.log('sessionKey', userAuthInfo.sessionKey);
  14.       console.log('openid', openid);

  16.       // 保存到vuex中，通过commit
  17.       this.commit('user/setOpenid', userAuthInfo.openid);
  18.       this.commit('user/setUserInfo', JSON.parse(userInfo.rawData));
  19.     },
复制代码



六、项目开源地址


6.1. 前端

applet-chock-in

6.2. 后端

weixin-java-miniapp
到此这篇关于uni-app 微信小程序授权登录的文章就介绍到这了,更多相关uni-app 微信小程序授权登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
                                                        
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
免责声明
1. 本论坛所提供的信息均来自网络，本网站只提供平台服务，所有账号发表的言论与本网站无关。
2. 其他单位或个人在使用、转载或引用本文时，必须事先获得该帖子作者和本人的同意。
3. 本帖部分内容转载自其他媒体，但并不代表本人赞同其观点和对其真实性负责。
4. 如有侵权，请立即联系，本网站将及时删除相关内容。
回复 设为聚合帖聚合到帖子

使用道具 举报

返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 【右侧内容，后台自定义】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表