Refactor app instance to Keycloak SSO
This commit is contained in:
@ -3,23 +3,45 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
import { buildAuthPortalUrl } from '@/lib/auth-portal';
|
||||
import { startKeycloakLogin } from '@/lib/keycloak-oidc';
|
||||
import { pickAppText } from '@/lib/i18n/core';
|
||||
import { useAppI18n } from '@/lib/i18n/provider';
|
||||
|
||||
export default function LoginRedirectPage() {
|
||||
const { locale } = useAppI18n();
|
||||
const searchParams = useSearchParams();
|
||||
const loggedOut = searchParams?.get('logged_out') === '1';
|
||||
|
||||
useEffect(() => {
|
||||
if (loggedOut) return;
|
||||
const nextPath = searchParams?.get('next') || '/';
|
||||
window.location.replace(buildAuthPortalUrl('/login', nextPath));
|
||||
}, [searchParams]);
|
||||
void startKeycloakLogin(nextPath);
|
||||
}, [loggedOut, searchParams]);
|
||||
|
||||
if (loggedOut) {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col items-center justify-center gap-4 px-4 text-center">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{pickAppText(locale, '你已退出登录。', 'You have signed out.')}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-full bg-primary px-5 py-2 text-sm font-semibold text-primary-foreground"
|
||||
onClick={() => {
|
||||
const nextPath = searchParams?.get('next') || '/';
|
||||
void startKeycloakLogin(nextPath);
|
||||
}}
|
||||
>
|
||||
{pickAppText(locale, '重新登录', 'Sign in again')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center px-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{pickAppText(locale, '正在跳转到登录门户...', 'Redirecting to the sign-in portal...')}
|
||||
{pickAppText(locale, '正在跳转到 Keycloak 登录...', 'Redirecting to Keycloak sign-in...')}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
import { buildAuthPortalUrl } from '@/lib/auth-portal';
|
||||
import { startKeycloakLogin } from '@/lib/keycloak-oidc';
|
||||
import { pickAppText } from '@/lib/i18n/core';
|
||||
import { useAppI18n } from '@/lib/i18n/provider';
|
||||
|
||||
@ -13,13 +13,13 @@ export default function RegisterRedirectPage() {
|
||||
|
||||
useEffect(() => {
|
||||
const nextPath = searchParams?.get('next') || '/mcp';
|
||||
window.location.replace(buildAuthPortalUrl('/register', nextPath));
|
||||
void startKeycloakLogin(nextPath);
|
||||
}, [searchParams]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center px-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{pickAppText(locale, '正在跳转到注册门户...', 'Redirecting to the sign-up portal...')}
|
||||
{pickAppText(locale, '正在跳转到 Keycloak 登录...', 'Redirecting to Keycloak sign-in...')}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
68
app-instance/frontend/app/auth/callback/page.tsx
Normal file
68
app-instance/frontend/app/auth/callback/page.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
import {
|
||||
clearLoginState,
|
||||
exchangeKeycloakCallback,
|
||||
loadLoginState,
|
||||
parseAuthCallbackUrl,
|
||||
} from '@/lib/keycloak-oidc';
|
||||
import { getMe } from '@/lib/api';
|
||||
import { pickAppText } from '@/lib/i18n/core';
|
||||
import { useAppI18n } from '@/lib/i18n/provider';
|
||||
import { useChatStore } from '@/lib/store';
|
||||
|
||||
export default function AuthCallbackPage() {
|
||||
const { locale } = useAppI18n();
|
||||
const router = useRouter();
|
||||
const setUser = useChatStore((s) => s.setUser);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
const completeLogin = async () => {
|
||||
const callback = parseAuthCallbackUrl();
|
||||
if (callback.error) {
|
||||
throw new Error(callback.errorDescription || callback.error);
|
||||
}
|
||||
if (!callback.code || !callback.state) {
|
||||
throw new Error('Missing Keycloak callback code or state');
|
||||
}
|
||||
const loginState = loadLoginState();
|
||||
if (!loginState || loginState.state !== callback.state) {
|
||||
throw new Error('Invalid Keycloak login state');
|
||||
}
|
||||
|
||||
const result = await exchangeKeycloakCallback({ code: callback.code, state: loginState });
|
||||
clearLoginState();
|
||||
const user = await getMe().catch(() => result.user);
|
||||
if (cancelled) return;
|
||||
setUser(user);
|
||||
router.replace(loginState.nextPath || '/');
|
||||
};
|
||||
|
||||
completeLogin().catch((exc) => {
|
||||
clearLoginState();
|
||||
if (!cancelled) {
|
||||
setError(exc instanceof Error ? exc.message : String(exc));
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [router, setUser]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center px-4">
|
||||
<div className="max-w-lg text-center text-sm text-muted-foreground">
|
||||
{error
|
||||
? pickAppText(locale, `登录失败：${error}`, `Sign-in failed: ${error}`)
|
||||
: pickAppText(locale, '正在完成登录...', 'Completing sign-in...')}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,146 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { clearTokens, consumeHandoffCode, getMe, setTokens } from '@/lib/api';
|
||||
import { pickAppText } from '@/lib/i18n/core';
|
||||
import { useAppI18n } from '@/lib/i18n/provider';
|
||||
import { useChatStore } from '@/lib/store';
|
||||
|
||||
const HANDOFF_STATE_KEY = 'beaver_handoff_state';
|
||||
|
||||
type HandoffState = {
|
||||
code?: string;
|
||||
accessToken?: string;
|
||||
refreshToken?: string;
|
||||
nextPath?: string;
|
||||
};
|
||||
|
||||
function parseHandoffStateFromLocation(): HandoffState {
|
||||
if (typeof window === 'undefined') {
|
||||
return {};
|
||||
}
|
||||
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
const code = query.get('code') || '';
|
||||
const nextFromQuery = query.get('next') || '';
|
||||
if (code) {
|
||||
return {
|
||||
code,
|
||||
nextPath: nextFromQuery || '/',
|
||||
};
|
||||
}
|
||||
|
||||
const rawHash = window.location.hash.startsWith('#')
|
||||
? window.location.hash.slice(1)
|
||||
: window.location.hash;
|
||||
const hash = new URLSearchParams(rawHash);
|
||||
const accessToken = hash.get('access_token') || '';
|
||||
if (accessToken) {
|
||||
return {
|
||||
accessToken,
|
||||
refreshToken: hash.get('refresh_token') || '',
|
||||
nextPath: hash.get('next') || '/',
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
}
|
||||
|
||||
function loadHandoffState(): HandoffState {
|
||||
if (typeof window === 'undefined') {
|
||||
return {};
|
||||
}
|
||||
|
||||
const fromLocation = parseHandoffStateFromLocation();
|
||||
if (fromLocation.code || fromLocation.accessToken) {
|
||||
sessionStorage.setItem(HANDOFF_STATE_KEY, JSON.stringify(fromLocation));
|
||||
return fromLocation;
|
||||
}
|
||||
|
||||
const cached = sessionStorage.getItem(HANDOFF_STATE_KEY) || '';
|
||||
if (!cached) {
|
||||
return {};
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(cached) as HandoffState;
|
||||
return parsed && typeof parsed === 'object' ? parsed : {};
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function clearHandoffState(): void {
|
||||
if (typeof window === 'undefined') {
|
||||
return;
|
||||
}
|
||||
sessionStorage.removeItem(HANDOFF_STATE_KEY);
|
||||
}
|
||||
|
||||
export default function HandoffPage() {
|
||||
const { locale } = useAppI18n();
|
||||
const router = useRouter();
|
||||
const setUser = useChatStore((s) => s.setUser);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
const run = async () => {
|
||||
const handoff = loadHandoffState();
|
||||
const nextPath = handoff.nextPath || '/';
|
||||
|
||||
if (!handoff.code && !handoff.accessToken) {
|
||||
clearHandoffState();
|
||||
setError(pickAppText(locale, '缺少登录凭证，无法进入目标前端。', 'Missing login credentials. Unable to enter the target frontend.'));
|
||||
return;
|
||||
}
|
||||
|
||||
window.history.replaceState(null, '', '/handoff');
|
||||
|
||||
try {
|
||||
const tokenPayload = handoff.accessToken
|
||||
? {
|
||||
access_token: handoff.accessToken,
|
||||
refresh_token: handoff.refreshToken || '',
|
||||
}
|
||||
: await consumeHandoffCode(handoff.code || '');
|
||||
|
||||
setTokens(tokenPayload.access_token, tokenPayload.refresh_token || '');
|
||||
|
||||
const me = await getMe();
|
||||
if (cancelled) return;
|
||||
clearHandoffState();
|
||||
setUser(me);
|
||||
router.replace(nextPath.startsWith('/') ? nextPath : '/');
|
||||
} catch (err) {
|
||||
clearHandoffState();
|
||||
clearTokens();
|
||||
if (cancelled) return;
|
||||
setError(err instanceof Error ? err.message : pickAppText(locale, '目标前端登录失败', 'Target frontend sign-in failed'));
|
||||
}
|
||||
};
|
||||
|
||||
void run();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [router, setUser]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center px-4">
|
||||
<div className="text-center">
|
||||
<h1 className="text-xl font-semibold">{pickAppText(locale, '正在进入目标前端...', 'Entering the target frontend...')}</h1>
|
||||
{error ? (
|
||||
<p className="mt-3 text-sm text-red-400">{error}</p>
|
||||
) : (
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
{pickAppText(locale, '正在同步登录态，请稍候。', 'Syncing your sign-in state. Please wait.')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
app-instance/frontend/app/logout/callback/page.tsx
Normal file
32
app-instance/frontend/app/logout/callback/page.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
import { clearTokens } from '@/lib/api';
|
||||
import { clearKeycloakLogoutInProgress, clearLoginState } from '@/lib/keycloak-oidc';
|
||||
import { pickAppText } from '@/lib/i18n/core';
|
||||
import { useAppI18n } from '@/lib/i18n/provider';
|
||||
import { useChatStore } from '@/lib/store';
|
||||
|
||||
export default function LogoutCallbackPage() {
|
||||
const { locale } = useAppI18n();
|
||||
const router = useRouter();
|
||||
const setUser = useChatStore((s) => s.setUser);
|
||||
|
||||
useEffect(() => {
|
||||
clearTokens();
|
||||
clearLoginState();
|
||||
clearKeycloakLogoutInProgress();
|
||||
setUser(null);
|
||||
router.replace('/login?logged_out=1');
|
||||
}, [router, setUser]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center px-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{pickAppText(locale, '正在退出登录...', 'Signing out...')}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user