微信生成授權URL

一 準備工作

1 註冊

微信開放平臺：https://open.weixin.qq.com

2 郵箱激活

3 完善開發者資料

4 開發者資質認證

準備營業執照，1-2個工作日審批、300元

5 創建網站應用

提交審覈，7個工作日審批

6 熟悉微信登錄流程

獲取access_token時序圖

參考文檔：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）

二 後端開發

service_ucenter微服務

1 添加配置

open:
  # 微信開放平臺 appid
  appId: <你的微信開放平臺appid>
  # 微信開放平臺 appsecret
  appSecret: <你的微信開放平臺 appsecret>
  # 微信開放平臺 重定向url（guli.shop需要在微信開放平臺配置）
  redirectUri: <你的微信開放平臺 重定向url>

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

/**
* @className: ApiWxController
* @description: 微信API控制器
* @date: 2020/12/29
* @author: cakin
*/
@CrossOrigin
@Controller // 注意這裏不能配置爲 @RestController
@RequestMapping("/api/ucenter/wx")
@Slf4j
public class ApiWxController {


    @Autowired
    private UcenterProperties ucenterProperties;


    @Autowired
    private MemberService memberService;


    @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);
        // 格式化 回調url
        String qrcodeUrl = String.format(
                baseUrl,
                ucenterProperties.getAppId(),
                redirectUri,
                state);
        // 跳轉到組裝的url地址中去
        return "redirect:" + qrcodeUrl;
    }
}

授權url參數說明

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中添加依賴

<!--spring session：session同步 同步到redis中-->
<dependency>
    <groupId>org.springframework.session</groupId>
    <artifactId>spring-session-data-redis</artifactId>
</dependency>

2 service_ucenter中添加配置文件

@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;
    }
}