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

Posted Xsed

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了超级详细的微信小程序登录基于SpringBoot相关的知识，希望对你有一定的参考价值。

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

文章目录

前言

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

此篇文章，针对的是很多看不懂微信官方文档，或者是刚入门小程序和java开发的开发者，教程也会非常详细的讲到我在实现这个功能时碰到的误区，以及详细的介绍整个流程。

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

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

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

openid作为每个微信用户访问一个小程序时的唯一凭证，这里的openid只是针对一个微信用户和一个小程序，不同的用户针对不同的小程序的openid是不同的，但是一个用户在针对一个小程序登录时，openid是唯一的。

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

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

接口地址：GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code


    String AppId = "";  //公众平台自己的appId
    String AppSecret = "";  //AppSecret
    @GetMapping("/login")
    public Result<Object> wxLogin(@RequestParam("code") String code) throws Exception 
        Result<Object> result = new Result();
        String url = "https://api.weixin.qq.com/sns/jscode2session?" +
                "appid=" + AppId +
                "&secret=" + AppSecret +
                "&js_code=" + code +
                "&grant_type=authorization_code";
                //利用spring原生http请求工具对接口进行请求
        String jsonData = restTemplate.getForObject(url, String.class);
        JSONObject jsonObject = JSONObject.parseObject(jsonData);
        //请求返回的是Json类型的数据 所以我们需要用到fastjson 
        //这个判断是判断我们的请求是否出错，如果没有出错的话就能够拿到openid
        if (StringUtils.contains(jsonData, "errcode")) 
            //出错了
            result.setMessage("err");
            return result;
        
        String openid = jsonObject.getString("openid");
        String sessionKey = jsonObject.getString("session_key");
        String unionid = jsonObject.getString("unionid");
        System.out.println(openid);
        System.out.println(sessionKey );
        System.out.println(unionid);

我们在这里其实已经将用户注册了，拿到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对象进行解密，获取用户信息，最后存入数据库。

  login()
    wx.getUserProfile(
      desc: '必须授权才能使用',
      success:res=>
      let user=res.userInfo
      this.setData(
      user:user,
      encryptedData: res.encryptedData,
        iv: res.iv
      )
      var encryptedData=res.encryptedData;
      var iv=res.iv;
      wx.login(
        success:(res)=>
          if(res.code)
            wx.request(
              url: '',
              method:'POST',
              header:
                'content-type':'application/x-www-form-urlencoded',
              ,
              data: 
                code: res.code,
                encryptedData:encryptedData,
                iv:iv,
              ,
              success(res)
              wx.setStorageSync('token', res.data.data)
              
            )
          
        
      )
      ,
      fall:res=>
        console.log('失败',res)
      
    )
    
  ,

  @RequestMapping("/login")
    public Result<Object> wxLogin(@RequestParam("code") String code, String encryptedData, String iv) throws Exception 
        Result<Object> result = new Result();
        String url = "https://api.weixin.qq.com/sns/jscode2session?" +
                "appid=" + AppId +
                "&secret=" + AppSecret +
                "&js_code=" + code +
                "&grant_type=authorization_code";
                //获取返回的数据 并将数据转换成json对象
        String jsonData = restTemplate.getForObject(url, String.class);
        JSONObject jsonObject = JSONObject.parseObject(jsonData);
        if (StringUtils.contains(jsonData, "errcode")) 
            //出错了
            result.setMessage("err");
            return result;
        
        String openid = jsonObject.getString("openid");
        String sessionKey = jsonObject.getString("session_key");
  		//解密
        String s = wxService.wxDecrypt(encryptedData, jsonObject, iv);
        JSONObject jsonObject1 = JSON.parseObject(s);
        Object watermark = jsonObject1.get("watermark");
        JSONObject jsonObject2 = JSON.parseObject(String.valueOf(watermark));

–

总结

提示：下一次会更新最新的小程序信息方法：
此次教程是针对于还未更新的方法，教程非常详细，希望能够帮助到你。
这里附带上我的微信小程序开源项目：
项目地址：https://github.com/CaseOfShe/school
演示地址：https://www.bilibili.com/video/BV1q3411g71P

基于云开发的微信小程序实战教程

基于云开发的微信小程序实战教程（一）

最近刚开发了款小程序，在开发过程中发现，基于云开发的教程资源不是很多，而且很不详细。所以边实战边总结了下云开发的简单教程，希望对你有所帮助。

本章主要内容：什么是小程序，云开发的作用，如何建立自己的小程序

一、什么是小程序

微信小程序是个啥，就不多说了，大家应该都知道。如果不知道，看下面这个图也就明白什么是小程序了。

因为有了微信小程序，我们可以不用下载app，就能够访问同程、携程、腾讯会议、青桔单车、拼多多等，这些都属于企业的小程序。

我们也能根据自己的创意和想法，制作个人小程序。

二、小程序的云开发

1、开发前需要知道的事情

