Việc xác thực người dùng ở ứng dụng GODY sẽ sử dụng JWT Json Web Token, khi người dùng thực hiện đăng nhập với số điện thoại và mật khẩu thành công, hệ thống sẽ thực hiện tạo access_token gửi về cho client cụ thể là ứng dụng người dùng lưu trữ.
Hình 3.22.Màn hình đăng nhập
Với những API gửi lên hệ thống tiếp theo cần xác thực và bảo vệ, thì chúng ta sẽ yêu cầu người dùng truyền lên access token mà hệ thống đã gửi ở lần đăng nhập gần nhất để phía hệ thống kiểm tra xem token này có hợp lệ không thì mới cho API hoạt động.
exportconstloginApp = async (phone: string, password: string): Promise<ObjectResponse<Auth> |
ErrorResponse> => { try {
constresponse = awaitpost<ObjectResponse<Auth>>('public/user/login', { phone, password }); AsyncStorage.setItem('token', response.data.result.token);
returnresponse.data; } catch (error: any) {
returnhandleServerError(error); }
Hình 3.23. Màn hình đăng ký
Đối với chức năng đăng ký, người dùng sẽ được yêu cầu đăng ký với số điện thoại, sau khi nhập số điện thoại, hệ thống sẽ gửi 1 mã OTP xác thực đến số điện thoại này, việc của người dùng là sẽ xác thực mã OTP này, nếu hợp lệ sẽ thực hiện tạo tài khoản cho người dùng với thông tin đăng nhập sẽ được người dùng nhập, còn ngược lại nếu không hợp lệ sẽ yêu cầu người dùng thực hiện lại quá trình này.
constonSignUp = async () => { setLoading(true);
if (phone.length != 10) {
setError('Input phone number is not precise.'); setPhoneNumber('');
setLoading(false); } else {
constresponse = awaitsendOTP(phone); if (response.__typename !== 'ErrorResponse') { setTimeout(() => {
setLoading(false);
navigation.navigate("VerifyCode", { phoneNumber:phone
}); }, 1500); } setLoading(false); } }
constonVerifyCode = async () => { setLoading(true);
if (verifyCode.length < 4) { setLoading(false); Alert.alert( "",
"Verified code must not be empty or less than 4 characters!", [{ text:"OK", onPress: () => { setVerifyCode('') } }]
); } else {
constresponse = awaitverifyOTP(phoneNumber, verifyCode); if (response.__typename !== 'ErrorResponse') {
setTimeout(() => { setLoading(false);
navigation.navigate("Register", { phoneNumber:phoneNumber }); }, 1500); } setLoading(false); } }
Sau khi hoàn tất đăng ký, ứng dụng sẽ chuyển người dùng quay trở lại trang đăng nhập.