手把手教你实现微信扫码登录

一、注册

​ 账号申请及注册此处略过，在保证有AppID和 AppSecret后可向下进行；

二、原理讲解

​ 1.第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；

​ 2.通过code参数加上AppID和AppSecret等，通过API换取access_token；

​ 3.通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

​ 获取access_token时序图：

三、编码(愉快的coding)

1.准备工作：

​ ①.修改本地host文件(采用内网穿透也可以)，如下图:

​ ②.将tomcat端口号改为80(网络传输默认80端口),如图：

2.获取code

​ (1）在login页面，在登陆表单下方添加一个div, 用于显示微信登陆二维码

<div id="weixin"></div> 

​ （2）引入微信登陆二维码js

<script
src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js">
</script>

var obj = new WxLogin({
        id: "weixin",
        appid: "填申请的appid",   //此处填申请的appid
        scope: "snsapi_login",
        redirect_uri: "http://note.java.it.cn/weixinlogin.do"  //weixinlogin.do  为本地回调方法！
    });

appid: 应用唯一标识

scope：应用授权作用于

redirect_uri：回调地址，是微信登陆成功后要跳转到的页面

​ （3）测试：http://localhost:/login 浏览器显示微信登录扫码页面

​ 我们打开手机用微信扫二维码, 会出现确认登陆的提示

​ 点击确认登陆按钮，浏览器会自动跳转到

http://note.java.it.cn/weixinlogin?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&state=undefined

这个code是微信发给用户的临时令牌。我们可以根据code再次请求微信第三方登陆接口得到access_token（正式令牌）

​ （4）后台代码

​ 后台提供相应的回调方法，取到用户返回的code值，（如果项目中权限控制，如shiro，要注意对weixinlogin方法进行放行）

​ 可以将下方代码拷贝，运行，来判断code是否取到值

@RequestMapping(value = "/weixinlogin",name = "进入微信登录方法")
public String weixinlogin(String code,String state) {
     System.out.println(code);
}

3.获取用户信息

​ (1)准备工作

​ 本次要接收微信返回的数据，可以用阿里的fastjson来进行封装，导入依赖或者用jar包都可以

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.1.37</version>
</dependency>

​ 需要多次微信发请求，可以采用工具类(可以直接拷贝使用)

package util;

import com.alibaba.fastjson.JSON;
import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import java.util.HashMap;
import java.util.Map;

public class HttpUtils {

    public static Map<String,Object> sendGet(String url) {
        Map map = new HashMap();
        try{
            //创建HttpClient对象
            CloseableHttpClient client = HttpClients.createDefault() ;
            //创建get请求
            HttpGet get = new HttpGet(url);
            //发送get请求
            CloseableHttpResponse response = client.execute(get) ;
            HttpEntity entity = response.getEntity() ;
            String json = EntityUtils.toString(entity,"utf-8");
            System.out.println(json);
            map = JSON.parseObject(json,Map.class);
        }catch (Exception e) {
            e.printStackTrace();
        }
        return map;
    }
}

​ (2)获取用户信息

 @RequestMapping(value = "/weixinlogin",name = "进入微信登录方法")
public String weixinlogin(String code,String state) {
     //System.out.println(code);  查看是获取到code
     //1.根据code获取access_token和openId
        String atUtl = "https://api.weixin.qq.com/sns/oauth2/access_token" + "?code=" + code + "&appid=wx3bdb1192c22883f3&secret=db9d6b88821df403e5ff11742e799105&grant_type=authorization_code";  //微信请求地址标准格式
    //向微信发送请求获取access_token与openid
     Map<String, Object> map1 = HttpUtils.sendGet(atUtl);
    //获取用户access_token
     Object access_token = map1.get("access_token");
    //获取用户openid
     Object openid = map1.get("openid").toString();
     if (access_token == null && openid == null) {
            System.out.println("用户未登录...");
     }
    //2.根据access_token和openId获取微信用户信息
    /*可通过获取用户基本信息中的unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号，用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。 */
     String wxurl = "https://api.weixin.qq.com/sns/userinfo?access_token=" + access_token + "&openid=" + openid; //获取用户信息微信请求连接标准格式
    //map2集合中拥有用户所有信息，此次获取用户在微信的唯一标示unionid
   Map<String, Object> map2 = HttpUtils.sendGet(wxurl);
   Object unionid = map2.get("unionid");
}

​ (3)将unionid与项目已有用户进行绑定，就可完成用户的扫码登录