【2023最新】微信小程序中微信授权登录功能和退出登录功能实现讲解

这里是杨杨吖2023-10-06 21:31

文章目录

一、讲解视频

教学视频地址： 视频地址

二、小程序前端代码

javascript 复制代码 
// pages/profile/profile.js
import api from "../../utils/api";
import { myRequest } from "../../utils/request";
import Notify from "@vant/weapp/notify/notify";
import Cache from "../../utils/cache";
import Tool from "../../utils/tool";


Page({

    /**
     * 页面的初始数据
     */
    data: {
        isLogin: false,
        userInfo: {
            username: "还未登录，请先登录！",
            headPic: api.BASE_URL + "/photo/view?filename=common/mine_normal.jpg"
        },
        basePhotoUrl: api.BASE_URL + "/photo/view?filename=",
        editUser: {},
        profileDialogVisible: false
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
       this.validateLoginState();
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.validateLoginState();
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },

    // 预览图片
    previewHead: function () {
        let userInfo = this.data.userInfo;
        let basePhotoUrl = this.data.basePhotoUrl;
        wx.previewImage({
             current: userInfo.headPic === userInfo.wxHeadPic ? userInfo.wxHeadPic : basePhotoUrl + userInfo.headPic,
             urls: [userInfo.headPic === userInfo.wxHeadPic ? userInfo.wxHeadPic : basePhotoUrl + userInfo.headPic]
        })
    },
    // 验证登录状态
    validateLoginState: async function() {
        wx.showLoading({
            title: "获取登录信息...",
            mask: true
        })
        const loginUser = Cache.getCache(getApp().globalData.SESSION_KEY_LOGIN_USER);
        if(Tool.isEmpty(loginUser)) {
            wx.hideLoading();
            return;
        }
        const res = await myRequest({
            url: api.BASE_URL + "/app/user/get_login_user",
            method: "POST",
            data: {
                token: loginUser
            }
        });
        if(res.data.code === 0) {
            this.setData({
                userInfo: res.data.data,
                isLogin: true,
                editUser: res.data.data
            })
        }
        wx.hideLoading();
        wx.stopPullDownRefresh();
    },
    // 登录操作
    getLoginUser: function() {
        wx.showLoading({
            title: "正在登录...",
            mask: true
        })
        wx.getUserProfile({
            desc: "获取用户相关信息",
            success: res => {
                if(res.errMsg === "getUserProfile:ok") {
                    let username = res.userInfo.nickName;
                    let headPic = res.userInfo.avatarUrl;
                    wx.login({
                        success: async res => {
                            if (res.errMsg === "login:ok") {
                                // 调用后端接口，验证用户数据
                                const response = await myRequest({
                                    url: api.BASE_URL + "/app/user/wx_login",
                                    method: "POST",
                                    data: {
                                        wxHeadPic: headPic,
                                        wxUsername: username,
                                        code: res.code
                                    }
                                });
                                if(response.data.code === 0) {
                                    Notify({ type: "success", message: response.data.msg, duration: 1000 });
                                    Cache.setCache(getApp().globalData.SESSION_KEY_LOGIN_USER, response.data.data.token, 3600);
                                    this.setData({
                                        userInfo: response.data.data,
                                        editUser: response.data.data,
                                        isLogin: true
                                    });
                                } else {
                                    Notify({ type: "danger", message: response.data.msg, duration: 2000 });
                                }
                            } else {
                                wx.showToast({
                                    icon: "error",
                                    title: "登录失败"
                                });
                            }
                            wx.hideLoading();
                        },
                        fail: res => {
                            wx.showToast({
                                icon: "error",
                                title: "登录失败"
                            });
                            wx.hideLoading();
                        }
                    })
                } else {
                    wx.showToast({
                        icon: "error",
                        title: "获取用户失败"
                    });
                    wx.hideLoading();
                }
            },
            fail: res => {
                wx.showToast({
                    icon: "error",
                    title: "获取用户失败"
                });
                wx.hideLoading();
            }
        })
    },    
    // 登录验证
    authUser: function() {
        const loginUser = Cache.getCache(getApp().globalData.SESSION_KEY_LOGIN_USER);
        if(Tool.isEmpty(loginUser)) {
            Notify({ type: "danger", message: "请先登录！", duration: 2000 });
            return true;
        } else {
            return false;
        }
    },
    // 退出登录
    logout: async function() {
        const loginUser = Cache.getCache(getApp().globalData.SESSION_KEY_LOGIN_USER);
        const res = await myRequest({
            url: api.BASE_URL + "/app/user/logout",
            method: "POST",
            data: {
                token: loginUser
            }
        });
        if(res.data.code === 0) {
            Notify({ type: "success", message: res.data.msg, duration: 1000 });
        }
        Cache.removeCache(getApp().globalData.SESSION_KEY_LOGIN_USER);    
        this.setData({isLogin: false, userInfo: {
            username: "还未登录，请先登录！",
            headPic: api.BASE_URL + "/photo/view?filename=common/mine_normal.jpg"
        }});
    },
  
 
  
})

