-
- ${window.siyuan.languages.about5}
-
-
-
+
+${window.siyuan.languages.about6}
-
+
+
+
+ ${window.siyuan.languages.about5}
+
-
+
+
${window.siyuan.languages.about6}
+ ${window.siyuan.languages.accessAuthBypassAuthCodeDisabledTip}
${window.siyuan.languages.about2}
@@ -242,6 +261,35 @@ ${checkUpdateHTML}
if (window.siyuan.config.system.isInsider) {
about.element.querySelector("#isInsider").innerHTML = "Insider Preview";
}
+ const authCodeElement = about.element.querySelector("#authCode") as HTMLButtonElement;
+ const oidcSettingElement = about.element.querySelector("#oidcSetting") as HTMLButtonElement;
+ const lockScreenModeElement = about.element.querySelector("#lockScreenMode") as HTMLInputElement;
+ const setAuthControlsDisabled = (disabled: boolean) => {
+ authCodeElement?.toggleAttribute("disabled", disabled);
+ oidcSettingElement?.toggleAttribute("disabled", disabled);
+ lockScreenModeElement?.toggleAttribute("disabled", disabled);
+ };
+ const applyAccessAuthBypassChange = (enabled: boolean) => {
+ fetchPost("/api/system/setAccessAuthBypass", {accessAuthBypass: enabled}, () => {
+ window.siyuan.config.accessAuthBypass = enabled;
+ setAuthControlsDisabled(enabled);
+ });
+ };
+ setAuthControlsDisabled(window.siyuan.config.accessAuthBypass);
+ const accessAuthBypassElement = about.element.querySelector("#accessAuthBypass") as HTMLInputElement;
+ if (accessAuthBypassElement) {
+ accessAuthBypassElement.addEventListener("change", () => {
+ if (accessAuthBypassElement.checked) {
+ accessAuthBypassElement.checked = false;
+ confirmDialog("⚠️ " + window.siyuan.languages.accessAuthBypass, window.siyuan.languages.accessAuthBypassConfirm, () => {
+ accessAuthBypassElement.checked = true;
+ applyAccessAuthBypassChange(true);
+ });
+ } else {
+ applyAccessAuthBypassChange(false);
+ }
+ });
+ }
const indexRetentionDaysElement = about.element.querySelector("#indexRetentionDays") as HTMLInputElement;
indexRetentionDaysElement.addEventListener("change", () => {
fetchPost("/api/repo/setRepoIndexRetentionDays", {days: parseInt(indexRetentionDaysElement.value)}, () => {
@@ -303,6 +351,9 @@ ${checkUpdateHTML}
about.element.querySelector("#authCode").addEventListener("click", () => {
setAccessAuthCode();
});
+ about.element.querySelector("#oidcSetting").addEventListener("click", () => {
+ setOIDCConfig();
+ });
const importKeyElement = about.element.querySelector("#importKey");
importKeyElement.addEventListener("click", () => {
const passwordDialog = new Dialog({
@@ -376,8 +427,7 @@ ${checkUpdateHTML}
});
});
});
- const lockScreenModeElement = about.element.querySelector("#lockScreenMode") as HTMLInputElement;
- lockScreenModeElement.addEventListener("change", () => {
+ lockScreenModeElement?.addEventListener("change", () => {
fetchPost("/api/system/setFollowSystemLockScreen", {lockScreenMode: lockScreenModeElement.checked ? 1 : 0}, () => {
window.siyuan.config.system.lockScreenMode = lockScreenModeElement.checked ? 1 : 0;
});
diff --git a/app/src/config/util/about.ts b/app/src/config/util/about.ts
index 65ecc8a628c..cff40e513f3 100644
--- a/app/src/config/util/about.ts
+++ b/app/src/config/util/about.ts
@@ -9,6 +9,7 @@ export const setAccessAuthCode = () => {
content: `
${window.siyuan.languages.about6}
+ ${window.siyuan.languages.accessAuthCodeDisableWarning}
diff --git a/app/src/config/util/oidc.ts b/app/src/config/util/oidc.ts
new file mode 100644
index 00000000000..b93f87e1909
--- /dev/null
+++ b/app/src/config/util/oidc.ts
@@ -0,0 +1,639 @@
+import {Dialog} from "../../dialog";
+import {fetchPost} from "../../util/fetch";
+import {isMobile} from "../../util/functions";
+import {showMessage} from "../../dialog/message";
+
+const defaultProviders = ["custom", "google", "microsoft", "github"];
+const claimOptions = [
+ "provider",
+ "subject",
+ "email",
+ "email_verified",
+ "preferred_username",
+ "name",
+ "issuer",
+ "audience",
+ "hosted_domain",
+ "tenant_id",
+ "groups",
+];
+
+const cloneProviders = (providers: Record | undefined) => {
+ const cloned: Record = {};
+ if (!providers) {
+ return cloned;
+ }
+ Object.keys(providers).forEach((id) => {
+ const provider = providers[id];
+ if (!provider) {
+ return;
+ }
+ cloned[id] = {
+ clientID: provider.clientID || "",
+ clientSecret: provider.clientSecret || "",
+ pkce: !!provider.pkce,
+ redirectURL: provider.redirectURL || "",
+ issuerURL: provider.issuerURL || "",
+ scopes: provider.scopes ? [...provider.scopes] : [],
+ tenant: provider.tenant || "",
+ providerLabel: provider.providerLabel || "",
+ claimMap: provider.claimMap ? Object.assign({}, provider.claimMap) : {},
+ };
+ });
+ return cloned;
+};
+
+const ensureProvider = (providers: Record, id: string) => {
+ if (!providers[id]) {
+ providers[id] = {
+ clientID: "",
+ clientSecret: "",
+ pkce: false,
+ redirectURL: "",
+ issuerURL: "",
+ scopes: [],
+ tenant: "",
+ providerLabel: "",
+ claimMap: {},
+ };
+ }
+};
+
+const parseScopes = (raw: string) => {
+ return raw
+ .split(/[, \t\r\n]+/)
+ .map((item) => item.trim())
+ .filter((item) => item);
+};
+
+type OIDCClaimMapRow = {
+ claim: string;
+ field: string;
+};
+
+const claimMapToRows = (claimMap: Record | undefined) => {
+ const rows: OIDCClaimMapRow[] = [];
+ if (!claimMap) {
+ return rows;
+ }
+ Object.keys(claimMap).sort().forEach((claim) => {
+ rows.push({
+ claim,
+ field: claimMap[claim] || "",
+ });
+ });
+ return rows;
+};
+
+const rowsToClaimMap = (rows: OIDCClaimMapRow[]) => {
+ const claimMap: Record = {};
+ if (!rows.length) {
+ return {claimMap};
+ }
+ for (const row of rows) {
+ const claim = row.claim.trim();
+ const field = row.field.trim();
+ if (!claim || !field) {
+ return {claimMap: null};
+ }
+ claimMap[claim] = field;
+ }
+ return {claimMap};
+};
+
+type OIDCFilterRow = {
+ claim: string;
+ op: string;
+ pattern: string;
+};
+
+const parseFilterPattern = (pattern: string) => {
+ const trimmed = pattern.trim();
+ if (!trimmed) {
+ return null;
+ }
+ const sepIndex = trimmed.indexOf(":");
+ if (sepIndex > 0) {
+ const prefix = trimmed.slice(0, sepIndex).trim().toLowerCase();
+ const rest = trimmed.slice(sepIndex + 1).trim();
+ if (prefix === "regex" || prefix === "re") {
+ return {op: "regex", pattern: rest};
+ }
+ if (prefix === "regexi") {
+ return {op: "regexi", pattern: rest};
+ }
+ if (prefix === "str" || prefix === "string") {
+ return {op: "str", pattern: rest};
+ }
+ if (prefix === "exact") {
+ return {op: "exact", pattern: rest};
+ }
+ }
+ return {op: "regexi", pattern: trimmed};
+};
+
+const filterPatternFromRow = (row: OIDCFilterRow) => {
+ const pattern = row.pattern.trim();
+ if (!pattern) {
+ return "";
+ }
+ switch (row.op) {
+ case "regex":
+ return `regex:${pattern}`;
+ case "regexi":
+ return `regexi:${pattern}`;
+ case "str":
+ return `str:${pattern}`;
+ case "exact":
+ return `exact:${pattern}`;
+ default:
+ return pattern;
+ }
+};
+
+const filtersToRows = (filters: Record | undefined) => {
+ const rows: OIDCFilterRow[] = [];
+ if (!filters) {
+ return rows;
+ }
+ Object.keys(filters).sort().forEach((claim) => {
+ const patterns = filters[claim] || [];
+ patterns.forEach((pattern) => {
+ const parsed = parseFilterPattern(pattern || "");
+ if (!parsed) {
+ return;
+ }
+ rows.push({
+ claim,
+ op: parsed.op,
+ pattern: parsed.pattern,
+ });
+ });
+ });
+ return rows;
+};
+
+const rowsToFilters = (rows: OIDCFilterRow[]) => {
+ const filters: Record = {};
+ for (const row of rows) {
+ const claim = row.claim.trim();
+ const pattern = row.pattern.trim();
+ if (!claim || !pattern) {
+ return {filters: null};
+ }
+ const encoded = filterPatternFromRow(row);
+ if (!encoded) {
+ return {filters: null};
+ }
+ if (!filters[claim]) {
+ filters[claim] = [];
+ }
+ filters[claim].push(encoded);
+ }
+ return {filters};
+};
+
+export const setOIDCConfig = () => {
+ const oidc = window.siyuan.config.oidc || {provider: "", providers: {}, filters: {}};
+ const providers = cloneProviders(oidc.providers);
+ const providerIds = Array.from(new Set([...defaultProviders, ...Object.keys(providers)])).filter((id) => id);
+ if (oidc.provider && !providerIds.includes(oidc.provider)) {
+ providerIds.unshift(oidc.provider);
+ }
+ let enabledProvider = oidc.provider || "";
+ let currentProvider = oidc.provider || providerIds[0];
+ ensureProvider(providers, currentProvider);
+ const providerDisplayNames: Record = {
+ custom: window.siyuan.languages.oidcProviderCustom,
+ google: "Google",
+ microsoft: "Microsoft",
+ github: "GitHub",
+ };
+
+ const dialog = new Dialog({
+ title: "\uD83D\uDD10 " + window.siyuan.languages.oidc,
+ width: isMobile() ? "92vw" : "640px",
+ height: isMobile() ? "80vh" : "70vh",
+ content: `
+
+
+
+
+ ${window.siyuan.languages.oidcProvider}
+
+
+
+ ${window.siyuan.languages.oidcProviderTip}
+
+
+
+
+
+ ${window.siyuan.languages.oidcProviderLabel}
+
+
+
+ ${window.siyuan.languages.oidcProviderLabelTip}
+
+
+
+ ${window.siyuan.languages.oidcClientID}
+
+
+
+ ${window.siyuan.languages.oidcClientIDTip}
+
+
+
+ ${window.siyuan.languages.oidcClientSecret}
+
+
+
+ ${window.siyuan.languages.oidcClientSecretTip}
+
+
+
+ PKCE
+
+
+
+ ${window.siyuan.languages.oidcPKCETip}
+
+
+
+ ${window.siyuan.languages.oidcIssuerURL}
+
+
+
+ ${window.siyuan.languages.oidcIssuerURLTip}
+
+
+
+ ${window.siyuan.languages.oidcRedirectURL}
+
+
+
+ ${window.siyuan.languages.oidcRedirectURLTip}
+
+
+
+ ${window.siyuan.languages.oidcScopes}
+
+
+
+ ${window.siyuan.languages.oidcScopesTip}
+
+
+
+ ${window.siyuan.languages.oidcTenant}
+
+
+
+ ${window.siyuan.languages.oidcTenantTip}
+
+
+
+
+
+
+ ${window.siyuan.languages.oidcClaimMap}
+
+
+
+ ${window.siyuan.languages.oidcClaimMapTip}
+
+
+
+
+
+
+ ${window.siyuan.languages.oidcFilters}
+
+
+
+ ${window.siyuan.languages.oidcFiltersTip}
+ ${window.siyuan.languages.oidcFiltersTipLine1}
+ ${window.siyuan.languages.oidcFiltersTipLine2}
+
+
+
+
`,
+ });
+
+ const providerSelect = dialog.element.querySelector("#oidcProvider") as HTMLSelectElement;
+ const providerLabelInput = dialog.element.querySelector("#oidcProviderLabel") as HTMLInputElement;
+ const clientIDInput = dialog.element.querySelector("#oidcClientID") as HTMLInputElement;
+ const clientSecretInput = dialog.element.querySelector("#oidcClientSecret") as HTMLInputElement;
+ const pkceInput = dialog.element.querySelector("#oidcPKCE") as HTMLInputElement;
+ const issuerInput = dialog.element.querySelector("#oidcIssuerURL") as HTMLInputElement;
+ const redirectInput = dialog.element.querySelector("#oidcRedirectURL") as HTMLInputElement;
+ const scopesInput = dialog.element.querySelector("#oidcScopes") as HTMLInputElement;
+ const tenantInput = dialog.element.querySelector("#oidcTenant") as HTMLInputElement;
+ const claimMapList = dialog.element.querySelector("#oidcClaimMapList") as HTMLDivElement;
+ const claimMapAddButton = dialog.element.querySelector("#oidcClaimMapAdd") as HTMLButtonElement;
+ const filtersList = dialog.element.querySelector("#oidcFiltersList") as HTMLDivElement;
+ const filterAddButton = dialog.element.querySelector("#oidcFilterAdd") as HTMLButtonElement;
+ const filtersBlock = dialog.element.querySelector("#oidcFiltersBlock") as HTMLElement;
+ const providerConfigBlock = dialog.element.querySelector("#oidcProviderConfig") as HTMLElement;
+ const issuerRow = dialog.element.querySelector("#oidcIssuerRow") as HTMLElement;
+ const providerLabelRow = dialog.element.querySelector("#oidcProviderLabelRow") as HTMLElement;
+ const scopesRow = dialog.element.querySelector("#oidcScopesRow") as HTMLElement;
+ const tenantRow = dialog.element.querySelector("#oidcTenantRow") as HTMLElement;
+ const pkceRow = dialog.element.querySelector("#oidcPKCERow") as HTMLElement;
+ const claimMapRow = dialog.element.querySelector("#oidcClaimMapRow") as HTMLElement;
+ const buttons = dialog.element.querySelectorAll(".b3-dialog__action .b3-button");
+
+ const setProviderVisibility = (id: string) => {
+ const isKnownProvider = Object.prototype.hasOwnProperty.call(providerDisplayNames, id);
+ const showAll = !isKnownProvider;
+ const showIssuer = showAll || id === "custom";
+ const showTenant = showAll || id === "microsoft";
+ const showPKCE = id === "microsoft";
+ const showClaimMap = showAll || id === "custom";
+ const showScopes = showAll || id === "custom";
+ const showProviderLabel = showAll || id === "custom";
+ issuerRow.classList.toggle("fn__none", !showIssuer);
+ scopesRow.classList.toggle("fn__none", !showScopes);
+ providerLabelRow.classList.toggle("fn__none", !showProviderLabel);
+ tenantRow.classList.toggle("fn__none", !showTenant);
+ pkceRow.classList.toggle("fn__none", !showPKCE);
+ claimMapRow.classList.toggle("fn__none", !showClaimMap);
+ };
+
+ const setProviderConfigVisible = (visible: boolean) => {
+ providerConfigBlock.classList.toggle("fn__none", !visible);
+ };
+
+ const setFiltersVisible = (visible: boolean) => {
+ filtersBlock.classList.toggle("fn__none", !visible);
+ };
+
+ let claimMapRows: OIDCClaimMapRow[] = [];
+
+ const syncPKCEState = (id: string) => {
+ const enablePKCE = id === "microsoft" && pkceInput.checked;
+ if (enablePKCE) {
+ clientSecretInput.value = "";
+ }
+ clientSecretInput.disabled = enablePKCE;
+ };
+
+ const setProviderForm = (id: string) => {
+ const provider = providers[id];
+ providerLabelInput.value = provider.providerLabel || "";
+ clientIDInput.value = provider.clientID || "";
+ clientSecretInput.value = provider.clientSecret || "";
+ pkceInput.checked = id === "microsoft" && !!provider.pkce;
+ issuerInput.value = provider.issuerURL || "";
+ redirectInput.value = provider.redirectURL || "";
+ scopesInput.value = provider.scopes && provider.scopes.length ? provider.scopes.join(", ") : "";
+ tenantInput.value = provider.tenant || "";
+ claimMapRows = claimMapToRows(provider.claimMap);
+ renderClaimMapRows();
+ setProviderVisibility(id);
+ syncPKCEState(id);
+ };
+
+ const readProviderForm = () => {
+ const provider = providers[currentProvider];
+ let claimMap = provider.claimMap || {};
+ if (currentProvider === "custom") {
+ const claimMapResult = rowsToClaimMap(claimMapRows);
+ if (!claimMapResult.claimMap) {
+ showMessage(window.siyuan.languages.oidcClaimMapRowInvalid);
+ return null;
+ }
+ claimMap = claimMapResult.claimMap || {};
+ }
+ return {
+ clientID: clientIDInput.value.trim(),
+ clientSecret: currentProvider === "microsoft" && pkceInput.checked ? "" : clientSecretInput.value,
+ pkce: currentProvider === "microsoft" && pkceInput.checked,
+ redirectURL: redirectInput.value.trim(),
+ issuerURL: issuerInput.value.trim(),
+ scopes: parseScopes(scopesInput.value),
+ tenant: tenantInput.value.trim(),
+ providerLabel: currentProvider === "custom" ? providerLabelInput.value.trim() : "",
+ claimMap,
+ } as Config.IOIDCProviderConf;
+ };
+
+ const filterRows = filtersToRows(oidc.filters);
+ const operatorOptions = [
+ {value: "regexi", label: window.siyuan.languages.oidcFilterOpRegexI},
+ {value: "regex", label: window.siyuan.languages.oidcFilterOpRegex},
+ {value: "str", label: window.siyuan.languages.oidcFilterOpString},
+ {value: "exact", label: window.siyuan.languages.oidcFilterOpExact},
+ ];
+
+ const renderClaimMapRows = () => {
+ const mobile = isMobile();
+ if (!claimMapRows.length) {
+ claimMapList.innerHTML = "";
+ return;
+ }
+
+ claimMapList.innerHTML = `- ${
+ claimMapRows.map((row, index) => `
+
- + + + + + ${mobile ? ` + ` : ` + + + `} + `).join("") + }
- ${
+ filterRows
+ .map((row, index) => `
+
- + + + + + + + ${isMobile() ? ` + ` : ` + + + `} + `).join("") + }
${window.siyuan.languages.about18}
+
+
+
${window.siyuan.languages.about5}
-
+ ${window.siyuan.languages.accessAuthBypass}
+
+
+
+ ${window.siyuan.languages.accessAuthBypassTip}
+
${window.siyuan.languages.dataRepoKey}
@@ -206,6 +225,34 @@ export const initAbout = () => {
const workspaceDirElement = modelMainElement.querySelector("#workspaceDir");
genWorkspace(workspaceDirElement);
const importKeyElement = modelMainElement.querySelector("#importKey");
+ const authCodeElement = modelMainElement.querySelector("#authCode") as HTMLButtonElement;
+ const accessAuthBypassElement = modelMainElement.querySelector("#accessAuthBypass") as HTMLInputElement;
+ const oidcSettingElement = modelMainElement.querySelector("#oidcSetting") as HTMLButtonElement;
+ const setAuthControlsDisabled = (disabled: boolean) => {
+ authCodeElement?.toggleAttribute("disabled", disabled);
+ oidcSettingElement?.toggleAttribute("disabled", disabled);
+ };
+ const applyAccessAuthBypassChange = (enabled: boolean) => {
+ fetchPost("/api/system/setAccessAuthBypass", {accessAuthBypass: enabled}, () => {
+ window.siyuan.config.accessAuthBypass = enabled;
+ setAuthControlsDisabled(enabled);
+ });
+ };
+ setAuthControlsDisabled(window.siyuan.config.accessAuthBypass);
+ if (accessAuthBypassElement) {
+ accessAuthBypassElement.addEventListener("change", () => {
+ const nextChecked = accessAuthBypassElement.checked;
+ if (nextChecked) {
+ accessAuthBypassElement.checked = false;
+ confirmDialog("⚠️ " + window.siyuan.languages.accessAuthBypass, window.siyuan.languages.accessAuthBypassConfirm, () => {
+ accessAuthBypassElement.checked = true;
+ applyAccessAuthBypassChange(true);
+ });
+ } else {
+ applyAccessAuthBypassChange(false);
+ }
+ });
+ }
modelMainElement.firstElementChild.addEventListener("click", (event) => {
let target = event.target as HTMLElement;
while (target && (target !== modelMainElement)) {
@@ -214,6 +261,11 @@ export const initAbout = () => {
event.preventDefault();
event.stopPropagation();
break;
+ } else if (target.id === "oidcSetting") {
+ setOIDCConfig();
+ event.preventDefault();
+ event.stopPropagation();
+ break;
} else if (target.id === "importKey") {
const passwordDialog = new Dialog({
title: "🔑 " + window.siyuan.languages.key,
diff --git a/app/src/types/config.d.ts b/app/src/types/config.d.ts
index 962f046821a..c2f6462ad8d 100644
--- a/app/src/types/config.d.ts
+++ b/app/src/types/config.d.ts
@@ -25,6 +25,14 @@ declare namespace Config {
* Access authorization code
*/
accessAuthCode: TAccessAuthCode;
+ /**
+ * Whether to bypass all access authentication checks
+ */
+ accessAuthBypass: boolean;
+ /**
+ * OIDC login configuration
+ */
+ oidc: IOIDC;
account: IAccount;
ai: IAI;
api: IAPI;
@@ -96,6 +104,35 @@ declare namespace Config {
*/
export type TAccessAuthCode = "" | "*******";
+ /**
+ * OIDC login configuration
+ */
+ export interface IOIDC {
+ provider: string;
+ providers: Record;
+ filters: IOIDCFilter;
+ /**
+ * kernel used fields, frontend ignored
+ *
+ * providerHash?: string;
+ * filterHash?: string;
+ */
+ }
+
+ export interface IOIDCProviderConf {
+ clientID: string;
+ clientSecret: string;
+ pkce: boolean;
+ redirectURL: string;
+ issuerURL: string;
+ scopes: string[];
+ tenant: string;
+ providerLabel: string;
+ claimMap: Record;
+ }
+
+ export type IOIDCFilter = Record;
+
/**
* Account configuration
*/
diff --git a/app/stage/auth.html b/app/stage/auth.html
index 8d5d5094142..4f912777363 100644
--- a/app/stage/auth.html
+++ b/app/stage/auth.html
@@ -73,6 +73,30 @@
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
}
+ .b3-button:disabled,
+ .b3-button.fn__disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ box-shadow: none;
+ }
+
+ .b3-button[data-loading="true"]::after {
+ content: "";
+ width: 12px;
+ height: 12px;
+ margin-left: 8px;
+ border: 2px solid rgba(255, 255, 255, 0.6);
+ border-top-color: #fff;
+ border-radius: 50%;
+ animation: b3-loading-spin 0.8s linear infinite;
+ }
+
+ @keyframes b3-loading-spin {
+ to {
+ transform: rotate(360deg);
+ }
+ }
+
.b3-button--white {
color: rgb(13, 60, 97);
background-color: #d6eaf9;
@@ -173,28 +197,64 @@
font-size: 12px;
margin: 16px 0;
}
+
+ .action-group,
+ .auth-buttons {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .action-group {
+ gap: 10px;
+ margin-top: 8px;
+ }
+
+ .auth-buttons {
+ gap: 6px;
+ width: 100%;
+ }
+
+ .auth-buttons .b3-button {
+ margin: 6px 0;
+ }
+ {{end}}
-
-
{{.workspace}}
+ {{if .hasAccessAuthCode}}+ {{end}}
- {{.l2}}
-
-
-
- {{.l7}}
+
+
+
+
+
+ {{.l7}}
+