mirror of
https://github.com/SECTL/SecScore.git
synced 2026-07-19 19:04:23 +08:00
NanGua-QWQ
9f2bf644b5
- Created AUTH/OAUTH_FLOW.MD to detail the OAuth 2.0 authorization process for SECTL Auth, including flow diagrams, detailed steps, token management, and security recommendations. - Added AUTH/TROUBLESHOOTING.md to provide a comprehensive troubleshooting guide for common issues encountered during the OAuth process, covering authorization, token exchange, user info retrieval, remote logout, platform management, and network/CORS issues. - Implemented OAuthCallback and OAuthLogin components in React to handle OAuth login flow, including deep linking and token exchange.
50 lines
1.0 KiB
TypeScript
50 lines
1.0 KiB
TypeScript
import { useEffect } from "react"
|
|
import { useSearchParams, useNavigate } from "react-router-dom"
|
|
|
|
export function OAuthCallback() {
|
|
const [searchParams] = useSearchParams()
|
|
const navigate = useNavigate()
|
|
|
|
useEffect(() => {
|
|
const code = searchParams.get("code")
|
|
const error = searchParams.get("error")
|
|
const errorDescription = searchParams.get("error_description")
|
|
|
|
if (error) {
|
|
window.postMessage(
|
|
{
|
|
error: errorDescription || error,
|
|
},
|
|
window.location.origin
|
|
)
|
|
navigate("/")
|
|
return
|
|
}
|
|
|
|
if (code) {
|
|
window.postMessage(
|
|
{
|
|
code,
|
|
},
|
|
window.location.origin
|
|
)
|
|
navigate("/")
|
|
}
|
|
}, [searchParams, navigate])
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
height: "100vh",
|
|
background: "var(--ss-bg-color)",
|
|
color: "var(--ss-text-main)",
|
|
}}
|
|
>
|
|
<div>正在处理登录...</div>
|
|
</div>
|
|
)
|
|
}
|