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


Posted in Javascript onFebruary 18, 2022

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

一、appID相关申请和配置

1. appid获取方式

登录微信公众平台

官网链接:https://mp.weixin.qq.com/

第一次需要小伙伴们点击注册按钮,进行注册,如果有账号,直接扫描登录即可

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

官网小程序链接:

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

2. appID配置

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

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

二、获取用户基础数据

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

2.1. 获取用户信息

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

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

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

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

页面部分:

<button class="login-btn" type="primary" @click="getUserInfo">
        微信用户一键登录
      </button>

js部分:

methods: {
    getUserInfo() {
      uni.getUserInfo({
        provider: 'weixin',
        success: (res) => {
          console.log('getUserInfo', res);
        },
      });
    },
   }

获取的用户基础数据(无openid=》微信用户唯一标识)

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

2.2. 获取用户信息2

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

页面一样,js部分:

getUserInfo() {
      uni.getUserProfile({
        desc: '登录后可同步数据',
        lang: 'zh_CN',
        success: (res) => {
          console.log('getUserProfile', res);
        },
      });
    },

获取的用户基础数据(无openid=》微信用户唯一标识)

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

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

三、调用登录api

3.1. 登录api

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

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

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

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

4.2. 接口简述

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

请求方式: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

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

五、绑定用户 实现登录

获取到微信用户的唯一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: () => {
          // 隐藏loading
          uni.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: () => {
          // 隐藏loading
          uni.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参数,调用后端接口获取Openid
    async 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中,通过commit
      this.commit('user/setOpenid', userAuthInfo.openid);
      this.commit('user/setUserInfo', JSON.parse(userInfo.rawData));
    },

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

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

六、项目开源地址

6.1. 前端

applet-chock-in

6.2. 后端

weixin-java-miniapp

到此这篇关于uni-app 微信小程序授权登录的文章就介绍到这了,更多相关uni-app 微信小程序授权登录内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
详解TypeScript的基础类型
Feb 18 #Javascript
详解jQuery的核心函数和事件处理
Feb 18 #jQuery
JavaScript事件的委托(代理)的用法示例详解
Feb 18 #Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
如何利用React实现图片识别App
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 #Javascript
You might like
PHP开发微信支付的代码分享
2014/05/25 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
javaScript语法总结
2016/11/25 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python常用函数与用法示例
2019/07/02 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
逃课检讨书怎么写
2015/01/01 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
68句权威创业名言
2019/08/26 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript
pandas中pd.groupby()的用法详解
2022/06/16 Python