From fac88b6508dbbe1c0112e1bbd7ed4b5615c4683b Mon Sep 17 00:00:00 2001 From: dsyoon Date: Sat, 7 Feb 2026 18:04:18 +0900 Subject: [PATCH] Add social quick login and user sync API Add quick provider login buttons (Auth0 connections), an API to upsert users into Postgres and gate admin via can_manage, plus schema and Node server. Co-authored-by: Cursor --- .gitignore | 5 ++ README.md | 32 +++++++++++++ db/schema.sql | 27 +++++++++++ index.html | 11 +++++ package.json | 18 +++++++ script.js | 99 ++++++++++++++++++++++++++++++++++++++ server.js | 128 ++++++++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 320 insertions(+) create mode 100644 .gitignore create mode 100644 db/schema.sql create mode 100644 package.json create mode 100644 server.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5fbafd6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.DS_Store +node_modules/ +.env +.env.* + diff --git a/README.md b/README.md index 6167266..c73d7f2 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,36 @@ python3 -m http.server 8000 그 후 브라우저에서 `http://localhost:8000`으로 접속합니다. +## 서버(Node) + PostgreSQL 사용자 저장 + +로그인 후 사용자 정보를 `ncue_user`에 저장하고(Upsert), `can_manage`로 관리 권한을 DB에서 제어하려면 Node 서버로 실행하세요. + +1) 의존성 설치 + +```bash +npm install +``` + +2) 테이블 생성 + +```bash +psql -h "$DB_HOST" -p "$DB_PORT" -U "$DB_USER" -d "$DB_NAME" -f db/schema.sql +``` + +3) 서버 실행 + +```bash +npm start +``` + +### 권한 부여 + +최초 로그인 사용자는 DB에 저장되지만 `can_manage=false`입니다. 관리 권한을 주려면: + +```sql +update ncue_user set can_manage = true where email = 'me@example.com'; +``` + ## 로그인(관리 기능 잠금) 이 프로젝트는 **정적 사이트**에서 동작하도록, 관리 기능(추가/편집/삭제/가져오기)을 **로그인 후(허용 이메일)** 에만 활성화할 수 있습니다. @@ -36,6 +66,8 @@ python3 -m http.server 8000 - 서버에 바로 반영하기 전 테스트가 필요하면, 페이지 상단의 **로그인**을 누르면 뜨는 **로그인 설정 모달**에서 `domain/clientId/allowedEmails`를 입력하면 브라우저에 저장되어 즉시 테스트할 수 있습니다. +- Auth0에서 각 소셜 로그인 연결(connection)을 만들었다면, 모달의 connection 이름(예: `google-oauth2`, `kakao`, `naver`)을 입력하면 + 상단에 **구글/카카오/네이버** 간편 로그인 버튼이 표시됩니다. ## 데이터 저장 diff --git a/db/schema.sql b/db/schema.sql new file mode 100644 index 0000000..6bae1c1 --- /dev/null +++ b/db/schema.sql @@ -0,0 +1,27 @@ +-- NCUE user table for admin gating / auditing +-- Run: psql -h $DB_HOST -p $DB_PORT -U $DB_USER -d $DB_NAME -f db/schema.sql + +DO $$ +BEGIN + IF NOT EXISTS ( + SELECT 1 + FROM information_schema.tables + WHERE table_schema = 'public' + AND table_name = 'ncue_user' + ) THEN + CREATE TABLE public.ncue_user ( + sub text PRIMARY KEY, + email text, + name text, + picture text, + provider text, + last_login_at timestamptz, + can_manage boolean NOT NULL DEFAULT false, + created_at timestamptz NOT NULL DEFAULT now(), + updated_at timestamptz NOT NULL DEFAULT now() + ); + + CREATE INDEX idx_ncue_user_email ON public.ncue_user (email); + END IF; +END $$; + diff --git a/index.html b/index.html index a4ce7a6..a98f8ca 100644 --- a/index.html +++ b/index.html @@ -71,6 +71,9 @@ 로그인 필요 + + + @@ -203,6 +206,14 @@
쉼표로 구분합니다. 비워두면 “로그인한 모든 계정”이 관리 가능해집니다.
+ +
diff --git a/package.json b/package.json new file mode 100644 index 0000000..d8e43d4 --- /dev/null +++ b/package.json @@ -0,0 +1,18 @@ +{ + "name": "ncue-links-dashboard", + "private": true, + "version": "1.0.0", + "type": "module", + "scripts": { + "start": "node server.js", + "dev": "node server.js" + }, + "dependencies": { + "dotenv": "^16.6.1", + "express": "^4.21.2", + "helmet": "^7.2.0", + "jose": "^5.9.6", + "pg": "^8.13.1" + } +} + diff --git a/script.js b/script.js index f23d684..4a05208 100644 --- a/script.js +++ b/script.js @@ -22,12 +22,18 @@ userText: document.getElementById("userText"), btnLogin: document.getElementById("btnLogin"), btnLogout: document.getElementById("btnLogout"), + btnGoogle: document.getElementById("btnGoogle"), + btnKakao: document.getElementById("btnKakao"), + btnNaver: document.getElementById("btnNaver"), authModal: document.getElementById("authModal"), btnAuthClose: document.getElementById("btnAuthClose"), authForm: document.getElementById("authForm"), authDomain: document.getElementById("authDomain"), authClientId: document.getElementById("authClientId"), authAllowedEmails: document.getElementById("authAllowedEmails"), + authConnGoogle: document.getElementById("authConnGoogle"), + authConnKakao: document.getElementById("authConnKakao"), + authConnNaver: document.getElementById("authConnNaver"), btnAuthReset: document.getElementById("btnAuthReset"), modal: document.getElementById("modal"), btnClose: document.getElementById("btnClose"), @@ -65,6 +71,7 @@ authorized: false, ready: false, mode: "disabled", // enabled | misconfigured | sdk_missing | disabled + serverCanManage: null, }; function nowIso() { @@ -358,6 +365,14 @@ domain: String(auth0.domain || "").trim(), clientId: String(auth0.clientId || "").trim(), }, + connections: + data.connections && typeof data.connections === "object" + ? { + google: String(data.connections.google || "").trim(), + kakao: String(data.connections.kakao || "").trim(), + naver: String(data.connections.naver || "").trim(), + } + : { google: "", kakao: "", naver: "" }, allowedEmails: allowedEmails.map((e) => String(e).trim().toLowerCase()).filter(Boolean), }; } @@ -379,6 +394,11 @@ domain: String(auth0.domain || "").trim(), clientId: String(auth0.clientId || "").trim(), }, + connections: { + google: "", + kakao: "", + naver: "", + }, allowedEmails: allowedEmails.map((e) => String(e).trim().toLowerCase()).filter(Boolean), }; const override = loadAuthOverride(); @@ -389,6 +409,11 @@ domain: override.auth0.domain || base.auth0.domain, clientId: override.auth0.clientId || base.auth0.clientId, }, + connections: { + google: override.connections?.google || "", + kakao: override.connections?.kakao || "", + naver: override.connections?.naver || "", + }, allowedEmails: override.allowedEmails.length ? override.allowedEmails : base.allowedEmails, }; } @@ -427,6 +452,16 @@ // 설정/SDK 문제 상태에서도 버튼은 "클릭 가능"하게 두고, 클릭 시 토스트로 안내합니다. el.btnLogin.disabled = false; el.btnLogout.disabled = false; + + // 간편 로그인 버튼 노출 (connection이 설정되어 있고, 미로그인 상태) + const cfg = getAuthConfig(); + const showQuick = enabled && !auth.user; + const g = showQuick && Boolean(cfg.connections.google); + const k = showQuick && Boolean(cfg.connections.kakao); + const n = showQuick && Boolean(cfg.connections.naver); + if (el.btnGoogle) el.btnGoogle.hidden = !g; + if (el.btnKakao) el.btnKakao.hidden = !k; + if (el.btnNaver) el.btnNaver.hidden = !n; } function applyManageLock() { @@ -519,6 +554,35 @@ auth.user = isAuthed ? await auth.client.getUser() : null; const email = auth.user && auth.user.email ? auth.user.email : ""; auth.authorized = Boolean(auth.user) && isAllowedEmail(email); + auth.serverCanManage = null; + + // 로그인되었으면 서버에 사용자 upsert 및 can_manage 동기화(서버가 있을 때만) + if (auth.user) { + try { + const claims = await auth.client.getIdTokenClaims(); + const raw = claims && claims.__raw ? String(claims.__raw) : ""; + if (raw) { + const cfg = getAuthConfig(); + const r = await fetch("/api/auth/sync", { + method: "POST", + headers: { + Authorization: `Bearer ${raw}`, + "X-Auth0-Issuer": `https://${cfg.auth0.domain}/`, + "X-Auth0-ClientId": cfg.auth0.clientId, + }, + }); + if (r.ok) { + const data = await r.json(); + if (data && data.ok) { + auth.serverCanManage = Boolean(data.canManage); + auth.authorized = auth.serverCanManage; + } + } + } + } catch { + // ignore: server not running or blocked + } + } if (auth.user && !auth.authorized) { toastOnce("deny", "로그인은 되었지만 허용 이메일이 아니라서 관리 기능이 잠금 상태입니다."); @@ -538,6 +602,16 @@ await auth.client.loginWithRedirect(); } + async function loginWithConnection(connection) { + if (auth.mode !== "enabled" || !auth.client) { + openAuthModal(); + return; + } + await auth.client.loginWithRedirect({ + authorizationParams: { connection }, + }); + } + async function logout() { if (auth.mode !== "enabled" || !auth.client) return; auth.user = null; @@ -561,6 +635,9 @@ el.authDomain.value = cfg.auth0.domain || ""; el.authClientId.value = cfg.auth0.clientId || ""; el.authAllowedEmails.value = (cfg.allowedEmails || []).join(", "); + if (el.authConnGoogle) el.authConnGoogle.value = cfg.connections.google || ""; + if (el.authConnKakao) el.authConnKakao.value = cfg.connections.kakao || ""; + if (el.authConnNaver) el.authConnNaver.value = cfg.connections.naver || ""; el.authModal.hidden = false; document.body.style.overflow = "hidden"; @@ -883,6 +960,24 @@ if (el.btnLogin) el.btnLogin.addEventListener("click", () => login().catch(() => toast("로그인에 실패했습니다."))); if (el.btnLogout) el.btnLogout.addEventListener("click", () => logout().catch(() => toast("로그아웃에 실패했습니다."))); + if (el.btnGoogle) + el.btnGoogle.addEventListener("click", () => { + const c = getAuthConfig().connections.google; + if (!c) return openAuthModal(); + return loginWithConnection(c).catch(() => toast("로그인에 실패했습니다.")); + }); + if (el.btnKakao) + el.btnKakao.addEventListener("click", () => { + const c = getAuthConfig().connections.kakao; + if (!c) return openAuthModal(); + return loginWithConnection(c).catch(() => toast("로그인에 실패했습니다.")); + }); + if (el.btnNaver) + el.btnNaver.addEventListener("click", () => { + const c = getAuthConfig().connections.naver; + if (!c) return openAuthModal(); + return loginWithConnection(c).catch(() => toast("로그인에 실패했습니다.")); + }); if (el.btnAuthClose) el.btnAuthClose.addEventListener("click", closeAuthModal); if (el.authModal) { @@ -914,6 +1009,9 @@ .split(",") .map((s) => s.trim().toLowerCase()) .filter(Boolean); + const connGoogle = el.authConnGoogle ? String(el.authConnGoogle.value || "").trim() : ""; + const connKakao = el.authConnKakao ? String(el.authConnKakao.value || "").trim() : ""; + const connNaver = el.authConnNaver ? String(el.authConnNaver.value || "").trim() : ""; if (!domain || !clientId) { toast("Domain과 Client ID를 입력하세요."); @@ -922,6 +1020,7 @@ saveAuthOverride({ auth0: { domain, clientId }, + connections: { google: connGoogle, kakao: connKakao, naver: connNaver }, allowedEmails: emails, }); toast("저장했습니다. 페이지를 새로고침합니다."); diff --git a/server.js b/server.js new file mode 100644 index 0000000..70192c4 --- /dev/null +++ b/server.js @@ -0,0 +1,128 @@ +import "dotenv/config"; +import express from "express"; +import helmet from "helmet"; +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import pg from "pg"; +import { createRemoteJWKSet, jwtVerify } from "jose"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +function env(name, fallback = "") { + return (process.env[name] ?? fallback).toString(); +} + +function must(name) { + const v = env(name).trim(); + if (!v) throw new Error(`Missing env: ${name}`); + return v; +} + +function safeIdent(s) { + const v = String(s || "").trim(); + if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(v)) throw new Error("Invalid TABLE identifier"); + return v; +} + +const PORT = Number(env("PORT", "8000")) || 8000; +const DB_HOST = must("DB_HOST"); +const DB_PORT = Number(env("DB_PORT", "5432")) || 5432; +const DB_NAME = must("DB_NAME"); +const DB_USER = must("DB_USER"); +const DB_PASSWORD = must("DB_PASSWORD"); +const TABLE = safeIdent(env("TABLE", "ncue_user") || "ncue_user"); + +const pool = new pg.Pool({ + host: DB_HOST, + port: DB_PORT, + database: DB_NAME, + user: DB_USER, + password: DB_PASSWORD, + ssl: false, + max: 10, +}); + +const app = express(); + +app.use( + helmet({ + contentSecurityPolicy: false, // keep simple for static + Auth0 + }) +); +app.use(express.json({ limit: "256kb" })); + +app.get("/healthz", async (_req, res) => { + try { + await pool.query("select 1 as ok"); + res.json({ ok: true }); + } catch (e) { + res.status(500).json({ ok: false }); + } +}); + +function getBearer(req) { + const h = req.headers.authorization || ""; + const m = /^Bearer\s+(.+)$/i.exec(h); + return m ? m[1].trim() : ""; +} + +async function verifyIdToken(idToken, { issuer, audience }) { + const jwks = createRemoteJWKSet(new URL(`${issuer}.well-known/jwks.json`)); + const { payload } = await jwtVerify(idToken, jwks, { + issuer, + audience, + }); + return payload; +} + +app.post("/api/auth/sync", async (req, res) => { + try { + const idToken = getBearer(req); + if (!idToken) return res.status(401).json({ ok: false, error: "missing_token" }); + + const issuer = String(req.headers["x-auth0-issuer"] || "").trim(); + const audience = String(req.headers["x-auth0-clientid"] || "").trim(); + if (!issuer || !audience) return res.status(400).json({ ok: false, error: "missing_auth0_headers" }); + + const payload = await verifyIdToken(idToken, { issuer, audience }); + + const sub = String(payload.sub || "").trim(); + const email = payload.email ? String(payload.email).trim().toLowerCase() : null; + const name = payload.name ? String(payload.name).trim() : null; + const picture = payload.picture ? String(payload.picture).trim() : null; + const provider = sub.includes("|") ? sub.split("|", 1)[0] : null; + + if (!sub) return res.status(400).json({ ok: false, error: "missing_sub" }); + + const q = ` + insert into public.${TABLE} + (sub, email, name, picture, provider, last_login_at, updated_at) + values + ($1, $2, $3, $4, $5, now(), now()) + on conflict (sub) do update set + email = excluded.email, + name = excluded.name, + picture = excluded.picture, + provider = excluded.provider, + last_login_at = now(), + updated_at = now() + returning can_manage + `; + const r = await pool.query(q, [sub, email, name, picture, provider]); + const canManage = Boolean(r.rows?.[0]?.can_manage); + + res.json({ ok: true, canManage }); + } catch (e) { + res.status(401).json({ ok: false, error: "verify_failed" }); + } +}); + +// Serve static site +app.use(express.static(__dirname, { extensions: ["html"] })); + +app.listen(PORT, () => { + // eslint-disable-next-line no-console + console.log(`listening on http://localhost:${PORT}`); +}); +