网站应用微信扫码登录

前言：

在很多企业网站中一般会提供多种登录方式，而微信扫码登录属于常见的一种，在网页端实现微信登录的方式有很多，例如“公众号方式扫码登录”、“微信开放平台扫码登录”；前者是需要关注公众号才能完成登录操作，对于有的用户来说其实并不想做关注这种操作，所以后者是一种更加纯粹的登录方式，只需要用户扫码授权即可，不需要关注任何东西。这里我们就详细讲解一下网站应用中，利用微信开放平台功能提供的微信扫码登录。

一、获取能力的准备

首先我们需要登录 微信开放平台

然后进行微信认证，此操作的核心点在于交300块钱

接着我们创建一个网站应用，内容就按照实际开发的网页信息填写即可

填写完成提交审核后一般1-3天就审核完成了，通过之后会直接获取微信登录能力

然后把appId和appSecret保存下来，准备工作就完成了，接下来进入代码阶段

二、java后端代码功能

controller层主要两个接口：

1.获取二维码的完整链接（这个是固定的，只要appId不变就可以一直放前端的）；

        redirectUrl是用户扫码授权之后跳转的网站地址，一般是网站首页

        scope是授权类型，这里固定写 snsapi_login

        官方文档说明

2.前端获取到授权码给过来通过授权码再获取用户的完整信息

    /**
     * 网页授权获取完整授权地址
     * @param request
     * @param response
     * @throws IOException
     */
    @GetMapping("/webGetUrl")
    public AjaxResult webGetUrl(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String appId = 微信开放平台创建的网站应用appId;
        String redirectUrl = URLEncoder.encode("https://网站域名");
        String webUrl = "https://open.weixin.qq.com/connect/qrconnect?appid=" + appId
                + "&redirect_uri=" + redirectUrl + "&response_type=code&scope=snsapi_login#wechat_redirect";
        return AjaxResult.success("获取成功", webUrl);
    }


    /**
     * 微信网页授权登录获取微信授权信息，获取openId等信息
     * @param code code
     * @return 结果集
     */
    @GetMapping("/wxWebLogin")
    public AjaxResult wxWebLogin(@RequestParam("code") String code) {
        WXWebLoginResultDto wxWebLogin = wxService.wxWebLogin(code);
        wxWebLogin.setAccess_token("");
        wxWebLogin.setRefresh_token("");
        return AjaxResult.success(wxWebLogin);
    }

接口：

    /**
     * 微信网页授权登录获取微信授权信息
     * @param code
     * @return
     */
    WXWebLoginResultDto wxWebLogin(String code);

实现类：

这里直接使用OKHttp方式调用，然后获取用户的OpenId等信息，这里可以直接实现用户的登录流程，把登录信息返给前端，由于我们的业务还需要进行手机号绑定等，所以是把openId返给前端，再接着做后续操作。无论业务怎么样，此处的核心是获取用户的openId，也就完成了微信授权的操作。

    /**
     * 微信网页授权登录获取微信授权信息
     * @param code
     * @return
     */
    @Override
    public WXWebLoginResultDto wxWebLogin(String code) {
        try {
            String appId = 网站应用appId;
            String secret = 网站应用appSecret;

            OkHttpClient client = new OkHttpClient().newBuilder()
                    .build();
            MediaType mediaType = MediaType.parse("text/plain");
            RequestBody body = RequestBody.create(mediaType, "");
            Request request = new Request.Builder()
                    .url("https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + appId
                            + "&secret=" + secret
                            + "&code=" + code
                            + "&grant_type=authorization_code")
                    .method("GET", null)
                    .build();
            Response response = client.newCall(request).execute();
            WXWebLoginResultDto wxWebLoginResultDto = JSON.parseObject(response.body().string(), WXWebLoginResultDto.class);
            System.out.println(wxWebLoginResultDto);
            return wxWebLoginResultDto;
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }

实体类：

/**
 * 微信开放平台，通过 code 获取 access_token、openid等信息
 * 文档地址：https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_Login/Authorized_API_call_UnionID.html
 */
@Data
public class WXWebLoginResultDto {
    /**
     * 调用凭证
     */
    private String access_token;
    /**
     * 有效期
     */
    private String expires_in;
    /**
     * 刷新令牌
     */
    private String refresh_token;
    /**
     * 用户OpenId
     */
    private String openid;
    /**
     * 授权类型
     */
    private String scope;
    /**
     * 多应用唯一ID
     */
    private String unionid;
}

效果演示：