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 相关文章推荐
json对象转字符串如何实现
Dec 02 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 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+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
爬虫利器Puppeteer实战
2019/01/09 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
微信小程序实现多图上传
2020/06/19 Javascript
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
pandas中去除指定字符的实例
2018/05/18 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
python模拟实现分发扑克牌
2020/04/22 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
创业计划书六个要素
2013/12/26 职场文书
求职自我推荐信
2014/06/25 职场文书
新店开张活动方案
2014/08/24 职场文书
2014年采购员工作总结
2014/11/18 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers