聊聊公眾號聯動掃碼登入功能如何實現

威哥爱编程發表於2024-10-30

大家好，我是 V哥。掃碼登入是個很普遍的功能，透過與公眾號聯動實現掃碼登入功能，要怎麼做呢，V 哥整理了以下步驟和程式碼，供你參考。這裡假設你已經有一個Java後端應用，並且微信開發者平臺的配置也已經完成。（相信你可以根據微信開放平臺的操作進行）整個流程包括二維碼生成、掃碼後獲取微信使用者資訊、並將使用者登入狀態返回到你的應用中。

1. 微信公眾號掃碼登入流程

  1. 申請掃碼登入許可權：在微信開放平臺申請掃碼登入許可權。
  2. 生成二維碼：使用微信提供的介面生成一個包含應用授權資訊的二維碼。
  3. 使用者掃碼授權：使用者掃描二維碼，授權登入。
  4. 獲取授權碼：使用者授權後，微信會回撥給開發者一個授權碼。
  5. 獲取使用者資訊：使用授權碼獲取使用者的基本資訊（如暱稱、頭像等）。
  6. 建立會話：將使用者資訊與系統的會話繫結，完成登入流程。

2. 前置準備

確保你在微信開放平臺上配置了以下資訊：

  • AppID 和 AppSecret：在“公眾號設定”頁面可以找到。
  • 授權回撥域名：在開放平臺進行授權配置。

3. Java 實現掃碼登入

使用Spring Boot實現一個簡單的微信掃碼登入後端介面：

匯入依賴

在 pom.xml 中新增必要的依賴項：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

程式碼實現

  1. 配置微信相關資訊：
   @Configuration
   public class WeChatConfig {
       @Value("${wechat.appId}")
       private String appId;
       
       @Value("${wechat.appSecret}")
       private String appSecret;
       
       @Value("${wechat.redirectUri}")
       private String redirectUri;
       
       public String getAppId() {
           return appId;
       }

       public String getAppSecret() {
           return appSecret;
       }

       public String getRedirectUri() {
           return redirectUri;
       }
   }

  1. 生成二維碼：

    建立一個控制器來生成微信掃碼二維碼URL。

   @RestController
   @RequestMapping("/api/wechat")
   public class WeChatLoginController {
       @Autowired
       private WeChatConfig weChatConfig;

       @GetMapping("/login/qrcode")
       public ResponseEntity<String> getQRCode() {
           String url = "https://open.weixin.qq.com/connect/qrconnect" +
                   "?appid=" + weChatConfig.getAppId() +
                   "&redirect_uri=" + URLEncoder.encode(weChatConfig.getRedirectUri(), StandardCharsets.UTF_8) +
                   "&response_type=code" +
                   "&scope=snsapi_login" +
                   "&state=STATE#wechat_redirect";
           return ResponseEntity.ok(url);
       }
   }

透過此介面可以生成微信掃碼登入的二維碼URL。

  1. 回撥介面：

    微信掃碼後會將使用者重定向到配置的回撥URL，在回撥中處理授權碼並獲取使用者資訊。

   @GetMapping("/callback")
   public ResponseEntity<String> weChatCallback(@RequestParam("code") String code) {
       String accessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + weChatConfig.getAppId() +
               "&secret=" + weChatConfig.getAppSecret() +
               "&code=" + code +
               "&grant_type=authorization_code";

       RestTemplate restTemplate = new RestTemplate();
       String response = restTemplate.getForObject(accessTokenUrl, String.class);

       JSONObject json = new JSONObject(response);
       String accessToken = json.getString("access_token");
       String openId = json.getString("openid");

       // 獲取使用者資訊
       String userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" + accessToken + "&openid=" + openId;
       String userInfoResponse = restTemplate.getForObject(userInfoUrl, String.class);

       // 返回或儲存使用者資訊
       return ResponseEntity.ok(userInfoResponse);
   }

  1. 會話管理與重定向：

    在獲取到使用者資訊後，可以將使用者資料存入Redis（或資料庫），並生成一個登入態。

   @Autowired
   private RedisTemplate<String, Object> redisTemplate;

   @PostMapping("/saveSession")
   public ResponseEntity<String> saveSession(@RequestBody Map<String, String> userInfo) {
       String sessionId = UUID.randomUUID().toString();
       redisTemplate.opsForValue().set(sessionId, userInfo);

       // 返回Session ID作為登入憑證
       return ResponseEntity.ok(sessionId);
   }

4. 前端處理

在前端頁面中呼叫 /api/wechat/login/qrcode 介面，將二維碼顯示給使用者。當使用者掃碼並完成授權後，前端可以獲取後端傳回的Session ID，表示登入成功。

完整流程小結

  1. 訪問後端介面生成二維碼連結。
  2. 前端顯示二維碼，使用者掃碼後進入微信授權頁面。
  3. 授權成功後，微信重定向至後端的 /callback。
  4. 後端使用 code 獲取使用者資訊，並儲存會話資訊（如Redis）。
  5. 返回前端Session ID作為登入憑證。

使用以上程式碼和步驟可以實現完整的微信公眾號掃碼登入流程，前端就可以使用得到的Session ID來維護使用者登入狀態啦。

由於演示案例涉及自己的賬號資訊和微信開放平臺的私密資訊，請根據自己的情況使用程式碼案例，下課。

相關文章