目錄
一、微信登錄流程簡介
二、微信用戶獲取用戶昵稱頭像和昵稱
① wx.getUserProfile ——> 獲取頭像
?三、微信登錄流程代碼詳解
1.bindgetuserinfo——>把小程序端搭建起來
① oa-mini?
2.登錄-小程序
① wx.checkSession?
② wx.login
③ wx.request
3.后臺
① 準備數(shù)據(jù)表
② 反向生成工具生成
③ 準備封裝前端傳過來的數(shù)據(jù)
④ 小程序服器配置
????????⑴導入微信小程序SDK
????????⑵ application.yml
????????⑶ WxProperties
????????⑷ WxConfig
⑤ WxAuthController
3.登錄-小程序
① login.js
② user.js
③ util.js
四、emoji的存儲?
一、微信登錄流程簡介
小程序登錄https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
說明
調(diào)用 wx.login() 獲取 臨時登錄憑證code ，并回傳到開發(fā)者服務器。
調(diào)用 auth.code2Session 接口，換取 用戶唯一標識 OpenID 、 用戶在微信開放平臺帳號下的唯一標識UnionID（若當前小程序已綁定到微信開放平臺帳號） 和 會話密鑰 session_key。
之后開發(fā)者服務器可以根據(jù)用戶標識來生成自定義登錄態(tài)，用于后續(xù)業(yè)務邏輯中前后端交互時識別用戶身份。
注意事項
會話密鑰
session_key是對用戶數(shù)據(jù)進行 加密簽名 的密鑰。為了應用自身的數(shù)據(jù)安全，開發(fā)者服務器不應該把會話密鑰下發(fā)到小程序，也不應該對外提供這個密鑰。臨時登錄憑證 code 只能使用一次
appId 作用說明
appid 是微信賬號的唯一標識，這個是固定不變的； 如果了解微信公眾號開發(fā)的就需要注意一下，小程序的appid 和 公眾號的appid 是不一致的
session_key 功能說明 微信客戶端通過wx.getUserInfo()獲取用戶的信息 后臺有時候也需要獲取微信客戶端的用戶信息，因此，就需要利用session_key這個秘鑰來從微信平臺中獲取 官方文檔原文 簽名校驗以及數(shù)據(jù)加解密涉及用戶的會話密鑰 session_key。 開發(fā)者應該事先通過 wx.login 登錄流程獲取會話密鑰 session_key 并保存在服務器。為了數(shù)據(jù)不被篡改，開發(fā)者不應該把 session_key 傳到小程序客戶端等服務器外的環(huán)境。
二、微信用戶獲取用戶昵稱頭像和昵稱
① wx.getUserProfile ——> 獲取頭像
?參考地址如下以及圖片：
wx.getUserProfile(Object object) | 微信開放文檔
當我們點擊微信直接登錄2那個按鈕時----》接著就會訪問你允許你頭像和昵稱---》直接點擊允許
我們可以去訪問一下，如下圖所示：
最終效果如下圖所示：
?三、微信登錄流程代碼詳解
1.bindgetuserinfo——>把小程序端搭建起來
① oa-mini?
打開我們小程序的后臺：導入項目ssm-oa
注意：一定要修改maven配置
修改application.yml文件里面的app-id配置
跟小程序里面的APPID對應已經(jīng)密鑰
?如果不對應的話，待會我們在小程序中是登錄不上的，如下圖所示：
啟動后臺,如下圖所示：
?返回到小程序，如下圖所示：
這樣就說明登錄成功了，如下圖所示：
最終它就會在數(shù)據(jù)庫里面新增一條數(shù)據(jù)，昵稱是我本人，如下圖所示：
2.登錄-小程序
-
執(zhí)行wx.login 登錄獲取小程序端的code
-
服務端根據(jù)code去微信端獲取session_key并且緩存；同時生成access_token 保存在小程序端，維持登錄狀態(tài)；
-
小程序端請求服務端用戶數(shù)據(jù)時，先wx.checkSession，有效就通過access_token 確定用戶，找到session_key；無效就執(zhí)行wx.login重新登錄重新生成access_token,服務端重新獲取session_key；
-
小程序端長時間不使用，服務端的session_key會失效，無法再用session_key去微信端獲取數(shù)據(jù)，需要小程序端重新執(zhí)行登錄操作； 服務端要獲取session_key 只能通過小程序端的登錄來操作；
① wx.checkSession?
檢查登錄態(tài)是否過期
② wx.login
調(diào)用接口獲取登錄憑證（code）
③ wx.request
請求自己小程序服器，并且攜帶了code,userInfo信息
3.后臺
① 準備數(shù)據(jù)表
DROP TABLE IF EXISTS `wx_user`;
CREATE TABLE `wx_user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '用戶名稱',
`password` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用戶密碼',
`gender` tinyint(3) NOT NULL DEFAULT 0 COMMENT '性別：0 未知， 1男， 1 女',
`birthday` date NULL DEFAULT NULL COMMENT '生日',
`last_login_time` datetime(0) NULL DEFAULT NULL COMMENT '最近一次登錄時間',
`last_login_ip` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '最近一次登錄IP地址',
`user_level` tinyint(3) NULL DEFAULT 0 COMMENT '用戶層級 0 普通用戶，1 VIP用戶，2 區(qū)域代理用戶',
`nickname` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用戶昵稱或網(wǎng)絡名稱',
`mobile` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用戶手機號碼',
`avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用戶頭像圖片',
`weixin_openid` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '微信登錄openid',
`status` tinyint(3) NOT NULL DEFAULT 0 COMMENT '0 可用, 1 禁用, 2 注銷',
`add_time` datetime(0) NULL DEFAULT NULL COMMENT '創(chuàng)建時間',
`update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新時間',
`deleted` tinyint(1) NULL DEFAULT 0 COMMENT '邏輯刪除',
`share_user_id` int(11) NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE,
UNIQUE INDEX `user_name`(`username`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '用戶表' ROW_FORMAT = Compact;② 反向生成工具生成
-
WxUser.java
-
WxUserMapper.java
-
WxUserMapper.xml
③ 準備封裝前端傳過來的數(shù)據(jù)
-
UserInfo
-
WxLoginInfo
④ 小程序服器配置
⑴導入微信小程序SDK
<dependency>
<groupId>com.github.binarywang</groupId>
<artifactId>weixin-java-miniapp</artifactId>
<version>3.3.0</version>
</dependency>⑵ application.yml
oa:
wx:
app-id: wxf13ed7f2838e6ea5
app-secret: 0acefe2a6804e5569ed742a210040306
msgDataFormat: JSON⑶ WxProperties
封裝oa.wx的數(shù)據(jù)
@Data
@Configuration
@ConfigurationProperties(prefix = "oa.wx")
public class WxProperties {
/**
* 設(shè)置微信小程序的appId
*/
private String appId;
/**
* 設(shè)置微信小程序的Secret
*/
private String appSecret;
/**
* 消息數(shù)據(jù)格式
*/
private String msgDataFormat;
}?⑷ WxConfig
注冊WXMaS而vice
@Configuration
public class WxConfig {
@Autowired
private WxProperties properties;
@Bean
public WxMaConfig wxMaConfig() {
WxMaInMemoryConfig config = new WxMaInMemoryConfig();
config.setAppid(properties.getAppId());
config.setSecret(properties.getAppSecret());
config.setMsgDataFormat(properties.getMsgDataFormat());
return config;
}
@Bean
public WxMaService wxMaService(WxMaConfig maConfig) {
WxMaService service = new WxMaServiceImpl();
service.setWxMaConfig(maConfig);
return service;
}
}⑤ WxAuthController
@RequestMapping("/wx/auth")
public class WxAuthController {
@Autowired
private WxMaService wxService;
@PostMapping("login_by_weixin")
public Object loginByWeixin(@RequestBody WxLoginInfo wxLoginInfo, HttpServletRequest request) {
//客戶端需攜帶code與userInfo信息
String code = wxLoginInfo.getCode();
UserInfo userInfo = wxLoginInfo.getUserInfo();
if (code == null || userInfo == null) {
return ResponseUtil.badArgument();
}
//調(diào)用微信sdk獲取openId及sessionKey
String sessionKey = null;
String openId = null;
try {
WxMaJscode2SessionResult result = this.wxService.getUserService().getSessionInfo(code);
sessionKey = result.getSessionKey();//session id
openId = result.getOpenid();//用戶唯一標識 OpenID
} catch (Exception e) {
e.printStackTrace();
}
if (sessionKey == null || openId == null) {
log.error("微信登錄,調(diào)用官方接口失?。簕}", code);
return ResponseUtil.fail();
}else{
log.info("openId={},sessionKey={}",openId,sessionKey);
}
//根據(jù)openId查詢wx_user表
//如果不存在，初始化wx_user,并保存到數(shù)據(jù)庫中
//如果存在，更新最后登錄時間
//....
// token
UserToken userToken = null;
try {
userToken = UserTokenManager.generateToken(user.getId());
} catch (Exception e) {
log.error("微信登錄失敗,生成token失?。簕}", user.getId());
e.printStackTrace();
return ResponseUtil.fail();
}
userToken.setSessionKey(sessionKey);
log.info("SessionKey={}",UserTokenManager.getSessionKey(user.getId()));
Map<Object, Object> result = new HashMap<Object, Object>();
result.put("token", userToken.getToken());
result.put("tokenExpire", userToken.getExpireTime().toString());
result.put("userInfo", userInfo);
//....
log.info("【請求結(jié)束】微信登錄,響應結(jié)果:{}", JSONObject.toJSONString(result));
return ResponseUtil.ok(result);
}3.登錄-小程序
① login.js
user.loginByWeixin(res.userInfo).then(res => {
app.globalData.hasLogin = true;
wx.navigateBack({
delta: 1
})
})② user.js
function loginByWeixin(userInfo) {
return new Promise(function(resolve, reject) {
return login().then((res) => {
//登錄遠程服務器
util.request(api.AuthLoginByWeixin, {
code: res.code,
userInfo: userInfo
}, 'POST').then(res => {
if (res.errno === 0) {
//存儲用戶信息
wx.setStorageSync('userInfo', res.data.userInfo);
wx.setStorageSync('token', res.data.token);
resolve(res);
} else {
reject(res);
}
})將userInfo，token數(shù)據(jù)保存到本地
③ util.js
function request(url, data = {}, method = "GET") {
return new Promise(function (resolve, reject) {
wx.request({
url: url,
data: data,
method: method,
timeout:6000,
header: {
'Content-Type': 'application/json',
'X-OA-Token': wx.getStorageSync('token')
},如果使用util.request函數(shù)，每次請求都會攜帶'X-OA-Token': wx.getStorageSync('token');而服器已經(jīng)保存了所有的token,所以服器通過token區(qū)分每個客戶端
四、emoji的存儲?
mysql的utf8編碼的一個字符最多3個字節(jié)，但是一個emoji表情為4個字節(jié)，所以utf8不支持存儲emoji表情。但是utf8的超集utf8mb4一個字符最多能有4字節(jié)，所以能支持emoji表情的存儲。
Linux系統(tǒng)中MySQL的配置文件為my.cnf。
Winows中的配置文件為my.ini。
my.ini
[mysql]
# 設(shè)置mysql客戶端默認字符集
default-character-set=utf8mb4
[mysqld]
#設(shè)置3306端口
port = 3306
# 設(shè)置mysql的安裝目錄
basedir=F:/Courseware/MySQL/mysql-8.0.18-winx64
# 設(shè)置mysql數(shù)據(jù)庫的數(shù)據(jù)的存放目錄
datadir=F:/Courseware/MySQL/mysql-8.0.18-winx64/data
# 允許最大連接數(shù)
max_connections=200
# 服務端使用的字符集默認為8比特編碼的latin1字符集
character-set-server=utf8mb4
# 創(chuàng)建新表時將使用的默認存儲引擎
default-storage-engine=INNODB?找到服務----》找到MySQL右鍵重新啟動
這樣我們存儲了emoji的表情包，如下圖所示：文章來源：http://www.zghlxwxcb.cn/news/detail-487295.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-487295.html
到了這里，關(guān)于（小程序）后臺交互--個人中心的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
