Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
F
finwise-miniapp-fe
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ThinhNC
finwise-miniapp-fe
Commits
d8cbd2b9
Commit
d8cbd2b9
authored
Aug 29, 2026
by
ThinhNC
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat(auth): integrate Zalo token-based phone auth and clean up login button UI
parent
e693bcf4
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
51 additions
and
26 deletions
+51
-26
use-zalo-login.ts
src/hooks/use-zalo-login.ts
+45
-9
login.tsx
src/pages/auth/login.tsx
+1
-16
auth.service.ts
src/services/auth.service.ts
+5
-1
No files found.
src/hooks/use-zalo-login.ts
View file @
d8cbd2b9
import
{
useState
}
from
"react"
;
import
{
getAccessToken
,
getPhoneNumber
}
from
"zmp-sdk"
;
import
{
getAccessToken
,
getPhoneNumber
,
getUserInfo
,
getUserID
}
from
"zmp-sdk"
;
import
{
useNavigate
,
useSnackbar
}
from
"zmp-ui"
;
import
{
authService
}
from
"@/services/auth.service"
;
import
{
useAuthStore
}
from
"@/stores/auth-store"
;
...
...
@@ -27,13 +27,42 @@ export function useZaloLogin(): UseZaloLoginReturn {
throw
new
Error
(
t
(
"auth.zalo.tokenFailed"
));
}
// 2. Lấy số điện thoại từ Zalo SDK
// `number` là field deprecated nhưng trả về SĐT thực trên Mini App
// `token` là flow mới: cần gửi lên server Zalo để đổi lấy SĐT
const
phoneResult
=
await
getPhoneNumber
();
const
phoneNumber
=
phoneResult
.
number
;
// 2. Lấy ID và thông tin người dùng từ client SDK
let
zaloId
:
string
|
undefined
;
let
name
:
string
|
undefined
;
let
avatar
:
string
|
undefined
;
if
(
!
phoneNumber
)
{
try
{
const
id
=
await
getUserID
();
if
(
id
)
zaloId
=
id
;
}
catch
(
idErr
)
{
console
.
warn
(
"getUserID error:"
,
idErr
);
}
try
{
const
infoResult
=
await
getUserInfo
({
autoRequestPermission
:
true
});
if
(
infoResult
?.
userInfo
)
{
if
(
infoResult
.
userInfo
.
id
)
zaloId
=
infoResult
.
userInfo
.
id
;
name
=
infoResult
.
userInfo
.
name
;
avatar
=
infoResult
.
userInfo
.
avatar
;
}
}
catch
(
infoErr
)
{
console
.
warn
(
"getUserInfo error or dismissed:"
,
infoErr
);
}
// 3. Lấy số điện thoại từ Zalo SDK (lấy mã token bảo mật 2 phút để backend giải mã)
let
phoneToken
:
string
|
undefined
;
let
phoneNumber
:
string
|
undefined
;
try
{
const
phoneResult
=
await
getPhoneNumber
();
phoneToken
=
phoneResult
.
token
;
phoneNumber
=
phoneResult
.
number
;
}
catch
(
phoneErr
)
{
console
.
warn
(
"getPhoneNumber error:"
,
phoneErr
);
}
if
(
!
phoneToken
&&
!
phoneNumber
)
{
openSnackbar
({
type
:
"warning"
,
text
:
t
(
"auth.zalo.phoneDenied"
),
...
...
@@ -41,8 +70,15 @@ export function useZaloLogin(): UseZaloLoginReturn {
return
;
}
// 3. Gửi lên backend để xác thực + đăng nhập/tạo tài khoản
const
response
=
await
authService
.
loginWithZalo
({
accessToken
,
phoneNumber
});
// 4. Gửi lên backend để xác thực + giải mã SĐT + đăng nhập/tạo tài khoản
const
response
=
await
authService
.
loginWithZalo
({
accessToken
,
phoneToken
,
phoneNumber
,
zaloId
,
name
,
avatar
,
});
if
(
response
.
success
&&
response
.
data
)
{
setAuth
(
...
...
src/pages/auth/login.tsx
View file @
d8cbd2b9
...
...
@@ -78,22 +78,7 @@ const LoginPage: React.FC = () => {
<
span
>
{
t
(
"auth.zalo.loggingIn"
)
}
</
span
>
</>
)
:
(
<>
<
svg
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
fill=
"none"
xmlns=
"http://www.w3.org/2000/svg"
aria
-
hidden=
"true"
>
<
rect
width=
"24"
height=
"24"
rx=
"6"
fill=
"white"
/>
<
text
x=
"3"
y=
"18"
fontSize=
"14"
fontWeight=
"bold"
fill=
"#0068FF"
>
Z
</
text
>
</
svg
>
<
span
>
{
t
(
"auth.zalo.loginButton"
)
}
</
span
>
</>
<
span
>
{
t
(
"auth.zalo.loginButton"
)
}
</
span
>
)
}
</
button
>
...
...
src/services/auth.service.ts
View file @
d8cbd2b9
...
...
@@ -74,7 +74,11 @@ export const authService = {
async
loginWithZalo
(
data
:
{
accessToken
:
string
;
phoneNumber
:
string
;
phoneToken
?:
string
;
phoneNumber
?:
string
;
zaloId
?:
string
;
name
?:
string
;
avatar
?:
string
;
}):
Promise
<
ApiResponse
<
{
user
:
User
;
accessToken
?:
string
;
refreshToken
?:
string
}
>>
{
const
response
=
await
apiClient
.
post
(
"/auth/zalo-login"
,
data
);
return
response
.
data
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment