一、准备工作

1、注册

微信开放平台：https://open.weixin.qq.com

2、邮箱激活

3、完善开发者资料

4、开发者资质认证

准备营业执照，1-2个工作日审批、300元

5、创建网站应用

提交审核，7个工作日审批

6、熟悉微信登录流程

参考文档：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=e547653f995d8f402704d5cb2945177dc8aa4e7e&lang=zh_CN

第一步：请求CODE（生成授权URL）

第二步：通过code获取access_token（开发回调URL）

获取access_token时序图：

二、后端开发

service_ucenter微服务

1、添加配置

application.yml添加相关配置信息

wx:

  open:

    # 微信开放平台 appid

    appId: wxed9954c01bb89b47

    # 微信开放平台 appsecret

    appSecret: a7482517235173ddb4083788de60b90e

    # 微信开放平台 重定向url（guli.shop需要在微信开放平台配置）

    redirectUri: http://guli.shop/api/ucenter/wx/callback8160

2、创建常量类

创建util包，创建UcenterProperties.java类

package com.atguigu.guli.service.ucenter.util;

@Data

@Component

//注意prefix要写到最后一个 "." 符号之前

@ConfigurationProperties(prefix="wx.open")

public class UcenterProperties {

    private String appId;

    private String appSecret;

    private String redirectUri;

}

3、创建controller

api包中创建ApiWxController

@Controller//注意这里没有配置 @RestController

@RequestMapping("/api/ucenter/wx")

@Slf4j

public class ApiWxController {

    @Autowired

    private UcenterProperties ucenterProperties;

    @GetMapping("login")

    public String genQrConnect(HttpSession session){

        //组装url：https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=回调地址&response_type=code&scope=snsapi_login&state=随机数#wechat_redirect

        String baseUrl = "https://open.weixin.qq.com/connect/qrconnect" +

                "?appid=%s" +

                "&redirect_uri=%s" +

                "&response_type=code" +

                "&scope=snsapi_login" +

                "&state=%s" +

                "#wechat_redirect";

        //将回调url进行转码

        String redirectUri = "";

        try {

            redirectUri = URLEncoder.encode(ucenterProperties.getRedirectUri(), "UTF-8");

        } catch (UnsupportedEncodingException e) {

            log.error(ExceptionUtils.getMessage(e));

            throw new GuliException(ResultCodeEnum.URL_ENCODE_ERROR);

        }

        //生成随机state，防止csrf攻击

        String state = UUID.randomUUID().toString();

        //将state存入session

        session.setAttribute("wx_open_state", state);

        String qrcodeUrl = String.format(

                baseUrl,

                ucenterProperties.getAppId(),

                redirectUri,

                state);

        //跳转到组装的url地址中去

        return "redirect:" + qrcodeUrl;

    }

}

授权url参数说明：

参数	是否必须	说明
appid	是	应用唯一标识
redirect_uri	是	请使用urlEncode对链接进行处理
response_type	是	填code
scope	是	应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login
state	否	用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验

4、测试

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

http://localhost:8160/api/ucenter/wx/login

5、前端整合登录超链接

pages/login.vue和register.vue中替换微信登录的超链接

三、集成Spring Session

使用spring session实现分布式session共享，对原有代码无侵入，自动在redis中存储session信息

1、service_ucenter中添加依赖

<dependency>

    <groupId>org.springframework.session</groupId>

    <artifactId>spring-session-data-redis</artifactId>

</dependency>

2、service_ucenter中添加配置文件

package com.atguigu.guli.service.base.config;

@Configuration

@EnableRedisHttpSession

public class HttpSessionConfig {

    //可选配置

    @Bean

    public CookieSerializer cookieSerializer() {

        DefaultCookieSerializer serializer = new DefaultCookieSerializer();

        //我们可以将Spring Session默认的Cookie Key从SESSION替换为原生的JSESSIONID

        serializer.setCookieName("JSESSIONID");

        // CookiePath设置为根路径

        serializer.setCookiePath("/");

        // 配置了相关的正则表达式，可以达到同父域下的单点登录的效果

        serializer.setDomainNamePattern("^.+?\\.(\\w+\\.[a-z]+)$");

        return serializer;

    }

}

巴特西

微信登录2-生成授权URL