动态

详情 返回 返回

聊聊公眾號聯動掃碼登錄功能如何實現 - 动态 详情

大家好,我是 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來維護用户登錄狀態啦。

由於演示案例涉及自己的賬號信息和微信開放平台的私密信息,請根據自己的情況使用代碼案例,下課。

user avatar linlinma 头像 emanjusaka 头像 shimiandekaohongshu_ewvskz 头像 ohaha 头像 aitibao_shichangyingxiao 头像 tuhooo 头像
点赞 6 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.