谷粒学院（十六）OAuth2 | 微信扫码登录 | QQ扫码登录（二）-阿里云开发者社区

4、编写Service

//根据openid获取用户信息
@Override
public UcenterMember getOpenIdMember(String openid) {
    QueryWrapper <UcenterMember> wrapper = new QueryWrapper <>();
    wrapper.eq("openid", openid);
    UcenterMember member = this.baseMapper.selectOne(wrapper);
    return member;
}

5、测试

访问：http://localhost:8160/api/ucenter/wx/login

访问授权url后会得到一个微信登录二维码

用户扫描二维码会看到确认登录的页面

用户点击“确认登录”后，微信服务器会向谷粒学院的业务服务器发起回调，因此接下来我们需要开发回调controller

6、修改当前项目service_ucenter

（1）修改启动端口号为8160(前面已经修改了)

（2）测试回调是否可用

@ApiOperation(value = "获取扫描人信息添加数据")
@GetMapping("callback")
public String callback(String code, String state) {
  System.out.println("code："+code);
    System.out.println("state："+state);
  return "redirect:http://localhost:3000";
}

具体步骤分析：

第一步： 扫描之后，执行本地的callback方法，在callback获取两个值，在跳转的时候传递过来

state：原样传递

code：类似于手机验证码，随机唯一的值

第二步： 拿着第一步获取到的code值，请求微信提供固定的地址，获取到两个值

（1）access_token：访问凭证

（2）openid：每个微信唯一标识

第三步： 拿着第二步获取到两个值access_token和openid，在去请求微信提供固定地址，最终可以得到微信扫描人信息。比如微信昵称，微信头像等。

用到技术点：

（1）httpclient(非浏览器发送请求)

（2）json转换工具：fastjson、gson 、jackon

7、添加依赖

在service_ucenter的pom中

<dependencies>
    <!--httpclient-->
    <dependency>
        <groupId>org.apache.httpcomponents</groupId>
        <artifactId>httpclient</artifactId>
    </dependency>
    <!--commons-io-->
    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
    </dependency>
    <!--gson-->
    <dependency>
        <groupId>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
    </dependency>
</dependencies>

8、创建httpclient工具类

/**
 *  依赖的jar包有：commons-lang-2.6.jar、httpclient-4.3.2.jar、httpcore-4.3.1.jar、commons-io-2.4.jar
 * @author zhaoyb
 *
 */
