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

已于 2024-02-14 22:08:08 修改
阅读量4.4k 收藏 22
点赞数 3
分类专栏： 开发记录 文章标签： 微信小程序 微信 小程序
于 2023-10-04 11:11:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dgfdhgghd/article/details/133546587
版权

文章目录

一、讲解视频

教学视频地址： 视频地址

二、小程序前端代码

// 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>

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);// 创建一个get请求
        LoginDTO loginDTO = new LoginDTO(); // 存储下面http请求返回的结果
        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()); // 拿到openId，存入userDTO实体
            } 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);
        }
        // 生成8位uuid作为登录的token，标识用户的登录信息
        userDTO.setToken(UuidUtil.getShortUuid());
        // 把用户登录信息存入redis中，定时1小时
        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, "退出登录成功！");
    }

   
}

四、备注

完整的配套代码资料获取请关注公众号：杨杨吖知识库，回复关键词：配套代码资料

这里是杨杨吖
关注
专栏目录
【微信授权登录】uniapp开发小程序，实现微信授权登录功能 & 退出登录
weixin_48596030的博客
06-30 1万+
uniapp开发小程序，实现获取微信授权登录功能 & 退出登录
微信小程序——【微信授权登录和退出】
2302_78057255的博客
07-04 1818
在components文件夹内创建toubu文件夹。在toubu文件夹内创建以下四个文件：toubu.wxml：组件的结构和布局。toubuwxss：组件的样式。toubu.js：组件的逻辑和交互。toubu json：组件的配置文件，可选但推荐使用。
微信小程序实现授权登录及退出
m0_68842055的博客
06-09 4418
1.登录获取用户昵称，头像 2.创建云函数右击新建文件夹cloud在根目录project.config.json中添加： 右击文件夹cloud选择当前环境右击文件夹cloud新建Node.js云函数，命名login在新建文件夹login的index.js文件中： 右击login文件夹选择上传并部署：云端安装依赖（不上传node_modules），显示上传成功提示。3.使用云函数获取openid根目录app.js中获取openid： 4.为防止一个用户在数据库中出现多条登录记录，需要将o
微信小程序【一】一键登录
QAQIknow的博客
08-06 762
一键登录功能的实现。
微信小程序登录和退出功能的实现及思维导图
weixin_63929524的博客
04-29 2693
微信小程序是一种较为常见的移动应用类型，与网页应用、安卓应用等类型的应用不同，微信小程序有着特殊的登录和退出功能实现方式。在本次博客中，我们将详细阐述微信小程序登录和退出功能的实现以及相关代码，并且我们会利用思维导图来更加直观地展现整个过程。2.从后台获取openid和session_key，其中openid是用户的唯一标识，而session_key是会话密钥，用于后续通信的加密。以上是微信小程序登录和退出功能的实现方法以及相关代码。一、微信小程序登录功能实现。二、微信小程序退出功能实现。
小白开发微信小程序48--退出登录页面实现
hqwest的专栏
03-26 1399
小白开发微信小程序48--退出登录页面实现
微信小程序授权登录取消授权重新授权处理方法 附可用代码
TANKING，开源开发者！
10-17 1万+
微信小程序授权登录基本是小程序的标配了，但是官方的demo，取消授权后，就不能再重新点击登录，除非重新加载小程序才可以，这下怎么办？ 我们可以先在首页引导用户点击，然后跳转到一个新的页面，在新的页面进行授权，然后新的页面授权成功，立马跳回首页，显示用户信息。 话不多说，直接上代码 代码结构： index是首页 login是授权页 首页代码 index.wxml &lt...
微信小程序用户授权，以及判断登录是否过期的方法
10-17
在微信小程序开发中，用户授权和判断登录状态是常见的需求，尤其对于涉及到用户个人信息和安全性的功能至关重要。本文将详细讲解微信小程序用户授权的过程以及如何判断登录是否过期。 首先，微信小程序提供了一种名...
微信小程序登陆注册功能的实现代码
12-13
我们在开发小程序时，难免会用到登陆注册功能。通常小程序有为我们提供用户授权登陆的功能，但是...如果用传统的数据库来做，比较麻烦，所以我们今天就借助小程序云开发数据库来做。 二，编写一个云开发的小程序 云开发
微信小程序之微信授权登入及授权的流程讲解
liaozhixiangjava的博客
10-23 7566
通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台账号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台账号）及本次登录的会话密钥（session_key）等。在用户授权登录后，小程序可以通过调用微信登录接口获取用户的code。unionid是在用户绑定同一微信开放平台账号下的多个应用时，用来唯一标识用户的一个字符串。该方法对于用户的体验及安全性问题有所欠缺，点击就直接获取到了用户的信息，进行了一个显示，这个方法官方已经不推荐了。
驾考宝典微信小程序的设计与实现代码
05-03
驾考宝典微信小程序的设计与实现 这个小程序是一款互联网综合驾照考试学车软件，适用于驾考科目一，科目四考题的练习，覆盖驾驶证和资格证的考试，界面前端主要功能是展示程序主界面以及各子界面，提供使用者可视化...
微信小程序开发之点击按钮退出小程序的实现方法
10-17
主要介绍了微信小程序开发之点击按钮退出小程序的实现方法,本恩通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
uniapp微信小程序 - 详解微信小程序平台用户授权登录全流程，uniapp v3版本中小程序端开发下用户点击登录后获取手机号/昵称/性别/头像等信息完成登录（提供完整示例代码，一键复制开箱即用）
高级前端工程师
10-26 2840
uniapp，vue3，微信小程序授权登录，uniapp vue3小程序端的微信登录，uniapp 小程序微信授权登录，uniapp(vue3)微信小程序授权登录流程及逻辑详细教程，vue3 uniapp开发小程序怎么实现微信授权手机号登录功能，uniapp的vue3版本怎么在微信小程序中获取用户昵称手机号，uniapp vue3如何实现小程序下授权登录，vue3怎么做微信小程序平台的手机号授权登录并写入数据库，UniApp开发小程序接入微信登录的全过程，怎么做uniapp微信登录，uniapp v3小程序
2024新版微信小程序登录注册功能的实现，授权登录，退出，缓存讲解，小程序个人中心的实现，修改头像 图片上传功能的实现 新版登陆注册，头像上传，修改昵称
编程小石头
03-08 2788
新版小程序授权登录注册获取头像昵称文档。
微信小程序登录授权和退出
J_1999_0524的博客
08-03 534
【代码】微信小程序登录授权和退出。
微信授权登录功能实现
冲出仁川，走出马德里，故事还会再继续
08-27 2763
JWT实现跨域身份验证JWT工具JWT（Json Web Token）是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源。比如用在用户登录上JWT最重要的作用就是对 token信息的防伪作用。......
【微信小程序】实现授权登入---超详细讲解
热门推荐
m0_73192864的博客
10-23 3万+
微信小程序实现授权登入
微信小程序 - - 授权登录退出和缓存
是草莓味的啊
11-14 1034
授权登录退出和缓存一、开发前的准备二、调用方法三、代码1.home.wxml2.home.js四、遇到的问题 一、开发前的准备 将colorui-master解压，这里使用的是其中的demo部分(下载colorui-master的zip) 二、调用方法 wx.getUserProfile：授权登录，并获取用户信息 wx.setStorageSync(string key, any data)：设置缓存 wx.getStorageSync(string key)：取缓存 三、代码 1.hom
微信小程序与Java后端实现微信授权登录功能
最新发布
weixin_60159567的博客
10-12 912
前端小程序端实现很简单😏获取code发送给后端，获取到后端返回的自定义登录态之后使用进行存储，代码主要是后端处理，需要使用HttpClient向微信接口服务发送请求获取openid，然后判断用户是否存在，如果不存在则创建新用户，存在则返回，生成自定义登录态token，后面前端发送请求获取数据是，校验一下请求头中的token即可。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这里是杨杨吖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值