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 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 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
php4的session功能评述(一)
2006/10/09 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python实现DES加密解密方法实例详解
2015/06/30 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
军训的自我鉴定
2013/12/10 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
小学班主任评语大全
2014/04/23 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
电子商务专业自荐信
2014/06/02 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
MySQL sql_mode的使用详解
2021/05/08 MySQL