public class HttpClientUtils {
  public static final int connTimeout=10000;
  public static final int readTimeout=10000;
  public static final String charset="UTF-8";
  private static HttpClient client = null;
  static {
    PoolingHttpClientConnectionManager cm = new PoolingHttpClientConnectionManager();
    cm.setMaxTotal(128);
    cm.setDefaultMaxPerRoute(128);
    client = HttpClients.custom().setConnectionManager(cm).build();
  }
  public static String postParameters(String url, String parameterStr) throws ConnectTimeoutException, SocketTimeoutException, Exception{
    return post(url,parameterStr,"application/x-www-form-urlencoded",charset,connTimeout,readTimeout);
  }
  public static String postParameters(String url, String parameterStr,String charset, Integer connTimeout, Integer readTimeout) throws ConnectTimeoutException, SocketTimeoutException, Exception{
    return post(url,parameterStr,"application/x-www-form-urlencoded",charset,connTimeout,readTimeout);
  }
  public static String postParameters(String url, Map<String, String> params) throws ConnectTimeoutException,
      SocketTimeoutException, Exception {
    return postForm(url, params, null, connTimeout, readTimeout);
  }
  public static String postParameters(String url, Map<String, String> params, Integer connTimeout,Integer readTimeout) throws ConnectTimeoutException,
      SocketTimeoutException, Exception {
    return postForm(url, params, null, connTimeout, readTimeout);
  }
  public static String get(String url) throws Exception {
    return get(url, charset, null, null);
  }
  public static String get(String url, String charset) throws Exception {
    return get(url, charset, connTimeout, readTimeout);
  }
  /**
   * 发送一个 Post 请求, 使用指定的字符集编码.
   *
   * @param url
   * @param body RequestBody
   * @param mimeType 例如 application/xml "application/x-www-form-urlencoded" a=1&b=2&c=3
   * @param charset 编码
   * @param connTimeout 建立链接超时时间,毫秒.
   * @param readTimeout 响应超时时间,毫秒.
   * @return ResponseBody, 使用指定的字符集编码.
   * @throws ConnectTimeoutException 建立链接超时异常
   * @throws SocketTimeoutException  响应超时
   * @throws Exception
   */
  public static String post(String url, String body, String mimeType,String charset, Integer connTimeout, Integer readTimeout)
      throws ConnectTimeoutException, SocketTimeoutException, Exception {
    HttpClient client = null;
    HttpPost post = new HttpPost(url);
    String result = "";
    try {
      if (StringUtils.isNotBlank(body)) {
        HttpEntity entity = new StringEntity(body, ContentType.create(mimeType, charset));
        post.setEntity(entity);
      }
      // 设置参数
      Builder customReqConf = RequestConfig.custom();
      if (connTimeout != null) {
        customReqConf.setConnectTimeout(connTimeout);
      }
      if (readTimeout != null) {
        customReqConf.setSocketTimeout(readTimeout);
      }
      post.setConfig(customReqConf.build());
      HttpResponse res;
      if (url.startsWith("https")) {
        // 执行 Https 请求.
        client = createSSLInsecureClient();
        res = client.execute(post);
      } else {
        // 执行 Http 请求.
        client = HttpClientUtils.client;
        res = client.execute(post);
      }
      result = IOUtils.toString(res.getEntity().getContent(), charset);
    } finally {
      post.releaseConnection();
      if (url.startsWith("https") && client != null&& client instanceof CloseableHttpClient) {
        ((CloseableHttpClient) client).close();
      }
    }
    return result;
  }
  /**
   * 提交form表单
   *
   * @param url
   * @param params
   * @param connTimeout
   * @param readTimeout
   * @return
   * @throws ConnectTimeoutException
   * @throws SocketTimeoutException
   * @throws Exception
   */
  public static String postForm(String url, Map<String, String> params, Map<String, String> headers, Integer connTimeout,Integer readTimeout) throws ConnectTimeoutException,
      SocketTimeoutException, Exception {
    HttpClient client = null;
    HttpPost post = new HttpPost(url);
    try {
      if (params != null && !params.isEmpty()) {
        List<NameValuePair> formParams = new ArrayList<NameValuePair>();
        Set<Entry<String, String>> entrySet = params.entrySet();
        for (Entry<String, String> entry : entrySet) {
          formParams.add(new BasicNameValuePair(entry.getKey(), entry.getValue()));
        }
        UrlEncodedFormEntity entity = new UrlEncodedFormEntity(formParams, Consts.UTF_8);
        post.setEntity(entity);
      }
      if (headers != null && !headers.isEmpty()) {
        for (Entry<String, String> entry : headers.entrySet()) {
          post.addHeader(entry.getKey(), entry.getValue());
        }
      }
      // 设置参数
      Builder customReqConf = RequestConfig.custom();
      if (connTimeout != null) {
        customReqConf.setConnectTimeout(connTimeout);
      }
      if (readTimeout != null) {
        customReqConf.setSocketTimeout(readTimeout);
      }
      post.setConfig(customReqConf.build());
      HttpResponse res = null;
      if (url.startsWith("https")) {
        // 执行 Https 请求.
        client = createSSLInsecureClient();
        res = client.execute(post);
      } else {
        // 执行 Http 请求.
        client = HttpClientUtils.client;
        res = client.execute(post);
      }
      return IOUtils.toString(res.getEntity().getContent(), "UTF-8");
    } finally {
      post.releaseConnection();
      if (url.startsWith("https") && client != null
          && client instanceof CloseableHttpClient) {
        ((CloseableHttpClient) client).close();
      }
    }
  }
  /**
   * 发送一个 GET 请求
   *
   * @param url
   * @param charset
   * @param connTimeout  建立链接超时时间,毫秒.
   * @param readTimeout  响应超时时间,毫秒.
   * @return
   * @throws ConnectTimeoutException   建立链接超时
   * @throws SocketTimeoutException   响应超时
   * @throws Exception
   */
  public static String get(String url, String charset, Integer connTimeout,Integer readTimeout)
      throws ConnectTimeoutException,SocketTimeoutException, Exception {
    HttpClient client = null;
    HttpGet get = new HttpGet(url);
    String result = "";
    try {
      // 设置参数
      Builder customReqConf = RequestConfig.custom();
      if (connTimeout != null) {
        customReqConf.setConnectTimeout(connTimeout);
      }
      if (readTimeout != null) {
        customReqConf.setSocketTimeout(readTimeout);
      }
      get.setConfig(customReqConf.build());
      HttpResponse res = null;
      if (url.startsWith("https")) {
        // 执行 Https 请求.
        client = createSSLInsecureClient();
        res = client.execute(get);
      } else {
        // 执行 Http 请求.
        client = HttpClientUtils.client;
        res = client.execute(get);
      }
      result = IOUtils.toString(res.getEntity().getContent(), charset);
    } finally {
      get.releaseConnection();
      if (url.startsWith("https") && client != null && client instanceof CloseableHttpClient) {
        ((CloseableHttpClient) client).close();
      }
    }
    return result;
  }
  /**
   * 从 response 里获取 charset
   *
   * @param ressponse
   * @return
   */
  @SuppressWarnings("unused")
  private static String getCharsetFromResponse(HttpResponse ressponse) {
    // Content-Type:text/html; charset=GBK
    if (ressponse.getEntity() != null  && ressponse.getEntity().getContentType() != null && ressponse.getEntity().getContentType().getValue() != null) {
      String contentType = ressponse.getEntity().getContentType().getValue();
      if (contentType.contains("charset=")) {
        return contentType.substring(contentType.indexOf("charset=") + 8);
      }
    }
    return null;
  }
  /**
   * 创建 SSL连接
   * @return
   * @throws GeneralSecurityException
   */
  private static CloseableHttpClient createSSLInsecureClient() throws GeneralSecurityException {
    try {
      SSLContext sslContext = new SSLContextBuilder().loadTrustMaterial(null, new TrustStrategy() {
        public boolean isTrusted(X509Certificate[] chain,String authType) throws CertificateException {
          return true;
        }
      }).build();
      SSLConnectionSocketFactory sslsf = new SSLConnectionSocketFactory(sslContext, new X509HostnameVerifier() {
        @Override
        public boolean verify(String arg0, SSLSession arg1) {
          return true;
        }
        @Override
        public void verify(String host, SSLSocket ssl)
            throws IOException {
        }
        @Override
        public void verify(String host, X509Certificate cert)
            throws SSLException {
        }
        @Override
        public void verify(String host, String[] cns,
                   String[] subjectAlts) throws SSLException {
        }
      });
      return HttpClients.custom().setSSLSocketFactory(sslsf).build();
    } catch (GeneralSecurityException e) {
      throw e;
    }
  }
  public static void main(String[] args) {
    try {
      String str= post("https://localhost:443/ssl/test.shtml","name=12&page=34","application/x-www-form-urlencoded", "UTF-8", 10000, 10000);
      //String str= get("https://localhost:443/ssl/test.shtml?name=12&page=34","GBK");
            /*Map<String,String> map = new HashMap<String,String>();
            map.put("name", "111");
            map.put("page", "222");
            String str= postForm("https://localhost:443/ssl/test.shtml",map,null, 10000, 10000);*/
      System.out.println(str);
    } catch (ConnectTimeoutException e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    } catch (SocketTimeoutException e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    } catch (Exception e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    }
  }
}

