Add Auth0 login gate for admin actions

Show login status in header, guard manage actions behind allowed emails, and add Auth0 SPA SDK with CDN fallback. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 17:53:59 +09:00
parent 02082eb16d
commit 97c8fe8069
5 changed files with 339 additions and 5 deletions
--- a/index.html
+++ b/index.html
@@ -7,6 +7,26 @@
    <title>NCue | 개인 링크 홈</title>
    <meta name="description" content="개인 서비스 링크를 모아 관리하는 홈 화면" />
    <link rel="stylesheet" href="./styles.css" />
+    <!-- Auth0 SPA SDK (정적 사이트용) -->
+    <!-- jsDelivr 차단/실패 시 unpkg로 자동 대체 -->
+    <script
+      src="https://cdn.jsdelivr.net/npm/@auth0/auth0-spa-js@2/dist/auth0-spa-js.production.js"
+      onerror="this.onerror=null;this.src='https://unpkg.com/@auth0/auth0-spa-js@2/dist/auth0-spa-js.production.js';"
+    ></script>
+    <script>
+      // 로그인 설정 (관리 기능 잠금용)
+      // 1) Auth0에서 Application(SPA) 생성 후 domain/clientId를 입력하세요.
+      // 2) Allowed Callback URLs / Allowed Logout URLs에 현재 사이트 주소를 등록하세요.
+      //    예: https://drive.daewoongai.com/apps/dashboard/
+      window.AUTH_CONFIG = {
+        auth0: {
+          domain: "",
+          clientId: "",
+        },
+        // 관리 허용 이메일(대소문자 무시)
+        allowedEmails: [],
+      };
+    </script>
    <script defer src="./script.js"></script>
  </head>
  <body>
@@ -47,6 +67,12 @@
          <button class="btn" id="btnTheme" type="button" aria-pressed="false" title="테마 전환">
            테마
          </button>
+          <div class="user" id="user" hidden>
+            <span class="user-dot" aria-hidden="true"></span>
+            <span class="user-text" id="userText">로그인 필요</span>
+          </div>
+          <button class="btn" id="btnLogin" type="button">로그인</button>
+          <button class="btn" id="btnLogout" type="button" hidden>로그아웃</button>
        </div>
      </div>
    </header>
@@ -201,6 +227,16 @@
          "createdAt": "2026-02-07T00:00:00.000Z",
          "updatedAt": "2026-02-07T00:00:00.000Z"
        },
+        {
+          "id": "tts-ncue-net",
+          "title": "TTS",
+          "url": "https://tts.ncue.net/",
+          "description": "입력한 text를 mp3로 변환",
+          "tags": ["text", "mp3", "ncue"],
+          "favorite": false,
+          "createdAt": "2026-02-07T00:00:00.000Z",
+          "updatedAt": "2026-02-07T00:00:00.000Z"
+        },
        {
          "id": "meeting-ncue-net",
          "title": "Meeting",