Last October, the school organized an event that required the implementation of a mountain climbing festival check-in WeChat webpage within 7 days, including features like location check-in, leaderboards, and lucky draws. In fact, I completed and iterated it to stability within a week, but at that time, this blog had not been fully restructured, so there was no record. Now, the new phase of the event is about to start, and the development requirements for new features and the management panel are nearing completion. However, it is not finished yet (it has been a hard constraint for me for a long time), so I will share the core functionality implementation ideas.
Implementation of Location Area and Valid Range#
The most important feature is to determine the check-in range. My idea was to achieve this at the lowest cost without high precision requirements, so I confirmed a central point and then calculated the distance using the obtained coordinates. If it is less than the required distance, it is considered valid. The implementation is roughly as follows:
private boolean isWithinCheckinRange(BigDecimal latitude, BigDecimal longitude, int type) {
// Get the latitude and longitude of the check-in point from the checkpoint table
CheckPoint checkPoint = checkPointService.getById(type);
BigDecimal checkinLatitude = checkPoint.getLatitude();
BigDecimal checkinLongitude = checkPoint.getLongitude();
// Calculate the distance between the provided coordinates and the check-in point
double distance = calculateDistance(latitude, longitude, checkinLatitude, checkinLongitude);
// Check if the distance is within 50 meters
return distance <= 50;
}
private double calculateDistance(BigDecimal lat1, BigDecimal lon1, BigDecimal lat2, BigDecimal lon2) {
final int R = 6371000; // Earth's radius in meters
double latDistance = Math.toRadians(lat2.subtract(lat1).doubleValue());
double lonDistance = Math.toRadians(lon2.subtract(lon1).doubleValue());
double a = Math.sin(latDistance / 2) * Math.sin(latDistance / 2)
+ Math.cos(Math.toRadians(lat1.doubleValue())) * Math.cos(Math.toRadians(lat2.doubleValue()))
* Math.sin(lonDistance / 2) * Math.sin(lonDistance / 2);
double c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return R * c; // Distance in meters
}
The problem arises because, in China, for privacy reasons, the gcj02 coordinate system is used, while only the universal wgs84 coordinates can be used to calculate distances. Fortunately, there are many existing open-source algorithm implementations in this area, and we can do it like this:
const a = 6378245.0;
const ee = 0.00669342162296594323;
function outOfChina(lng: number, lat: number): boolean {
return (lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271);
}
function transformLat(x: number, y: number): number {
let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;
return ret;
}
function transformLng(x: number, y: number): number {
let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;
return ret;
}
export function wgs84ToGcj02(lng: number, lat: number): [number, number] {
if (outOfChina(lng, lat)) {
return [lng, lat];
}
let dLat = transformLat(lng - 105.0, lat - 35.0);
let dLng = transformLng(lng - 105.0, lat - 35.0);
const radLat = lat / 180.0 * Math.PI;
let magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
const sqrtMagic = Math.sqrt(magic);
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI);
dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI);
const mgLat = lat + dLat;
const mgLng = lng + dLng;
return [mgLng, mgLat];
}
At this point, we only need to traverse each point and the range of submitted data. However, to prevent putting computational pressure on the backend, we handle the calculations in two aspects.
First, for marking the range on the map, the frontend will pull the check-in point information, so we can utilize this to perform a distance calculation on the frontend. Only within the range will check-in be allowed, and we will also specify which check-in point it is, thus distributing the computational pressure. This is how it looks:
matchedPoint.value = checkPoints.value.find(point => {
const distance = AMap.GeometryUtil.distance([res.longitude, res.latitude], [point.longitude, point.latitude]);
return distance <= 50;
});
if (matchedPoint.value) {
if (currentStep.value === 0 || !matchedPoint.value.isEnd) {
form.value.type = matchedPoint.value.id;
}
if (currentStep.value === 1 && !matchedPoint.value.isEnd) {
showNotify({type: 'warning', message: 'Not within the range of the endpoint check-in point, please move closer to the endpoint check-in point'});
}
if (currentStep.value === 0 && matchedPoint.value.isEnd) {
showNotify({type: 'warning', message: 'Not within the range of the starting point check-in point, please move closer to the starting point check-in point'});
}
canCheckIn.value = true;
} else {
canCheckIn.value = false;
showNotify({type: 'warning', message: 'Not within the check-in point range, please move closer to the check-in point'});
}
The backend will then prepare to calculate something like this, so it only needs to check if it meets the check-in progress and range:
package com.csu54sher.csudynamicyouth.dto;
@Data
public class CheckInInfo {
private BigDecimal latitude;
private BigDecimal longitude;
// This type must correspond to the checkpoint's id
private int type;
}
Simple Encryption and Anti-Tampering Measures#
I can't go into too much detail here, as the event hasn't started yet, but in practice... emm most people are playing with virtual positioning, which fundamentally makes the data unreliable. Moreover, our software carrier is still a WeChat webpage, and there are no preventive methods (actually, there are a few that were tested in gray, and I will see the effects using a tagging method).
First, to prevent replay attacks, our core latitude and longitude data is encrypted using an algorithm, and a state with a timestamp is also calculated:
package com.csu54sher.csudynamicyouth.dto;
import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.NotNull;
import lombok.Data;
/**
* @author grtsinry43
* @date 2024/10/19 10:29
* @description Love can withstand the long years
*/
@Data
public class CheckInRequest {
@NotNull
@NotBlank
private String data;
@NotNull
@NotBlank
private String state;
@NotNull
@NotBlank
private String timestamp;
}
Simple Implementation of Face-to-Face Team Formation#
emm... this feature was cut out ah ah ah ah ah ah ah ah ah ah ah!!!
The core functionality of this is that initiating a team formation will generate a team code. Within a specified time, others can enter the same number to join, somewhat similar to creating a group face-to-face.
Generation and Storage#
The team code is a randomly generated four-digit number. After ensuring it is unique, it is inserted into the database and Redis, with a validity period of five minutes. Before expiration, requests will always retrieve it from Redis, and then the user team object will be inserted/deleted.
The specific implementation is as follows:
public void joinTeam(String teamCode, Long userId) {
// If it doesn't exist, it's an error
TempTeam team = lambdaQuery().eq(TempTeam::getPwd, teamCode).one();
if (team == null) {
throw new BusinessException(ErrorCode.NOT_FOUND);
}
// If it's gone, it's expired
TempTeam redisTeam = (TempTeam) redisService.get("temp_team_" + team.getId());
if (redisTeam == null) {
throw new BusinessException(ErrorCode.CODE_HAS_EXPIRED);
}
// Prevent duplicate insertion
boolean isMember = userTempTeamService.lambdaQuery()
.eq(UserTempTeam::getUserId, userId)
.eq(UserTempTeam::getTempTeamId, redisTeam.getId())
.count() > 0;
if (isMember) {
throw new BusinessException(ErrorCode.ALREADY_IN_TEAM);
}
UserTempTeam userTempTeam = new UserTempTeam();
userTempTeam.setTempTeamId(redisTeam.getId());
userTempTeam.setUserId(userId);
userTempTeamService.save(userTempTeam);
// This notification is used for real-time refresh
notifyTeamUpdate(redisTeam.getId());
}
Real-Time List Refresh#
The team list also requires real-time updates, so we need a server-sent event (SSE) to achieve this:
First, the event triggering part:
public void addEmitter(Long teamId, SseEmitter emitter) {
emitters.put(teamId, emitter);
}
public void removeEmitter(Long teamId) {
emitters.remove(teamId);
}
public void notifyTeamUpdate(Long teamId) {
SseEmitter emitter = emitters.get(teamId);
if (emitter != null) {
try {
TeamInfo teamInfo = getTeamInfoById(teamId, null);
emitter.send(SseEmitter.event().name("teamUpdate").data(teamInfo));
} catch (Exception e) {
emitters.remove(teamId);
}
}
}
Then provide an API endpoint for server events:
@GetMapping(value = "/stream/{id}", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public ResponseEntity<SseEmitter> streamTeamUpdates(@PathVariable Long id) {
TempTeam team = (TempTeam) redisService.get("temp_team_" + id);
if (team == null) {
throw new BusinessException(ErrorCode.NOT_FOUND);
}
SseEmitter emitter = new SseEmitter();
tempTeamService.addEmitter(id, emitter);
emitter.onCompletion(() -> tempTeamService.removeEmitter(id));
emitter.onTimeout(() -> tempTeamService.removeEmitter(id));
emitter.onError((ex) -> tempTeamService.removeEmitter(id));
// Heartbeat to keep the connection alive
Executors.newSingleThreadScheduledExecutor().scheduleAtFixedRate(() -> {
try {
emitter.send(SseEmitter.event().name("heartbeat").data("keep-alive"));
} catch (Exception e) {
tempTeamService.removeEmitter(id);
}
}, 0, 3, TimeUnit.SECONDS);
// Actively disconnect and mark as finished when expired
Executors.newSingleThreadScheduledExecutor().scheduleAtFixedRate(() -> {
if (redisService.get("temp_team_" + id) == null) {
try {
emitter.send(SseEmitter.event().name("finish").data("Team expired"));
emitter.complete();
} catch (Exception e) {
tempTeamService.removeEmitter(id);
}
}
}, 0, 1, TimeUnit.SECONDS);
return ResponseEntity.ok(emitter);
}
Simple Summary#
That's about it. After passing the network security assessment, we finally migrated to the campus, with unified identity management and authentication measures. Additionally, the management side has gone from non-existent to established... I hope this project can continue to be used without issues, as not having problems is the greatest luck. Writing CRUD in a short time feels overwhelming.