PC端微信扫码关注公众号并登录

前端Vue，后端Java实现

分2步来完成：

1.生成带参数的临时二维码

1.生成带参数的临时二维码

，注意为POST方式

前端vue使用 qrcodejs2组件，将url转为二维码图片，显示在相应位置。请求到二维码后，用sceneId查询扫码登录是否成功。

<div class="" id="qrcode" ref="qrcode"></div>

import QRCode from qrcodejs2
import loginApi from @/api/login;
  data(){
    return{
      url: , //二维码地址
      sceneId:,//二维码带的参数，用来判断是那个用户扫码的
      timer: null,//定时器
    }
  },
  created(){
    getLoginQRCode();
  },
  methods:{
    async getLoginQRCode(){
      this.url = ;
      window.clearInterval(this.timer);
      const res = await loginApi.getQRCode();
      console.log(44res,res)
      if(res.data.succ == 1){
        this.url = res.data.data.url;
        this.sceneId = res.data.scene_id;
        console.log(sceneId,res.data.scene_id);
        this.timer = setInterval(this.getUserByScene, 1000);
        this.$nextTick(() => {
          this.getQrcode(this.url)
        })
      }
    },
    //根据 sceneId 轮询查询用户信息，判断用户是否登录成功
    async getUserByScene(){
      if(!this.sceneId) return;
      const res = await loginApi.getUserBySceneId({sceneId: this.sceneId});
      console.log(getUser, res);
      if(res.data.succ == 1 && res.data.user){
        this.user = res.data.user;
        window.clearInterval(this.timer);
        this.url = ;
        this.sceneId = ;
        //登录成功，处理登录成功逻辑
        this.$Message.success(登录成功)
      }
    },
    getQrcode (text) {
      this.$refs.qrcode.innerHTML =  // 清除
      const qrcode = new QRCode(qrcode, {
        width: 160,
        height: 160,
        text: text, // 二维码地址
        colorDark: #000,
        colorLight: #fff
      })
      return qrcode
    },
  }

开发—基本配置

服务器配置信息提交的时候要验证 TOKEN, 验证通过才能提交。checkToken接口GET请求用来验证TOKEN，

import java.security.MessageDigest;
//...
@RequestMapping(value="/checkToken",method=RequestMethod.GET)
    public String  checkToken(HttpServletRequest req, HttpServletResponse resp)throws IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        String message = "success";
        String signature = req.getParameter("signature");
        String timestamp = req.getParameter("timestamp");
        String nonce = req.getParameter("nonce");
        String echostr = req.getParameter("echostr");
        try {
        	String[] arr = {"sjyx", timestamp, nonce};
            Arrays.sort(arr);

            StringBuilder content = new StringBuilder();
            for (int i = 0; i < arr.length; i++) {
                content.append(arr[i]);
            }
            //sha1Hex 加密
            MessageDigest md = null;
            String temp = null;
            md = MessageDigest.getInstance("SHA-1");
            byte[] digest = md.digest(content.toString().getBytes());
            temp = byteToStr(digest);
            if ((temp.toLowerCase()).equals(signature)){
                return echostr;
            }
            return null;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return message;
	}
	 private static String byteToStr(byte[] byteArray){
        String strDigest = "";
        for (int i = 0; i < byteArray.length; i++) {
            strDigest += byteToHexStr(byteArray[i]);
        }
        return strDigest;
    }
    private static String byteToHexStr(byte mByte){
        char[] Digit = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A,B, C, D, E, F };
        char[] tempArr = new char[2];
        tempArr[0] = Digit[(mByte >>> 4)& 0X0F];
        tempArr[1] = Digit[mByte & 0X0F];
        String s = new String(tempArr);
        return s;
    }

checkToken接口POST请求用来监听扫码事件，并获取用户信息

xml转Map工具类

import java.io.IOException;
import java.io.InputStream;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
public class XmlUtil {
	/*
	 * xml转map
	 */
	public static Map<String, String> xmlToMap(HttpServletRequest request) throws IOException, DocumentException{
		HashMap<String, String> map = new HashMap<String,String>();
		SAXReader reader = new SAXReader();
 
		InputStream ins = request.getInputStream();
		Document doc = reader.read(ins);
 
		Element root = doc.getRootElement();
		@SuppressWarnings("unchecked")
		List<Element> list = (List<Element>)root.elements();
 
		for(Element e:list){
			map.put(e.getName(), e.getText());
		}
		ins.close();
		return map;
	}
}