三、后端Java代码

<!--引入http连接依赖-->
<dependency>
  <groupId>org.apache.httpcomponents</groupId>
  <artifactId>httpclient</artifactId>
  <version>4.5.3</version>
</dependency>
java 复制代码 
package com.yjq.programmer.service.impl;

import com.alibaba.fastjson.JSON;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.yjq.programmer.bean.CodeMsg;
import com.yjq.programmer.dao.UserMapper;
import com.yjq.programmer.domain.User;
import com.yjq.programmer.domain.UserExample;
import com.yjq.programmer.dto.LoginDTO;
import com.yjq.programmer.dto.PageDTO;
import com.yjq.programmer.dto.ResponseDTO;
import com.yjq.programmer.dto.UserDTO;
import com.yjq.programmer.enums.RoleEnum;
import com.yjq.programmer.service.IUserService;
import com.yjq.programmer.utils.CommonUtil;
import com.yjq.programmer.utils.CopyUtil;
import com.yjq.programmer.utils.UuidUtil;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.util.List;
import java.util.concurrent.TimeUnit;

/**
 * @author 杨杨吖
 * @QQ 823208782
 * @WX yjqi12345678
 * @create 2023-09-25 17:08
 */
@Service
@Transactional
public class UserServiceImpl implements IUserService {

    @Resource
    private UserMapper userMapper;

    @Resource
    private StringRedisTemplate stringRedisTemplate;

    private static final Logger logger = LoggerFactory.getLogger(UserServiceImpl.class);

    // 填写上你的AppID，如何获取AppID自行百度，这步骤很简单
    private final static String APP_ID = "wxc41c88e07f3f1bd7";
    // 填写上你的AppSecret，如何获取AppSecret自行百度，这步骤很简单
    private final static String APP_SECRET = "99a06dc0d1e21d797a9915baca08c872";
    // 微信小程序登录校验请求地址
    private final static String LOGIN_URL = "https://api.weixin.qq.com/sns/jscode2session";

