94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
import {
|
|
APP,
|
|
PLATFORM,
|
|
TENANT,
|
|
getQueryVariable,
|
|
} from "@/components/login/libs/common"
|
|
import { useLoginStore } from "@/components/login/store"
|
|
import { Flex } from "@mantine/core"
|
|
import { useSearchParams } from "next/navigation"
|
|
import { useCallback, useEffect, useState } from "react"
|
|
import { fetchFeishuLogin } from "../api"
|
|
import { APP_ID, APP_SECRECT, qr_load, qr_login } from "./util"
|
|
|
|
const QrLogin = ({ useUserStore }: { useUserStore: any }) => {
|
|
const fingerprint = useLoginStore.getState().fingerprint
|
|
|
|
const list = window.location.href.split("/")
|
|
const http_header =
|
|
window.location.protocol.toLowerCase() === "https:" ? "https" : "http"
|
|
const redirect_url =
|
|
http_header + "://" + list[2] + `${process.env.NEXT_PUBLIC_BASE_PATH}/login`
|
|
|
|
const searchParams = useSearchParams()
|
|
const renderCode = useCallback(async () => {
|
|
await qr_load()
|
|
qr_login(
|
|
APP_ID,
|
|
redirect_url,
|
|
getQueryVariable("app_id") || searchParams.get("app_id") || ""
|
|
)
|
|
}, [redirect_url, searchParams])
|
|
|
|
const [times, setTimes] = useState(0)
|
|
|
|
const callbackUrl = useCallback(() => {
|
|
times !== 2 && setTimes(times + 1)
|
|
}, [times])
|
|
|
|
const { setUserInfo, refreshToken } = useUserStore()
|
|
|
|
const feishuLogin = useCallback(async () => {
|
|
try {
|
|
const params = {
|
|
code: getQueryVariable("code") || "",
|
|
redirect_uri: redirect_url,
|
|
tenant: TENANT,
|
|
platform: PLATFORM,
|
|
app: APP,
|
|
fingerprint,
|
|
app_id: APP_ID,
|
|
app_secret: APP_SECRECT,
|
|
}
|
|
const res = await fetchFeishuLogin(params)
|
|
const info = res.message
|
|
setUserInfo(info.tenant, info.user_info, info.rbac)
|
|
refreshToken({
|
|
access_token: info.access_token || "",
|
|
refresh_token: info.refresh_token || "",
|
|
})
|
|
window.location.href = `${process.env.NEXT_PUBLIC_BASE_PATH}/`
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
}, [fingerprint, redirect_url, refreshToken, setUserInfo])
|
|
|
|
useEffect(() => {
|
|
if (times === 1) {
|
|
renderCode()
|
|
if (getQueryVariable("code")) {
|
|
fingerprint && feishuLogin()
|
|
}
|
|
}
|
|
}, [feishuLogin, fingerprint, renderCode, times])
|
|
|
|
useEffect(() => {
|
|
callbackUrl()
|
|
}, [callbackUrl])
|
|
|
|
return (
|
|
<Flex align="center" justify="center" w={"100%"} h={"100%"}>
|
|
<div
|
|
id={"login_container"}
|
|
style={{
|
|
width: "200px",
|
|
height: "210px",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
scale: 0.7,
|
|
}}></div>
|
|
</Flex>
|
|
)
|
|
}
|
|
export default QrLogin
|