diff --git a/README.md b/README.md index de12626..8af32f4 100644 --- a/README.md +++ b/README.md @@ -130,11 +130,24 @@ pnpm turbo "email": "user@example.com", "username": "username", "admin": false, + "moderator": false, "avatar_url": "https://example.com/avatar.jpg", - "name": "User Name" + "name": "User Name", + "groups": ["group1", "group2"] } ``` +**响应字段说明：** + +- `id`: 用户唯一标识 +- `email`: 用户邮箱 +- `username`: 用户名 +- `admin`: 是否是管理员 +- `moderator`: 是否是版主 +- `avatar_url`: 头像地址 +- `name`: 用户昵称 +- `groups`: 用户所属的论坛用户组列表 + ### 使用流程 1. 将用户重定向到授权页面（`/oauth/authorize`）。 diff --git a/src/app/()/page.tsx b/src/app/()/page.tsx index eeec66a..dcaa4fa 100644 --- a/src/app/()/page.tsx +++ b/src/app/()/page.tsx @@ -1,5 +1,6 @@ import dynamic from "next/dynamic"; import Link from "next/link"; +import { ArrowRight } from "lucide-react"; import { Button } from "@/components/ui/button"; import { NavBar } from "@/components/layout/nav-bar"; @@ -12,42 +13,139 @@ const DynamicLogo = dynamic(() => import("@/components/dynamic-logo"), { export default function IndexPage() { return ( -
+
-
-
-

- Q58 Connect -

-

- Q58 Connect 是Q58论坛基于 Discourse SSO 身份认证的 OAuth 2.0 - 服务。通过Q58 Connect - 认证服务，将您的Q58账号与第三方应用进行安全、便捷的集成。 -

-
- - - - - - +
+ {/* Hero Section */} +
+
+

+ Q58 Connect +

+

+ 基于 Discourse SSO 的 OAuth + 认证服务，让用户使用论坛账号快速登录您的应用 +

+
+ + + + + + +
+
+
+ + {/* Features Section */} +
+
+
+

+ 使用方法 +

+

+ 只需几个简单步骤，即可在您的应用中集成 Q58 论坛的用户系统 +

+
+ +
+
+ {/* Step 1 */} +
+
+ 1 +
+

+ 创建应用 +

+

+ 登录后在控制台创建您的应用，获取 Client ID 和 Client Secret +

+
+ + {/* Step 2 */} +
+
+ 2 +
+

+ 集成代码 +

+

+ 按照文档说明，在您的应用中集成 OAuth 2.0 认证流程 +

+
+ + {/* Step 3 */} +
+
+ 3 +
+

+ 开始使用 +

+

+ 用户可以使用论坛账号一键登录您的应用，无需重新注册 +

+
+
+
+ + {/* API Example */} +
+
+

示例代码

+
+

+ 重要提示：{" "} + 授权请求必须通过浏览器重定向实现，不能使用 AJAX/Fetch + 等方式直接请求。 +

+
+ 
+                  {`// 1. 重定向到授权页面（必须通过浏览器重定向，不能使用 AJAX/Fetch）
+window.location.href = 'https://connect.q58.pro/oauth/authorize?' + new URLSearchParams({
+  response_type: 'code',
+  client_id: 'your_client_id',
+  redirect_uri: 'https://your-app.com/callback'
+});
+
+// 2. 在回调页面获取访问令牌
+const response = await fetch('https://connect.q58.pro/api/oauth/access_token', {
+  method: 'POST',
+  body: new URLSearchParams({
+    code: '授权码',
+    redirect_uri: 'https://your-app.com/callback'
+  })
+});
+const { access_token } = await response.json();
+
+// 3. 获取用户信息
+const userInfo = await fetch('https://connect.q58.pro/api/oauth/user', {
+  headers: {
+    'Authorization': \`Bearer \${access_token}\`
+  }
+}).then(res => res.json());`}
+
+
+
+