1. 程式人生 > >利用WxJava實現網站整合微信登入功能,核心程式碼竟然不超過10行

利用WxJava實現網站整合微信登入功能,核心程式碼竟然不超過10行

最近網站PC端整合微信掃碼登入,踩了不少坑,在此記錄下實現過程和注意事項。

本文目錄

一、微信開放平臺操作步驟1.建立“網站應用”2.獲取AppID和AppSecret二、開發指南三、開發實戰1、pom.xml引入jar包2、配置檔案新增對應的配置3、初始化配置4、控制層核心程式碼四、執行效果1.構造pc端連結2.微信掃描生成的二維碼3.獲取微信使用者資訊

一、微信開放平臺操作步驟

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

一定要注意,網站整合微信登入需要在微信開放平臺操作,它和微信公眾平臺不一樣,雖然雙方最後的使用者唯一標識都是openId,但是是不互通的。如果開發平臺想和公眾平臺相互通,兩個平臺得互相繫結,然後獲取唯一識別的unionId。

下面說下在開放平臺上的操作步驟:

1.建立“網站應用”

由於到對接PC網站登入,所以建立“網站應用”,操作截圖如下:



新建網站應用截圖

2.獲取AppID和AppSecret

等微信稽核通過後,會分配對應的AppId,AppSecret需要管理員掃描生成,生成後截圖如下:


檢視AppId截圖

 

二、開發指南

微信OAuth2.0授權登入讓微信使用者使用微信身份安全登入第三方應用或網站,在微信使用者授權登入已接入微信OAuth2.0的第三方應用後,第三方可以獲取到使用者的介面呼叫憑證(access_token),通過access_token可以進行微信開放平臺授權關係介面呼叫,從而可實現獲取微信使用者基本開放資訊和幫助使用者實現基礎開放功能等,整體流程為:

1. 第三方發起微信授權登入請求,微信使用者允許授權第三方應用後,微信會拉起應用或重定向到第三方網站,並且帶上授權臨時票據code引數;
2. 通過code引數加上AppID和AppSecret等,通過API換取access_token;
3. 通過access_token進行介面呼叫,獲取使用者基本資料資源或幫助使用者實現基本操作。

三、開發實戰

