• 微信小程序三种授权登录以及授权登录流程讲解

    🎉🎉欢迎来到我的CSDN主页！🎉🎉

    🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚

    🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯

    👉点击这里，就可以查看我的主页啦！👇👇

    Java方文山的个人主页

    🎁如果感觉还不错的话请给我点赞吧！🎁🎁

    💖期待你的加入，一起学习，一起进步！💖💖

    请添加图片描述

    一、微信授权登录流程

    小程序登录

    小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

    👇👇图解👇👇

    步骤流程：

    1.小程序调用wx.login() 获取 临时登录凭证code ，并回传到开发者服务器

    2.开发者服务器以appid+appsecret+code换取 用户唯一标识openid和会话密钥session_key。

    3.开发者服务器根据用户标识来生成自定义登录态用于后续业务逻辑中前后端交互时识别用户身份

    4.客户端保存后端生成的自定义登录态，并在下一次发送请求的时候带上这个自定义登录态。

    注意：临时登录凭证code只能使用一次

    二、微信用户授权

    下面我以两种方式的代码来给大家论证一下微信用户授权登录的流程，第一种不需要用户确认即可完成用户授权登录在开发中并不是那么的安全，第二种则是需要用户确认方可进行授权登录。

    前期准备工作

    wxml代码展示

    2. <view>
    3.   <button wx:if="{{canIUseGetUserProfile}}" type="primary" class="wx-login-btn" bindtap="getUserProfile">微信直接登录1button>
    4.   <button wx:else open-type="getUserInfo" type="primary" class="wx-login-btn" bindgetuserinfo="wxLogin">微信直接登录2button>
    5.   <image mode="scaleToFill" src="{{userInfo.avatarUrl}}" />
    6.   <text>昵称:{{userInfo.nickName}}text>
    7. view>

    1.wx.login

    JS代码展示

    1.  wxLogin: function(e) {
    2.     debugger
    3.     console.log('wxLogin')
    4.     console.log(e.detail.userInfo);
    5.     this.setData({
    6.       userInfo: e.detail.userInfo
    7.     })
    8.     if (e.detail.userInfo == undefined) {
    9.       app.globalData.hasLogin = false;
    10.       util.showErrorToast('微信登录失败');
    11.       return;
    12.     }

    效果展示：

    看得出确实是走的这个方法并获取用户信息的，我们继续看一下另一个方法。

    2.wx.getUserProfile

    JS代码展示

    1.   getUserProfile(e) {
    2.     console.log('getUserProfile')
    3.     // 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    4.     // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    5.     wx.getUserProfile({
    6.       desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    7.       success: (res) => {
    8.         console.log(res);
    9.         this.setData({
    10.           userInfo: res.userInfo,
    11.           hasUserInfo: true
    12.         })
    13.       }
    14.     })
    15.   }

    效果展示： 

    3.用户授权完成后端交互 

    我们使用用户授权后将用户信息保存到数据库方便下次用户发送请求的时候做身份认证。

    封装的代码

    utils/util.js

    1. function formatTime(date) {
    2.   var year = date.getFullYear()
    3.   var month = date.getMonth() + 1
    4.   var day = date.getDate()
    5.  
    6.   var hour = date.getHours()
    7.   var minute = date.getMinutes()
    8.   var second = date.getSeconds()
    9.  
    10.   return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    11. }
    12.  
    13. function formatNumber(n) {
    14.   n = n.toString()
    15.   return n[1] ? n : '0' + n
    16. }
    17.  
    18.  
    19. /**
    20.  * 封封微信的的request
    21.  */
    22. function request(url, data = {}, method = "GET") {
    23.   return new Promise(function (resolve, reject) {
    24.     wx.request({
    25.       url: url,
    26.       data: data,
    27.       method: method,
    28.       timeout:3000,
    29.       header: {
    30.         'Content-Type': 'application/json',
    31.         'X-OA-Token': wx.getStorageSync('token')
    32.       },
    33.       success: function (res) {
    34.         if (res.statusCode == 200) {
    35.           if (res.data.errno == 501) {
    36.             // 清除登录相关内容
    37.             try {
    38.               wx.removeStorageSync('userInfo');
    39.               wx.removeStorageSync('token');
    40.             } catch (e) {
    41.               // Do something when catch error
    42.             }
    43.             // 切换到登录页面
    44.             wx.navigateTo({
    45.               url: '/pages/auth/login/login'
    46.             });
    47.           } else {
    48.             resolve(res.data);
    49.           }
    50.         } else {
    51.           reject(res.errMsg);
    52.         }
    53.  
    54.       },
    55.       fail: function (err) {
    56.         reject(err)
    57.       }
    58.     })
    59.   });
    60. }
    61.  
    62. function redirect(url) {
    63.   //判断页面是否需要登录
    64.   if (false) {
    65.     wx.redirectTo({
    66.       url: '/pages/auth/login/login'
    67.     });
    68.     return false;
    69.   } else {
    70.     wx.redirectTo({
    71.       url: url
    72.     });
    73.   }
    74. }
    75.  
    76. function showErrorToast(msg) {
    77.   wx.showToast({
    78.     title: msg,
    79.     image: '/static/images/icon_error.png'
    80.   })
    81. }
    82.  
    83. function jhxLoadShow(message) {
    84.   if (wx.showLoading) { // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
    85.     wx.showLoading({
    86.       title: message,
    87.       mask: true
    88.     });
    89.   } else { // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
    90.     wx.showToast({
    91.       title: message,
    92.       icon: 'loading',
    93.       mask: true,
    94.       duration: 20000
    95.     });
    96.   }
    97. }
    98.  
    99. function jhxLoadHide() {
    100.   if (wx.hideLoading) { // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
    101.     wx.hideLoading();
    102.   } else {
    103.     wx.hideToast();
    104.   }
    105. }
    106.  
    107. module.exports = {
    108.   formatTime,
    109.   request,
    110.   redirect,
    111.   showErrorToast,
    112.   jhxLoadShow,
    113.   jhxLoadHide
    114. }

    config/api.js 

    1. // 以下是业务服务器API地址
    2.  // 本机开发API地址
    3. var WxApiRoot = 'http://localhost:8080/oapro/wx/';
    4. // 测试环境部署api地址
    5. // var WxApiRoot = 'http://192.168.191.1:8080/oapro/wx/';
    6. // 线上平台api地址
    7. //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
    8.  
    9. module.exports = {
    10.   IndexUrl: WxApiRoot + 'home/index', //首页数据接口
    11.   SwiperImgs: WxApiRoot+'swiperImgs',
    12.   MettingInfos: WxApiRoot+'meeting/list',
    13.   AuthLoginByWeixin: WxApiRoot + 'auth/login_by_weixin', //微信登录
    14.   UserIndex: WxApiRoot + 'user/index', //个人页面用户相关信息
    15.   AuthLogout: WxApiRoot + 'auth/logout', //账号登出
    16.   AuthBindPhone: WxApiRoot + 'auth/bindPhone' //绑定微信手机号
    17. };

    JS代码

    1. // pages/auth/login/login.js
    2. var util = require('../../../utils/util.js');
    3. var user = require('../../../utils/user.js');
    4. const app = getApp();
    5. Page({
    6.  
    7.     /**
    8.      * 页面的初始数据
    9.      */
    10.     data: {
    11.         canIUseGetUserProfile: false, // 用于向前兼容
    12.         lock:false
    13.     },
    14.     onLoad: function(options) {
    15.         // 页面初始化 options为页面跳转所带来的参数
    16.         // 页面渲染完成
    17.         if (wx.getUserProfile) {
    18.           this.setData({
    19.             canIUseGetUserProfile: true
    20.           })
    21.         }
    22.         //console.log('login.onLoad.canIUseGetUserProfile='+this.data.canIUseGetUserProfile)
    23.     },
    24.  
    25.     /**
    26.      * 生命周期函数--监听页面初次渲染完成
    27.      */
    28.     onReady() {
    29.  
    30.     },
    31.  
    32.     /**
    33.      * 生命周期函数--监听页面显示
    34.      */
    35.     onShow() {
    36.  
    37.     },
    38.     getUserProfile(e) {
    39.         console.log('getUserProfile');
    40.         // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    41.         // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    42.         wx.getUserProfile({
    43.             desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    44.             success: (res) => {
    45.                 //console.log(res);
    46.                 user.checkLogin().catch(() => {
    47.                     user.loginByWeixin(res.userInfo).then(res => {
    48.                       app.globalData.hasLogin = true;
    49.                       wx.navigateBack({
    50.                         delta: 1
    51.                       })
    52.                     }).catch((err) => {
    53.                       app.globalData.hasLogin = false;
    54.                       if(err.errMsg=="request:fail timeout"){
    55.                         util.showErrorToast('微信登录超时');
    56.                       }else{
    57.                         util.showErrorToast('微信登录失败');
    58.                       }
    59.                       this.setData({
    60.                         lock:false
    61.                       })
    62.                     });
    63.                   });
    64.             },
    65.             fail: (res) => {
    66.                 app.globalData.hasLogin = false;
    67.                 console.log(res);
    68.                 util.showErrorToast('微信登录失败');
    69.             }
    70.         });
    71.     },
    72.     wxLogin: function(e) {
    73.         console.log('wxLogin');
    74.         if (e.detail.userInfo == undefined) {
    75.           app.globalData.hasLogin = false;
    76.           util.showErrorToast('微信登录失败');
    77.           return;
    78.         }
    79.         user.checkLogin().catch(() => {
    80.             user.loginByWeixin(e.detail.userInfo).then(res => {
    81.               app.globalData.hasLogin = true;
    82.               wx.navigateBack({
    83.                 delta: 1
    84.               })
    85.             }).catch((err) => {
    86.               app.globalData.hasLogin = false;
    87.               if(err.errMsg=="request:fail timeout"){
    88.                 util.showErrorToast('微信登录超时');
    89.               }else{
    90.                 util.showErrorToast('微信登录失败');
    91.               }
    92.             });
    93.       
    94.           });
    95.     },
    96.     accountLogin() {
    97.         console.log('开发中....')
    98.     }
    99.  
    100. })

    WXML代码

    1. <view class="container">
    2.   <view class="login-box">
    3.     <button wx:if="{{canIUseGetUserProfile}}" type="primary" class="wx-login-btn" bindtap="getUserProfile">微信直接登录button>
    4.     <button wx:else open-type="getUserInfo" type="primary" class="wx-login-btn" bindgetuserinfo="wxLogin">微信直接登录button>
    5.     <button type="primary" class="account-login-btn" bindtap="accountLogin">账号登录button>
    6.   view>
    7. view>

     后端配置appid+appsecret与数据库连接

    后端代码

    1.  /**
    2.      * 微信登录
    3.      *
    4.      * @param wxLoginInfo
    5.      *            请求内容，{ code: xxx, userInfo: xxx }
    6.      * @param request
    7.      *            请求对象
    8.      * @return 登录结果
    9.      */
    10.     @PostMapping("login_by_weixin")
    11.     public Object loginByWeixin(@RequestBody WxLoginInfo wxLoginInfo, HttpServletRequest request) {
    12.  
    13.         //客户端需携带code与userInfo信息
    14.         String code = wxLoginInfo.getCode();
    15.         UserInfo userInfo = wxLoginInfo.getUserInfo();
    16.         if (code == null || userInfo == null) {
    17.             return ResponseUtil.badArgument();
    18.         }
    19.         //调用微信sdk获取openId及sessionKey
    20.         String sessionKey = null;
    21.         String openId = null;
    22.         try {
    23.             long beginTime = System.currentTimeMillis();
    24.             //
    25.             WxMaJscode2SessionResult result = this.wxService.getUserService().getSessionInfo(code);
    26. //            Thread.sleep(6000);
    27.             long endTime = System.currentTimeMillis();
    28.             log.info("响应时间:{}",(endTime-beginTime));
    29.             sessionKey = result.getSessionKey();//session id
    30.             openId = result.getOpenid();//用户唯一标识 OpenID
    31.         } catch (Exception e) {
    32.             e.printStackTrace();
    33.         }
    34.  
    35.         if (sessionKey == null || openId == null) {
    36.             log.error("微信登录,调用官方接口失败：{}", code);
    37.             return ResponseUtil.fail();
    38.         }else{
    39.             log.info("openId={},sessionKey={}",openId,sessionKey);
    40.         }
    41.         //根据openId查询wx_user表
    42.         //如果不存在，初始化wx_user,并保存到数据库中
    43.         //如果存在，更新最后登录时间
    44.         WxUser user = userService.queryByOid(openId);
    45.  
    46.         if (user == null) {
    47.             user = new WxUser();
    48.             user.setUsername(openId);
    49.             user.setPassword(openId);
    50.             user.setWeixinOpenid(openId);
    51.             user.setAvatar(userInfo.getAvatarUrl());
    52.             user.setNickname(userInfo.getNickName());
    53.             user.setGender(userInfo.getGender());
    54.             user.setUserLevel((byte) 0);
    55.             user.setStatus((byte) 0);
    56.             user.setLastLoginTime(new Date());
    57.             user.setLastLoginIp(IpUtil.client(request));
    58.             user.setShareUserId(1);
    59.  
    60.             userService.add(user);
    61.  
    62.         } else {
    63.             user.setLastLoginTime(new Date());
    64.             user.setLastLoginIp(IpUtil.client(request));
    65.             if (userService.updateById(user) == 0) {
    66.                 log.error("修改失败：{}", user);
    67.                 return ResponseUtil.updatedDataFailed();
    68.             }
    69.         }
    70.         // token
    71.         UserToken userToken = null;
    72.         try {
    73.             userToken = UserTokenManager.generateToken(user.getId());
    74.         } catch (Exception e) {
    75.             log.error("微信登录失败,生成token失败：{}", user.getId());
    76.             e.printStackTrace();
    77.             return ResponseUtil.fail();
    78.         }
    79.         userToken.setSessionKey(sessionKey);
    80.         log.info("SessionKey={}",UserTokenManager.getSessionKey(user.getId()));
    81.         Map result = new HashMap();
    82.         result.put("token", userToken.getToken());
    83.         result.put("tokenExpire", userToken.getExpireTime().toString());
    84.         userInfo.setUserId(user.getId());
    85.         if (!StringUtils.isEmpty(user.getMobile())) {// 手机号存在则设置
    86.             userInfo.setPhone(user.getMobile());
    87.         }
    88.         try {
    89.             DateFormat df = new SimpleDateFormat("yyyy-MM-dd");
    90.             String registerDate = df.format(user.getAddTime() != null ? user.getAddTime() : new Date());
    91.             userInfo.setRegisterDate(registerDate);
    92.             userInfo.setStatus(user.getStatus());
    93.             userInfo.setUserLevel(user.getUserLevel());// 用户层级
    94.             userInfo.setUserLevelDesc(UserTypeEnum.getInstance(user.getUserLevel()).getDesc());// 用户层级描述
    95.         } catch (Exception e) {
    96.             log.error("微信登录：设置用户指定信息出错："+e.getMessage());
    97.             e.printStackTrace();
    98.         }
    99.         result.put("userInfo", userInfo);
    100.  
    101.  
    102.         log.info("【请求结束】微信登录,响应结果:{}", JSONObject.toJSONString(result));
    103.  
    104.         return ResponseUtil.ok(result);
    105.     }

     数据库展示

    效果演示

    三、微信手机号授权

    手机授权原理也是如此只不过调用的接口不同罢了。

    JS代码

    1. var util = require('../../../utils/util.js');
    2. var api = require('../../../config/api.js');
    3. var user = require('../../../utils/user.js');
    4. var app = getApp();
    5. Page({
    6.  
    7.   /**
    8.    * 页面的初始数据
    9.    */
    10.   data: {
    11.     userInfo: {},
    12.     hasLogin: false,
    13.     userSharedUrl: ''
    14.   },
    15.  
    16.   /**
    17.       * 生命周期函数--监听页面加载
    18.    */
    19.   onLoad: function (options) {
    20.  
    21.   },
    22.   onShow: function () {
    23.     let that = this;
    24.     //获取用户的登录信息
    25.     let userInfo = wx.getStorageSync('userInfo');
    26.     this.setData({
    27.       userInfo: userInfo,
    28.       hasLogin: true
    29.     });
    30.  
    31.   },
    32.   getPhoneNumber: function (e) {
    33.       console.log(e);
    34.     let that = this;
    35.     if (e.detail.errMsg !== "getPhoneNumber:ok") {
    36.       // 拒绝授权
    37.       return;
    38.     }
    39.  
    40.     if (!this.data.hasLogin) {
    41.       wx.showToast({
    42.         title: '绑定失败：请先登录',
    43.         icon: 'none',
    44.         duration: 2000
    45.       });
    46.       return;
    47.     }
    48.  
    49.     util.request(api.AuthBindPhone, {
    50.       iv: e.detail.iv,
    51.       encryptedData: e.detail.encryptedData
    52.     }, 'POST').then(function (res) {
    53.       if (res.errno === 0) {
    54.         let userInfo = wx.getStorageSync('userInfo');
    55.         userInfo.phone = res.data.phone;//设置手机号码
    56.         wx.setStorageSync('userInfo', userInfo);
    57.         that.setData({
    58.           userInfo: userInfo,
    59.           hasLogin: true
    60.         });
    61.         wx.showToast({
    62.           title: '绑定手机号码成功',
    63.           icon: 'success',
    64.           duration: 2000
    65.         });
    66.       }
    67.     });
    68.   },
    69.   exitLogin: function () {
    70.     wx.showModal({
    71.       title: '',
    72.       confirmColor: '#b4282d',
    73.       content: '退出登录？',
    74.       success: function (res) {
    75.         if (!res.confirm) {
    76.           return;
    77.         }
    78.  
    79.         util.request(api.AuthLogout, {}, 'POST');
    80.         app.globalData.hasLogin = false;
    81.         wx.removeStorageSync('token');
    82.         wx.removeStorageSync('userInfo');
    83.         wx.reLaunch({
    84.           url: '/pages/index/index'
    85.         });
    86.       }
    87.     })
    88.   }
    89. })

    WXML代码

    2. <form bindsubmit="formSubmit">
    3.     <view class='personal-data'>
    4.         <view class='list'>
    5.             <view class='item acea-row row-between-wrapper'>
    6.                 <view>头像view>
    7.                 <view class='pictrue'>
    8.                     <image src='{{userInfo.avatarUrl}}'>image>
    9.                 view>
    10.             view>
    11.             <view class='item acea-row row-between-wrapper'>
    12.                 <view>名字view>
    13.                 <view class='input'><input type='text' disabled='true' name='nickname' value='{{userInfo.nickName}}'>input>view>
    14.             view>
    15.             <view class='item acea-row row-between-wrapper'>
    16.                 <view>手机号码view>
    17.                 <button name='phone' class='phoneW' value='{{userInfo.phone}}' wx:if="{{!userInfo.phone}}" bindgetphonenumber="getPhoneNumber" hover-class='none' open-type='getPhoneNumber'>
    18.                     点击获取
    19.                 button>
    20.                 <view class='input acea-row row-between-wrapper' wx:else>
    21.                     <input type='text' disabled='true' name='phone' value='{{userInfo.phone}}' class='id'>input>
    22.                     <text class='iconfont icon-suozi'>text>
    23.                 view>
    24.             view>
    25.  
    26.             <view class='item acea-row row-between-wrapper'>
    27.                 <view>ID号view>
    28.                 <view class='input acea-row row-between-wrapper'>
    29.                     <input type='text' value='1000{{userInfo.userId}}' disabled='true' class='id'>input>
    30.                     <text class='iconfont icon-suozi'>text>
    31.                 view>
    32.             view>
    33.         view>
    34.         <button class='modifyBnt' bindtap="exitLogin">退 出button>
    35.     view>
    36. form>

    后端代码

    1.  /**
    2.      * 绑定手机号码
    3.      *
    4.      * @param userId
    5.      * @param body
    6.      * @return
    7.      */
    8.     @PostMapping("bindPhone")
    9.     public Object bindPhone(@LoginUser Integer userId, @RequestBody String body) {
    10.         log.info("【请求开始】绑定手机号码,请求参数，body:{}", body);
    11.  
    12.         String sessionKey = UserTokenManager.getSessionKey(userId);
    13.         String encryptedData = JacksonUtil.parseString(body, "encryptedData");
    14.         String iv = JacksonUtil.parseString(body, "iv");
    15.         WxMaPhoneNumberInfo phoneNumberInfo = null;
    16.         try {
    17.             phoneNumberInfo = this.wxService.getUserService().getPhoneNoInfo(sessionKey, encryptedData, iv);
    18.         } catch (Exception e) {
    19.             log.error("绑定手机号码失败,获取微信绑定的手机号码出错：{}", body);
    20.             e.printStackTrace();
    21.             return ResponseUtil.fail();
    22.         }
    23.         String phone = phoneNumberInfo.getPhoneNumber();
    24.         WxUser user = userService.selectByPrimaryKey(userId);
    25.         user.setMobile(phone);
    26.         if (userService.updateById(user) == 0) {
    27.             log.error("绑定手机号码,更新用户信息出错,id：{}", user.getId());
    28.             return ResponseUtil.updatedDataFailed();
    29.         }
    30.         Map data = new HashMap();
    31.         data.put("phone", phone);
    32.  
    33.         log.info("【请求结束】绑定手机号码,响应结果：{}", JSONObject.toJSONString(data));
    34.         return ResponseUtil.ok(data);
    35.     }

    效果展示

    四、注销登录

    注销登录的前端代码同上，后端代码如下：

    后端代码

    1.  /**
    2.      * 注销登录
    3.      */
    4.     @PostMapping("logout")
    5.     public Object logout(@LoginUser Integer userId) {
    6.         log.info("【请求开始】注销登录,请求参数，userId:{}", userId);
    7.         if (userId == null) {
    8.             return ResponseUtil.unlogin();
    9.         }
    10.         try {
    11.             UserTokenManager.removeToken(userId);
    12.         } catch (Exception e) {
    13.             log.error("注销登录出错：userId:{}", userId);
    14.             e.printStackTrace();
    15.             return ResponseUtil.fail();
    16.         }
    17.  
    18.         log.info("【请求结束】注销登录成功!");
    19.         return ResponseUtil.ok();
    20.     }

    效果演示

     请添加图片描述​

    到这里我的分享就结束了，欢迎到评论区探讨交流！！

    💖如果觉得有用的话还请点个赞吧 💖

  • 相关阅读:
    zkLogin构建者的最佳实践和业务思考
    草图大师SketchUp Pro 2023 for Mac
    分布式一致性算法:Raft
    Swift服务的基本使用
    Java-lambda表达式
    Spark 之 Projection
    六、《图解HTTP》一些关于Web的攻击手段
    P1347 排序(拓扑 + spfa判断环 or 拓扑[内判断环])
    8. 用Rust手把手编写一个wmproxy(代理，内网穿透等), HTTP改造篇之HPACK原理
    “罪魁祸首”已找到，微软回应修改 MIT 开源项目作者版权声明
  • 原文地址：https://blog.csdn.net/weixin_74318097/article/details/133963169