{"id":569,"date":"2026-06-15T03:06:17","date_gmt":"2026-06-15T03:06:17","guid":{"rendered":"https:\/\/hyc.eshachem.com\/program\/?page_id=569"},"modified":"2026-06-15T10:21:12","modified_gmt":"2026-06-15T10:21:12","slug":"sso-%e5%96%ae%e4%b8%80%e7%99%bb%e5%85%a5%e6%8a%80%e8%a1%93%e6%96%87%e4%bb%b6-next-js","status":"publish","type":"page","link":"https:\/\/hyc.eshachem.com\/program\/birc\/sso-%e5%96%ae%e4%b8%80%e7%99%bb%e5%85%a5%e6%8a%80%e8%a1%93%e6%96%87%e4%bb%b6-next-js\/","title":{"rendered":"Next.js – SSO in BIRC"},"content":{"rendered":"\n

\u672c\u6587\u4ef6\u900f\u904e\u5546\u696d\u667a\u6167\u7814\u7a76\u4e2d\u5fc3 \u2013 \u667a\u6167\u6821\u5712:\u6d3b\u52d5\u7cfb\u7d71\u4f86\u8aaa\u660e\u5546\u667a\u4e2d\u5fc3\u7684SSO\u67b6\u69cb<\/strong>\u3002<\/p>\n\n\n\n

\u5546\u667a\u4e2d\u5fc3\u7684SSO\u70ba\u81ea\u67b6\u4f3a\u670d\u5668\uff0c\u975e<\/strong>Google SSO\uff0c\u4f46\u539f\u7406\u5927\u540c\u5c0f\u7570\u3002<\/p>\n\n\n\n

\u8a72\u6587\u7ae0\u6240\u8ff0\u7a0b\u5f0f\u78bc\u7686\u63d0\u4f9b\u65bc\u6587\u7ae0\u6700\u4e0b\u65b9GitHub\u4e2d\u3002<\/p>\n\n\n\n

\n

\u7248\u672c\uff1a0.1.0
\u6700\u5f8c\u66f4\u65b0\u6642\u9593\uff1a06\/10\/2026
\u6700\u5f8c\u66f4\u65b0\u4eba\u54e1\uff1a\u9673\u6cd3\u6bd3<\/p>\n<\/blockquote>\n\n\n\n

\n\n\n\n

\u8a2d\u8a08\u539f\u5247<\/h2>\n\n\n\n
\u539f\u5247<\/th>\u8aaa\u660e<\/th><\/tr><\/thead>
\u524d\u7aef\u4e0d\u6301\u6709 Client Secret<\/strong><\/td>\u524d\u7aef\u7d55\u4e0d<\/strong>\u76f4\u63a5\u547c\u53eb SSO \/sso\/verify-code<\/code><\/td><\/tr>
\u6388\u6b0a\u78bc\u50c5\u7528\u65bc\u4ea4\u63db<\/strong><\/td>SSO \u56de\u50b3\u7684 code<\/code> \u70ba\u4e00\u6b21\u6027\u6388\u6b0a\u78bc\uff0c\u61c9\u7acb\u5373\u8f49\u4ea4\u5f8c\u7aef\u4ea4\u63db JWT<\/td><\/tr>
JWT \u4f5c\u70ba\u5f8c\u7e8c\u8a8d\u8b49<\/strong><\/td>\u767b\u5165\u5b8c\u6210\u5f8c\uff0c\u6240\u6709\u53d7\u4fdd\u8b77 API \u4ee5 Authorization: Bearer {JWT}<\/code> \u5b58\u53d6<\/td><\/tr>
\u5168\u7ad9\u56de\u8abf\u8655\u7406<\/strong><\/td>SSO \u53ef\u56de\u8df3\u81f3\u4efb\u610f\u9801\u9762\uff0cAuthProvider<\/code> \u7d71\u4e00\u6514\u622a ?code=<\/code> \u53c3\u6578<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n

\u7cfb\u7d71\u89d2\u8272<\/h2>\n\n\n\n
flowchart LR\n    User[\u4f7f\u7528\u8005]\n    FE[Campus Activity \u524d\u7aef]\n    SSO[SSO \u767b\u5165\u4e2d\u5fc3]\n    BE[Campus Activity \u5f8c\u7aef]\n\n    User -->|\u9ede\u64ca\u767b\u5165| FE\n    FE -->|GET \/sso\/prelogin| SSO\n    SSO -->|302 ?code=| FE\n    FE -->|POST \/auth-tokens\/exchange| BE\n    BE -->|X-Auth-Token JWT| FE\n    FE -->|Bearer JWT| BE<\/pre><\/div>\n\n\n\n
\u89d2\u8272<\/th>\u8077\u8cac<\/th><\/tr><\/thead>
SSO \u767b\u5165\u4e2d\u5fc3<\/strong><\/td>Google \u7b49 IdP \u767b\u5165\u3001\u6838\u767c\u4e00\u6b21\u6027\u6388\u6b0a\u78bc<\/td><\/tr>
\u524d\u7aef<\/strong><\/td>\u5c0e\u5411 SSO\u3001\u63a5\u6536 code<\/code>\u3001\u5411\u5f8c\u7aef\u4ea4\u63db JWT\u3001\u5132\u5b58\u4e26\u9644\u5e36 JWT \u547c\u53eb API<\/td><\/tr>
\u5f8c\u7aef<\/strong><\/td>\u4ee5 Client Secret \u9a57\u8b49 code<\/code>\u3001\u5efa\u7acb\/\u66f4\u65b0\u4f7f\u7528\u8005\u3001\u6838\u767c JWT<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
\u6574\u9ad4\u6d41\u7a0b<\/h2>\n\n\n\n
sequenceDiagram\n    participant User as \u4f7f\u7528\u8005\n    participant Navbar as Navbar \/ AuthContext\n    participant SSO as SSO \u767b\u5165\u4e2d\u5fc3\n    participant BE as Campus Activity \u5f8c\u7aef\n\n    User->>Navbar: \u9ede\u64ca\u53f3\u4e0a\u89d2\u300c\u767b\u5165\u300d\n    Navbar->>SSO: GET \/sso\/prelogin?redirect_url={\u76ee\u524d\u9801\u9762\u7db2\u5740}\n    SSO->>User: \u986f\u793a Google \u767b\u5165\u9801\n    User->>SSO: \u5b8c\u6210\u8eab\u5206\u9a57\u8b49\n    SSO->>Navbar: 302 \u8df3\u8f49 redirect_url?code={\u6388\u6b0a\u78bc}\n    Navbar->>BE: POST \/auth-tokens\/exchange<br\/>Header: X-Client-Token: {code}\n    BE->>SSO: POST \/sso\/verify-code\uff08\u50c5\u5f8c\u7aef\uff09\n    SSO-->>BE: { email, name, picture }\n    BE-->>Navbar: 200 OK<br\/>Header: X-Auth-Token: {JWT}\n    Navbar->>Navbar: \u89e3\u6790 JWT\u3001\u5132\u5b58 authToken\u3001\u66f4\u65b0 UI\n    User->>Navbar: \u53f3\u4e0a\u89d2\u986f\u793a\u982d\u50cf\uff08Google \u7167\u7247\u6216\u540d\u7a31\u9996\u5b57\uff09\n    User->>Navbar: \u9ede\u64ca\u982d\u50cf\u9032\u5165 \/profile<\/pre><\/div>\n\n\n\n
\n\n\n\n
\u74b0\u5883\u8b8a\u6578<\/h2>\n\n\n\n
\u8b8a\u6578<\/th>\u5fc5\u586b<\/th>\u8aaa\u660e<\/th>\u7bc4\u4f8b<\/th><\/tr><\/thead>
NEXT_PUBLIC_API_URL<\/code><\/td>\u662f<\/td>\u5f8c\u7aef API Base URL\uff08\u542b \/api<\/code> \u524d\u7db4\uff09<\/td>https:\/\/api.example.com\/api<\/code><\/td><\/tr>
NEXT_PUBLIC_SSO_BASE_URL<\/code><\/td>\u5426<\/td>SSO \u767b\u5165\u4e2d\u5fc3 Base URL<\/td>https:\/\/sso.ntubimdbirc.tw<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
.env.local<\/code> \u7bc4\u4f8b\uff1a<\/strong><\/p>\n\n\n
NEXT_PUBLIC_API_URL=http:\/\/localhost:8080\/api<\/span>\nNEXT_PUBLIC_SSO_BASE_URL=https:\/\/sso.ntubimdbirc.tw<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
\u524d\u7aef\u5be6\u4f5c<\/h2>\n\n\n\n
\u6a94\u6848\u8077\u8cac<\/h3>\n\n\n\n
\u6a94\u6848<\/th>\u8077\u8cac<\/th><\/tr><\/thead>
lib\/sso.ts<\/code><\/td>SSO \u5c0e\u5411 URL\u3001\u5411\u5f8c\u7aef\u4ea4\u63db JWT\u3001JWT \u89e3\u6790\u3001Token \u5132\u5b58<\/td><\/tr>
lib\/api.ts<\/code><\/td>\u9644\u5e36 Authorization: Bearer<\/code> \u7684 API \u8acb\u6c42\u5c01\u88dd<\/td><\/tr>
lib\/hooks\/AuthContext.tsx<\/code><\/td>\u5168\u7ad9\u8a8d\u8b49\u72c0\u614b\u3001SSO \u56de\u8abf\u8655\u7406\u3001\u540c\u6b65 EventsContext \u4f7f\u7528\u8005<\/td><\/tr>
components\/layout\/Navbar.tsx<\/code><\/td>\u672a\u767b\u5165\u986f\u793a\u300c\u767b\u5165\u300d\u3001\u5df2\u767b\u5165\u986f\u793a\u982d\u50cf\u4e26\u9023\u7d50 \/profile<\/code><\/td><\/tr>
app\/layout.tsx<\/code><\/td>\u639b\u8f09 AuthProvider<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u767c\u8d77\u767b\u5165<\/h3>\n\n\n\n
\u4f7f\u7528\u8005\u9ede\u64ca Navbar\u300c\u767b\u5165\u300d\u6642\uff0c\u547c\u53eb startSsoLogin()<\/code>\uff1a<\/p>\n\n\n
const<\/span> redirectUrl = window<\/span>.location.origin + pathname;\nwindow<\/span>.location.href = buildSsoLoginUrl(redirectUrl);\n\/\/ \u2192 https:\/\/sso.ntubimdbirc.tw\/sso\/prelogin?redirect_url={encodeURIComponent(redirectUrl)}<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\u5be6\u4f5c\u4f4d\u7f6e\uff1alib\/sso.ts<\/code> \u2192 buildSsoLoginUrl()<\/code><\/p>\n\n\n\n
\u8655\u7406 SSO \u56de\u8abf<\/h3>\n\n\n\n
AuthProvider<\/code> \u76e3\u807d URL \u67e5\u8a62\u53c3\u6578\uff1a<\/p>\n\n\n\n
\u53c3\u6578<\/th>\u8655\u7406\u65b9\u5f0f<\/th><\/tr><\/thead>
?error=...<\/code><\/td>\u986f\u793a\u932f\u8aa4 Toast\uff0c\u6e05\u9664 URL \u53c3\u6578<\/td><\/tr>
?code=...<\/code><\/td>\u547c\u53eb\u5f8c\u7aef\u4ea4\u63db JWT\uff0c\u6210\u529f\u5f8c router.replace(pathname)<\/code> \u6e05\u9664 code<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
\/\/ lib\/hooks\/AuthContext.tsx\uff08\u6458\u8981\uff09<\/span>\nconst<\/span> code = searchParams.get('code'<\/span>);\nif<\/span> (code) {\n  const<\/span> { token, user } = await<\/span> exchangeCodeForToken(code);\n  saveAuthToken(token);\n  router.replace(pathname); \/\/ \u6e05\u9664 URL \u4e2d\u7684 code<\/span>\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\u5411\u5f8c\u7aef\u4ea4\u63db JWT<\/h3>\n\n\n
\/\/ lib\/sso.ts<\/span>\nconst<\/span> response = await<\/span> fetch(`${NEXT_PUBLIC_API_URL}<\/span>\/auth-tokens\/exchange`<\/span>, {\n  method<\/span>: 'POST'<\/span>,\n  headers<\/span>: {\n    'X-Client-Token'<\/span>: code,\n  },\n});\n\nconst<\/span> jwt = response.headers.get('X-Auth-Token'<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\u9805\u76ee<\/th>\u8aaa\u660e<\/th><\/tr><\/thead>
\u7aef\u9ede<\/td>POST {NEXT_PUBLIC_API_URL}\/auth-tokens\/exchange<\/code><\/td><\/tr>
\u8acb\u6c42 Header<\/td>X-Client-Token: {SSO \u6388\u6b0a\u78bc}<\/code><\/td><\/tr>
\u6210\u529f\u56de\u61c9 Header<\/td>X-Auth-Token: {JWT}<\/code><\/td><\/tr>
\u8a8d\u8b49\u9700\u6c42<\/td>\u4e0d\u9700\u8981 Bearer Token\uff08\u516c\u958b\u7aef\u9ede\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n
CORS\uff1a<\/strong> \u5f8c\u7aef\u5df2\u5c07 X-Auth-Token<\/code> \u52a0\u5165 exposedHeaders<\/code>\uff0c\u524d\u7aef\u624d\u80fd\u5f9e Response Header \u8b80\u53d6 JWT\u3002<\/p>\n<\/blockquote>\n\n\n\n
JWT \u5132\u5b58\u8207\u89e3\u6790<\/h3>\n\n\n\n
\u767b\u5165\u6210\u529f\u5f8c\uff0cJWT \u5132\u5b58\u65bc localStorage<\/code>\uff1a<\/p>\n\n\n
localStorage.setItem('authToken'<\/span>, jwt);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\u4f7f\u7528\u8005\u8cc7\u8a0a\u5f9e JWT Payload \u89e3\u6790\uff08\u4e0d\u9700\u53e6\u5916\u5132\u5b58\u4f7f\u7528\u8005\u7269\u4ef6\uff09\uff1a<\/p>\n\n\n\n
JWT Claim<\/th>\u524d\u7aef\u7528\u9014<\/th><\/tr><\/thead>
sub<\/code><\/td>\u5b78\u6821\u4fe1\u7bb1\uff08email<\/code>\uff09<\/td><\/tr>
id<\/code><\/td>\u672c\u5730\u4f7f\u7528\u8005 ID<\/td><\/tr>
name<\/code><\/td>\u986f\u793a\u540d\u7a31<\/td><\/tr>
picture<\/code><\/td>Google \u982d\u50cf URL<\/td><\/tr>
role<\/code><\/td>\u89d2\u8272\uff08\u5982 ROLE_TEACHER_STUDENT<\/code>\uff09<\/td><\/tr>
exp<\/code><\/td>\u904e\u671f\u6642\u9593\uff0c\u7528\u65bc\u5224\u65b7\u662f\u5426\u9700\u91cd\u65b0\u767b\u5165<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u5be6\u4f5c\u4f4d\u7f6e\uff1alib\/sso.ts<\/code> \u2192 parseJwtPayload()<\/code>\u3001authUserFromJwt()<\/code>\u3001isTokenExpired()<\/code><\/p>\n\n\n\n
\u547c\u53eb\u53d7\u4fdd\u8b77 API<\/h3>\n\n\n\n
\u4f7f\u7528 lib\/api.ts<\/code> \u5c01\u88dd\uff1a<\/p>\n\n\n
import<\/span> { apiJson, apiFetch } from<\/span> '@\/lib\/api'<\/span>;\n\n\/\/ GET \u7bc4\u4f8b<\/span>\nconst<\/span> events = await<\/span> apiJson<Event[]>('\/events'<\/span>);\n\n\/\/ \u81ea\u8a02\u8acb\u6c42<\/span>\nconst<\/span> response = await<\/span> apiFetch('\/events'<\/span>, { method<\/span>: 'GET'<\/span> });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
apiFetch<\/code> \u6703\u81ea\u52d5\uff1a<\/p>\n\n\n\n
    \n
  1. \u5f9e localStorage<\/code> \u8b80\u53d6 authToken<\/code><\/li>\n\n\n\n
  2. \u9644\u52a0 Authorization: Bearer {JWT}<\/code><\/li>\n\n\n\n
  3. \u6536\u5230 401<\/code> \u6642\u6e05\u9664 Token \u4e26\u62cb\u51fa ApiError<\/code><\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n
    UI \u884c\u70ba<\/h2>\n\n\n\n
    Navbar \u53f3\u4e0a\u89d2<\/strong><\/p>\n\n\n\n
    \u72c0\u614b<\/th>\u986f\u793a<\/th>\u884c\u70ba<\/th><\/tr><\/thead>
    \u672a\u767b\u5165<\/td>\u300c\u767b\u5165\u300d\u6309\u9215<\/td>\u89f8\u767c startSsoLogin()<\/code><\/td><\/tr>
    \u5df2\u767b\u5165<\/td>\u5713\u5f62\u982d\u50cf<\/td>\u6709 picture<\/code> \u986f\u793a Google \u7167\u7247\uff0c\u5426\u5247\u986f\u793a\u540d\u7a31\u9996\u5b57<\/td><\/tr>
    \u5df2\u767b\u5165\u9ede\u64ca\u982d\u50cf<\/td>\u2014<\/td>\u5c0e\u5411 \/profile<\/code> \u500b\u4eba\u9801<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u624b\u6a5f\u7248 Overlay \u9078\u55ae\u4ea6\u6709\u5c0d\u61c9\u7684\u767b\u5165\u6309\u9215\u8207\u982d\u50cf\u9023\u7d50\u3002<\/p>\n\n\n\n
    \u500b\u4eba\u9801\u540c\u6b65<\/strong><\/p>\n\n\n\n
    \u767b\u5165\u6210\u529f\u5f8c\uff0cAuthContext<\/code> \u6703\u5c07 JWT \u4e2d\u7684\u4f7f\u7528\u8005\u8cc7\u6599\u540c\u6b65\u81f3 EventsContext<\/code>\uff0c\u4f9b \/profile<\/code> \u7b49\u9801\u9762\u4f7f\u7528\uff1a<\/p>\n\n\n
    \/\/ role \u5c0d\u61c9<\/span>\nROLE_ADMIN \/ ROLE_ACTIVITY_ADMIN \/ ROLE_VENUE_ADMIN \u2192 'admin'<\/span>\n\u5176\u9918 \u2192 'user'<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n\n\n\n
    \u932f\u8aa4\u8655\u7406<\/h2>\n\n\n\n
    SSO \u56de\u8abf\u932f\u8aa4<\/strong><\/p>\n\n\n\n
    SSO \u767b\u5165\u5931\u6557\u6642\uff0c\u6703\u4ee5 ?error={\u4ee3\u78bc}<\/code> \u8df3\u8f49\u56de\u524d\u7aef\u3002AuthContext<\/code> \u4ee5 Toast \u63d0\u793a\u4f7f\u7528\u8005\u3002<\/p>\n\n\n\n
    \u5f8c\u7aef\u4ea4\u63db\u932f\u8aa4<\/strong><\/p>\n\n\n\n
    \u5f8c\u7aef\u56de\u61c9\u683c\u5f0f\uff08\u53c3\u8003\u5f8c\u7aef\u6587\u4ef6\uff09\uff1a<\/p>\n\n\n
    {\n  \"errorCode\"<\/span>: \"SSO_ERROR\"<\/span>,\n  \"message\"<\/span>: \"unauthorized\"<\/span>,\n  \"status\"<\/span>: 401<\/span>\n}<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
    message<\/th>\u524d\u7aef\u5efa\u8b70\u8655\u7406<\/th><\/tr><\/thead>
    missing_code<\/code><\/td>\u63d0\u793a\u300c\u767b\u5165\u8cc7\u8a0a\u4e0d\u5b8c\u6574\uff0c\u8acb\u91cd\u8a66\u300d<\/td><\/tr>
    unauthorized<\/code><\/td>\u63d0\u793a\u300c\u6388\u6b0a\u78bc\u5df2\u904e\u671f\uff0c\u8acb\u91cd\u65b0\u767b\u5165\u300d<\/td><\/tr>
    error_login<\/code><\/td>\u63d0\u793a\u300cSSO \u670d\u52d9\u66ab\u6642\u7121\u6cd5\u9023\u7dda\u300d<\/td><\/tr>
    \u5176\u4ed6<\/td>\u986f\u793a message<\/code> \u6216\u901a\u7528\u300c\u767b\u5165\u5931\u6557\u300d<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    JWT \u904e\u671f<\/strong><\/p>\n\n\n\n
      \n
    • \u9801\u9762\u8f09\u5165\u6642\uff1agetStoredAuth()<\/code> \u6aa2\u67e5 exp<\/code>\uff0c\u904e\u671f\u5247\u8996\u70ba\u672a\u767b\u5165<\/li>\n\n\n\n
    • API \u8acb\u6c42\u6642\uff1aapiFetch<\/code> \u6536\u5230 401<\/code> \u81ea\u52d5\u6e05\u9664 Token<\/li>\n<\/ul>\n\n\n\n
      \u5efa\u8b70\u5f8c\u7e8c\u5728 401<\/code> \u6642\u81ea\u52d5\u89f8\u767c startSsoLogin()<\/code> \u5f15\u5c0e\u91cd\u65b0\u767b\u5165\u3002<\/p>\n\n\n\n
      \n\n\n\n
      \u5b89\u5168\u6027\u8003\u91cf<\/h2>\n\n\n\n
        \n
      1. Client Secret \u4e0d\u5f97\u51fa\u73fe\u5728\u524d\u7aef\u7a0b\u5f0f\u78bc\u6216\u74b0\u5883\u8b8a\u6578\u4e2d\u3002<\/strong><\/li>\n\n\n\n
      2. \u6388\u6b0a\u78bc\u4e00\u6b21\u6027<\/strong>\uff1a\u53d6\u5f97 code<\/code> \u5f8c\u61c9\u7acb\u5373\u4ea4\u63db\uff0c\u4e26\u4ee5 router.replace<\/code> \u6e05\u9664 URL \u53c3\u6578\u3002<\/li>\n\n\n\n
      3. HTTPS<\/strong>\uff1a\u751f\u7522\u74b0\u5883 SSO \u8207 API \u901a\u8a0a\u5fc5\u9808\u4f7f\u7528 HTTPS\u3002<\/li>\n\n\n\n
      4. Token \u5132\u5b58<\/strong>\uff1a\u76ee\u524d\u4f7f\u7528 localStorage<\/code> \u5132\u5b58 JWT\u3002\u82e5\u9700\u66f4\u9ad8\u5b89\u5168\u6027\uff0c\u53ef\u6539\u70ba httpOnly<\/code> Cookie\uff08\u9700\u5f8c\u7aef\u914d\u5408 Set-Cookie\uff09\u3002<\/li>\n\n\n\n
      5. \u4e0d\u8981\u5728\u65e5\u8a8c\u4e2d\u8f38\u51fa JWT \u6216\u6388\u6b0a\u78bc\u3002<\/strong><\/li>\n<\/ol>\n\n\n\n
        \n\n\n\n
        \u672c\u5730\u6e2c\u8a66<\/h2>\n\n\n\n
        \u555f\u52d5\u6b65\u9a5f<\/strong><\/p>\n\n\n
        npm<\/span> install<\/span>\n# \u5efa\u7acb .env<\/span>.local<\/span> \u4e26\u8a2d\u5b9a NEXT_PUBLIC_API_URL<\/span>\nnpm<\/span> run<\/span> dev<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
        \u6e2c\u8a66\u6d41\u7a0b<\/strong><\/p>\n\n\n\n
          \n
        1. \u78ba\u8a8d\u5f8c\u7aef\u5df2\u555f\u52d5\uff0c\u4e14 POST \/api\/auth-tokens\/exchange<\/code> \u53ef\u6b63\u5e38\u904b\u4f5c<\/li>\n\n\n\n
        2. \u958b\u555f\u524d\u7aef\uff08\u9810\u8a2d http:\/\/localhost:3000<\/code>\uff09<\/li>\n\n\n\n
        3. \u9ede\u64ca\u53f3\u4e0a\u89d2\u300c\u767b\u5165\u300d<\/li>\n\n\n\n
        4. \u5b8c\u6210 Google SSO \u767b\u5165<\/li>\n\n\n\n
        5. \u78ba\u8a8d\u8df3\u8f49\u56de\u524d\u7aef\u5f8c\u53f3\u4e0a\u89d2\u986f\u793a\u982d\u50cf<\/li>\n\n\n\n
        6. \u9ede\u64ca\u982d\u50cf\u9032\u5165 \/profile<\/code>\uff0c\u78ba\u8a8d\u540d\u7a31\u8207\u4fe1\u7bb1\u6b63\u78ba<\/li>\n\n\n\n
        7. \u958b\u555f DevTools \u2192 Application \u2192 Local Storage\uff0c\u78ba\u8a8d\u5b58\u5728 authToken<\/code><\/li>\n<\/ol>\n\n\n\n
          \u5e38\u898b\u554f\u984c\u8207\u89e3\u6cd5<\/h3>\n\n\n\n
          \u554f\u984c<\/th>\u53ef\u80fd\u539f\u56e0<\/th>\u89e3\u6cd5<\/th><\/tr><\/thead>
          \u767b\u5165\u5f8c\u6c92\u6709 JWT<\/td>CORS \u672a\u66b4\u9732 X-Auth-Token<\/code><\/td>\u78ba\u8a8d\u5f8c\u7aef CORS exposedHeaders<\/code><\/td><\/tr>
          NEXT_PUBLIC_API_URL \u672a\u8a2d\u5b9a<\/code><\/td>\u7f3a\u5c11\u74b0\u5883\u8b8a\u6578<\/td>\u5efa\u7acb .env.local<\/code><\/td><\/tr>
          \u8df3\u8f49\u5f8c\u51fa\u73fe unauthorized<\/code><\/td>code \u5df2\u4f7f\u7528\u6216\u904e\u671f<\/td>\u91cd\u65b0\u9ede\u64ca\u767b\u5165<\/td><\/tr>
          \u982d\u50cf\u53ea\u986f\u793a\u9996\u5b57<\/td>JWT \u7121 picture<\/code> claim<\/td>\u78ba\u8a8d SSO \u56de\u50b3\u8207\u5f8c\u7aef JWT \u7c3d\u767c\u908f\u8f2f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
          \n\n\n\n
          \u539f\u59cb\u78bc\u7d22\u5f15<\/h2>\n\n\n\n
          \u6a94\u6848<\/th>\u8077\u8cac<\/th><\/tr><\/thead>
          lib\/sso.ts<\/code><\/td>SSO URL \u5efa\u69cb\u3001code \u4ea4\u63db\u3001JWT \u89e3\u6790\u3001Token \u5b58\u53d6<\/td><\/tr>
          lib\/api.ts<\/code><\/td>\u9644\u5e36 Bearer Token \u7684 HTTP \u8acb\u6c42<\/td><\/tr>
          lib\/hooks\/AuthContext.tsx<\/code><\/td>React Context \u8a8d\u8b49\u72c0\u614b\u8207\u56de\u8abf<\/td><\/tr>
          components\/layout\/Navbar.tsx<\/code><\/td>\u767b\u5165\u6309\u9215\u8207\u4f7f\u7528\u8005\u982d\u50cf UI<\/td><\/tr>
          app\/layout.tsx<\/code><\/td>Provider \u639b\u8f09\u9ede<\/td><\/tr>
          docker-compose.prod.yml<\/code><\/td>\u751f\u7522\u74b0\u5883 NEXT_PUBLIC_API_URL<\/code> \u6ce8\u5165<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
          \n\n\n\n
          \u8207\u5f8c\u7aef\u6587\u4ef6\u5c0d\u7167<\/h2>\n\n\n\n
          \u5f8c\u7aef\u6587\u4ef6\u7ae0\u7bc0<\/th>\u524d\u7aef\u5c0d\u61c9\u5be6\u4f5c<\/th><\/tr><\/thead>
          \u00a73 \u6574\u9ad4\u767b\u5165\u6d41\u7a0b<\/td>AuthContext<\/code> + exchangeCodeForToken()<\/code><\/td><\/tr>
          \u00a77.1 \u767c\u8d77\u767b\u5165<\/td>buildSsoLoginUrl()<\/code> + startSsoLogin()<\/code><\/td><\/tr>
          \u00a77.2 \u8655\u7406\u56de\u547c<\/td>AuthProvider<\/code> \u7684 useSearchParams<\/code> effect<\/td><\/tr>
          \u00a77.3 \u4ea4\u63db JWT<\/td>exchangeCodeForToken()<\/code><\/td><\/tr>
          \u00a77.4 \u53d7\u4fdd\u8b77 API<\/td>apiFetch()<\/code> \/ apiJson()<\/code><\/td><\/tr>
          \u00a77.5 CORS<\/td>\u8b80\u53d6 X-Auth-Token<\/code> Response Header<\/td><\/tr>
          \u00a710 \u5b89\u5168\u6027<\/td>\u524d\u7aef\u4e0d\u547c\u53eb \/sso\/verify-code<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
          \u672c\u6587\u4ef6\u900f\u904e\u5546\u696d\u667a\u6167\u7814\u7a76\u4e2d\u5fc3 \u2013 \u667a\u6167\u6821\u5712:\u6d3b\u52d5\u7cfb\u7d71\u4f86\u8aaa\u660e\u5546\u667a\u4e2d\u5fc3\u7684SSO\u67b6\u69cb\u3002 \u5546\u667a\u4e2d\u5fc3\u7684SSO\u70ba\u81ea\u67b6\u4f3a\u670d\u5668\uff0c\u975eGoogle SSO\uff0c\u4f46\u539f\u7406\u5927\u540c\u5c0f\u7570\u3002 \u8a72\u6587\u7ae0\u6240\u8ff0\u7a0b\u5f0f\u78bc\u7686\u63d0\u4f9b\u65bc\u6587\u7ae0\u6700\u4e0b\u65b9GitHub\u4e2d\u3002 \u7248\u672c\uff1a0.1.0\u6700\u5f8c\u66f4\u65b0\u6642\u9593\uff1a06\/10\/2026\u6700\u5f8c\u66f4\u65b0\u4eba\u54e1\uff1a\u9673\u6cd3\u6bd3 \u8a2d\u8a08\u539f\u5247 \u539f\u5247 \u8aaa\u660e \u524d\u7aef\u4e0d\u6301\u6709 Client Secret \u524d\u7aef\u7d55\u4e0d\u76f4\u63a5\u547c\u53eb SSO \/sso\/verify-code \u6388\u6b0a\u78bc\u50c5\u7528\u65bc\u4ea4\u63db SSO \u56de\u50b3\u7684 code \u70ba\u4e00\u6b21\u6027\u6388\u6b0a\u78bc\uff0c\u61c9\u7acb\u5373\u8f49\u4ea4\u5f8c\u7aef\u4ea4\u63db JWT JWT \u4f5c\u70ba\u5f8c\u7e8c\u8a8d\u8b49 \u767b\u5165\u5b8c\u6210\u5f8c\uff0c\u6240\u6709\u53d7\u4fdd\u8b77 API \u4ee5 Authorization: Bearer {JWT} \u5b58\u53d6 \u5168\u7ad9\u56de\u8abf\u8655\u7406 SSO \u53ef\u56de\u8df3\u81f3\u4efb\u610f\u9801\u9762\uff0cAuthProvider \u7d71\u4e00\u6514\u622a ?code= \u53c3\u6578 \u7cfb\u7d71\u89d2\u8272 \u89d2\u8272 \u8077\u8cac SSO \u767b\u5165\u4e2d\u5fc3 Google \u7b49 IdP \u767b\u5165\u3001\u6838\u767c\u4e00\u6b21\u6027\u6388\u6b0a\u78bc \u524d\u7aef \u5c0e\u5411 SSO\u3001\u63a5\u6536 code\u3001\u5411\u5f8c\u7aef\u4ea4\u63db JWT\u3001\u5132\u5b58\u4e26\u9644\u5e36 JWT \u547c\u53eb API \u5f8c\u7aef […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":579,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-569","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t