大家好,我是 V哥。掃碼登錄是個很普遍的功能,通過與公眾號聯動實現掃碼登錄功能,要怎麼做呢,V 哥整理了以下步驟和代碼,供你參考。這裏假設你已經有一個Java後端應用,並且微信開發者平台的配置也已經完成。(相信你可以根據微信開放平台的操作進行)整個流程包括二維碼生成、掃碼後獲取微信用户信息、並將用户登錄狀態返回到你的應用中。
1. 微信公眾號掃碼登錄流程
- 申請掃碼登錄權限:在微信開放平台申請掃碼登錄權限。
- 生成二維碼:使用微信提供的接口生成一個包含應用授權信息的二維碼。
- 用户掃碼授權:用户掃描二維碼,授權登錄。
- 獲取授權碼:用户授權後,微信會回調給開發者一個授權碼。
- 獲取用户信息:使用授權碼獲取用户的基本信息(如暱稱、頭像等)。
- 建立會話:將用户信息與系統的會話綁定,完成登錄流程。
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>
代碼實現
- 配置微信相關信息:
@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;
}
}
-
生成二維碼:
創建一個控制器來生成微信掃碼二維碼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。
-
回調接口:
微信掃碼後會將用户重定向到配置的回調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);
}
-
會話管理與重定向:
在獲取到用户信息後,可以將用户數據存入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,表示登錄成功。
完整流程小結
- 訪問後端接口生成二維碼鏈接。
- 前端顯示二維碼,用户掃碼後進入微信授權頁面。
- 授權成功後,微信重定向至後端的
/callback。 - 後端使用
code獲取用户信息,並保存會話信息(如Redis)。 - 返回前端Session ID作為登錄憑證。
使用以上代碼和步驟可以實現完整的微信公眾號掃碼登錄流程,前端就可以使用得到的Session ID來維護用户登錄狀態啦。
由於演示案例涉及自己的賬號信息和微信開放平台的私密信息,請根據自己的情況使用代碼案例,下課。