小程序其实就相当于我们平常访问的网站或app，只不过区别是它必须在微信中打开。所以其实小程序的开发和其他网站的开发原理是一样的，不仅仅需要一个前端页面的样式展示，还需要有服务器来存放用户信息、商品信息等数据。

而小程序必须基于微信打开这一特点，同样也给我们开发小程序带来了很多便利，因为我们可以直接使用微信给提供的一些方法，很容易的实现上传图片、微信支付、打开相机等功能。

2、云开发的作用

刚刚提到，一个完整的网站肯定是需要有交互的，最基础的比如用户的登录、注册，我们肯定需要把用户的信息存到某个地方，这样才能去拿用户的输入和你存下来的信息做匹配，看用户名和密码是不是正确的，再告诉用户登录成功或失败。

这个存储用户信息的地方就是服务器，正常的网站搭建是需要我们自己购买服务器、搭建环境等一系列流程，对于后端开发者而言，这些环境配置、数据库开发等也许很简单，但是没接触过后端语言的人想要完成一个完整的网站，就有一定的难度。

如果要搭建个人网站，可以参考这篇文章：如何免费从0开始搭建个人网站？）

而微信小程序的云开发则免费给我们的小程序提供了一个云服务器环境，直接就可以用，对前端开发者以及未接触过开发行业的人而言，就非常容易上手完成自己的小程序了。

三、如何建立自己的小程序

1、注册一个小程序

我们需要去微信公众平台注册一个小程序账号，一个账号对应一个小程序。注册完成之后，我们就可以在微信公众平台登录，进入自己的小程序配置后台，可以在这里修改自己小程序的名字，头像，简介等信息，还可以看到自己小程序的编号AppID 和 小程序的密钥AppSecret，后面创建小程序项目的时候，会用到这两个值。

有了这两个值，微信就能区分出来哪个小程序是你的小程序了。因为我们开发完之后要把代码提交给微信，然后他们审核觉得没有违规的地方，审核通过后，你做的小程序就能上线了，上线后大家就可以访问你的小程序了。

我们选择注册小程序，见下图

接下来，填写相关信息

完成邮箱激活后，主题类型选择「个人」，并完成主题信息登记的填写。

完成信息填写后，点击提交，就会弹出来个框，提示你注册成功，点击跳转到小程序。

这个就是小程序的后台，以后可以通过微信公众平台，通过你刚刚绑定的微信或邮箱进行登录。

在这个管理后台中，你可以完善和修改你的小程序的头像、简介和名称。补全完整信息后，我们就可以进行开发了。

这里以个人开发举例，默认只能管理员，也就是你自己一个人进行开发，如果需要和其他人一块开发，就需要点击上图中的「添加开发者」把其他开发人的微信录入进来。

点击上图中的「普通小程序开发者工具」，下载「微信开发者工具」，后续我们开发和预览小程序都是需要用到这个编辑器的。

根据自己电脑配置，选择正确的安装包进行下载，安装。

2、使用开发者工具创建小程序项目

运行微信开发者工具后，会出现如下界面，用你刚才注册小程序的微信，扫码完成登录。

选择新建小程序，项目名称和储存目录可以自己修改，也可以用它默认的项目名称和储存位置。需要注意的是，后端服务这一项选择「小程序·云开发」


修改完项目名和存储位置后，我们还需要把刚刚注册的小程序编号，AppID填写上去，这样子创建的项目就能和我们的小程序关联起来了。

AppID可以去微信开放平台，登录我们刚注册的小程序的后台，左侧导航最下面的「设置」页，滑到页面最底部，查看账号信息，找到我们的小程序编号，如下图。

信息输入完成后，点击新建，会自动构建一个基于云开发的小程序项目的官方例子。

点击新建完成后，微信开发者工具的编辑器会出现上方的界面，左侧是我们的小程序页面的预览窗口，第二栏资源管理器可以看到我们的项目代码文件夹。最右侧是我们编辑代码和查看输出日志的区域。

我们可以看到，刚刚新建的项目有一个错误，错误信息是「没有权限，请先开通云服务」，可以猜测，我们还需要去开通云服务。很简单，点击左上角的「云开发」，会出来下方的窗口。

选择「预付费」，给你的云服务环境起个名字，然后点击开通，就完成了云环境的创建。

这时候，返回我们刚刚的编辑器页面，点击编译，就能看到刚刚的报错信息已经没有了，代表我们的云环境可以用了。

下一篇，具体讲解编辑器如何使用，以及小程序云开发的目录结构等知识。

相关文章
基于云开发的微信小程序实战教程（一）
基于云开发的微信小程序实战教程（二）
基于云开发的微信小程序实战教程（三）

以上是关于超级详细的微信小程序登录基于SpringBoot的主要内容，如果未能解决你的问题，请参考以下文章

基于云开发的微信小程序实战教程

基于云开发的微信小程序实战教程

基于云开发的微信小程序实战教程

SpringBoot整合微信小程序登录

轻松入门微信小程序（超级详细）

微信小程序怎么授权登录