목차
1. 사용자 닉네임 및 아바타 획득
로그인 프로세스
Mini Program은 WeChat에서 제공하는 공식 로그인 기능을 통해 WeChat에서 제공하는 사용자 ID를 쉽게 얻을 수 있으며 Mini Program 내에서 사용자 시스템을 빠르게 구축할 수 있습니다.
설명하다
wx.login()을 호출하여 임시 로그인 자격 증명 코드를 얻고 개발자 서버로 다시 보냅니다.
auth.code2Session 인터페이스를 호출하여 사용자의 고유 식별자 OpenID, WeChat 개방형 플랫폼 계정 하의 사용자 고유 식별자 UnionID (현재 미니 프로그램이 WeChat 개방형 플랫폼 계정에 연결된 경우) 및 세션 키 session_key .
이후에 개발자 서버는 사용자 ID에 따라 사용자 정의 로그인 상태를 생성할 수 있으며, 이는 후속 비즈니스 로직에서 프런트 엔드 및 백 엔드 상호 작용 중에 사용자 ID를 식별하는 데 사용됩니다.
지침
세션 키
session_key는 사용자 데이터에 암호로 서명하는 키입니다 . 응용 프로그램 자체 데이터를 보호하기 위해 개발자 서버는 세션 키를 애플릿에 전달하거나 이 키를 외부 세계에 제공해서는 안 됩니다 .임시 로그인 자격 증명 코드는 한 번만 사용할 수 있습니다.
appId 설명
appid는 고정된 WeChat 계정의 고유 식별자입니다. WeChat 공식 계정의 발전을 이해한다면 주의해야 합니다. 애플릿의 appid와 공식 계정의 appid가 일치하지 않습니다.
session_key 기능 설명 위챗 클라이언트는 wx.getUserInfo()를 통해 사용자 정보를 얻습니다.백그라운드는 때때로 위챗 클라이언트의 사용자 정보를 얻어야 합니다.따라서 위챗 플랫폼에서 공식 문서를 얻으려면 비밀 키 session_key를 사용해야 합니다. . 서명 확인 및 데이터 암호화 및 암호 해독에는 사용자의 세션 키 session_key가 포함됩니다. 개발자는 미리 wx.login 로그인 과정을 통해 session_key 세션키를 획득하여 서버에 저장해야 합니다. 데이터를 변조하지 않으려면 개발자는 애플릿 클라이언트와 같은 서버 외부 환경에 session_key를 전달하지 않아야 합니다.
둘, 로그인 애플릿
애플릿의 코드를 얻기 위해 로그인하려면 wx.login을 실행하십시오.
서버는 코드에 따라 WeChat에서 session_key를 가져와 캐시하고 동시에 access_token을 생성하여 애플릿에 저장하여 로그인 상태를 유지합니다.
애플릿이 서버 사용자 데이터를 요청할 때 먼저 wx.checkSession이 유효하면 access_token을 통해 사용자를 확인하고 session_key를 찾고, 유효하지 않으면 wx.login을 실행하여 다시 로그인하여 access_token을 재생성하고 서버는 session_key를 다시 얻습니다.
미니 프로그램을 오랫동안 사용하지 않으면 서버의 session_key가 무효화되고 session_key는 더 이상 WeChat에서 데이터를 얻는 데 사용할 수 없으며 미니 프로그램은 다시 로그인 작업을 수행해야 합니다. 서버는 다음을 수행할 수 있습니다. 미니 프로그램의 로그인을 통해서만 session_key를 얻습니다.
wx.check세션
로그인 상태가 만료되었는지 확인
wx.login
인터페이스를 호출하여 로그인 자격 증명(코드)을 얻습니다.
wx.request
나만의 미니 프로그램 서버를 요청하고 코드, userInfo 정보를 나르십시오.
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 및 토큰 데이터를 로컬에 저장
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 함수를 사용하면 각 요청은 'X-OA-Token': wx.getStorageSync('token');을 전달하며 서버는 모든 토큰을 저장하므로 서버는 각 클라이언트를 토큰으로 구분합니다.
이모티콘
Mysql의 utf8은 최대 3바이트로 문자를 인코딩하지만 이모티콘 표현은 4바이트이므로 utf8은 이모티콘 표현 저장을 지원하지 않습니다. 그러나 utf8의 상위 집합인 utf8mb4는 문자당 최대 4바이트를 가질 수 있으므로 이모지 표현의 저장을 지원할 수 있습니다.
Linux 시스템에서 MySQL의 구성 파일은 my.cnf입니다.
Windows의 구성 파일은 my.ini입니다.
[mysql]
# 设置mysql客户端默认字符集 default-character-set=utf8mb4 [mysqld] #设置3306端口 port = 3306 # 设置mysql的安装目录 basedir=D:\\tools\\mysql-5.7.23-winx64 # 设置mysql数据库的数据的存放目录 datadir=D:\\tools\\mysql-5.7.23-winx64\\data # 允许最大连接数 max_connections=200 # 服务端使用的字符集默认为8比特编码的latin1字符集 character-set-server=utf8mb4 # 创建新表时将使用的默认存储引擎 default-storage-engine=INNODB
셋, 배경
미니 프로그램 서버 구성
WeChat Mini 프로그램 SDK 가져오기
<dependency>
<groupId>com.github.binarywang</groupId>
<artifactId>weixin-java-miniapp</artifactId>
<version>3.3.0</version>
</dependency>application.yml
oa:
wx:
app-id: wxf23b28b5e4ea4d6a
app-secret: 212621faa31cdf0691367ea45b2b6041
msgDataFormat: JSONWx속성
oa.wx의 데이터 캡슐화
@Data
@Configuration
@ConfigurationProperties(prefix = "oa.wx")
public class WxProperties {
/**
* 设置微信小程序的appId
*/
private String appId;
/**
* 设置微信小程序的Secret
*/
private String appSecret;
/**
* 消息数据格式
*/
private String msgDataFormat;
}WxConfig
WxMaService 등록
@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();
}
//调用微信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("微信登录,调用官方接口失败：{}", code);
return ResponseUtil.fail();
}else{
log.info("openId={},sessionKey={}",openId,sessionKey);
}
//根据openId查询wx_user表
//如果不存在，初始化wx_user,并保存到数据库中
//如果存在，更新最后登录时间
//....
// 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("【请求结束】微信登录,响应结果:{}", JSONObject.toJSONString(result));
return ResponseUtil.ok(result);
}클라이언트에 대한 응답 데이터는 다음과 같습니다. 토큰 userInfo