Add OAuth 2.0 authorization flow documentation and troubleshooting guide

- 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.
This commit is contained in:
NanGua-QWQ
2026-03-30 19:15:57 +08:00
parent 9c3e84d912
commit 9f2bf644b5
7 changed files with 2424 additions and 0 deletions
+49
View File
@@ -0,0 +1,49 @@
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>
)
}