mirrors/mcphub
1
0
Fork 0
mirror of https://github.com/samanhappy/mcphub.git synced 2026-01-07 15:18:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement OAuth 2.0 / OIDC SSO support with configuration and routing updates

Browse Source
This commit is contained in:
samanhappy
2026-01-01 13:20:39 +08:00
parent 93f4861953
commit fb1f670d88
6 changed files with 118 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/pages/LoginPage.tsx
View File

@@ -31,38 +31,59 @@ const sanitizeReturnUrl = (value: string | null): string | null => {
};
// Provider icons (SVG)
const ProviderIcon: React.FC<{ type: string; className?: string }> = ({ type, className = 'w-5 h-5' }) => {
const ProviderIcon: React.FC<{ type: string; className?: string }> = ({
type,
className = 'w-5 h-5',
}) => {
switch (type) {
case 'google':
return (
<svg className={className} viewBox="0 0 24 24" fill="currentColor">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
fill="#4285F4"
/>
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
fill="#34A853"
/>
<path
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
fill="#FBBC05"
/>
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
fill="#EA4335"
/>
</svg>
);
case 'github':
return (
<svg className={className} viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
</svg>
);
case 'microsoft':
return (
<svg className={className} viewBox="0 0 24 24" fill="currentColor">
<path fill="#F25022" d="M1 1h10v10H1z"/>
<path fill="#00A4EF" d="M1 13h10v10H1z"/>
<path fill="#7FBA00" d="M13 1h10v10H13z"/>
<path fill="#FFB900" d="M13 13h10v10H13z"/>
<path fill="#F25022" d="M1 1h10v10H1z" />
<path fill="#00A4EF" d="M1 13h10v10H1z" />
<path fill="#7FBA00" d="M13 1h10v10H13z" />
<path fill="#FFB900" d="M13 13h10v10H13z" />
</svg>
);
default:
// Generic OAuth/OIDC icon
return (
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
<svg
className={className}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 6v6l4 2" />
</svg>
);
}
@@ -251,37 +272,6 @@ const LoginPage: React.FC = () => {
<div className="absolute -top-24 right-12 h-40 w-40 -translate-y-6 rounded-full bg-indigo-500/30 blur-3xl" />
<div className="absolute -bottom-24 -left-12 h-40 w-40 translate-y-6 rounded-full bg-cyan-500/20 blur-3xl" />
{/* SSO Buttons */}
{ssoEnabled && ssoProviders.length > 0 && (
<div className="space-y-3 mb-6">
{ssoProviders.map((provider) => (
<button
key={provider.id}
type="button"
onClick={() => handleSSOLogin(provider.id)}
className="sso-button group relative flex w-full items-center justify-center gap-3 rounded-md border border-gray-300/60 bg-white/80 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-50 hover:border-gray-400/60 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:border-gray-600/60 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700/80"
>
<ProviderIcon type={provider.type} />
<span>{t('auth.continueWith', { provider: provider.name })}</span>
</button>
))}
{/* Divider - only show if local auth is also allowed */}
{allowLocalAuth && (
<div className="relative my-4">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300/60 dark:border-gray-600/60" />
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white/60 text-gray-500 dark:bg-gray-900/60 dark:text-gray-400">
{t('auth.orContinueWith')}
</span>
</div>
</div>
)}
</div>
)}
{/* Local auth form - only show if allowed */}
{allowLocalAuth && (
<form className="mt-4 space-y-4" onSubmit={handleSubmit}>
@@ -338,6 +328,34 @@ const LoginPage: React.FC = () => {
</form>
)}
{/* SSO Buttons */}
{ssoEnabled && ssoProviders.length > 0 && (
<div className="space-y-3 mb-6">
{/* Divider */}
<div className="relative my-4">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300/60 dark:border-gray-600/60" />
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white/60 text-gray-500 dark:bg-gray-900/60 dark:text-gray-400">
{t('auth.orContinueWith')}
</span>
</div>
</div>
{ssoProviders.map((provider) => (
<button
key={provider.id}
type="button"
onClick={() => handleSSOLogin(provider.id)}
className="sso-button group relative flex w-full items-center justify-center gap-3 rounded-md border border-gray-300/60 bg-white/80 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-50 hover:border-gray-400/60 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:border-gray-600/60 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700/80"
>
<ProviderIcon type={provider.type} />
<span>{t('auth.continueWith', { provider: provider.name })}</span>
</button>
))}
</div>
)}
{/* Show message if only SSO is available and no providers configured */}
{!allowLocalAuth && ssoProviders.length === 0 && (
<div className="text-center text-gray-500 dark:text-gray-400">

19
frontend/src/services/authService.ts
View File

@@ -1,3 +1,4 @@
import { getBasePath } from '@/utils/runtime';
import {
AuthResponse,
LoginCredentials,
@@ -5,7 +6,7 @@ import {
ChangePasswordCredentials,
SSOConfig,
} from '../types';
import { apiPost, apiGet } from '../utils/fetchInterceptor';
import { apiPost, apiGet, fetchWithInterceptors } from '../utils/fetchInterceptor';
import { getToken, setToken, removeToken } from '../utils/interceptors';
// Export token management functions
@@ -14,9 +15,17 @@ export { getToken, setToken, removeToken };
// Get SSO configuration
export const getSSOConfig = async (): Promise<SSOConfig> => {
try {
const response = await apiGet<{ success: boolean; data: SSOConfig }>('/auth/sso/config');
if (response.success && response.data) {
return response.data;
const basePath = getBasePath();
// const response = await apiGet<{ success: boolean; data: SSOConfig }>('/auth/sso/config');
const response = await fetchWithInterceptors(`${basePath}/auth/sso/config`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (response.ok) {
const data: { success: boolean; data: SSOConfig } = await response.json();
return data.data;
}
return { enabled: false, providers: [], allowLocalAuth: true };
} catch (error) {
@@ -28,7 +37,7 @@ export const getSSOConfig = async (): Promise<SSOConfig> => {
// Initiate SSO login (redirects to provider)
export const initiateSSOLogin = (providerId: string, returnUrl?: string): void => {
const basePath = import.meta.env.VITE_API_BASE_PATH || '';
let url = `${basePath}/api/auth/sso/${providerId}`;
let url = `${basePath}/auth/sso/${providerId}`;
if (returnUrl) {
url += `?returnUrl=${encodeURIComponent(returnUrl)}`;
}