專案中使用了開源專案WxJava,WxJava原始碼地址(https://github.com/Wechat-Group/WxJava);

先新建要給Spring Boot專案,具體可以參考文章我之前的文章《Spring Boot入門-快速搭建web專案》;

新建好專案後,繼續按照下面步驟操作即可。

1、pom.xml引入jar包

<!-- 微信登入jar -->
<dependency>
    <groupId>com.github.binarywang</groupId>
    <artifactId>weixin-java-mp</artifactId>
    <version>3.3.0</version>
</dependency>

2、配置檔案新增對應的配置

配置appId和appSecret,application.yml內如下:

wx:
  mp:
    configs:
        - appid: wx1*********
          secret: ***********
          token: 
          aesKey: 
          msgDataFormat: 

3、初始化配置

WxMpProperties.java程式碼如下:

@Data
@ConfigurationProperties(prefix = "wx.mp")
public class WxMpProperties {

    private List<MpConfig> configs;

    @Data
    public static class MpConfig {
        /**
         * 設定微信公眾號的appid
         */
        private String appId;

        /**
         * 設定微信公眾號的app secret
         */
        private String secret;

        /**
         * 設定微信公眾號的token
         */
        private String token;

        /**
         * 設定微信公眾號的EncodingAESKey
         */
        private String aesKey;
    }

}

WxMpConfiguration.java程式碼如下:

@Slf4j
@Configuration
@EnableConfigurationProperties(WxMpProperties.class)
public class WxMpConfiguration {

    private static Map<String, WxMpService> mpServices = Maps.newHashMap();

    public static Map<String, WxMpService> getMpServices() {
        return mpServices;
    }

    @Autowired
    private WxMpProperties properties;

    @Autowired
    private WxMpInRedisConfigStorageMy configStorage;

    @PostConstruct
    public void initServices() {
        // 程式碼裡 getConfigs()處報錯的同學,請注意仔細閱讀專案說明,你的IDE需要引入lombok外掛!!!!
        final List<WxMpProperties.MpConfig> configs = this.properties.getConfigs();
        if (configs == null) {
            throw new RuntimeException("大哥,拜託先看下專案首頁的說明(readme檔案),新增下相關配置,注意別配錯了!");
        }

        mpServices = configs.stream().map(a -> {
            //redis
            configStorage.setAppId(a.getAppId());
            configStorage.setSecret(a.getSecret());
            configStorage.setToken(a.getToken());
            configStorage.setAesKey(a.getAesKey());

            WxMpService service = new WxMpServiceImpl();
            service.setWxMpConfigStorage(configStorage);
            log.info("配置的appId={}",a.getAppId());
            return service;
        }).collect(Collectors.toMap(s -> s.getWxMpConfigStorage().getAppId(), a -> a, (o, n) -> o));
    }
}

4、控制層核心程式碼

@Slf4j
@Controller
@RequestMapping("/redirect/{appid}")
public class WxRedirectController {

    /**
     * 獲取使用者資訊
     *
     */
    @RequestMapping("/getUserInfo")
    public void getBase(HttpServletRequest request, HttpServletResponse response, @PathVariable String appid, @RequestParam("code") String code) {
        WxMpService mpService = WxMpConfiguration.getMpServices().get(appid);
        try {
            WxMpOAuth2AccessToken accessToken = mpService.oauth2getAccessToken(code);
            log.info("accessToken={}", JSON.toJSONString(accessToken));
            WxMpUser wxMpUser = mpService.oauth2getUserInfo(accessToken, null);
            log.info("wxMpUser={}", JSON.toJSONString(wxMpUser));
        } catch (Exception e) {
            log.error("獲取使用者資訊異常!", e);
        }
    }
}

四、執行效果

1.構造pc端連結

https://open.weixin.qq.com/connect/qrconnect?appid=wx12345678redirect_uri=http%3a%2f%2fwww.test.com%2fredirect%2fwx12345678%2fgetUserInfo&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

開啟上面連結後截圖如下:


2.微信掃描生成的二維碼

微信掃描後手機端截圖如下:


微信使用者使用微信掃描二維碼並且確認登入後,PC端會跳轉到

http://www.test.com/redirect/wx12345678/getUserInfo?code=CODE&state=STATE

3.獲取微信使用者資訊

控制層程式碼可以接收到上code和state引數,根據這兩個引數可以獲取微信使用者資訊,請求過來後列印使用者資訊的日誌如下:

[http-nio-8104-exec-2] INFO  c.t.m.s.c.WxRedirectController - accessToken={"accessToken":"24_vWnvRSV9vmR7qOqhJKRoER93bhsPg","expiresIn":7200,"openId":"oRXsdsUh6scaKof3D1I4d3c","refreshToken":"24_WmknxCn9ff2Pl2xhLFw-kY96p6zgiqFJy8LMIOP_CaMZOHEM","scope":"snsapi_login","unionId":"oJxUkwfFOSyu1oC6oF2h6pTI"}
[http-nio-8104-exec-2] INFO  c.t.m.s.c.WxRedirectController - wxMpUser={"city":"","country":"","headImgUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM4ibeAsuoVIf3qr4QxjnNWh4Q1WiawCFNfzkGMzVqubPOnr0hA3Micwsu1LtblQ7phImdYSC2nic6OUicQ/132","language":"","nickname":"阿白","openId":"oRXsdsUh6scaKof3D1I4d3c","privileges":[],"province":"","sex":0,"sexDesc":"未知","unionId":"oaDUkwVfCpMJOSyu1oC2oF2h6pTI"}

到此PC網站整合微信登入已經全部實現完成了,有問題歡迎留言溝通哦!

推薦閱讀

1.Spring Boot 2.X 整合Redis
2.Spring Boot 2.X 如何優雅的解決跨域問題?
3.Spring Boot 2.X 整合spring session實現session共享
4.Spring條件註解@Conditional
5.SpringBoot 2.X從0到1實現郵件傳送功能
6.Redis批量刪除key的小技巧,你知道嗎?
7.Spring Boot 2.X 如何快速整合jpa?
8.Spring Boot之Profile--快速搞定多環境使用與切換
9.Spring Boot快速整合kaptcha生成驗證碼
10.Spring Boot 2.X整合Spring-cache,讓你的網站速度飛起來


限時領取免費Java相關資料,涵蓋了Java、Redis、MongoDB、MySQL、Zookeeper、Spring Cloud、Dubbo/Kafka、Hadoop、Hbase、Flink等高併發分散式、大資料、機器學習等技術。
關注下方公眾號即可免費領取: