feat: LDAP User management

LDAP will be used as default if no other auth form is enabled. LDAP now will work with ENABLE_LOGIN_FORM = false. Fixed exception "User does not match the record." Now LDAP login is case insensitive. Integrated with onboarding feature.
2025-06-26 18:26:48 +00:00 · 2024-11-06 03:20:54 +05:00
parent eb56614b58
commit 5d934d7d15
9 changed files with 791 additions and 21 deletions
--- a/src/lib/apis/auths/index.ts
+++ b/src/lib/apis/auths/index.ts
@@ -110,6 +110,150 @@ export const getSessionUser = async (token: string) => {
 	return res;
 };

+export const ldapUserSignIn = async (user: string, password: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/auths/ldap`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		credentials: 'include',
+		body: JSON.stringify({
+			user: user,
+			password: password
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getLdapConfig = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/auths/admin/config/ldap`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+}
+
+export const updateLdapConfig = async (token: string = '', enable_ldap: boolean) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/auths/admin/config/ldap`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			enable_ldap: enable_ldap
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+}
+
+export const getLdapServer = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/auths/admin/config/ldap/server`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+}
+
+export const updateLdapServer = async (token: string = '', body: object) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/auths/admin/config/ldap/server`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify(body)
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const userSignIn = async (email: string, password: string) => {
 	let error = null;

--- a/src/lib/components/admin/Settings/Connections.svelte
+++ b/src/lib/components/admin/Settings/Connections.svelte
@@ -20,6 +20,12 @@
 		updateOpenAIKeys,
 		updateOpenAIUrls
 	} from '$lib/apis/openai';
+	import {
+		getLdapConfig,
+		updateLdapConfig,
+		getLdapServer,
+		updateLdapServer,
+	} from '$lib/apis/auths';
 	import { toast } from 'svelte-sonner';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
@@ -45,6 +51,23 @@
 	let ENABLE_OPENAI_API = null;
 	let ENABLE_OLLAMA_API = null;

+	
+	// LDAP
+	let ENABLE_LDAP = false;
+	let LDAP_SERVER = {
+		label: '',
+		host: '',
+		port: '',
+		attribute_for_username: 'uid',
+		app_dn: '',
+		app_dn_password: '',
+		search_base: '',
+		search_filters: '',
+		use_tls: false,
+		certificate_path: '',
+		ciphers: ''
+	};
+
 	const verifyOpenAIHandler = async (idx) => {
 		OPENAI_API_BASE_URLS = OPENAI_API_BASE_URLS.map((url) => url.replace(/\/$/, ''));

@@ -136,6 +159,17 @@
 		}
 	};

+	const updateLdapServerHandler = async () => {
+		if (!ENABLE_LDAP) return;
+		const res = await updateLdapServer(localStorage.token, LDAP_SERVER).catch((error) => {
+			toast.error(error);
+			return null;
+		});
+		if (res) {
+			toast.success($i18n.t('LDAP server updated'));
+		}
+	};
+
 	onMount(async () => {
 		if ($user.role === 'admin') {
 			await Promise.all([
@@ -147,14 +181,19 @@
 				})(),
 				(async () => {
 					OPENAI_API_KEYS = await getOpenAIKeys(localStorage.token);
+				})(),
+				(async () => {
+					LDAP_SERVER = await getLdapServer(localStorage.token);
 				})()
 			]);

 			const ollamaConfig = await getOllamaConfig(localStorage.token);
 			const openaiConfig = await getOpenAIConfig(localStorage.token);
+			const ldapConfig = await getLdapConfig(localStorage.token);

 			ENABLE_OPENAI_API = openaiConfig.ENABLE_OPENAI_API;
 			ENABLE_OLLAMA_API = ollamaConfig.ENABLE_OLLAMA_API;
+			ENABLE_LDAP = ldapConfig.ENABLE_LDAP;

 			if (ENABLE_OPENAI_API) {
 				OPENAI_API_BASE_URLS.forEach(async (url, idx) => {
@@ -173,12 +212,13 @@
 	on:submit|preventDefault={() => {
 		updateOpenAIHandler();
 		updateOllamaUrlsHandler();
+		updateLdapServerHandler();

 		dispatch('save');
 	}}
 >
 	<div class="space-y-3 overflow-y-scroll scrollbar-hidden h-full">
-		{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null}
+		{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null && ENABLE_LDAP !== null}
 			<div class=" space-y-3">
 				<div class="mt-2 space-y-2 pr-1.5">
 					<div class="flex justify-between items-center text-sm">
@@ -428,6 +468,188 @@
 					</div>
 				{/if}
 			</div>
+
+			<hr class=" dark:border-gray-850" />
+
+			<div class=" space-y-3">
+				<div class="mt-2 space-y-2 pr-1.5">
+					<div class="flex justify-between items-center text-sm">
+						<div class="  font-medium">{$i18n.t('LDAP')}</div>
+
+						<div class="mt-1">
+							<Switch
+								bind:state={ENABLE_LDAP}
+								on:change={async () => {
+									updateLdapConfig(localStorage.token, ENABLE_LDAP);
+								}}
+							/>
+						</div>
+					</div>
+
+					{#if ENABLE_LDAP}
+						<div class="flex flex-col gap-1">
+								<div class="flex w-full gap-2">
+									<div class="w-full">
+										<div class=" self-center text-xs font-medium min-w-fit mb-1">
+											{$i18n.t('Label')}
+										</div>
+										<input
+										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+										required
+										placeholder={$i18n.t('Enter server label')}
+										bind:value={LDAP_SERVER.label}
+										/>
+									</div>
+									<div class="w-full"></div>
+								</div>
+								<div class="flex w-full gap-2">
+									<div class="w-full">
+										<div class=" self-center text-xs font-medium min-w-fit mb-1">
+											{$i18n.t('Host')}
+										</div>
+										<input
+										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+										required
+										placeholder={$i18n.t('Enter server host')}
+										bind:value={LDAP_SERVER.host}
+										/>
+									</div>
+									<div class="w-full">
+										<div class=" self-center text-xs font-medium min-w-fit mb-1">
+											{$i18n.t('Port')}
+										</div>
+										<Tooltip placement="top-start" content={$i18n.t("Default to 389 or 636 if TLS is enabled")} className="w-full">
+											<input
+											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+											type="number"
+											placeholder={$i18n.t('Enter server port')}
+											bind:value={LDAP_SERVER.port}
+											/>
+										</Tooltip>
+									</div>
+								</div>
+								<div class="flex w-full gap-2">
+									<div class="w-full">
+										<div class=" self-center text-xs font-medium min-w-fit mb-1">
+											{$i18n.t('Application DN')}
+										</div>
+										<Tooltip content={$i18n.t('The Application Account DN you bind with for search')} placement="top-start">
+											<input
+											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+											required
+											placeholder={$i18n.t('Enter Application DN')}
+											bind:value={LDAP_SERVER.app_dn}
+											/>
+										</Tooltip>
+									</div>
+									<div class="w-full">
+										<div class=" self-center text-xs font-medium min-w-fit mb-1">
+											{$i18n.t('Application DN Password')}
+										</div>
+										<SensitiveInput
+										placeholder={$i18n.t('Enter Application DN Password')}
+										bind:value={LDAP_SERVER.app_dn_password}
+										/>
+									</div>
+								</div>
+								<div class="flex w-full gap-2">
+									<div class="w-full">
+										<div class=" self-center text-xs font-medium min-w-fit mb-1">
+											{$i18n.t('Attribute for Username')}
+										</div>
+										<Tooltip content={$i18n.t('The LDAP attribute that maps to the username that users use to sign in.')} placement="top-start">
+											<input
+											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+											required
+											placeholder={$i18n.t('Example: sAMAccountName or uid or userPrincipalName')}
+											bind:value={LDAP_SERVER.attribute_for_username}
+											/>
+										</Tooltip>
+									</div>
+								</div>
+								<div class="flex w-full gap-2">
+									<div class="w-full">
+										<div class=" self-center text-xs font-medium min-w-fit mb-1">
+											{$i18n.t('Search Base')}
+										</div>
+										<Tooltip content={$i18n.t('The base to search for users')} placement="top-start">
+											<input
+											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+											required
+											placeholder={$i18n.t('Example: ou=users,dc=foo,dc=example')}
+											bind:value={LDAP_SERVER.search_base}
+											/>
+										</Tooltip>
+									</div>
+								</div>
+								<div class="flex w-full gap-2">
+									<div class="w-full">
+										<div class=" self-center text-xs font-medium min-w-fit mb-1">
+											{$i18n.t('Search Filters')}
+										</div>
+										<input
+										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+										placeholder={$i18n.t('Example: (&(objectClass=inetOrgPerson)(uid=%s))')}
+										bind:value={LDAP_SERVER.search_filters}
+										/>
+									</div>
+								</div>
+								<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+									<a
+										class=" text-gray-300 font-medium underline"
+										href="https://ldap.com/ldap-filters/"
+										target="_blank"
+									>
+										{$i18n.t('Click here for filter guides.')}
+									</a>
+								</div>
+								<div>
+									<div class="flex justify-between items-center text-sm">
+										<div class="  font-medium">{$i18n.t('TLS')}</div>
+
+										<div class="mt-1">
+											<Switch
+												bind:state={LDAP_SERVER.use_tls}
+											/>
+										</div>
+									</div>
+									{#if LDAP_SERVER.use_tls}
+										<div class="flex w-full gap-2">
+											<div class="w-full">
+												<div class=" self-center text-xs font-medium min-w-fit mb-1 mt-1">
+													{$i18n.t('Certificate Path')}
+												</div>
+												<input
+												class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+												required
+												placeholder={$i18n.t('Enter certificate path')}
+												bind:value={LDAP_SERVER.certificate_path}
+												/>
+											</div>
+										</div>
+										<div class="flex w-full gap-2">
+											<div class="w-full">
+												<div class=" self-center text-xs font-medium min-w-fit mb-1">
+													{$i18n.t('Ciphers')}
+												</div>
+												<Tooltip content={$i18n.t('Default to ALL')} placement="top-start">
+													<input
+													class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
+													placeholder={$i18n.t('Example: ALL')}
+													bind:value={LDAP_SERVER.ciphers}
+													/>
+												</Tooltip>
+											</div>
+											<div class="w-full"></div>
+										</div>
+									{/if}
+								</div>
+						</div>
+					{/if}
+
+				</div>
+			</div>
+
 		{:else}
 			<div class="flex h-full justify-center">
 				<div class="my-auto">
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { goto } from '$app/navigation';
-	import { getSessionUser, userSignIn, userSignUp } from '$lib/apis/auths';
+	import { ldapUserSignIn, getSessionUser, userSignIn, userSignUp } from '$lib/apis/auths';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user, socket } from '$lib/stores';
@@ -15,12 +15,22 @@
 	const i18n = getContext('i18n');

 	let loaded = false;
-	let mode = 'signin';
+	let mode = (
+		!$config?.features.enable_login_form &&
+		Object.keys($config?.oauth?.providers ?? {}).length == 0 &&
+		$config?.features.enable_ldap_form
+	) ? 'ldap' : 'signin';

 	let name = '';
 	let email = '';
 	let password = '';

+	let ldapUsername = '';
+	let ldapPassword = '';
+
+	$: showSwitchButtonForSignInForm = ($config?.features.enable_ldap_form && mode !== 'ldap') || ($config?.features.enable_login_form && mode === 'ldap');
+	$: showOtherSignInMethods = Object.keys($config?.oauth?.providers ?? {}).length > 0 || showSwitchButtonForSignInForm;
+
 	const setSessionUser = async (sessionUser) => {
 		if (sessionUser) {
 			console.log(sessionUser);
@@ -36,6 +46,14 @@
 		}
 	};

+	const ldapSignInHandler = async () => {
+		const sessionUser = await ldapUserSignIn(ldapUsername, ldapPassword).catch((error) => {
+			toast.error(error);
+			return null;
+		});
+		await setSessionUser(sessionUser);
+	};
+
 	const signInHandler = async () => {
 		const sessionUser = await userSignIn(email, password).catch((error) => {
 			toast.error(error);
@@ -57,7 +75,10 @@
 	};

 	const submitHandler = async () => {
-		if (mode === 'signin') {
+		if (mode === 'ldap'){
+			await ldapSignInHandler();
+		}
+		else if (mode === 'signin') {
 			await signInHandler();
 		} else {
 			await signUpHandler();
@@ -114,7 +135,11 @@
 	bind:show={onboarding}
 	getStartedHandler={() => {
 		onboarding = false;
-		mode = 'signup';
+		mode = (
+			!$config?.features.enable_login_form &&
+			Object.keys($config?.oauth?.providers ?? {}).length == 0 &&
+			$config?.features.enable_ldap_form
+		) ? 'ldap' : 'signup';;
 	}}
 />

@@ -167,12 +192,14 @@
 										{$i18n.t(`Sign in to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
 									{:else if $config?.onboarding ?? false}
 										{$i18n.t(`Get started with {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
+									{:else if mode === 'ldap'}
+										{$i18n.t(`Sign in to {{WEBUI_NAME}} with LDAP`, { WEBUI_NAME: $WEBUI_NAME })}
 									{:else}
 										{$i18n.t(`Sign up to {{WEBUI_NAME}}`, { WEBUI_NAME: $WEBUI_NAME })}
 									{/if}
 								</div>

-								{#if mode === 'signup' && ($config?.onboarding ?? false)}
+								{#if (mode === 'signup' || mode === 'ldap') && ($config?.onboarding ?? false)}
 									<div class=" mt-1 text-xs font-medium text-gray-500">
 										ⓘ {$WEBUI_NAME}
 										{$i18n.t(
@@ -182,7 +209,7 @@
 								{/if}
 							</div>

-							{#if $config?.features.enable_login_form}
+							{#if $config?.features.enable_login_form || $config?.features.enable_ldap_form }
 								<div class="flex flex-col mt-4">
 									{#if mode === 'signup'}
 										<div class="mb-2">
@@ -198,17 +225,31 @@
 										</div>
 									{/if}

-									<div class="mb-2">
-										<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Email')}</div>
-										<input
-											bind:value={email}
-											type="email"
-											class="my-0.5 w-full text-sm outline-none bg-transparent"
-											autocomplete="email"
-											placeholder={$i18n.t('Enter Your Email')}
-											required
-										/>
-									</div>
+									{#if mode === 'ldap'}
+										<div class="mb-2">
+											<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Username')}</div>
+											<input
+												bind:value={ldapUsername}
+												type="text"
+												class="my-0.5 w-full text-sm outline-none bg-transparent"
+												autocomplete="username"
+												placeholder={$i18n.t('Enter Your Username')}
+												required
+											/>
+										</div>
+									{:else}
+										<div class="mb-2">
+											<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Email')}</div>
+											<input
+												bind:value={email}
+												type="email"
+												class="my-0.5 w-full text-sm outline-none bg-transparent"
+												autocomplete="email"
+												placeholder={$i18n.t('Enter Your Email')}
+												required
+											/>
+										</div>
+									{/if}

 									<div>
 										<div class=" text-sm font-medium text-left mb-1">{$i18n.t('Password')}</div>
@@ -225,7 +266,18 @@
 								</div>
 							{/if}

-							{#if $config?.features.enable_login_form}
+							{#if $config?.features.enable_ldap_form && mode === 'ldap'}
+								<div class="mt-5">
+									<button
+										class="bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
+										type="submit"
+									>
+										{($config?.onboarding ?? false)
+											? $i18n.t('Authenticate as Admin')
+											: $i18n.t('Authenticate')}
+									</button>
+								</div>
+							{:else if $config?.features.enable_login_form && mode !== 'ldap'}
 								<div class="mt-5">
 									<button
 										class="bg-gray-700/5 hover:bg-gray-700/10 dark:bg-gray-100/5 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition w-full rounded-full font-medium text-sm py-2.5"
@@ -263,7 +315,7 @@
 							{/if}
 						</form>

-						{#if Object.keys($config?.oauth?.providers ?? {}).length > 0}
+						{#if showOtherSignInMethods}
 							<div class="inline-flex items-center justify-center w-full">
 								<hr class="w-32 h-px my-4 border-0 dark:bg-gray-100/10 bg-gray-700/10" />
 								{#if $config?.features.enable_login_form}
@@ -355,6 +407,51 @@
 										>
 									</button>
 								{/if}
+								{#if showSwitchButtonForSignInForm}
+									<button
+									class="flex items-center px-6 border-2 dark:border-gray-800 duration-300 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 w-full rounded-2xl dark:text-white text-sm py-3 transition"
+									on:click={() => {
+										if (mode === 'ldap')
+											mode = ($config?.onboarding ?? false) ? 'signup' : 'signin';
+										else mode = 'ldap';
+									}}
+									>
+										{#if mode === 'ldap'}
+											<svg 
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 24 24" 
+												fill="none" 
+												stroke-width="1.5"
+												stroke="currentColor"
+												class="size-6 mr-3"
+											>
+												<path 
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													d="M4 7.00005L10.2 11.65C11.2667 12.45 12.7333 12.45 13.8 11.65L20 7"
+													stroke-width="2"
+												/>
+												<rect x="3" y="5" width="18" height="14" rx="2" stroke-width="2" stroke-linecap="round"/>
+											</svg>
+										{:else}
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+												class="size-6 mr-3"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
+												/>
+											</svg>
+										{/if}
+										<span>{mode === 'ldap' ? $i18n.t('Continue with Email') : $i18n.t('Continue with LDAP')}</span>
+									</button>
+								{/if}
 							</div>
 						{/if}
 					</div>