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 相关文章推荐
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
js取模(求余数)隔行变色
May 15 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
详解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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP学习笔记(二):变量详解
2015/04/17 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
原生js二级联动效果
2017/06/20 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
使用Python对SQLite数据库操作
2017/04/06 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python 实现自动导入缺失的库
2019/10/29 Python
Python socket模块方法实现详解
2019/11/05 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
自我评价怎么写好呢?
2013/12/05 职场文书
体育教师求职信
2014/05/24 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
幼儿学前班评语
2014/12/29 职场文书
Python图片检索之以图搜图
2021/05/31 Python
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
浅谈MySQL中的六种日志
2022/03/23 MySQL