java后端接入微信小程序登录功能

这篇具有很好参考价值的文章主要介绍了java后端接入微信小程序登录功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

此文章是Java后端接入微信登录功能,由于项目需要,舍弃了解密用户信息的session_key,只保留openid用于检索用户信息

后端框架:spring boot

小程序框架:uniapp

流程概括

  • 官方流程:通过自定义登录态与openid,session_key关联,之后的前后端交互通过自定义登录态来识别
  • 只保留登录流程:使用 spring boot 的session进行交互,openid存入数据库,用来检索用户信息(可以理解为 openid 作为账号,只保留此小程序的登录功能)

官方小程序登录流程图解(图取自官网)

  1. 通过wx.login()获取code
  2. 将code发送给后端服务器,后端会返回一个token,这个token将作为你身份的唯一标识。
  3. 将token通过wx.setStorageSync()保存在本地存储。
  4. 用户下次进入⻚面时,会先通过wx.getStorageSync() 方法判断token是否有值,如果有值,则可以请求其它数据,如果没有值,则进行登录操作。
  • openid:用来唯一标识用户的一个字符串,通过openid可以获取用户的基本信息(不同小程序中拥有不同openid)
  • code:code是用户登录凭证,由微信服务器颁发给小程序;后端通过code向微信服务器请求用户的openidsession_key等信息。(code是一次性的,且时效为5分钟)
  • unionid:用于标识同一微信开放平台账号下多个应用的用户,多个小程序中的unionid是相同的

接入小程序登录(只保留 openid 登录功能)

  1. 通过wx.login()获取code
  2. 将code发送给后端服务器,后端保存openid到数据库并返回sessionId
  3. 将sessionId通过wx.setStorageSync()保存在本地存储
  4. 用户下次进入⻚面时,会先通过wx.getStorageSync() 方法判断sessionId是否有值,如果有值,则可以请求其它数据,如果没有值,则进行登录操作。

后端代码

工具类

import cn.hutool.core.util.StrUtil;
import cn.hutool.http.HttpRequest;
import cn.hutool.json.JSONObject;
import com.redapple.project.common.ErrorCode;
import com.redapple.project.exception.ThrowUtils;

public class RequestUtils {

    // 获取AccessToken
    public static JSONObject getAccessToken(String appId, String appSecret) {
        String apiUrl = StrUtil.format(
                "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={}&secret={}",
                appId, appSecret
        );
        String body = HttpRequest.get(apiUrl).execute().body();
        ThrowUtils.throwIf(body == null, ErrorCode.OPERATION_ERROR);
        return new JSONObject(body);
    }

    // 获取session_key和openid
    public static String getOpenIdByCode(String appId, String secret, String code) {
        String apiUrl = StrUtil.format(
                "https://api.weixin.qq.com/sns/jscode2session?appid={}&secret={}&js_code={}&grant_type=authorization_code",
                appId, secret, code
        );
        String body = HttpRequest.get(apiUrl).execute().body();
        ThrowUtils.throwIf(body == null, ErrorCode.OPERATION_ERROR);
        return body;
    }

}

登录实现

主要接收三个参数,分别是小程序的appi、appSecret、前端传来的code

这里通过工具类向微信接口服务发送jscode,返回openid

  • openid存在:登录,返回用户信息
  • openid不存在:注册,将openid存入数据库并返回用户信息
    public LoginUserVO WeChatLogin(String appid, String secret, String code, HttpServletRequest request) {
        // 获取session_key和openid
        String result = RequestUtils.getOpenIdByCode(appid, secret, code);
        System.out.println("result:" + result);
        // 提取openid
        String openid = new JSONObject(result).getStr("openid");
        // 这里是自己封装的方法,流程是如果openid为空则抛异常
        ThrowUtils.throwIf(openid == null, ErrorCode.NOT_FOUND_ERROR, "openid为空");
        // 查询openid是否存在
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("openid", openid);
        User oldUser = this.baseMapper.selectOne(queryWrapper);
        // openid不存在
        if (oldUser == null) {
            // 添加用户
            User user = new User();
            user.setOpenid(openid);
            user.setPhone("手机号未填写");
            user.setUserName("默认用户");
            boolean saveResult = this.save(user);
            if (!saveResult) {
                // 这里也是自己封装的方法,流程是抛自定义异常
                throw new BusinessException(ErrorCode.SYSTEM_ERROR, "注册失败,数据库错误");
            }
            // 记录用户的登录态
            request.getSession().setAttribute(USER_LOGIN_STATE, user);
            return getLoginUserVO(user);
        }
        // 记录用户的登录态
        request.getSession().setAttribute(USER_LOGIN_STATE, oldUser);
        // 用户存在,返回用户数据
        return getLoginUserVO(oldUser);	// 自己封装的方法,返回脱敏的用户数据
    }

前端代码

uniapp框架文章来源地址https://www.toymoban.com/news/detail-490574.html

<template>
	<view>
		<button class="loginbutton" @click="login">微信一键登录</button>
	</view>