    /**
     * 小程序授权登录验证
     * @param userDTO
     * @return
     */
    @Override
    public ResponseDTO<UserDTO> appWxLogin(UserDTO userDTO) {
        String url = LOGIN_URL + "?appid=" + APP_ID + "&secret="+ APP_SECRET + "&grant_type=authorization_code&js_code=" + userDTO.getCode();
        HttpClient client = HttpClients.createDefault(); // 创建默认http连接
        HttpGet getRequest = new HttpGet(url);// 创建一个post请求
        LoginDTO loginDTO = new LoginDTO();
        try {
            // 用http连接去执行get请求并且获得http响应
            HttpResponse response = client.execute(getRequest);
            // 从response中取到响实体
            HttpEntity entity = response.getEntity();
            // 把响应实体转成文本
            String html = EntityUtils.toString(entity);
            loginDTO = JSON.parseObject(html, LoginDTO.class);
            if(null == loginDTO.getErrcode()) {
                userDTO.setWxId(loginDTO.getOpenid());
            } else {
                return ResponseDTO.errorByMsg(CodeMsg.USER_WX_LOGIN_ERROR);
            }
        } catch (Exception e) {
            e.printStackTrace();
            return ResponseDTO.errorByMsg(CodeMsg.USER_WX_LOGIN_ERROR);
        }
        // 使用微信openId查询是否有此用户
        UserExample userExample = new UserExample();
        userExample.createCriteria().andWxIdEqualTo(userDTO.getWxId());
        List<User> userList = userMapper.selectByExample(userExample);
        if(null != userList && userList.size() > 0) {
            // 已经存在用户信息，读取数据库中用户信息
            User user = userList.get(0);
            userDTO = CopyUtil.copy(user, UserDTO.class);
        } else {
            // 数据库中不存在，注册用户信息
            User user = CopyUtil.copy(userDTO, User.class);
            // 自定义工具类，生成8位uuid
            user.setId(UuidUtil.getShortUuid());
            user.setUsername(user.getWxUsername());
            user.setHeadPic(user.getWxHeadPic());
            user.setRoleId(RoleEnum.USER.getCode());
            if(userMapper.insertSelective(user) == 0) {
                return ResponseDTO.errorByMsg(CodeMsg.USER_REGISTER_ERROR);
            }
            // domain转dto 这步不是必须的，我项目中需要这步
            userDTO = CopyUtil.copy(user, UserDTO.class);
        }
        userDTO.setToken(UuidUtil.getShortUuid());
        stringRedisTemplate.opsForValue().set("USER_" + userDTO.getToken(), JSON.toJSONString(userMapper.selectByPrimaryKey(userDTO.getId())), 3600, TimeUnit.SECONDS);
        return ResponseDTO.successByMsg(userDTO, "登录成功！");
    }

    
    /**
     * 获取当前登录用户
     * @param token
     * @return
     */
    @Override
    public ResponseDTO<UserDTO> getLoginUser(String token) {
        if(CommonUtil.isEmpty(token)){
            return ResponseDTO.errorByMsg(CodeMsg.USER_SESSION_EXPIRED);
        }
        String value = stringRedisTemplate.opsForValue().get("USER_" + token);
        if(CommonUtil.isEmpty(value)){
            return ResponseDTO.errorByMsg(CodeMsg.USER_SESSION_EXPIRED);
        }
        UserDTO selectedUserDTO = JSON.parseObject(value, UserDTO.class);
        return ResponseDTO.success(CopyUtil.copy(userMapper.selectByPrimaryKey(selectedUserDTO.getId()), UserDTO.class));
    }

    /**
     * 退出登录操作
     * @param userDTO
     * @return
     */
    @Override
    public ResponseDTO<Boolean> logout(UserDTO userDTO) {
        if(!CommonUtil.isEmpty(userDTO.getToken())){
            // token不为空  清除redis中数据
            stringRedisTemplate.delete("USER_" + userDTO.getToken());
        }
        return ResponseDTO.successByMsg(true, "退出登录成功！");
    }

   
}

四、备注

大家要跟着我的教学视频去配套着看代码，了解整个登录流程的实现思路最重要！ 以上是我列出的主要实现代码，页面实现那些根据自己需求去实现，我这就不贴了，如有其他遗漏代码，博客评论区可以提出，我会及时补充！

相关推荐
Rainbow_Technology1 小时前
劫持微信聊天记录并分析还原 —— 数据库结构讲解（四）
微信·微信聊天记录查看·微信聊天记录破解
丁总学Java9 小时前
微信小程序，点击bindtap事件后，没有跳转到详情页，有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域10 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86810 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650211 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
陈思杰系统思考Jason14 小时前
系统思考—深层结构
百度·微信·微信公众平台·新浪微博·微信开放平台
尚梦18 小时前
uni-app 封装刘海状态栏（适用小程序， h5, 头条小程序）
前端·小程序·uni-app
小飞哥liac20 小时前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码，文档）
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck1 天前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解