目錄
一、登錄流程
首先參考小程序官方文檔中的流程圖：
根據流程圖描述，主要步驟有以下幾步
1、小程序端調用 wx.login()向微信接口服務獲取 臨時登錄憑證code ，並上傳至開發者服務端。
2、開發者服務端向微信服務接口服務調用 auth.code2Session 接口，換取 用戶唯一標識 OpenID 和 會話密鑰 session_key。
3、開發者服務端根據session_key等信息,基於JWT標准，生成自定義的網絡令牌token，返回至小程序端存儲。
關於SpringBoot實現JWT的具體細節，請參考本人博文：
SpringBoot整合SpringSecurity實現JWT認證
本文將具體對微信小程序的前端與后端實現進行詳細描述：
二、后端實現
1、SpringBoot項目結構樹
2、實現auth.code2Session 接口的封裝
WxMiniApi.java
/**
* 微信小程序統一服務端API接口
* @author zhuhuix
* @date 2020-04-03
*/
public interface WxMiniApi {
/**
* auth.code2Session
* https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html
* 請求參數 屬性 類型 默認值 必填 說明
* @param appId string 是 小程序 appId
* @param secret string 是 小程序 appSecret
* @param jsCode string 是 登錄時獲取的 code
* grantType string 是 授權類型，此處只需填寫 authorization_code
* 返回值
* @return JSON 數據包
* 屬性 類型 說明
* openid string 用戶唯一標識
* session_key string 會話密鑰
* unionid string 用戶在開放平台的唯一標識符，在滿足 UnionID 下發條件的情況下會返回，詳見 UnionID 機制說明。
* errcode number 錯誤碼
* errmsg string 錯誤信息
*
* errcode 的合法值
*
* 值 說明 最低版本
* -1 系統繁忙，此時請開發者稍候再試
* 0 請求成功
* 40029 code 無效
* 45011 頻率限制，每個用戶每分鍾100次
*/
JSONObject authCode2Session(String appId,String secret,String jsCode);
}
WxMiniApiImpl.java
/**
* 微信小程序Api接口實現類
*
* @author zhuhuix
* @date 2020-04-03
*/
@Slf4j
@Service
public class WxMiniApiImpl implements WxMiniApi {
@Override
public JSONObject authCode2Session(String appId, String secret, String jsCode) {
String url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + appId + "&secret=" + secret + "&js_code=" + jsCode + "&grant_type=authorization_code";
String str = WeChatUtil.httpRequest(url, "GET", null);
log.info("api/wx-mini/getSessionKey:" + str);
if (StringUtils.isEmpty(str)) {
return null;
} else {
return JSONObject.parseObject(str);
}
}
}
WeChatUtil.java
/**
* 微信小程序工具類
*
* @author zhuhuix
* @date 2019-12-25
*/
@Slf4j
public class WeChatUtil {
public static String httpRequest(String requestUrl, String requestMethod, String output) {
try {
URL url = new URL(requestUrl);
HttpsURLConnection connection = (HttpsURLConnection) url.openConnection();
connection.setDoOutput(true);
connection.setDoInput(true);
connection.setUseCaches(false);
connection.setRequestMethod(requestMethod);
if (null != output) {
OutputStream outputStream = connection.getOutputStream();
outputStream.write(output.getBytes(StandardCharsets.UTF_8));
outputStream.close();
}
// 從輸入流讀取返回內容
InputStream inputStream = connection.getInputStream();
InputStreamReader inputStreamReader = new InputStreamReader(inputStream, StandardCharsets.UTF_8);
BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
String str;
StringBuilder buffer = new StringBuilder();
while ((str = bufferedReader.readLine()) != null) {
buffer.append(str);
}
bufferedReader.close();
inputStreamReader.close();
inputStream.close();
connection.disconnect();
return buffer.toString();
} catch (Exception e) {
e.printStackTrace();
}
return "";
}
public static String decryptData(String encryptDataB64, String sessionKeyB64, String ivB64) {
log.info("encryptDataB64:" + encryptDataB64);
log.info("sessionKeyB64:" + sessionKeyB64);
log.info("ivB64:" + ivB64);
return new String(
decryptOfDiyIv(
Base64.decode(encryptDataB64),
Base64.decode(sessionKeyB64),
Base64.decode(ivB64)
)
);
}
private static final String KEY_ALGORITHM = "AES";
private static final String ALGORITHM_STR = "AES/CBC/PKCS7Padding";
private static Key key;
private static Cipher cipher;
private static void init(byte[] keyBytes) {
// 如果密鑰不足16位，那么就補足. 這個if 中的內容很重要
int base = 16;
if (keyBytes.length % base != 0) {
int groups = keyBytes.length / base + 1;
byte[] temp = new byte[groups * base];
Arrays.fill(temp, (byte) 0);
System.arraycopy(keyBytes, 0, temp, 0, keyBytes.length);
keyBytes = temp;
}
// 初始化
Security.addProvider(new BouncyCastleProvider());
// 轉化成JAVA的密鑰格式
key = new SecretKeySpec(keyBytes, KEY_ALGORITHM);
try {
// 初始化cipher
cipher = Cipher.getInstance(ALGORITHM_STR, "BC");
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 解密方法
*
* @param encryptedData 要解密的字符串
* @param keyBytes 解密密鑰
* @param ivs 自定義對稱解密算法初始向量 iv
* @return 解密后的字節數組
*/
private static byte[] decryptOfDiyIv(byte[] encryptedData, byte[] keyBytes, byte[] ivs) {
byte[] encryptedText = null;
init(keyBytes);
try {
cipher.init(Cipher.DECRYPT_MODE, key, new IvParameterSpec(ivs));
encryptedText = cipher.doFinal(encryptedData);
} catch (Exception e) {
e.printStackTrace();
}
return encryptedText;
}
/**
* 向指定 URL 發送POST方法的請求
*
* @param url 發送請求的 URL
* @param json 請求參數，請求參數應該是 json 的形式。
* @return 所代表遠程資源的響應結果
*/
public static String httpPost(String url, JSONObject json) {
PrintWriter out = null;
BufferedReader in = null;
String result = "";
try {
URL realUrl = new URL(url);
// 打開和URL之間的連接
URLConnection conn = realUrl.openConnection();
// 設置通用的請求屬性
conn.setRequestProperty("accept", "*/*");
conn.setRequestProperty("connection", "Keep-Alive");
conn.setRequestProperty("user-agent",
"Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
// 發送POST請求必須設置如下兩行
conn.setDoOutput(true);
conn.setDoInput(true);
// 獲取URLConnection對象對應的輸出流
out = new PrintWriter(conn.getOutputStream());
// 發送請求參數
out.print(json);
// flush輸出流的緩沖
out.flush();
// 定義BufferedReader輸入流來讀取URL的響應
in = new BufferedReader(
new InputStreamReader(conn.getInputStream()));
String line;
while ((line = in.readLine()) != null) {
result=result.concat(line);
}
} catch (Exception e) {
System.out.println("發送 POST 請求出現異常！" + e);
e.printStackTrace();
}
//使用finally塊來關閉輸出流、輸入流
finally {
try {
if (out != null) {
out.close();
}
if (in != null) {
in.close();
}
} catch (IOException ex) {
ex.printStackTrace();
}
}
return result;
}
}
3、建立用戶信息表及用戶增刪改查的管理
User.java
/**
* 用戶表
*
* @author zhuhuix
* @date 2020-04-03
*/
@Entity
@Getter
@Setter
@Table(name = "user")
public class User implements Serializable {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@NotNull(groups = Update.class)
private Long id;
@Column(name = "user_name", unique = true)
private String userName;
@JsonIgnore
private String password;
/**
* 微信openId
*/
@Column(unique = true, name = "open_id")
private String openId;
/**
* 用戶昵稱
*/
@Column(name="nick_name")
private String nickName;
/**
* 性別 0-未知 1-male,2-female
*/
private Integer gender;
/**
* 頭像地址
*/
@Column(name = "avatar_url")
private String avatarUrl;
@Column(name = "union_id")
private String unionId;
private String country;
private String province;
private String city;
private String language;
@Email
private String email;
private String phone;
private String remarks;
private Boolean enabled;
@JsonIgnore
@Column(name = "last_password_reset_time")
private Timestamp lastPasswordResetTime;
@JsonIgnore
@Column(name = "create_time")
@CreationTimestamp
private Timestamp createTime;
@JsonIgnore
@Column(name = "update_time")
@UpdateTimestamp
private Timestamp updateTime;
}
UserService.java
/**
* 用戶信息接口
*
* @author zhuhuix
* @date 2020-04-03
*/
public interface UserService {
/**
* 增加用戶
*
* @param user 待新增的用戶
* @return 增加成功的用戶
*/
Result<User> create(User user);
/**
* 刪除用戶
*
* @param user 待刪除的用戶
*/
void delete(User user);
/**
* 修改用戶
*
* @param user 待修改的用戶
* @return 修改成功的用戶
*/
Result<User> update(User user);
/**
* 根據id查找用戶
*
* @param id 用戶id
* @return id對應的用戶
*/
Result<User> findById(Long id);
/**
* 用於微信注冊用戶查找：根據openId查找用戶
*
* @param openId 微信openId
* @return openId對應的用戶
*/
Result<User> findByOpenId(String openId);
}
UserServiceImpl.java
/**
* 用戶接口實現類
*
* @author zhuhuix
* @date 2020-04-03
*/
@Slf4j
@Service
@Transactional(propagation = Propagation.SUPPORTS, readOnly = true, rollbackFor = Exception.class)
public class UserServiceImpl implements UserService {
private final UserRepository userRepository;
public UserServiceImpl(UserRepository userRepository) {
this.userRepository = userRepository;
}
@Override
@Transactional(rollbackFor = Exception.class)
public Result<User> create(User user) {
return new Result<User>().ok(userRepository.save(user));
}
@Override
@Transactional(rollbackFor = Exception.class)
public void delete(User user) {
userRepository.delete(user);
}
@Override
@Transactional(rollbackFor = Exception.class)
public Result<User> update(User user) {
return new Result<User>().ok(userRepository.save(user));
}
@Override
public Result<User> findById(Long id) {
Optional<User> optional = userRepository.findById(id);
return optional.map(user -> new Result<User>().ok(user)).orElse(null);
}
@Override
public Result<User> findByOpenId(String openId) {
return new Result<User>().ok(userRepository.findByOpenId(openId));
}
}
Result.java
/**
* API統一返回基類
* @author zhuhuix
* @date 2020-04-03
*/
@Getter
@Setter
public class Result<T> implements Serializable {
/**
* 是否成功
*/
private Boolean success;
/**
* 錯誤碼
*/
private String errCode;
/**
* 錯誤信息
*/
private String errMsg;
/**
* 返回數據
*/
private T module;
@Override
public String toString() {
return "Result{" +
"success=" + success +
", errCode='" + errCode + '\'' +
", errMsg='" + errMsg + '\'' +
", module=" + module +
'}';
}
public Result<T> ok(T module){
this.setSuccess(true);
this.setErrCode("0");
this.setErrCode("ok");
this.setModule(module);
return this;
}
public Result<T> error(String errCode,String errMsg){
this.setSuccess(false);
this.setErrCode(errCode);
this.setErrMsg(errMsg);
return this;
}
public Result<T> error(String errMsg){
this.setSuccess(false);
this.setErrCode("-1");
this.setErrMsg(errMsg);
return this;
}
}
4、實現登錄認證及令牌生成
AuthService.java
/**
* 登錄授權服務接口
*
* @author zhuhuix
* @date 2020-04-07
*/
public interface AuthService {
/**
* 登錄授權
*
* @param authUserDto 認證用戶請求信息
* @param request Http請求
* @return 認證用戶返回信息
*/
Result<AuthUserDto> login(AuthUserDto authUserDto, HttpServletRequest request);
}
AuthServiceImpl.java
/**
* 授權登錄接口實現類
*
* @author zhuhuix
* @date 2020-04-07
*/
@Slf4j
@Service
@Transactional(propagation = Propagation.SUPPORTS, readOnly = true, rollbackFor = Exception.class)
public class AuthServiceImpl implements AuthService {
@Value("${wxMini.appId}")
private String appId;
@Value("${wxMini.secret}")
private String secret;
private final JwtTokenUtils jwtTokenUtils;
private final WxMiniApi wxMiniApi;
private final UserService userService;
public AuthServiceImpl(JwtTokenUtils jwtTokenUtils, WxMiniApi wxMiniApi, UserService userService) {
this.jwtTokenUtils = jwtTokenUtils;
this.wxMiniApi = wxMiniApi;
this.userService = userService;
}
@Override
@Transactional(rollbackFor = Exception.class)
public Result<AuthUserDto> login(AuthUserDto authUserDto, HttpServletRequest request) {
Result<AuthUserDto> result = new Result<>();
//authType=1代表是微信登錄
if (!StringUtils.isEmpty(authUserDto.getAuthType()) && authUserDto.getAuthType() == 1) {
JSONObject jsonObject = wxMiniApi.authCode2Session(appId, secret, authUserDto.getCode());
if (jsonObject == null) {
throw new RuntimeException("調用微信端授權認證接口錯誤");
}
String openId = jsonObject.getString(Constant.OPEN_ID);
String sessionKey = jsonObject.getString(Constant.SESSION_KEY);
String unionId = jsonObject.getString(Constant.UNION_ID);
if (StringUtils.isEmpty(openId)) {
return result.error(jsonObject.getString(Constant.ERR_CODE), jsonObject.getString(Constant.ERR_MSG));
}
authUserDto.setOpenId(openId);
//判斷用戶表中是否存在該用戶，不存在則進行解密得到用戶信息，並進行新增用戶
Result<User> resultUser = userService.findByOpenId(openId);
if (resultUser.getModule() == null) {
String userInfo = WeChatUtil.decryptData(authUserDto.getEncryptedData(), sessionKey, authUserDto.getIv());
if (StringUtils.isEmpty(userInfo)) {
throw new RuntimeException("解密用戶信息錯誤");
}
User user = JSONObject.parseObject(userInfo, User.class);
if (user == null) {
throw new RuntimeException("填充用戶對象錯誤");
}
user.setUnionId(unionId);
userService.create(user);
authUserDto.setUserInfo(user);
} else {
authUserDto.setUserInfo(resultUser.getModule());
}
//創建token
String token = jwtTokenUtils.createToken(openId, null);
if (StringUtils.isEmpty(token)) {
throw new RuntimeException("生成token錯誤");
}
authUserDto.setToken(token);
}
return result.ok(authUserDto);
}
}
AuthUserDto.java
/**
* 認證用戶
*
* @author zhuhuix
* @date 2020-04-03
*/
@Getter
@Setter
public class AuthUserDto {
/**
* 授權類型：0--WEB端 1--微信端
*/
private Integer authType;
/**
* 用戶名
*/
private String userName;
/**
* 密碼
*/
@JsonIgnore
private String password;
/**
* 傳入參數：臨時登錄憑證
*/
private String code;
/**
* 用戶登錄id
*/
private String uuid = "";
//**********************************
//以下為微信類傳輸字段
/**
* 微信openId
*/
private String openId;
/**
* 傳入參數: 用戶非敏感信息
*/
private String rawData;
/**
* 傳入參數: 簽名
*/
private String signature;
/**
* 傳入參數: 用戶敏感信息
*/
private String encryptedData;
/**
* 傳入參數: 解密算法的向量
*/
private String iv;
/**
* 會話密鑰
*/
@JsonIgnore
private String sessionKey;
/**
* 用戶在開放平台的唯一標識符
*/
@JsonIgnore
private String unionId;
//以上為微信類傳輸字段
//**********************************
/**
* 返回:服務器jwt token
*/
private String token;
/**
* 返回：userName或openId對應的用戶
*/
private User userInfo;
@Override
public String toString() {
return "AuthUser{" +
"userName='" + userName + '\'' +
", password='" + "*********" + '\'' +
", code='" + code + '\'' +
", uuid='" + uuid + '\'' +
", openId='" + openId + '\'' +
", token='" + token + '\'' +
", userInfo=" + userInfo +
'}';
}
}
AuthController.java
/**
* api登錄授權
*
* @author zhuhuix
* @date 2020-03-30
*/
@Slf4j
@RestController
@RequestMapping("/api/auth")
@Api(tags = "系統授權接口")
public class AuthController {
private final AuthService authService;
public AuthController(AuthService authService) {
this.authService = authService;
}
@ApiOperation("登錄授權")
@PostMapping(value = "/login")
public ResponseEntity login(@RequestBody AuthUserDto authUserDto, HttpServletRequest request) {
return ResponseEntity.ok(authService.login(authUserDto, request));
}
}
三、前端實現與測試
1、編寫登錄公共函數
// 公共登錄動作
doLogin: function (callback) {
let that = this;
wx.login({
success: function (loginRes) {
//console.log(loginRes, "loginRes");
if (loginRes.code) {
/*
* @desc: 獲取用戶信息 期望數據如下
*
* @param: userInfo [Object]
* @param: rawData [String]
* @param: signature [String]
* @param: encryptedData [String]
* @param: iv [String]
**/
wx.getUserInfo({
withCredentials: true, // 非必填, 默認為true
success: function (infoRes) {
console.log("infoRes:", infoRes);
// 請求服務端的登錄接口
wx.request({
url: api.loginUrl,
method: "POST",
data: {
authType: 1, //1代表微信端登錄
code: loginRes.code, // 臨時登錄憑證
rawData: infoRes.rawData, // 用戶非敏感信息
signature: infoRes.signature, // 簽名
encryptedData: infoRes.encryptedData, // 用戶敏感信息
iv: infoRes.iv, // 解密算法的向量
token: wx.getStorageSync("loginFlag"),
},
success: function (res) {
console.log("login success:", res);
res = res.data;
if (res.success) {
that.globalData.userInfo = res.module.userInfo;
console.log(
"globalData.userInfo",
that.globalData.userInfo
);
wx.setStorageSync("userInfo", res.module.userInfo);
wx.setStorageSync("loginFlag", res.module.token);
if (callback) {
callback();
}
} else {
that.showInfo(res.errMsg);
}
},
fail: function (error) {
// 調用服務端登錄接口失敗
that.showInfo("調用接口失敗");
console.log(error);
},
});
},
fail: function (error) {
console.log(error);
// 獲取 userInfo 失敗，去檢查是否未開啟權限
wx.hideLoading();
that.showInfo("調用request接口失敗");
console.log(error);
wwx.navigateTo({
url: "/pages/index/index",
});
},
});
} else {
// 獲取 code 失敗
that.showInfo("登錄失敗");
console.log("調用wx.login獲取code失敗");
}
},
fail: function (error) {
// 調用 wx.login 接口失敗
that.showInfo("接口調用失敗");
console.log(error);
},
});
},
2、搭建登錄頁面
<view class="index-home">
<view class="userinfo">
<open-data class="userinfo-avatar" background-size="cover" type="userAvatarUrl"></open-data>
<open-data class="userinfo-nickname" type="userNickName"></open-data>
</view>
<!-- 需要使用 button 來授權登錄 -->
<view class="index-button_container">
<van-button wx:if="{{canIUse}}" type="primary" size="large" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
授權登錄
</van-button>
<view class="index-home__desc" wx:else>請升級微信版本</view>
</view>
</view>
/** index.js **/
//獲取app實例
const app = getApp();
Page({
data: {
token: wx.getStorageSync("loginFlag"),
userInfo: {},
//判斷小程序的API，回調，參數，組件等是否在當前版本可用。
canIUse: wx.canIUse("button.open-type.getUserInfo"),
// 是否登錄，根據后台返回的token判斷
hasLogin: wx.getStorageSync("loginFlag") ? true : false,
},
onLoad: function () {},
bindGetUserInfo: function (e) {
console.log("用戶按了允許授權按鈕", e.detail.userInfo);
if (e.detail.userInfo) {
//用戶按了允許授權按鈕
app.doLogin(app.switchTheTab);
} else {
//用戶按了拒絕按鈕
}
},
onShow: function () {},
});
3、登錄測試
登錄頁面
服務端返回數據：
