AI 助理
备案控制台
开发者社区 数据库 文章 正文

后台交互-个人中心-＞小程序登录微信登录接口演示,小程序授权登录理论,小程序授权登录代码演示,微信表情包存储问题

2023-11-30 84
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 后台交互-个人中心-＞小程序登录微信登录接口演示,小程序授权登录理论,小程序授权登录代码演示,微信表情包存储问题
  • 小程序登录微信登录接口演示
  • 小程序授权登录理论
  • 小程序授权登录代码演示
  • 微信表情包存储问题

1.小程序登录微信登录接口演示

推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认

// pages/index/index.js
Page({
  data: {
    userInfo: {},
    canIUseGetUserProfile: false,
  },
  onLoad() {
    // if (wx.getUserProfile) {
    //   this.setData({
    //     canIUseGetUserProfile: true
    //   })
    // }
  },
  getUserProfile(e) {
    console.log('getUserProfile')
    // 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res);
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  wxLogin: function(e) {
    debugger
    console.log('wxLogin')
    console.log(e.detail.userInfo);
    this.setData({
      userInfo: e.detail.userInfo
    })
    if (e.detail.userInfo == undefined) {
      app.globalData.hasLogin = false;
      util.showErrorToast('微信登录失败');
      return;
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})
<!--pages/index/index.wxml-->
<view>
  <button wx:if="{{canIUseGetUserProfile}}" type="primary" class="wx-login-btn" bindtap="getUserProfile">微信直接登录1</button>
  <button wx:else open-type="getUserInfo" type="primary" class="wx-login-btn" bindgetuserinfo="wxLogin">微信直接登录2</button>
  <image mode="scaleToFill" src="{{userInfo.avatarUrl}}" />
  <text>昵称:{{userInfo.nickName}}</text>
</view>

2.小程序授权登录理论

小程序：小程序对应的项目，自己写的前端


临时的code，是一个临时的字符串


开发者服务器;小程序后台接口，自己写的后端


appid：是指小程序相对于微信软件的唯一标识


微信接口服务：微信的接口服务器，不是我们自己写的代码（看成阿里云的短信服务）


session_key：指的是当前的登录请求，指的是一次会话


openid：登录的用户（javaxl），相当于微信小程序这款软件的唯一标识


storage：看成vue中vuex


3.小程序授权登录代码演示

//oa-mini\utils\user.js
/**
 * 用户相关服务
 */
const util = require('../utils/util.js');
const api = require('../config/api.js');
/**
 * Promise封装wx.checkSession
 */
function checkSession() {
  return new Promise(function(resolve, reject) {
    wx.checkSession({
      success: function() {
        resolve(true);
      },
      fail: function() {
        reject(false);
      }
    })
  });
}
/**
 * Promise封装wx.login
 */
function login() {
  return new Promise(function(resolve, reject) {
    wx.login({
      success: function(res) {
        if (res.code) {
          resolve(res);
        } else {
          reject(res);
        }
      },
      fail: function(err) {
        reject(err);
      }
    });
  });
}
/**
 * 调用微信登录
 */
function loginByWeixin(userInfo) {
  return new Promise(function(resolve, reject) {
    return login().then((res) => {
      //登录远程服务器
      util.request(api.AuthLoginByWeixin, {
        code: res.code,
        userInfo: userInfo
      }, 'POST').then(res => {
        if (res.errno === 0) {
          //存储用户信息
          wx.setStorageSync('userInfo', res.data.userInfo);
          wx.setStorageSync('token', res.data.token);
          resolve(res);
        } else {
          reject(res);
        }
      }).catch((err) => {
        reject(err);
      });
    }).catch((err) => {
      reject(err);
    })
  });
}
/**
 * 判断用户是否登录
 */
function checkLogin() {
  return new Promise(function(resolve, reject) {
    if (wx.getStorageSync('userInfo') && wx.getStorageSync('token')) {
      checkSession().then(() => {
        resolve(true);
      }).catch(() => {
        reject(false);
      });
    } else {
      reject(false);
    }
  });
}
module.exports = {
  loginByWeixin,
  checkLogin,
};
package com.zlj.ssm.wxcontroller;
/**
 * @Autho donkee
 * @Since 2022/6/27
 */
import cn.binarywang.wx.miniapp.bean.WxMaPhoneNumberInfo;
import com.alibaba.fastjson.JSONObject;
import com.zlj.ssm.annotation.LoginUser;
import com.zlj.ssm.model.UserInfo;
import com.zlj.ssm.model.WxLoginInfo;
import com.zlj.ssm.model.WxUser;
import com.zlj.ssm.service.UserToken;
import com.zlj.ssm.service.UserTokenManager;
import com.zlj.ssm.service.WxUserService;
import com.zlj.ssm.util.JacksonUtil;
import com.zlj.ssm.util.ResponseUtil;
import com.zlj.ssm.util.UserTypeEnum;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import cn.binarywang.wx.miniapp.api.WxMaService;
import cn.binarywang.wx.miniapp.bean.WxMaJscode2SessionResult;
import javax.servlet.http.HttpServletRequest;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
/**
 * 鉴权服务
 */
@Slf4j
@RestController
@RequestMapping("/wx/auth")
public class WxAuthController {
    @Autowired
    private WxMaService wxService;
    @Autowired
    private WxUserService userService;
    /**
     * 微信登录
     *
     * @param wxLoginInfo
     *            请求内容，{ code: xxx, userInfo: xxx }
     * @param request
     *            请求对象
     * @return 登录结果
     */
    @PostMapping("login_by_weixin")
    public Object loginByWeixin(@RequestBody WxLoginInfo wxLoginInfo, HttpServletRequest request) {
        //客户端需携带code与userInfo信息
        String code = wxLoginInfo.getCode();
        UserInfo userInfo = wxLoginInfo.getUserInfo();
        if (code == null || userInfo == null) {
            return ResponseUtil.badArgument();
        }
        //调用微信sdk获取openId及sessionKey
        String sessionKey = null;
        String openId = null;
        try {
            long beginTime = System.currentTimeMillis();
            //
            WxMaJscode2SessionResult result = this.wxService.getUserService().getSessionInfo(code);
//            Thread.sleep(6000);
            long endTime = System.currentTimeMillis();
            log.info("响应时间:{}",(endTime-beginTime));
            sessionKey = result.getSessionKey();//session id
            openId = result.getOpenid();//用户唯一标识 OpenID
        } catch (Exception e) {
            e.printStackTrace();
        }
        if (sessionKey == null || openId == null) {
            log.error("微信登录,调用官方接口失败：{}", code);
            return ResponseUtil.fail();
        }else{
            log.info("openId={},sessionKey={}",openId,sessionKey);
        }
        //根据openId查询wx_user表
        //如果不存在，初始化wx_user,并保存到数据库中
        //如果存在，更新最后登录时间
        WxUser user = userService.queryByOid(openId);
        if (user == null) {
            user = new WxUser();
            user.setUsername(openId);
            user.setPassword(openId);
            user.setWeixinOpenid(openId);
            user.setAvatar(userInfo.getAvatarUrl());
            user.setNickname(userInfo.getNickName());
            user.setGender(userInfo.getGender());
            user.setUserLevel((byte) 0);
            user.setStatus((byte) 0);
            user.setLastLoginTime(new Date());
            user.setLastLoginIp(IpUtil.client(request));
            user.setShareUserId(1);
            userService.add(user);
        } else {
            user.setLastLoginTime(new Date());
            user.setLastLoginIp(IpUtil.client(request));
            if (userService.updateById(user) == 0) {
                log.error("修改失败：{}", user);
                return ResponseUtil.updatedDataFailed();
            }
        }
        // token
        UserToken userToken = null;
        try {
            userToken = UserTokenManager.generateToken(user.getId());
        } catch (Exception e) {
            log.error("微信登录失败,生成token失败：{}", user.getId());
            e.printStackTrace();
            return ResponseUtil.fail();
        }
        userToken.setSessionKey(sessionKey);
        log.info("SessionKey={}",UserTokenManager.getSessionKey(user.getId()));
        Map<Object, Object> result = new HashMap<Object, Object>();
        result.put("token", userToken.getToken());
        result.put("tokenExpire", userToken.getExpireTime().toString());
        userInfo.setUserId(user.getId());
        if (!StringUtils.isEmpty(user.getMobile())) {// 手机号存在则设置
            userInfo.setPhone(user.getMobile());
        }
        try {
            DateFormat df = new SimpleDateFormat("yyyy-MM-dd");
            String registerDate = df.format(user.getAddTime() != null ? user.getAddTime() : new Date());
            userInfo.setRegisterDate(registerDate);
            userInfo.setStatus(user.getStatus());
            userInfo.setUserLevel(user.getUserLevel());// 用户层级
            userInfo.setUserLevelDesc(UserTypeEnum.getInstance(user.getUserLevel()).getDesc());// 用户层级描述
        } catch (Exception e) {
            log.error("微信登录：设置用户指定信息出错："+e.getMessage());
            e.printStackTrace();
        }
        result.put("userInfo", userInfo);
        log.info("【请求结束】微信登录,响应结果:{}", JSONObject.toJSONString(result));
        return ResponseUtil.ok(result);
    }
    /**
     * 绑定手机号码
     *
     * @param userId
     * @param body
     * @return
     */
    @PostMapping("bindPhone")
    public Object bindPhone(@LoginUser Integer userId, @RequestBody String body) {
        log.info("【请求开始】绑定手机号码,请求参数，body:{}", body);
        String sessionKey = UserTokenManager.getSessionKey(userId);
        String encryptedData = JacksonUtil.parseString(body, "encryptedData");
        String iv = JacksonUtil.parseString(body, "iv");
        WxMaPhoneNumberInfo phoneNumberInfo = null;
        try {
            phoneNumberInfo = this.wxService.getUserService().getPhoneNoInfo(sessionKey, encryptedData, iv);
        } catch (Exception e) {
            log.error("绑定手机号码失败,获取微信绑定的手机号码出错：{}", body);
            e.printStackTrace();
            return ResponseUtil.fail();
        }
        String phone = phoneNumberInfo.getPhoneNumber();
        WxUser user = userService.selectByPrimaryKey(userId);
        user.setMobile(phone);
        if (userService.updateById(user) == 0) {
            log.error("绑定手机号码,更新用户信息出错,id：{}", user.getId());
            return ResponseUtil.updatedDataFailed();
        }
        Map<Object, Object> data = new HashMap<Object, Object>();
        data.put("phone", phone);
        log.info("【请求结束】绑定手机号码,响应结果：{}", JSONObject.toJSONString(data));
        return ResponseUtil.ok(data);
    }
    /**
     * 注销登录
     */
    @PostMapping("logout")
    public Object logout(@LoginUser Integer userId) {
        log.info("【请求开始】注销登录,请求参数，userId:{}", userId);
        if (userId == null) {
            return ResponseUtil.unlogin();
        }
        try {
            UserTokenManager.removeToken(userId);
        } catch (Exception e) {
            log.error("注销登录出错：userId:{}", userId);
            e.printStackTrace();
            return ResponseUtil.fail();
        }
        log.info("【请求结束】注销登录成功!");
        return ResponseUtil.ok();
    }
}
//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by Fernflower decompiler)
//
package cn.binarywang.wx.miniapp.api;
import cn.binarywang.wx.miniapp.bean.WxMaJscode2SessionResult;
import cn.binarywang.wx.miniapp.config.WxMaConfig;
import me.chanjar.weixin.common.error.WxErrorException;
import me.chanjar.weixin.common.util.http.RequestExecutor;
import me.chanjar.weixin.common.util.http.RequestHttp;
public interface WxMaService {
    String GET_ACCESS_TOKEN_URL = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s";
    String JSCODE_TO_SESSION_URL = "https://api.weixin.qq.com/sns/jscode2session";
    WxMaJscode2SessionResult jsCode2SessionInfo(String var1) throws WxErrorException;
    boolean checkSignature(String var1, String var2, String var3);
    String getAccessToken() throws WxErrorException;
    String getAccessToken(boolean var1) throws WxErrorException;
    String get(String var1, String var2) throws WxErrorException;
    String post(String var1, String var2) throws WxErrorException;
    <T, E> T execute(RequestExecutor<T, E> var1, String var2, E var3) throws WxErrorException;
    void setRetrySleepMillis(int var1);
    void setMaxRetryTimes(int var1);
    WxMaConfig getWxMaConfig();
    void setWxMaConfig(WxMaConfig var1);
    WxMaMsgService getMsgService();
    WxMaMediaService getMediaService();
    WxMaUserService getUserService();
    WxMaQrcodeService getQrcodeService();
    WxMaTemplateService getTemplateService();
    WxMaAnalysisService getAnalysisService();
    WxMaCodeService getCodeService();
    WxMaJsapiService getJsapiService();
    WxMaSettingService getSettingService();
    WxMaShareService getShareService();
    WxMaRunService getRunService();
    WxMaSecCheckService getSecCheckService();
    void initHttp();
    RequestHttp getRequestHttp();
}
package com.zlj.ssm.wxcontroller;
import java.util.HashMap;
import java.util.Map;
import com.zlj.ssm.annotation.LoginUser;
import com.zlj.ssm.model.WxUser;
import com.zlj.ssm.service.WxUserService;
import com.zlj.ssm.util.ResponseUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;
/**
 * 用户服务
 */
@Slf4j
@RestController
@RequestMapping("/wx/user")
@Validated
public class WxUserController {
  @Autowired
  private WxUserService userService;
  /**
   * 用户个人页面数据
   * <p>
   * @param userId
   *            用户ID
   * @return 用户个人页面数据
   */
  @GetMapping("index")
  public Object list(@LoginUser Integer userId, @RequestHeader("X-OA-token") String token) {
    log.info("【请求开始】用户个人页面数据,请求参数,userId:{}", userId);
    log.info("【请求开始】用户个人页面数据,请求参数,token:{}", token);
    if (userId == null) {
      log.error("用户个人页面数据查询失败:用户未登录！！！");
      return ResponseUtil.unlogin();
    }
    WxUser wxUser = userService.selectByPrimaryKey(userId);
    Map<Object, Object> data = new HashMap<Object, Object>();
    data.put("metting_pubs", wxUser.getUserLevel());
    data.put("metting_joins",wxUser.getUserLevel());
    return ResponseUtil.ok(data);
  }
}

4.微信表情包存储问题

工具->多账号调试->测试号（熊猫）->个人中心->点击登录->微信直接登录->允许(直接这样会报错，需要将MySQL安装的地方，将里面my.ini的utf8修改为utf8mb4,并且重启服务里的mysql)->重新尝试登录

文章标签：
小程序
存储
关系型数据库
MySQL
开发者
关键词：
微信接口
小程序微信
小程序授权
微信授权
微信存储
朱琳均
目录
相关文章
如夜了我衣衫太薄便归家靠路灯
|
7天前
|
小程序 安全 Java
springboot 微信小程序 实现获取手机号登录
springboot 微信小程序 实现获取手机号登录
如夜了我衣衫太薄便归家靠路灯
47 3
热爱技术的小郑
|
5天前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程，包括如何注册微信小程序账号、下载微信小程序开发者平台，并指导了新建小程序的详细步骤。
热爱技术的小郑
10 0
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
如夜了我衣衫太薄便归家靠路灯
|
6天前
|
存储 小程序 JavaScript
uniapp 微信小程序 授权 登录
uniapp 微信小程序 授权 登录
如夜了我衣衫太薄便归家靠路灯
16 1
如夜了我衣衫太薄便归家靠路灯
|
7天前
|
小程序 JavaScript API
微信小程序 授权 登录
微信小程序 授权 登录
如夜了我衣衫太薄便归家靠路灯
20 1
如夜了我衣衫太薄便归家靠路灯
|
6天前
|
小程序 前端开发 安全
uniapp 支付宝小程序 授权登录
uniapp 支付宝小程序 授权登录
如夜了我衣衫太薄便归家靠路灯
22 0
如夜了我衣衫太薄便归家靠路灯
|
7天前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付（代码和注释很详细）
微信小程序实现微信支付（代码和注释很详细）
如夜了我衣衫太薄便归家靠路灯
72 0
。思索
|
7天前
|
小程序
uni-app——微信小程序设置全局分享
uni-app——微信小程序设置全局分享
。思索
23 0
曼亿点
|
1月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序（3）
这是一篇关于微信小程序开发的文章摘要，作者介绍了如何创建一个网上花店小程序，旨在提供便捷的购花体验。小程序包含鲜花分类功能，允许用户按品种、颜色和用途筛选，确保快速找到合适的鲜花。它还提供了配送服务，保证鲜花的新鲜度。文章展示了`cash.wxml`、`cash.wxss`和`cash.js`的部分代码，用于实现分类和商品展示，以及`qin.wxml`、`qin.wxss`和`qin.js`，涉及商品详情和购买付款流程。代码示例展示了商品列表渲染和交互逻辑，包括页面跳转、数据传递和点击事件处理。文章最后提到了购买付款界面，强调了安全和便捷的支付体验。
曼亿点
68 0
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序（3）
小蜗牛耶
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
小蜗牛耶
30 7
小蜗牛耶
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
小蜗牛耶
46 7

热门文章

最新文章

  • 1
    阿里巴巴小程序繁星计划战“疫”助力在行动
  • 2
    阿里20亿小程序繁星计划你最需要知道的几个问题（0325更新）
  • 3
    小程序审核常见驳回类型
  • 4
    云栖大会演讲回顾 | 云市场心选小程序负责人王文龙：多端小程序SaaS发展之路
  • 5
    微信小程序发布新版本，如何提示强制更新！
  • 6
    基于SpringBoot+Vue在线考试系统【web端+小程序端】(附源码)
  • 7
    使用AirtestProject+pytest做支付宝小程序UI自动化测（一）
  • 8
    小程序研发助手升级为开发者中心
  • 9
    客观解析开发小程序该选择模板还是定制开发？
  • 10
    阐述“羊了个羊”游戏APP小程序系统开发逻辑方案（源码部署哦）
  • 1
    使用阿里云短信+微信短链接跳转微信小程序
    240
  • 2
    【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT，只需一个URL，自动获取文章总结
    87
  • 3
    【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
    158
  • 4
    【Python+微信】【企业微信开发入坑指北】2. 如何利用企业微信API主动给用户发应用消息
    127
  • 5
    【Python+微信】【企业微信开发入坑指北】1. 数据链路打通：接收用户消息处理并回复
    49
  • 6
    【超详细！超多图！】【代码管理】Python微信公众号开发（3）- 服务器代码上传Github
    110
  • 7
    uniapp读取(获取)缓存中的对象值（微信小程序）
    78
  • 8
    基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
    93
  • 9
    基于SpringBoot+Vue+uniapp微信小程序的商品展示的详细设计和实现
    59
  • 10
    基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
    87

    • 相关课程

    更多
  • IoT小程序框架课程
  • 数据管理 DMS产品介绍及Data Copilot演示教程智能助手 DMS Data Copilot简介

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 快速体验智能体API应用
  • 1分钟SAE部署PHP商城小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • ROS模板参数动态展示
    • 下一篇
    通义千问API入门教程