9、创建回调controller 方法

在WxApiController.java中添加方法

/**
 * @author lxy
 * @version 1.0
 * @Description
 * @date 2022/3/10 22:22
 */
@CrossOrigin
@Controller
@RequestMapping("/api/ucenter/wx")
public class WxApiController {
    @Autowired
    private UcenterMemberService memberService;
    //1.生成微信扫描二维码
    //...
    //2.调用扫描人信息,添加数据
    @GetMapping("callback")
    public String callback(String code, String state) {
        //1.获取code,临时票据,类似于验证码
        //2.拿着code请求 微信固定的地址,得到两个值 access_token和open_id
        String baseAccessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token" +
                "?appid=%s" +
                "&secret=%s" +
                "&code=%s" +
                "&grant_type=authorization_code";
        //拼接参数 id 秘钥  和code 值
        String accessTokenUrl = String.format(
                baseAccessTokenUrl,
                ConstantWxUtils.WX_OPEN_APP_ID,
                ConstantWxUtils.WX_OPEN_APP_SECRET,
                code
        );
        //请求这个拼接好的地址,得到两个值 access_token和open_id
        //使用httpclient发送请求,得到返回结果
        String accessTokenInfo = null;
        try {
            accessTokenInfo = HttpClientUtils.get(accessTokenUrl);
        } catch (Exception e) {
            e.printStackTrace();
            throw new GuLiException(20001, "获取access_token失败");
        }
        // accessTokenInfo字符串获取两个值 access_token和openid
        // 方法:把accessTokenInfo字符串转成map集合,根据map里面key获取对应值
        // 使用json转换工具 Gson
        Gson gson = new Gson();
        Map mapAccessToken = gson.fromJson(accessTokenInfo, HashMap.class);
        String access_token = (String) mapAccessToken.get("access_token");
        String openid = (String) mapAccessToken.get("openid");
        //查询数据库中是否有该微信用户
        UcenterMember member = memberService.getOpenIdMember(openid);
        if (member == null) {
            //3.拿着得到的access_token和openid,再去请求微信提供的固定地址,获取到扫描人的信息
            //访问微信的资源服务器，获取用户信息
            String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" +
                    "?access_token=%s" +
                    "&openid=%s";
            String userInfoUrl = String.format(
                    baseUserInfoUrl,
                    access_token,
                    openid
            );
            //发送请求
            String userInfo = null;
            try {
                 userInfo= HttpClientUtils.get(userInfoUrl);
            }catch (Exception e){
                e.printStackTrace();
                throw new GuLiException(20001, "获取用户信息失败");
            }
            Map mapUserInfo = gson.fromJson(userInfo, HashMap.class);
            String nickname = (String) mapUserInfo.get("nickname");
            //Java中如何将Double转为Integer  gson默认会将integer转为double对象.
            Double sexDouble = (Double) mapUserInfo.get("sex");
            Integer sex = sexDouble.intValue();
            String headImgUrl = (String) mapUserInfo.get("headimgurl");
            //向数据库中插入一条用户数据
            member = new UcenterMember();
            member.setOpenid(openid);
            member.setNickname(nickname);
            member.setAvatar(headImgUrl);
            member.setSex(sex);
            memberService.save(member);
        }
        //使用JWT根据member对象生成token字符串
        String jwtToken = JwtUtils.getJwtToken(member.getId(), member.getNickname());
        //最后返回首页面
        return "redirect:http://localhost:3000?token=" + jwtToken;
    }
}