</template>

<script setup lang="ts">
    	const login = () => {
		uni.login({
			provider: 'weixin', //使用微信登录
			success: function (loginRes) {
				if (loginRes.code !== null) {
					console.log("获取code:" + loginRes.code)
					loginUser(loginRes.code);
				} else {
					console.log("code为空");
				}
			}
		})
	}

	const loginUser = (code: any) => {
		uni.request({
			url: "http://localhost:8066/api/wechat/login",
			method: 'POST',
			data: {
				code: code,
			},
			success: (res : any) => {
				//每次登录时清楚缓存
				uni.removeStorageSync('JSESSIONID');
				// 保存Cookie到Storage
				uni.setStorageSync("JSESSIONID", res.header['Set-Cookie'])
				if (res.data.code === 1) {
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else {
					console.log(res);
				}
			}
		})
	}
</script>

<style>

</style>

到了这里,关于java后端接入微信小程序登录功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序登录功能实现(最新)

    众所周知小程序登录自 2022年2月21日24时起回收通过open-data展示个人信息的能力 ,啥意思呢,就是头像展示成灰色,昵称展示成微信用户,例如: 话不多说直接正题。         首先介绍第一种,费力的方式:依然还是用 open-type 的值设置为 chooseAvatar ,当用户选择需要使用

    2024年02月08日
    浏览(59)
  • 通过微信小程序实现登录功能

    [ ](https://dev.csdn.net/activity?utm_source=sale_sourcesale_source=q4AnCOkys7) 在微信公众平台中注册小程序,并获取 AppID。 在小程序中创建登录页面,包括用户名、密码输入框和登录按钮。 将用户名和密码通过 HTTPS POST 请求发送到后端服务器。 后端服务器验证用户名和密码是否正确,如果

    2023年04月13日
    浏览(71)
  • 【2023最新】微信小程序中微信授权登录功能和退出登录功能实现讲解

    教学视频地址: 视频地址 大家要跟着我的教学视频去配套着看代码,了解整个登录流程的实现思路最重要! 以上是我列出的 主要实现代码 , 页面样式那些根据自己需求去实现 ,我这就不贴了。

    2024年02月08日
    浏览(60)
  • 若依整合微信小程序登录功能

    在网上很难搜索到若依来整合微信小程序登录的功能,自己就通过自己的理解整合了一下。这也是很久以前写的了,只是实现了功能,但登录逻辑不太好,改动也比较大。现在会看,感觉应该可以直接用若依注册用户接口来做微信小程序登录的功能。因为考研了,不想再去想

    2024年02月11日
    浏览(36)
  • 微信小程序实现一个简单的登录功能

    微信小程序实现一个简单的登录功能。包括一个登录页面和一个用户信息展示页面。在登录页面中输入用户名和密码,点击登录按钮进行验证,如果验证成功,则跳转到用户信息展示页面,并展示用户的信息(例如用户名和头像)。如果验证失败,则提示登录失败信息。 在上

    2024年02月03日
    浏览(60)
  • uniapp开发微信小程序的登录功能实现

    小程序的登录是必不可少的,那我们如何去实现这个功能呢 1.首先我们是需要去 调用uni.getUserProfile()去获取用户信息的 ,得到一些登录接口相关的一些数据 2.再去 调用uni.login()这个api去获取code字段 3.结合以上这两个api获取的一些数据组合成接口所需要的参数,然后通过调

    2024年02月15日
    浏览(48)
  • 【第十八节:微信小程序 常用功能-登录】微信小程序入门,以思维导图的方式展开18

    若图片看不清,可私信给五木大大要高清大图哈。      效果               wxml页面         view class=\\\"login-container\\\"nn    view class=\\\"login\\\" wx:if=\\\"{{ !logged }}\\\"nn        view class=\\\"app-info\\\"nn            image class=\\\"app-logo\\\" src=\\\"../../images/logo.png\\\" /nn            text class

    2024年01月17日
    浏览(57)
  • 【h5+微信小程序】vue2实现h5扫码登录功能

    需要实现在同域名的h5页面上增加一个微信扫码登录的功能,如果用户已经有小程序的账号,可以直接登录。 使用 :vue2+微信小程序原生开发 可以实现上述功能的 前提 是:同一用户,对同一个微信开放平台下的不同应用,UnionID是相同的。域名已经配置。 可以用什么来区分

    2024年02月14日
    浏览(67)
  • Java 微信小程序登录

    服务端微信小程序登录流程.

    2024年02月11日
    浏览(36)
  • 微信小程序一键登录功能,使用uni-app和springboot(JWT鉴权)

    目录 概述 微信登录接口说明  关于获取微信用户的信息 前端代码(uni-app) 后端代码(SpringBoot) 配置文件:application.yml  配置文件:Pom.xml  类:WeChatModel    类:WeChatSessionModel  类:UserInfoController 业务层实现类:UserInfoServiceImpl 工具类:JWTUtils 拦截器配置-自定义拦截器

    2024年02月09日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包