微信网页扫码登录

准备步骤

对于网页的微信扫码登录，首要前提是企业申请的微信开放平台。
微信开放平台
微信扫码登录官方文档
先将官方文档通读一遍，然后申请网站应用

申请成功则如下：

开发过程

仔细读懂微信的开发文档

1. 微信官方文档请求的流程如图：
   

这里搬一下官方文档内容，方便回顾：
第一步：请求CODE
第三方使用网站应用授权登录前请注意已获取相应网页授权作用域（scope=snsapi_login），则可以通过在PC端打开以下链接：

https://open.weixin.qq.com/connect/qrconnect?
appid=APPID&redirect_uri=REDIRECT_URI&
response_type=code&scope=SCOPE&state=STATE#wechat_redirect 

若提示“该链接无法访问”，请检查参数是否填写错误，如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。

返回说明
用户允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数

redirect_uri?code=CODE&state=STATE

若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数

redirect_uri?state=STATE

那么看完上面，我们就可以先别急着敲代码，可以尝试着按所说的链接去拼接访问看看。
1.我们已经申请下来的网站应用，那么我们就会AppID和AppSecret。
2.我们先绑定下回调的域名，假设我们这里写www.baidu.com

3.将appid以及www.baidu.com拼接在链接上。详情看上面的第一步（请求CODE）,注意scope不许为snsapi_login
链接就如下：

https://open.weixin.qq.com/connect/qrconnect?appid=（填写你自己的appid）&redirect_uri=www.baidu.com&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

这时候会报错

这是因为你的redirect_url是需要编码的，所以我们将url编码一下即可。
url编码工具网址(http://tool.chinaz.com/tools/urlencode.aspx)
所以正确的链接为：

https://open.weixin.qq.com/connect/qrconnect?appid=(你自己的appid)&redirect_uri=https%3a%2f%2fwww.baidu.com&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

最终成功如下：

然后手机扫码登录之后，链接会跳转到(携带code和state)
https://www.baidu.com/?code=091pzMml2ViDq54qamml2m8U4h0pzMmx&state=STATE
然后根据code我们也可以往微信获取用户个人信息。那么整个流程大致理清楚了。

实现方案

方案1

实现方式：前端实现与微信交互的部分逻辑。然后将微信回调之后的code和state传给后端，由后端去微信获取个人用户信息并返回给前端。
业务需求： 微信登录，需要校验用户是否绑定微信，未绑定提示用户去app绑定微信。

好处：
后端可以直接json数据返回给前端即可。如果交给后端处理微信逻辑，则最后后端需要进行跳转到前端地址，并且把相关信息拼接在url后面返回给前端。链接上暴露用户信息不是很安全的选择。

方案2

实现方式：后端实现与微信的交互逻辑，前端完全不用参与。只需要调用后端相应接口
业务需求： 微信登录，需要校验用户是否绑定微信，未绑定提示用户去app绑定微信。
好处：对于微信交互部分，则前端完全不涉及。但是返回登录成功信息，则会把相关信息拼接在url上返回给前端。存在一定的风险
)

代码的demo练习

这里只演示后端的demo代码
引入微信轮子，有需要的可以看下相关文档，这里就不多解释了。地址（https://github.com/Wechat-Group/WxJava）
1.引入maven

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.github.binarywang</groupId>
            <artifactId>weixin-java-mp</artifactId>
            <version>3.3.0</version>
        </dependency>

2.编写微信的配置

@Configuration
public class WxOpenGlbalConfig {


    private String openAppid="开放平台申请的appid";

    private String openAppSecret="开放平台申请的appsecret";


    @Bean
    public WxMpService wxOpenService() {
        WxMpService wxOpenService = new WxMpServiceImpl();
        wxOpenService.setWxMpConfigStorage(wxOpenConfigStorage());
        return wxOpenService;
    }

    @Bean
    public WxMpConfigStorage wxOpenConfigStorage() {
        WxMpInMemoryConfigStorage wxMpInMemoryConfigStorage = new WxMpInMemoryConfigStorage();
        wxMpInMemoryConfigStorage.setAppId(openAppid);
        wxMpInMemoryConfigStorage.setSecret(openAppSecret);
        return wxMpInMemoryConfigStorage;
    }
}

3.编写接口

@Controller
public class WxchatController {

    @Autowired
    private WxMpService wxOpenService;

    /**
     * 微信开放平台绑定的域名，修改为你绑定的域名
     */
    String wxBindtUrl = "http://www.baidu.com";、

    /**
     * 前端地址
     */
    String proUrl = "";

    /**
     * 如果采用方案2（后端实现所有微信交互逻辑），则前端调用该接口（步骤1）
     *
     * @param returnUrl 前端登录成功后的相对路径
     * @return
     * @throws Exception
     */
    @GetMapping("/qrAuthorize")
    public String qrAuthorize(@RequestParam("returnUrl") String returnUrl) throws Exception {
        String url = wxBindtUrl + returnUrl;
        String redirectUrl = wxOpenService.buildQrConnectUrl(url, WxConsts.QrConnectScope.SNSAPI_LOGIN, URLEncoder.encode(returnUrl));
        // 这里执行的跳转到微信开放平台的扫码界面
        return "redirect:" + redirectUrl;
    }

    /**
     * 如果采用方案2，则用户执行扫码确认之后，则会根据回调的url执行该方法,然后将登录信息拼接在url上跳转到前端页面（步骤2）
     * 如果采用方案1，则是用户执行扫码确认之后，前端来调用该接口方法（则用json返回，要添加 @ResponseBody）
     * 获取用户信息
     *
     * @param code
     * @param returnUrl
     * @return
     */
    @GetMapping("/qrUserInfo")

    public String qrUserInfo(@RequestParam("code") String code,
                             @RequestParam("state") String returnUrl) {
        WxMpOAuth2AccessToken wxMpOAuth2AccessToken = new WxMpOAuth2AccessToken();
        try {
            wxMpOAuth2AccessToken = wxOpenService.oauth2getAccessToken(code);
            // 用户信息
            WxMpUser wxMpUser = wxOpenService.oauth2getUserInfo(wxMpOAuth2AccessToken, "zh_CN");
            String openId = wxMpOAuth2AccessToken.getOpenId();
            // 执行你的登录成功业务逻辑(token/session方式)，下面的url则根据自己需求进行拼接后跳转到前端地址/或者是采用json数据返回则要修改。
            return "redirect:" + proUrl + "?openid=" + openId;
        } catch (WxErrorException e) {
            System.out.println("这里应该是日志打印，方便跟踪");

        }
		// 执行你的错误页面/错误信息的json
        return null;
    }

}

最后，如果觉得文章对你有用，请点下赞！