扫描之后，在首页显示微信信息，比如昵称和头像。之前登录之后显示，在首页面从cookie获取数据显示。现在也可以按照之前的方式，把扫描之后信息放到cookie里面，跳转到首页面进行显示，但是如果把扫描数据放到cookie有问题，因为cookie无法实现跨域访问。

最终解决方案：根据微信信息使用jwt，生成token字符串，把token字符串通过路径传递到首页。

10、修改nginx的配置文件

3、前端开发

1、修改default.vue页面脚本

methods: {
    //微信登录显示的方法
    wxLogin(){
      //把token值放到cookie里面
      cookie.set('guli_token',this.token,{domain:'localhost'})
      //调用接口,根据token获取用户信息
      loginApi.getLoginUserInfo().then(response=>{
         this.loginInfo= response.data.data.userInfo
         //获取用户信息,存放到cookie里面
         cookie.set("guli_ucenter",JSON.stringify(this.loginInfo),{domain:'localhost'})
      })
    },
  //...
}

2、修改微信登录的超链接

先写死,之后可以从配置文件中读取地址…

4、微信扫描登录效果展示

五、QQ扫码登录

原理和微信扫码登录相同,最近正在申请个人开发者,等申请下来了就可以实现该功能了.功能后期进行完善.

谷粒学院（十六）OAuth2 | 微信扫码登录 | QQ扫码登录（二）