{"id":492,"date":"2026-06-14T11:39:22","date_gmt":"2026-06-14T11:39:22","guid":{"rendered":"https:\/\/hyc.eshachem.com\/program\/?p=492"},"modified":"2026-06-18T04:48:39","modified_gmt":"2026-06-18T04:48:39","slug":"google-sso-x-next-js-%e5%af%a6%e4%bd%9c%e6%89%8b%e5%86%8a","status":"publish","type":"post","link":"https:\/\/hyc.eshachem.com\/program\/google-sso-x-next-js-%e5%af%a6%e4%bd%9c%e6%89%8b%e5%86%8a\/","title":{"rendered":"Google SSO \u00d7 Next.js \u5be6\u4f5c\u624b\u518a"},"content":{"rendered":"\n
\n

\u9069\u7528\u74b0\u5883<\/strong>\uff1aNext.js 14+ App Router\u3001Server action\u3001NextAuth.js v4\u3001TypeScript
\u76ee\u6a19<\/strong>\uff1a\u7167\u672c\u6587\u4ef6\u5f9e\u96f6\u5b8c\u6210 Google \u55ae\u4e00\u767b\u5165\uff08SSO\uff09\uff0c\u542b\u767b\u5165\u9801\u3001Session \u8b80\u53d6\u3001\u672a\u767b\u5165\u5c0e\u56de\u3001\u767b\u51fa\u3002
\u6700\u5f8c\u66f4\u65b0\u65e5\u671f\uff1a06\/14\/2026 \uff5c \u6700\u5f8c\u66f4\u65b0\u4eba\u54e1\uff1a\u9673\u6cd3\u6bd3<\/p>\n<\/blockquote>\n\n\n\n

\n\n\n\n

\u5b8c\u6210\u5f8c\u7684\u6a94\u6848\u7d50\u69cb<\/h3>\n\n\n
your-project\/\n\u251c\u2500\u2500 .env.local\n\u251c\u2500\u2500 app\/\n\u2502   \u251c\u2500\u2500 layout.tsx                          \u2190 \u4fee\u6539\uff1a\u5305 AuthProvider\n\u2502   \u251c\u2500\u2500 login\/page.tsx                      \u2190 \u65b0\u589e\n\u2502   \u2514\u2500\u2500 api\/auth\/[...nextauth]\/route.ts     \u2190 \u65b0\u589e\n\u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 login-form.tsx                      \u2190 \u65b0\u589e\n\u2502   \u251c\u2500\u2500 auth-button.tsx                     \u2190 \u65b0\u589e\uff08\u53ef\u9078\uff09\n\u2502   \u2514\u2500\u2500 providers\/session-provider.tsx      \u2190 \u65b0\u589e\n\u251c\u2500\u2500 lib\/\n\u2502   \u251c\u2500\u2500 auth-env.ts                         \u2190 \u65b0\u589e\n\u2502   \u251c\u2500\u2500 auth-options.ts                     \u2190 \u65b0\u589e\n\u2502   \u2514\u2500\u2500 auth.ts                             \u2190 \u65b0\u589e\n\u2514\u2500\u2500 types\/\n    \u2514\u2500\u2500 next-auth.d.ts                      \u2190 \u65b0\u589e<\/code><\/span><\/pre>\n\n\n
\n\n\n\n
\u5148\u4e86\u89e3\u6d41\u7a0b<\/h2>\n\n\n\n
\u5f9e\u4f7f\u7528\u8005\u9801\u9762\u5230\u5b8c\u6210google sso\u5927\u81f4\u53ef\u4ee5\u5206\u70ba\u4ee5\u4e0b\u5e7e\u500b\u6b65\u9a5f\uff1a<\/p>\n\n\n\n
\u6b65\u9a5f<\/th>\u767c\u751f\u4ec0\u9ebc\u4e8b<\/th><\/tr><\/thead>
\u2460<\/td>\u4f7f\u7528\u8005\u9020\u8a2a\u53d7\u4fdd\u8b77\u9801 \u2192 Server \u7528 getSessionUser()<\/code> \u6aa2\u67e5 \u2192 \u672a\u767b\u5165\u5247 redirect(\"\/login?callbackUrl=...\")<\/code><\/td><\/tr>
\u2461<\/td>\u767b\u5165\u9801\u986f\u793a\u300cGoogle \u767b\u5165\u300d\u2192 \u547c\u53eb signIn(\"google\", { callbackUrl })<\/code><\/td><\/tr>
\u2462<\/td>\u700f\u89bd\u5668\u8df3\u81f3 Google \u6388\u6b0a\u9801<\/td><\/tr>
\u2463<\/td>\u4f7f\u7528\u8005\u540c\u610f \u2192 Google \u5c0e\u5411 \/api\/auth\/callback\/google<\/code><\/td><\/tr>
\u2464<\/td>NextAuth \u63db\u53d6 token\uff0c\u5beb\u5165 Session Cookie<\/td><\/tr>
\u2465<\/td>\u81ea\u52d5\u8df3\u56de callbackUrl<\/code>\uff08\u767b\u5165\u524d\u8981\u53bb\u7684\u9801\u9762\uff09<\/td><\/tr>
\u2466<\/td>\u53d7\u4fdd\u8b77\u9801\u518d\u6b21\u57f7\u884c getSessionUser()<\/code> \u2192 \u6709\u503c \u2192 \u6b63\u5e38\u986f\u793a<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u95dc\u9375 URL\uff08Google Console \u5fc5\u9808\u8a3b\u518a redirect URI\uff09\uff1a<\/strong>
\u8981\u5b8c\u6210Google S S O\uff0c\u4e00\u5207\u7684\u4e00\u5207\u6700\u95dc\u9375\u5c31\u662f\u8981\u544a\u8a34Google\u767b\u5165\u5b8c\u4e4b\u5f8c\u8981\u5c0e\u56de\u6211\u7684\u7db2\u7ad9\uff08\u4e0b\u7ae0\u6703\u8a73\u7d30\u8aaa\u660e\uff09\uff1a<\/p>\n\n\n
http:\/\/localhost:3000\/api\/auth\/callback\/google<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
callbackUrl<\/code> \u662f\u4ec0\u9ebc\uff1f<\/strong>
\u53d7\u4fdd\u8b77\u9801\u5728\u672a\u767b\u5165\u6642\uff0c\u628a\u300c\u767b\u5165\u5f8c\u8981\u56de\u5230\u54ea\u300d\u5beb\u5728 query string\uff1a<\/p>\n\n\n
\/login?callbackUrl=\/profile<\/code><\/span><\/pre>\n\n\n
\u767b\u5165\u6210\u529f\u5f8c NextAuth \u6703\u81ea\u52d5\u5c0e\u5411 \/profile<\/code>\u3002
\u5728\u958b\u59cb\u4e4b\u524d<\/strong>
\u78ba\u4fddtsconfig.json<\/code> \u5df2\u8a2d\u5b9a @\/*<\/code> \u8def\u5f91\u5225\u540d\uff08\u9810\u8a2d create-next-app \u5373\u6709\uff09<\/p>\n\n\n\n
\n\n\n\n
\u6b65\u9a5f 1\uff1aGoogle Cloud Console<\/h2>\n\n\n\n
\n
\u76ee\u7684<\/strong>\uff1a\u5411 Google \u8a3b\u518a\u4f60\u7684\u7db2\u7ad9\uff0c\u53d6\u5f97 OAuth \u6191\u8b49\u3002
\u672c\u6b65\u9a5f\u4e0d\u5beb\u7a0b\u5f0f\u3002<\/strong><\/p>\n<\/blockquote>\n\n\n\n
    \n
  1. \u958b\u555f Google Cloud Console<\/a><\/li>\n\n\n\n
  2. \u5efa\u7acb\u6216\u9078\u64c7\u5c08\u6848<\/li>\n\n\n\n
  3. APIs & Services \u2192 OAuth consent screen<\/strong><\/li>\n<\/ol>\n\n\n\n
      \n
    • User Type\uff1aExternal<\/strong>\uff08\u6216 Workspace \u9078 Internal\uff09<\/li>\n\n\n\n
    • \u586b\u5beb\u61c9\u7528\u7a0b\u5f0f\u540d\u7a31\u3001\u652f\u63f4 Email<\/li>\n\n\n\n
    • \u82e5 External \u4e14\u672a\u767c\u5e03<\/strong>\uff1a\u5230 Test users<\/strong> \u52a0\u5165\u4f60\u7684 Google \u5e33\u865f<\/li>\n<\/ul>\n\n\n\n
        \n
      1. APIs & Services \u2192 Credentials \u2192 Create Credentials \u2192 OAuth client ID<\/strong><\/li>\n<\/ol>\n\n\n\n
          \n
        • Application type\uff1aWeb application<\/strong><\/li>\n\n\n\n
        • Authorized JavaScript origins<\/strong>\uff1a
          http:\/\/localhost:3000<\/code><\/li>\n\n\n\n
        • Authorized redirect URIs<\/strong>\uff1a
          http:\/\/localhost:3000\/api\/auth\/callback\/google<\/code><\/li>\n<\/ul>\n\n\n\n
            \n
          1. \u5efa\u7acb\u5f8c\u8907\u88fd Client ID<\/strong> \u8207 Client Secret<\/strong><\/li>\n<\/ol>\n\n\n\n
            \u9a57\u6536:<\/strong><\/p>\n\n\n\n
              \n
            • [ ] \u624b\u908a\u6709 Client ID\uff08\u7d50\u5c3e apps.googleusercontent.com<\/code>\uff09<\/li>\n\n\n\n
            • [ ] \u624b\u908a\u6709 Client Secret\uff08\u901a\u5e38\u4ee5 GOCSPX-<\/code> \u958b\u982d\uff09<\/li>\n\n\n\n
            • [ ] Redirect URI \u5217\u8868\u4e2d\u6709 \/api\/auth\/callback\/google<\/code><\/li>\n<\/ul>\n\n\n\n
              \n\n\n\n
              \u6b65\u9a5f 2\uff1a\u74b0\u5883\u8b8a\u6578<\/h2>\n\n\n\n
              \n
              \u76ee\u7684<\/strong>\uff1a\u628a Google \u6191\u8b49\u8207 NextAuth \u8a2d\u5b9a\u5beb\u9032\u5c08\u6848\u3002<\/p>\n<\/blockquote>\n\n\n\n
              \u5728\u5c08\u6848\u6839\u76ee\u9304\u5efa\u7acb .env.local<\/code><\/strong>\uff08\u82e5\u5df2\u5b58\u5728\u5247\u8ffd\u52a0\uff09\uff1a<\/p>\n\n\n
              AUTH_GOOGLE_ID=\u8cbc\u4e0a\u4f60\u7684 Client ID\nAUTH_GOOGLE_SECRET=\u8cbc\u4e0a\u4f60\u7684 Client Secret\n\nAUTH_SECRET=\u96a8\u6a5f\u5b57\u4e32\u81f3\u5c1132\u5b57\u5143\nNEXTAUTH_SECRET=\u540c\u4e0a\uff0c\u8207 AUTH_SECRET \u76f8\u540c\u5373\u53ef\n\nNEXTAUTH_URL=http:\/\/localhost:3000<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
              \u8b8a\u6578\u5225\u540d\uff08\u64c7\u4e00\u7d44\u5373\u53ef\uff09<\/h3>\n\n\n\n
              \u7528\u9014<\/th>\u540d\u7a31 A<\/th>\u540d\u7a31 B<\/th><\/tr><\/thead>
              Client ID<\/td>AUTH_GOOGLE_ID<\/code><\/td>GOOGLE_CLIENT_ID<\/code><\/td><\/tr>
              Client Secret<\/td>AUTH_GOOGLE_SECRET<\/code><\/td>GOOGLE_CLIENT_SECRET<\/code><\/td><\/tr>
              Secret<\/td>AUTH_SECRET<\/code><\/td>NEXTAUTH_SECRET<\/code><\/td><\/tr>
              \u7db2\u7ad9 URL<\/td>NEXTAUTH_URL<\/code><\/td>AUTH_URL<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
              \u9a57\u6536:<\/strong><\/p>\n\n\n\n
                \n
              • [ ] .env.local<\/code> \u56db\u9805\u7686\u6709\u503c<\/li>\n\n\n\n
              • [ ] \u91cd\u555f dev server \u5f8c\uff0c\u7d42\u7aef\u6a5f\u6c92\u6709<\/strong> [next-auth][warn][NO_SECRET]<\/code><\/li>\n<\/ul>\n\n\n\n
                \n\n\n\n
                \u6b65\u9a5f 3\uff1a\u5b89\u88dd next-auth<\/h2>\n\n\n
                npm install next-auth<\/code><\/span><\/pre>\n\n\n
                \u9a57\u6536:<\/strong><\/p>\n\n\n\n
                  \n
                • [ ] package.json<\/code> \u7684 dependencies<\/code> \u51fa\u73fe \"next-auth\"<\/code><\/li>\n<\/ul>\n\n\n\n
                  \n\n\n\n
                  \u6b65\u9a5f 4\uff1a\u5efa\u7acb lib\/auth-env.ts<\/code><\/h2>\n\n\n\n
                  \n
                  \u76ee\u7684<\/strong>\uff1a\u96c6\u4e2d\u8b80\u53d6\u74b0\u5883\u8b8a\u6578\uff0c\u907f\u514d\u5728\u5404\u8655\u76f4\u63a5\u5b58\u53d6 process.env<\/code>\u3002<\/p>\n<\/blockquote>\n\n\n\n
                  \u5efa\u7acb lib\/auth-env.ts<\/code>\uff0c\u8cbc\u4e0a\u4ee5\u4e0b\u5b8c\u6574\u5167\u5bb9\uff1a<\/p>\n\n\n
                  export<\/span> function<\/span> getGoogleClientId<\/span>(<\/span>): string<\/span> <\/span>{\n  return<\/span> (\n    process.env.GOOGLE_CLIENT_ID?.trim() ||\n    process.env.AUTH_GOOGLE_ID?.trim() ||\n    \"\"<\/span>\n  );\n}\n\nexport<\/span> function<\/span> getGoogleClientSecret<\/span>(<\/span>): string<\/span> <\/span>{\n  return<\/span> (\n    process.env.GOOGLE_CLIENT_SECRET?.trim() ||\n    process.env.AUTH_GOOGLE_SECRET?.trim() ||\n    \"\"<\/span>\n  );\n}\n\nexport<\/span> function<\/span> getAuthSecret<\/span>(<\/span>): string<\/span> <\/span>{\n  return<\/span> (\n    process.env.NEXTAUTH_SECRET?.trim() ||\n    process.env.AUTH_SECRET?.trim() ||\n    \"\"<\/span>\n  );\n}\n\nexport<\/span> function<\/span> getAuthUrl<\/span>(<\/span>): string<\/span> <\/span>{\n  return<\/span> (\n    process.env.NEXTAUTH_URL?.trim() ||\n    process.env.AUTH_URL?.trim() ||\n    \"http:\/\/localhost:3000\"<\/span>\n  );\n}\n\nexport<\/span> function<\/span> isAuthConfigured<\/span>(<\/span>): boolean<\/span> <\/span>{\n  return<\/span> Boolean<\/span>(\n    getGoogleClientId() && getGoogleClientSecret() && getAuthSecret()\n  );\n}\n\nexport<\/span> function<\/span> getAuthConfigError<\/span>(<\/span>): string<\/span> | null<\/span> <\/span>{\n  if<\/span> (!getGoogleClientId()) {\n    return<\/span> \"\u7f3a\u5c11 GOOGLE_CLIENT_ID \u6216 AUTH_GOOGLE_ID\"<\/span>;\n  }\n  if<\/span> (!getGoogleClientSecret()) {\n    return<\/span> \"\u7f3a\u5c11 GOOGLE_CLIENT_SECRET \u6216 AUTH_GOOGLE_SECRET\"<\/span>;\n  }\n  if<\/span> (!getAuthSecret()) {\n    return<\/span> \"\u7f3a\u5c11 NEXTAUTH_SECRET \u6216 AUTH_SECRET\"<\/span>;\n  }\n  return<\/span> null<\/span>;\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
                  \u9a57\u6536:<\/strong><\/p>\n\n\n\n
                    \n
                  • [ ] \u6a94\u6848\u5b58\u5728\uff0c\u5c08\u6848\u53ef\u6b63\u5e38\u7de8\u8b6f\uff08npm run dev<\/code> \u7121 import \u932f\u8aa4\uff09<\/li>\n<\/ul>\n\n\n\n
                    \n\n\n\n
                    \u6b65\u9a5f 5\uff1a\u5efa\u7acb lib\/auth-options.ts<\/code><\/h2>\n\n\n\n
                    \n
                    \u76ee\u7684<\/strong>\uff1aNextAuth \u6838\u5fc3\u8a2d\u5b9a\u2014\u2014Google Provider\u3001Session callback\u3001\u81ea\u8a02\u767b\u5165\u9801\u8def\u5f91\u3002<\/p>\n<\/blockquote>\n\n\n\n
                    \u5efa\u7acb lib\/auth-options.ts<\/code>\uff1a<\/p>\n\n\n
                    import<\/span> type { NextAuthOptions } from<\/span> \"next-auth\"<\/span>;\nimport<\/span> GoogleProvider from<\/span> \"next-auth\/providers\/google\"<\/span>;\n\nimport<\/span> {\n  getAuthSecret,\n  getAuthUrl,\n  getGoogleClientId,\n  getGoogleClientSecret,\n} from<\/span> \"@\/lib\/auth-env\"<\/span>;\n\nexport<\/span> const<\/span> authOptions: NextAuthOptions = {\n  providers<\/span>: [\n    GoogleProvider({\n      clientId<\/span>: getGoogleClientId(),\n      clientSecret<\/span>: getGoogleClientSecret(),\n    }),\n  ],\n  pages<\/span>: {\n    signIn<\/span>: \"\/login\"<\/span>,\n  },\n  callbacks<\/span>: {\n    session({ session, token }) {\n      if<\/span> (session.user && token.sub) {\n        session.user.id = token.sub;\n      }\n      return<\/span> session;\n    },\n  },\n  secret<\/span>: getAuthSecret(),\n  ...(getAuthUrl() ? { url<\/span>: getAuthUrl() } : {}),\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
                    \u91cd\u9ede\u8aaa\u660e\uff1a<\/strong><\/p>\n\n\n\n
                      \n
                    • pages.signIn: \"\/login\"<\/code> \u2014 NextAuth \u9810\u8a2d\u767b\u5165\u9801\u6539\u70ba\u4f60\u7684 \/login<\/code><\/li>\n\n\n\n
                    • session<\/code> callback \u2014 \u628a Google \u4f7f\u7528\u8005\u552f\u4e00 ID\uff08token.sub<\/code>\uff09\u5beb\u5165 session.user.id<\/code>\uff0c\u5f8c\u7e8c\u7576\u8cc7\u6599\u5eab key \u4f7f\u7528<\/li>\n<\/ul>\n\n\n\n
                      \u9a57\u6536:<\/strong><\/p>\n\n\n\n
                        \n
                      • [ ] \u6a94\u6848\u5b58\u5728\uff0c\u7121 TypeScript \u932f\u8aa4<\/li>\n<\/ul>\n\n\n\n
                        \n\n\n\n
                        \u6b65\u9a5f 6\uff1a\u5efa\u7acb API \u8def\u7531<\/h2>\n\n\n\n
                        \n
                        \u76ee\u7684<\/strong>\uff1a\u63d0\u4f9b NextAuth \u6240\u9700\u7684 HTTP \u7aef\u9ede\uff0c\u542b Google OAuth \u56de\u547c\u3002<\/p>\n<\/blockquote>\n\n\n\n
                        \u5efa\u7acb\u76ee\u9304\u8207\u6a94\u6848 app\/api\/auth\/[...nextauth]\/route.ts<\/code>\uff1a<\/p>\n\n\n
                        import<\/span> NextAuth from<\/span> \"next-auth\"<\/span>;\n\nimport<\/span> { authOptions } from<\/span> \"@\/lib\/auth-options\"<\/span>;\n\nconst<\/span> handler = NextAuth(authOptions);\n\nexport<\/span> { handler as<\/span> GET, handler as<\/span> POST };<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
                        \u6b64\u8def\u7531\u81ea\u52d5\u8655\u7406\uff1a<\/p>\n\n\n\n
                        \u8def\u5f91<\/th>\u7528\u9014<\/th><\/tr><\/thead>
                        \/api\/auth\/signin\/google<\/code><\/td>\u958b\u59cb Google \u767b\u5165<\/td><\/tr>
                        \/api\/auth\/callback\/google<\/code><\/td>Google \u6388\u6b0a\u5f8c\u56de\u547c<\/td><\/tr>
                        \/api\/auth\/session<\/code><\/td>\u8b80\u53d6\u76ee\u524d Session<\/td><\/tr>
                        \/api\/auth\/signout<\/code><\/td>\u767b\u51fa<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                        \u9a57\u6536:<\/strong><\/p>\n\n\n\n
                          \n
                        • [ ] \u700f\u89bd\u5668\u958b\u555f http:\/\/localhost:3000\/api\/auth\/signin\/google<\/code><\/li>\n\n\n\n
                        • [ ] \u80fd\u8df3\u8f49\u5230 Google \u767b\u5165\u9801\uff08\u6216 Google \u5e33\u865f\u9078\u64c7\u9801\uff09<\/li>\n\n\n\n
                        • [ ] \u82e5\u51fa\u73fe redirect_uri_mismatch<\/code> \u2192 \u56de\u5230\u6b65\u9a5f 1 \u6aa2\u67e5 Console \u7684 redirect URI<\/li>\n<\/ul>\n\n\n\n
                          \n\n\n\n
                          \u6b65\u9a5f 7\uff1a\u5efa\u7acb types\/next-auth.d.ts<\/code><\/h2>\n\n\n\n
                          \n
                          \u76ee\u7684<\/strong>\uff1aTypeScript \u9810\u8a2d\u7684 session.user<\/code> \u6c92\u6709 id<\/code>\uff0c\u9700\u64f4\u5145\u578b\u5225\u3002<\/p>\n<\/blockquote>\n\n\n\n
                          \u5efa\u7acb types\/next-auth.d.ts<\/code>\uff1a<\/p>\n\n\n
                          import type { DefaultSession } from \"next-auth\"<\/span>;\n\ndeclare<\/span> module \"next-auth\"<\/span> {\n  interface<\/span> Session<\/span> <\/span>{\n    user: {\n      id: string;\n    } & DefaultSession[\"user\"<\/span>];\n  }\n}\n\ndeclare<\/span> module \"next-auth\/jwt\"<\/span> {\n  interface<\/span> JWT<\/span> <\/span>{\n    sub: string;\n  }\n}\n\nexport {};<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
                          \u9a57\u6536:<\/strong><\/p>\n\n\n\n
                            \n
                          • [ ] \u5f8c\u7e8c\u4f7f\u7528 session.user.id<\/code> \u6642 TypeScript \u4e0d\u5831\u932f<\/li>\n<\/ul>\n\n\n\n
                            \n\n\n\n
                            \u6b65\u9a5f 8\uff1a\u5efa\u7acb lib\/auth.ts<\/code><\/h2>\n\n\n\n
                            \n
                            \u76ee\u7684<\/strong>\uff1aServer \u7aef\u7d71\u4e00\u8b80\u53d6\u767b\u5165\u4f7f\u7528\u8005\u3002\u6240\u6709 Server Component \u8207 API Route \u90fd\u61c9\u547c\u53eb\u6b64\u6a94\u7684\u51fd\u5f0f\u3002<\/strong><\/p>\n<\/blockquote>\n\n\n\n
                            \u5efa\u7acb lib\/auth.ts<\/code>\uff1a<\/p>\n\n\n
                            import<\/span> { getServerSession } from<\/span> \"next-auth\"<\/span>;\n\nimport<\/span> { authOptions } from<\/span> \"@\/lib\/auth-options\"<\/span>;\n\nexport<\/span> async<\/span> function<\/span> getSessionUser<\/span>(<\/span>) <\/span>{\n  const<\/span> session = await<\/span> getServerSession(authOptions);\n  if<\/span> (!session?.user?.id) return<\/span> null<\/span>;\n\n  return<\/span> {\n    id<\/span>: session.user.id,\n    name<\/span>: session.user.name ?? \"\"<\/span>,\n    email<\/span>: session.user.email ?? \"\"<\/span>,\n    image<\/span>: session.user.image ?? \"\"<\/span>,\n  };\n}\n\nexport<\/span> function<\/span> isAdminEmail<\/span>(email: string<\/span>): boolean<\/span> <\/span>{\n  const<\/span> admins = (process.env.ADMIN_EMAILS ?? \"\"<\/span>)\n    .split(\",\"<\/span>)\n    .map((item<\/span>) =><\/span> item.trim().toLowerCase())\n    .filter(Boolean<\/span>);\n\n  return<\/span> admins.includes(email.toLowerCase());\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
                            \u56de\u50b3\u503c\uff1a<\/strong><\/p>\n\n\n\n
                            \u6b04\u4f4d<\/th>\u4f86\u6e90<\/th>\u7528\u9014<\/th><\/tr><\/thead>
                            id<\/code><\/td>Google sub<\/code><\/td>\u4f7f\u7528\u8005\u552f\u4e00 key\uff0c\u5b58\u8cc7\u6599\u5eab \/ JSON<\/td><\/tr>
                            name<\/code><\/td>Google \u59d3\u540d<\/td>\u986f\u793a\u7528<\/td><\/tr>
                            email<\/code><\/td>Google Email<\/td>\u986f\u793a\u3001\u7ba1\u7406\u54e1\u767d\u540d\u55ae<\/td><\/tr>
                            image<\/code><\/td>Google \u982d\u50cf URL<\/td>\u53ef\u9078\u986f\u793a<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                            \u672a\u767b\u5165\u6642 getSessionUser()<\/code> \u56de\u50b3 null<\/code>\u3002<\/p>\n\n\n\n
                            \u9a57\u6536:<\/strong><\/p>\n\n\n\n
                              \n
                            • [ ] \u6a94\u6848\u5b58\u5728\uff0c\u53ef\u88ab\u5176\u4ed6\u6a21\u7d44 import<\/li>\n<\/ul>\n\n\n\n
                              \n\n\n\n
                              \u6b65\u9a5f 9\uff1aSessionProvider \u8207 layout<\/h2>\n\n\n\n
                              \n
                              \u76ee\u7684<\/strong>\uff1aClient Component \u8981\u4f7f\u7528 signIn<\/code> \/ signOut<\/code> \/ useSession<\/code>\uff0c\u6839 layout \u5fc5\u9808\u5305\u4e00\u5c64 Provider\u3002<\/p>\n<\/blockquote>\n\n\n\n
                              9.1 \u5efa\u7acb Provider<\/h3>\n\n\n\n
                              \u5efa\u7acb components\/providers\/session-provider.tsx<\/code>\uff1a<\/p>\n\n\n
                              \"use client\"<\/span>;\n\nimport<\/span> { SessionProvider } from<\/span> \"next-auth\/react\"<\/span>;\n\nexport<\/span> function<\/span> AuthProvider<\/span>({ children }: { children: React.ReactNode }<\/span>) <\/span>{\n  return<\/span> <SessionProvider<\/span>><\/span>{children}<\/SessionProvider<\/span>><\/span><\/span>;\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
                              9.2 \u4fee\u6539 app\/layout.tsx<\/code><\/h3>\n\n\n\n
                              \u5728 <body><\/code> \u5167\u7528 AuthProvider<\/code> \u5305\u4f4f\u6240\u6709\u5167\u5bb9\uff1a<\/p>\n\n\n
                              import<\/span> { AuthProvider } from<\/span> \"@\/components\/providers\/session-provider\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> RootLayout<\/span>({\n  children,\n}: {\n  children: React.ReactNode;\n}<\/span>) <\/span>{\n  return<\/span> (\n    <html<\/span> lang<\/span>=\"zh-TW\"<\/span>><\/span>\n      <body<\/span>><\/span>\n        <AuthProvider<\/span>><\/span>\n          {children}\n        <\/AuthProvider<\/span>><\/span>\n      <\/body<\/span>><\/span>\n    <\/html<\/span>><\/span><\/span>\n  );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
                              \u82e5\u4f60\u5df2\u6709 header \/ main \u7d50\u69cb\uff0c\u653e\u5728 Provider \u88e1\u9762\u5373\u53ef\uff1a<\/p>\n\n\n
                              <AuthProvider<\/span>><\/span>\n  <SiteHeader<\/span> \/><\/span>\n  <main<\/span>><\/span>{children}<\/main<\/span>><\/span>\n<\/AuthProvider<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
                              \u9a57\u6536:<\/strong><\/p>\n\n\n\n
                                \n
                              • [ ] \u9801\u9762\u6b63\u5e38\u6e32\u67d3\uff0c\u7121 useSession must be wrapped in SessionProvider<\/code> \u932f\u8aa4<\/li>\n<\/ul>\n\n\n\n
                                \n\n\n\n
                                \u6b65\u9a5f 10\uff1a\u767b\u5165\u9801<\/h2>\n\n\n\n
                                \n
                                \u76ee\u7684<\/strong>\uff1a\u81ea\u8a02\u767b\u5165 UI\uff0c\u4e26\u6b63\u78ba\u50b3\u905e callbackUrl<\/code> \u7d66 Google \u767b\u5165\u6d41\u7a0b\u3002<\/p>\n<\/blockquote>\n\n\n\n
                                10.1 \u5efa\u7acb components\/login-form.tsx<\/code><\/h3>\n\n\n
                                \"use client\"<\/span>;\n\nimport<\/span> { signIn } from<\/span> \"next-auth\/react\"<\/span>;\n\ntype LoginFormProps = {\n  callbackUrl<\/span>: string;\n  authConfigured: boolean;\n  configError: string | null<\/span>;\n  oauthError?: string;\n};\n\nexport<\/span> function<\/span> LoginForm<\/span>({\n  callbackUrl,\n  authConfigured,\n  configError,\n  oauthError,\n}: LoginFormProps<\/span>) <\/span>{\n  return<\/span> (\n    <div<\/span>><\/span>\n      <h1<\/span>><\/span>\u767b\u5165<\/h1<\/span>><\/span>\n      <p<\/span>><\/span>\u8acb\u4f7f\u7528 Google \u5e33\u865f\u767b\u5165<\/p<\/span>><\/span>\n\n      {!authConfigured && configError ? (\n        <p<\/span>><\/span>Google SSO \u5c1a\u672a\u8a2d\u5b9a\uff1a{configError}<\/p<\/span>><\/span>\n      ) : null}\n\n      {oauthError ? (\n        <p<\/span>><\/span>\u767b\u5165\u5931\u6557\uff0c\u8acb\u78ba\u8a8d Google OAuth \u8a2d\u5b9a\u8207 NEXTAUTH_URL\u3002<\/p<\/span>><\/span>\n      ) : null}\n\n      <button<\/span>\n        type<\/span>=\"button\"<\/span>\n        disabled<\/span>={!authConfigured}<\/span>\n        onClick<\/span>={()<\/span> =><\/span> signIn(\"google\", { callbackUrl })}\n      >\n        \u4f7f\u7528 Google \u767b\u5165\n      <\/button<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
                                10.2 \u5efa\u7acb app\/login\/page.tsx<\/code><\/h3>\n\n\n
                                import<\/span> { redirect } from<\/span> \"next\/navigation\"<\/span>;\n\nimport<\/span> { LoginForm } from<\/span> \"@\/components\/login-form\"<\/span>;\nimport<\/span> { getAuthConfigError, isAuthConfigured } from<\/span> \"@\/lib\/auth-env\"<\/span>;\nimport<\/span> { getSessionUser } from<\/span> \"@\/lib\/auth\"<\/span>;\n\ntype LoginPageProps = {\n  searchParams<\/span>: Promise<\/span><{ callbackUrl?: string; error?: string }>;\n};\n\nfunction<\/span> getSafeCallbackUrl<\/span>(raw?: string<\/span>): string<\/span> <\/span>{\n  if<\/span> (!raw) return<\/span> \"\/\"<\/span>;\n\n  try<\/span> {\n    const<\/span> decoded = decodeURIComponent<\/span>(raw);\n    const<\/span> url = decoded.startsWith(\"http\"<\/span>)\n      ? new<\/span> URL(decoded)\n      : new<\/span> URL(decoded, \"http:\/\/localhost\"<\/span>);\n\n    if<\/span> (url.pathname.startsWith(\"\/login\"<\/span>)) return<\/span> \"\/\"<\/span>;\n    return<\/span> `${url.pathname}<\/span>${url.search}<\/span>`<\/span>;\n  } catch<\/span> {\n    return<\/span> \"\/\"<\/span>;\n  }\n}\n\nexport<\/span> default<\/span> async<\/span> function<\/span> LoginPage<\/span>({ searchParams }: LoginPageProps<\/span>) <\/span>{\n  const<\/span> params = await<\/span> searchParams;\n  const<\/span> callbackUrl = getSafeCallbackUrl(params.callbackUrl);\n\n  const<\/span> user = await<\/span> getSessionUser();\n  if<\/span> (user) {\n    redirect(callbackUrl);\n  }\n\n  return<\/span> (\n    <LoginForm<\/span>\n      callbackUrl<\/span>={callbackUrl}<\/span>\n      authConfigured<\/span>={isAuthConfigured()}<\/span>\n      configError<\/span>={getAuthConfigError()}<\/span>\n      oauthError<\/span>={params.error}<\/span>\n    \/><\/span><\/span>\n  );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
                                getSafeCallbackUrl<\/code> \u505a\u4e86\u4ec0\u9ebc\uff1a<\/strong><\/p>\n\n\n\n