ICode9

精准搜索请尝试: 精确搜索
首页 > 数据库> 文章详细

超级详细的微信小程序登录基于SpringBoot

2022-09-29 16:34:35  阅读:71  来源: 互联网

标签:


基于SpringBoot的微信小程序登录前后端完整详解


文章目录


前言

基于小程序库2.10.4版本之前:

在小程序库2.10.4之前,我们利用小程序进行登录时,不做商业处理的情况下,利用java对用户进行处理,我们需要使用到小程序的两个API。实际上用到了三个API,看自己的需求选择。wx.login wx.request wx.getUserProfile(wx.getuserInfo)


提示:以下是本篇文章正文内容,下面案例可供参考

一、java后台用什么判断微信用户?

二、微信小程序登录的具体流程

1.官方流程图

2.流程讲解以及代码实现

1.wx.login获取code

wx.login是小程序的一个API库,可以直接利用js代码调用,每一次获取到的code都是不同的,因为他只是一个登录凭证,

wx.login({ //发起请求
        success:(res)=>{ //请求成功赋值给变量
          if(res.code){ //变量获取code
            wx.request({
              url: ,  //这里是请求地址
              method:POST,  //请求方式
              header:{
                content-type:application/x-www-form-urlencoded, //请求头信息 
              },
              data: {
                code: res.code, // 请求参数,login请求到的code
              },
              success(res){
              wx.setStorageSync(token, res.data.data)
              }
            })
          }
        }
      })
      },
      fall:res=>{
        console.log(失败,res)
      }
    })
    
  },

那么从前端发送了code过来后,我们从后端能够接收到code,在后端,利用登录凭证校验接口,实现 官方是这样告诉我们的,那么我们就在java后台,调用auth.code2Session接口,换取openid等信息

2.利用接口获取openid

我们在这里其实已经将用户注册了,拿到openid后,将openid存入到我们的数据库中,openid就作判别一个用户唯一的信息。 在官方后面的流程中,都是对拿到openid后的业务请求,这里就不做过多概述,但是我们发现了一个问题,别人的小程序登录时,都会有头像和名字,我们拿到了openid没有头像和名字,在前端无法展示。这里其实,涉及到了小程序的第三个wx.getUserProfile

3.利用wx.getUserProfile 获取用户信息

在目前的版本中 此API已经更换为新API 由此可见,我们可以通过此API获取到用户的头像和名字的信息 以此类推,我们通过此API获取到用户信息再将信息传递给后端吗? 不 实际上,这样的行为是不安全的。

调用API后,返回给我们的参数中,一个包括敏感数据在内的完整用户信息的加密数据,由此可见,官方将用户信息数据加密给我们了,我们只需要传递加密数据到后端,进行解密,再将数据存入到数据库中就可以了!

代码:

wx.getUserProfile({
      desc: 必须授权才能使用,
      success:res=>{
      let user=res.userInfo
      wx.setStorageSync(user, user) //信息暂存在客户端
      this.setData({
      encryptedData: res.encryptedData,
        iv: res.iv
      })
      wx.request({
           url: https://mrone.vip/wx/login,
           method:POST,
           header:{
             content-type:application/x-www-form-urlencoded,
              },
           data: {
             encryptedData:encryptedData,
             iv:iv,
             },
         success(res){
           wx.setStorageSync(token, res.data.data)
              }
            })

解密过程代码

@Slf4j
@Component
public class WxService {
    @Autowired
    private StringRedisTemplate redisTemplate;
	//jsonObject 就是利用code 获取到的json对象
    public String wxDecrypt(String encryptedData, JSONObject jsonObject, String vi) throws Exception {
        // 开始解密
        String sessionKey = (String) jsonObject.get("session_key");
        byte[] encData = cn.hutool.core.codec.Base64.decode(encryptedData);
        byte[] iv = cn.hutool.core.codec.Base64.decode(vi);
        byte[] key = Base64.decode(sessionKey);
        AlgorithmParameterSpec ivSpec = new IvParameterSpec(iv);
        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
        SecretKeySpec keySpec = new SecretKeySpec(key, "AES");
        cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec);
        return new String(cipher.doFinal(encData), "UTF-8");
    }

    //生成随机用户名,数字和字母组成,
    public String getStringRandom(int length) {

        StringBuilder val = new StringBuilder();
        Random random = new Random();

        //参数length,表示生成几位随机数
        for (int i = 0; i < length; i++) {

            String charOrNum = random.nextInt(2) % 2 == 0 ? "char" : "num";
            //输出字母还是数字
            if ("char".equalsIgnoreCase(charOrNum)) {
                //输出是大写字母还是小写字母
                int temp = random.nextInt(2) % 2 == 0 ? 65 : 97;
                val.append((char) (random.nextInt(26) + temp));
            } else {
                val.append(random.nextInt(10));
            }
        }
        return val.toString();
    }
}

后端获取参数并进行解密

@RequestMapping("/login")
    public Result<Object> wxLogin(String encryptedData, String iv)  {
    //直接调用解密代码的方法即可
       	String s = wxService.wxDecrypt(encryptedData, jsonObject, iv);
        JSONObject jsonObject1 = JSON.parseObject(s);
        Object watermark = jsonObject1.get("watermark");
        JSONObject jsonObject2 = JSON.parseObject(String.valueOf(watermark));
		//拿到了最后的json对象后,可以输出看看
		System.out.println(jsonObject2);
   
 }

三、小程序完整登录流程

(wx.getUserProfile)先获取用户信息=>(wx.login)获取code=>(wx.request)请求后端发送参数=>后端接收解密参数,code, 先利用code进行http请求获取返回的json对象,再利用解密参数和json对象进行解密,获取用户信息,最后存入数据库。

标签:
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有