目錄
- 一、登錄流程
- 二、后端實作
- 1、SpringBoot專案結構樹
- 2、實作auth.code2Session 介面的封裝
- 3、建立用戶資訊表及用戶增刪改查的管理
- 4、實作登錄認證及令牌生成
- 三、前端實作與測驗
- 1、撰寫登錄公共函式
- 2、搭建登錄頁面
- 3、登錄測驗
一、登錄流程
首先參考小程式官方檔案中的流程圖：
根據流程圖描述，主要步驟有以下幾步
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 = "https://www.cnblogs.com/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 >
<view >
<open-data background-size="cover" type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
</view>
<!-- 需要使用 button 來授權登錄 -->
<view >
<van-button wx:if="{{canIUse}}" type="primary" size="large" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
授權登錄
</van-button>
<view 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,
},
onl oad: function () {},
bindGetUserInfo: function (e) {
console.log("用戶按了允許授權按鈕", e.detail.userInfo);
if (e.detail.userInfo) {
//用戶按了允許授權按鈕
app.doLogin(app.switchTheTab);
} else {
//用戶按了拒絕按鈕
}
},
onShow: function () {},
});
3、登錄測驗
登錄頁面
服務端回傳資料：
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/176785.html
標籤：Java
上一篇：如何短時間內快速通過Java面試