From 0f8e26f815506205017fc6e9863c76952c38f14a Mon Sep 17 00:00:00 2001
From: RockChinQ <1010553892@qq.com>
Date: Sat, 27 Jul 2024 15:32:07 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20oauth2=20app=20=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/build-latest-backend.yaml |   2 +-
 backend/controller/admapi.go                | 119 ++++++++++++++++
 backend/controller/api.go                   |   2 +
 backend/controller/dto.go                   |   8 ++
 backend/core/app.go                         |   3 +-
 backend/database/mongo.go                   |  60 ++++++++
 backend/database/po.go                      |   8 ++
 backend/service/admin.go                    |  52 +++++++
 backend/service/errors.go                   |   3 +
 backend/util/string.go                      |  14 ++
 frontend/package.json                       |   1 +
 frontend/src/components/BanRecordCard.vue   |   2 +-
 frontend/src/components/OAuthAppCard.vue    | 111 +++++++++++++++
 frontend/src/pages/admin.vue                | 150 +++++++++++++++++++-
 14 files changed, 529 insertions(+), 6 deletions(-)
 create mode 100644 backend/controller/admapi.go
 create mode 100644 backend/service/admin.go
 create mode 100644 frontend/src/components/OAuthAppCard.vue

diff --git a/.github/workflows/build-latest-backend.yaml b/.github/workflows/build-latest-backend.yaml
index 61ef7b8..6efcde7 100644
--- a/.github/workflows/build-latest-backend.yaml
+++ b/.github/workflows/build-latest-backend.yaml
@@ -56,5 +56,5 @@ jobs:
             --header 'Authorization: Bearer ${{ secrets.ONEBOT_V11_TOKEN }}' \
             --data '{
                 "group_id": ${{ secrets.ONEBOT_V11_GROUP_ID }},
-                "message": "${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} 构建完成。"
+                "message": "Campux 构建完成。"
             }'
\ No newline at end of file
diff --git a/backend/controller/admapi.go b/backend/controller/admapi.go
new file mode 100644
index 0000000..e9e028f
--- /dev/null
+++ b/backend/controller/admapi.go
@@ -0,0 +1,119 @@
+package controller
+
+import (
+	"github.com/RockChinQ/Campux/backend/database"
+	"github.com/RockChinQ/Campux/backend/service"
+	"github.com/gin-gonic/gin"
+)
+
+type AdminRouter struct {
+	APIRouter
+	AdminService service.AdminService
+}
+
+func NewAdminRouter(rg *gin.RouterGroup, as service.AdminService) *AdminRouter {
+	ar := &AdminRouter{
+		AdminService: as,
+	}
+
+	group := rg.Group("/admin")
+
+	// bind routes
+	group.POST("/add-oauth2-app", ar.AddOAuth2App)
+	group.GET("/get-oauth2-apps", ar.GetOAuth2AppList)
+	group.DELETE("/del-oauth2-app/:id", ar.DeleteOAuth2App)
+
+	return ar
+}
+
+// 添加一个OAuth2应用
+func (ar *AdminRouter) AddOAuth2App(c *gin.Context) {
+
+	uin, err := ar.Auth(c, UserOnly)
+
+	if err != nil {
+		return
+	}
+
+	if !ar.AdminService.CheckUserGroup(uin, []database.UserGroup{
+		database.USER_GROUP_ADMIN,
+	}) {
+		ar.StatusCode(c, 401, "权限不足")
+		return
+	}
+
+	// 取body的json里的appname
+	var body OAuth2AppCreateBody
+
+	if err := c.ShouldBindJSON(&body); err != nil {
+		ar.Fail(c, 1, err.Error())
+		return
+	}
+
+	// 创建OAuth2应用
+	app, err := ar.AdminService.AddOAuth2App(body.Name, body.Emoji)
+
+	if err != nil {
+		ar.Fail(c, 2, err.Error())
+		return
+	}
+
+	ar.Success(c, app)
+}
+
+// 获取 OAuth2 应用列表
+func (ar *AdminRouter) GetOAuth2AppList(c *gin.Context) {
+	uin, err := ar.Auth(c, UserOnly)
+
+	if err != nil {
+		return
+	}
+
+	if !ar.AdminService.CheckUserGroup(uin, []database.UserGroup{
+		database.USER_GROUP_ADMIN,
+	}) {
+		ar.StatusCode(c, 401, "权限不足")
+		return
+	}
+
+	// 获取OAuth2应用列表
+	list, err := ar.AdminService.GetOAuth2Apps()
+
+	if err != nil {
+		ar.Fail(c, 1, err.Error())
+		return
+	}
+
+	ar.Success(c, gin.H{
+		"list": list,
+	})
+}
+
+// 删除一个OAuth2应用
+func (ar *AdminRouter) DeleteOAuth2App(c *gin.Context) {
+	uin, err := ar.Auth(c, UserOnly)
+
+	if err != nil {
+		return
+	}
+
+	if !ar.AdminService.CheckUserGroup(uin, []database.UserGroup{
+		database.USER_GROUP_ADMIN,
+	}) {
+		ar.StatusCode(c, 401, "权限不足")
+		return
+	}
+
+	// 取路由参数
+	appID := c.Param("id")
+
+	// 删除OAuth2应用
+	err = ar.AdminService.DeleteOAuth2App(appID)
+
+	if err != nil {
+		ar.Fail(c, 1, err.Error())
+		return
+	}
+
+	ar.Success(c, nil)
+}
diff --git a/backend/controller/api.go b/backend/controller/api.go
index 6b48eda..1139907 100644
--- a/backend/controller/api.go
+++ b/backend/controller/api.go
@@ -21,6 +21,7 @@ func NewApiController(
 	as service.AccountService,
 	ps service.PostService,
 	ms service.MiscService,
+	ads service.AdminService,
 ) *APIController {
 	r := gin.Default()
 
@@ -63,6 +64,7 @@ func NewApiController(
 	NewAccountRouter(rg, as)
 	NewPostRouter(rg, ps, as)
 	NewMiscRouter(rg, ms)
+	NewAdminRouter(rg, ads)
 
 	return &APIController{
 		R: r,
diff --git a/backend/controller/dto.go b/backend/controller/dto.go
index eb8d7f8..c461a2e 100644
--- a/backend/controller/dto.go
+++ b/backend/controller/dto.go
@@ -151,3 +151,11 @@ type GetBanListBody struct {
 	// 时间排序
 	TimeOrder *int `json:"time_order" binding:"required"`
 }
+
+type OAuth2AppCreateBody struct {
+	// 名称
+	Name string `json:"name" binding:"required"`
+
+	// emoji
+	Emoji string `json:"emoji" binding:"required"`
+}
diff --git a/backend/core/app.go b/backend/core/app.go
index a79120e..96e5229 100644
--- a/backend/core/app.go
+++ b/backend/core/app.go
@@ -27,6 +27,7 @@ func NewApplication() *Application {
 	as := service.NewAccountService(*db)
 	ps := service.NewPostService(*db, *fs, *msq)
 	ms := service.NewMiscService(*db)
+	ads := service.NewAdminService(*db)
 
 	err := ScheduleRoutines(*db, *msq)
 	if err != nil {
@@ -34,7 +35,7 @@ func NewApplication() *Application {
 	}
 
 	return &Application{
-		API: controller.NewApiController(*as, *ps, *ms),
+		API: controller.NewApiController(*as, *ps, *ms, *ads),
 	}
 }
 
diff --git a/backend/database/mongo.go b/backend/database/mongo.go
index c611674..6d13db1 100644
--- a/backend/database/mongo.go
+++ b/backend/database/mongo.go
@@ -18,6 +18,7 @@ const (
 	POST_VERBOSE_COLLECTION = "post_verbose"
 	METADATA_COLLECTION     = "metadata"
 	BAN_LIST_COLLECTION     = "ban_list"
+	OAUTH_APP_COLLECTION    = "oauth_app"
 )
 
 type Metadata struct {
@@ -563,3 +564,62 @@ func (m *MongoDBManager) GetMetadata(key string) (string, error) {
 	}
 	return meta.Value, nil
 }
+
+func (m *MongoDBManager) AddOAuth2App(app *OAuthAppPO) error {
+	_, err := m.Client.Database(viper.GetString("database.mongo.db")).Collection(OAUTH_APP_COLLECTION).InsertOne(context.TODO(), app)
+	return err
+}
+
+func (m *MongoDBManager) GetOAuth2App(clientID string) (*OAuthAppPO, error) {
+	var app OAuthAppPO
+	err := m.Client.Database(viper.GetString("database.mongo.db")).Collection(OAUTH_APP_COLLECTION).FindOne(
+		context.TODO(),
+		bson.M{"client_id": clientID},
+	).Decode(&app)
+	if err != nil {
+		if err == mongo.ErrNoDocuments {
+			return nil, nil
+		}
+		return nil, err
+	}
+	return &app, nil
+}
+
+func (m *MongoDBManager) GetOAuth2AppByName(name string) (*OAuthAppPO, error) {
+	// 若不存在，返回 nil, nil
+	var app OAuthAppPO
+
+	err := m.Client.Database(viper.GetString("database.mongo.db")).Collection(OAUTH_APP_COLLECTION).FindOne(
+		context.TODO(),
+		bson.M{"name": name},
+	).Decode(&app)
+	if err != nil {
+		if err == mongo.ErrNoDocuments {
+			return nil, nil
+		}
+		return nil, err
+	}
+	return &app, nil
+}
+
+// list
+func (m *MongoDBManager) GetOAuth2Apps() ([]OAuthAppPO, error) {
+	var apps []OAuthAppPO
+	cursor, err := m.Client.Database(viper.GetString("database.mongo.db")).Collection(OAUTH_APP_COLLECTION).Find(context.TODO(), bson.M{})
+	if err != nil {
+		return nil, err
+	}
+	defer cursor.Close(context.Background())
+
+	err = cursor.All(context.Background(), &apps)
+	if err != nil {
+		return nil, err
+	}
+
+	return apps, nil
+}
+
+func (m *MongoDBManager) DeleteOAuth2App(clientID string) error {
+	_, err := m.Client.Database(viper.GetString("database.mongo.db")).Collection(OAUTH_APP_COLLECTION).DeleteOne(context.TODO(), bson.M{"client_id": clientID})
+	return err
+}
diff --git a/backend/database/po.go b/backend/database/po.go
index 5b5d6b5..5502982 100644
--- a/backend/database/po.go
+++ b/backend/database/po.go
@@ -84,3 +84,11 @@ const (
 	REVIEW_OPTION_APPROVE ReviewOption = "approve"
 	REVIEW_OPTION_REJECT  ReviewOption = "reject"
 )
+
+type OAuthAppPO struct {
+	Name         string    `json:"name" bson:"name"`                   // 应用名称
+	Emoji        string    `json:"emoji" bson:"emoji"`                 // Emoji
+	ClientID     string    `json:"client_id" bson:"client_id"`         // 客户端ID
+	ClientSecret string    `json:"client_secret" bson:"client_secret"` // 客户端密钥
+	CreatedAt    time.Time `json:"created_at" bson:"created_at"`       // CST时间
+}
diff --git a/backend/service/admin.go b/backend/service/admin.go
new file mode 100644
index 0000000..88ac97f
--- /dev/null
+++ b/backend/service/admin.go
@@ -0,0 +1,52 @@
+package service
+
+import (
+	"github.com/RockChinQ/Campux/backend/database"
+	"github.com/RockChinQ/Campux/backend/util"
+	"github.com/google/uuid"
+)
+
+type AdminService struct {
+	CommonService
+}
+
+func NewAdminService(db database.MongoDBManager) *AdminService {
+	return &AdminService{
+		CommonService: CommonService{
+			DB: db,
+		},
+	}
+}
+
+func (as *AdminService) AddOAuth2App(name, emoji string) (*database.OAuthAppPO, error) {
+	check, err := as.DB.GetOAuth2AppByName(name)
+
+	if err != nil {
+		return nil, err
+	}
+
+	if check != nil {
+		return nil, ErrOAuth2AppAlreadyExist
+	}
+
+	app := &database.OAuthAppPO{
+		Name:         name,
+		Emoji:        emoji,
+		ClientID:     util.RandomString(16),
+		ClientSecret: uuid.New().String(),
+		CreatedAt:    util.GetCSTTime(),
+	}
+
+	err = as.DB.AddOAuth2App(app)
+
+	return app, err
+}
+
+func (as *AdminService) GetOAuth2Apps() ([]database.OAuthAppPO, error) {
+	return as.DB.GetOAuth2Apps()
+}
+
+// delete
+func (as *AdminService) DeleteOAuth2App(appID string) error {
+	return as.DB.DeleteOAuth2App(appID)
+}
diff --git a/backend/service/errors.go b/backend/service/errors.go
index 4bf8c6c..d680e98 100644
--- a/backend/service/errors.go
+++ b/backend/service/errors.go
@@ -13,3 +13,6 @@ var ErrPasswordIncorrect = errors.New("密码错误")
 
 // 不允许的图片后缀
 var ErrInvalidImageSuffix = errors.New("不允许的图片后缀")
+
+// OAuth2应用名称已存在
+var ErrOAuth2AppAlreadyExist = errors.New("OAuth2应用名称已存在")
diff --git a/backend/util/string.go b/backend/util/string.go
index b0320b9..eef5e9d 100644
--- a/backend/util/string.go
+++ b/backend/util/string.go
@@ -1,5 +1,7 @@
 package util
 
+import "math/rand"
+
 func StringInSlice(str string, list []string) bool {
 	for _, v := range list {
 		if v == str {
@@ -8,3 +10,15 @@ func StringInSlice(str string, list []string) bool {
 	}
 	return false
 }
+
+func RandomString(length int) string {
+	list := []byte("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789")
+
+	var result []byte
+
+	for i := 0; i < length; i++ {
+		result = append(result, list[rand.Intn(len(list))])
+	}
+
+	return string(result)
+}
diff --git a/frontend/package.json b/frontend/package.json
index 1cc48d5..dd5dab8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "roboto-fontface": "*",
     "vue": "^3.4.0",
     "vue-cookies": "^1.8.4",
+    "vue3-emoji-picker": "^1.1.8",
     "vuetify": "^3.5.0",
     "vuex": "^4.1.0"
   },
diff --git a/frontend/src/components/BanRecordCard.vue b/frontend/src/components/BanRecordCard.vue
index 1287ff9..60fac4c 100644
--- a/frontend/src/components/BanRecordCard.vue
+++ b/frontend/src/components/BanRecordCard.vue
@@ -30,7 +30,7 @@
 
 <script>
 export default {
-    name: 'AccountCard',
+    name: 'BanRecordCard',
     props: ['banRecord'],
     data() {
         return {
diff --git a/frontend/src/components/OAuthAppCard.vue b/frontend/src/components/OAuthAppCard.vue
new file mode 100644
index 0000000..50bc394
--- /dev/null
+++ b/frontend/src/components/OAuthAppCard.vue
@@ -0,0 +1,111 @@
+<template>
+    <v-card class="mx-auto appcard" max-width="400"
+        style="border-radius: 10px; color: #fff">
+        <p id="app-emoji">{{ oauthApp.emoji }}</p>
+        <div id="app-attrs">
+            <p id="app-name">
+                {{ oauthApp.name }}
+            </p>
+            <div id="app-keys">
+                <p><strong>Client ID: </strong>{{ oauthApp.client_id }}</p>
+                <p><strong>Client Secret: </strong>{{ oauthApp.client_secret }}</p>
+            </div>
+
+        </div>
+
+        <div id="app-op-btns">
+
+
+        <v-btn color="red" text @click="deletingDialog = true">删除</v-btn>
+        </div>
+        
+    </v-card>
+
+    <v-dialog v-model="deletingDialog" max-width="400">
+        <v-card>
+            <v-card-title>删除应用</v-card-title>
+            <v-card-text>
+                <p>确定要删除应用 <strong>{{ oauthApp.name }}</strong> 吗？Client ID 和 Client Secret 将永久失效！</p>
+            </v-card-text>
+            <v-card-actions>
+                <v-btn text @click="deletingDialog = false">取消</v-btn>
+                <v-btn color="red" text @click="deleteApp">确定</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+export default {
+    name: 'OAuthAppCard',
+    props: ['oauthApp'],
+    data() {
+        return {
+            deletingDialog: false,
+        }
+    },
+    mounted() {
+
+    },
+    methods: {
+        toast(msg, color = 'error') {
+            this.$emit('toast', msg, color)
+        },
+        deleteApp() {
+            this.$emit('deleteApp', this.oauthApp.client_id)
+        },
+    }
+}
+</script>
+
+<style>
+.appcard {
+    margin-bottom: 16px;
+    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+    background-color: rgb(38, 139, 255);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+#app-emoji {
+    font-size: 3.4rem;
+    text-align: center;
+    margin: 1rem;
+}
+
+#app-attrs {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    margin-block: 0.6rem;
+    margin-inline: 0.5rem;
+}
+
+#app-name {
+    font-size: 1.3rem;
+    text-align: center;
+    font-weight: 700;
+}
+
+#app-keys {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    font-size: 0.8rem;
+}
+
+strong {
+    user-select: none;
+}
+
+#app-op-btns {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-inline-end: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/pages/admin.vue b/frontend/src/pages/admin.vue
index 97acc0c..6d75453 100644
--- a/frontend/src/pages/admin.vue
+++ b/frontend/src/pages/admin.vue
@@ -7,6 +7,7 @@
     <v-tabs id="tabs" v-model="tab" align-tabs="center" color="deep-purple-accent-4" show-arrows>
         <v-tab value="1">🪪 账号</v-tab>
         <v-tab value="2">🚫 封禁记录</v-tab>
+        <v-tab value="3" v-if="$store.state.account.userGroup === 'admin'">🔑 OAuth 2 应用</v-tab>
     </v-tabs>
 
     <v-divider id="hdivider"></v-divider>
@@ -23,7 +24,7 @@
                         <v-select v-model="filter.user_group" label="按用户组筛选" style="margin-inline: 10px;width: 30px"
                             :items="['any', 'user', 'member', 'admin']" variant="solo"></v-select>
 
-                        <v-btn @click="getAccounts" color="primary" style="margin-top: 8px; " size="large">查找</v-btn>
+                        <v-btn @click="getAccounts" color="primary" style="margin-top: 8px; " size="large" :loading="accountRefreshing">查找</v-btn>
                     </div>
                 </div>
                 <v-pagination :length="accountPages" v-model="filter.page" style="margin-top: -10px"
@@ -48,7 +49,7 @@
 
                         <v-checkbox v-model="banListFilter.only_valid" label="仅生效中的" style="margin-inline: 10px;"
                             @change="getBanList"></v-checkbox>
-                        <v-btn @click="getBanList" color="primary" style="margin-top: 8px; " size="large">查找</v-btn>
+                        <v-btn @click="getBanList" color="primary" style="margin-top: 8px; " size="large" :loading="banlistRefreshing">查找</v-btn>
                     </div>
                 </div>
 
@@ -61,6 +62,22 @@
                 </div>
             </div>
         </v-window-item>
+        <v-window-item value="3">
+            <div style="padding: 16px;">
+                <!--操作按钮-->
+                <div id="oauthOps">
+                    <v-btn color="primary" @click="showOAuthAppCreateDialog = true">新建 OAuth2 应用</v-btn>
+                    <v-btn color="primary" style="margin-inline: 0.8rem;" @click="getOAuthApps" :loading="oauthRefreshing">刷新</v-btn>
+                </div>
+
+                <div
+                    style="overflow-y: scroll; max-height: calc(100vh - 260px); min-height: calc(100vh - 360px);margin-top: 2rem">
+                    <OAuthAppCard v-for="o in oauthApps" :key="o.name" :oauthApp="o" style="margin-top: 16px"
+                        @toast="toast" @deleteApp="deleteOAuthApp" />
+
+                </div>
+            </div>
+        </v-window-item>
     </v-window>
 
     <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout" style="margin-bottom: 64px">
@@ -77,13 +94,40 @@
         </v-card>
     </v-dialog>
 
+    <v-dialog v-model="showOAuthAppCreateDialog" width="auto">
+        <v-card>
+            <v-card-title>新建 OAuth2 应用</v-card-title>
+            <v-card-text>
+                <v-text-field v-model="newOAuthApp.name" label="应用名称" variant="solo"></v-text-field>
+                <div id="emoji-picking">
+                    <p id="oauth-emoji">{{ newOAuthApp.emoji }}</p>
+                    <EmojiPicker id="oauth-emoji-picker" :native="true" @select="onEmojiSelect" />
+                </div>
+            </v-card-text>
+            <v-card-actions>
+                <v-btn text @click="showOAuthAppCreateDialog = false">取消</v-btn>
+                <v-btn color="primary" @click="createOAuthApp">确定</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
 </template>
 
 <script>
 import AccountCard from '@/components/AccountCard.vue';
 import BanRecordCard from '@/components/BanRecordCard.vue';
+import OAuthAppCard from '@/components/OAuthAppCard.vue';
+
+import EmojiPicker from 'vue3-emoji-picker'
+import 'vue3-emoji-picker/css'
 
 export default {
+    components: {
+        AccountCard,
+        BanRecordCard,
+        OAuthAppCard,
+        EmojiPicker
+    },
     data() {
         return {
             showServiceHint: false,
@@ -99,6 +143,7 @@ export default {
             displayInnerWindow: '',
             tab: null,
             accounts: [],
+            accountRefreshing: false,
             filter: {
                 uin: '',
                 user_group: 'any',
@@ -114,8 +159,16 @@ export default {
                 page_size: 10,
                 time_order: -1
             },
+            banlistRefreshing: false,
             banRecords: [],
-            banPages: 1
+            banPages: 1,
+            oauthApps: [],
+            oauthRefreshing: false,
+            showOAuthAppCreateDialog: false,
+            newOAuthApp: {
+                name: '',
+                emoji: '🥰',
+            }
         }
     },
 
@@ -125,6 +178,8 @@ export default {
                 this.getAccounts()
             } else if (this.tab === '2') {
                 this.getBanList()
+            } else if (this.tab === '3') {
+                this.getOAuthApps()
             }
         }
     },
@@ -176,6 +231,9 @@ export default {
             } else {
                 this.filter.uin = parseInt(this.filter.uin)
             }
+
+            this.accountRefreshing = true
+
             this.$axios.post('/v1/account/get-accounts', this.filter)
                 .then(res => {
                     if (res.data.code === 0) {
@@ -195,6 +253,9 @@ export default {
                     this.toast('获取账号失败：' + err)
                     console.error(err)
                 })
+                .finally(() => {
+                    this.accountRefreshing = false
+                })
         },
 
         changeGroup(account, newGroup) {
@@ -244,6 +305,7 @@ export default {
             } else {
                 this.banListFilter.uin = parseInt(this.banListFilter.uin)
             }
+            this.banlistRefreshing = true
             this.$axios.post('/v1/account/get-ban-list', this.banListFilter)
                 .then(res => {
                     if (res.data.code === 0) {
@@ -269,6 +331,9 @@ export default {
                     this.toast('获取封禁列表失败：' + err)
                     console.error(err)
                 })
+                .finally(() => {
+                    this.banlistRefreshing = false
+                })
         },
 
         unban(uin) {
@@ -287,6 +352,69 @@ export default {
                     this.toast('解封失败：' + err)
                     console.error(err)
                 })
+        },
+
+        getOAuthApps() {
+            this.oauthRefreshing = true
+
+            this.$axios.get('/v1/admin/get-oauth2-apps')
+                .then(res => {
+                    if (res.data.code === 0) {
+                        this.oauthApps = res.data.data.list
+                        console.log(this.oauthApps)
+                    } else {
+                        this.toast('获取OAuth应用失败：' + res.data.msg)
+                    }
+                })
+                .catch(err => {
+                    this.toast('获取OAuth应用失败：' + err)
+                    console.error(err)
+                })
+                .finally(() => {
+                    this.oauthRefreshing = false
+                })
+        },
+        onEmojiSelect(emoji) {
+            this.newOAuthApp.emoji = emoji.i
+        },
+        createOAuthApp() {
+
+            if (this.newOAuthApp.name === '') {
+                this.toast('应用名称不能为空')
+                return
+            }
+
+            this.$axios.post('/v1/admin/add-oauth2-app', this.newOAuthApp)
+                .then(res => {
+                    if (res.data.code === 0) {
+                        this.toast('创建成功', 'success')
+                        this.getOAuthApps()
+                        this.showOAuthAppCreateDialog = false
+                        this.newOAuthApp.name = ''
+                        this.newOAuthApp.emoji = '🥰'
+                    } else {
+                        this.toast('创建失败：' + res.data.msg)
+                    }
+                })
+                .catch(err => {
+                    this.toast('创建失败：' + err)
+                    console.error(err)
+                })
+        },
+        deleteOAuthApp(appID) {
+            this.$axios.delete('/v1/admin/del-oauth2-app/'+appID)
+                .then(res => {
+                    if (res.data.code === 0) {
+                        this.toast('删除成功', 'success')
+                        this.getOAuthApps()
+                    } else {
+                        this.toast('删除失败：' + res.data.msg)
+                    }
+                })
+                .catch(err => {
+                    this.toast('删除失败：' + err)
+                    console.error(err)
+                })
         }
 
     }
@@ -318,6 +446,22 @@ export default {
     min-height: 74vh;
 }
 
+#emoji-picking {
+    display: flex;
+    flex-direction: row;
+}
+
+#oauth-emoji {
+    font-size: 48px;
+    text-align: center;
+    margin-right: 1rem;
+}
+
+#oauth-emoji-picker {
+    width: 15rem;
+    height: 17rem;
+}
+
 
 /* 适配pc端 */
 @media (min-width: 600px) {

From 960a327da174ff763830782e6dae0f235707f54b Mon Sep 17 00:00:00 2001
From: RockChinQ <1010553892@qq.com>
Date: Sat, 27 Jul 2024 18:46:37 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20oauth2=20=E6=8E=88=E6=9D=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/config/config.go       |  10 ++-
 backend/controller/api.go      |   6 +-
 backend/controller/dto.go      |  16 +++++
 backend/controller/oauthapi.go | 110 +++++++++++++++++++++++++++++++++
 backend/core/app.go            |   3 +-
 backend/mq/redis.go            |  11 ++++
 backend/service/account.go     |   2 +-
 backend/service/errors.go      |   3 +
 backend/service/oauth.go       |  67 ++++++++++++++++++++
 backend/util/jwt.go            |  87 ++++++++++++++++++++++++--
 frontend/package.json          |   1 +
 frontend/src/main.js           |   6 ++
 frontend/src/pages/auth.vue    |  99 ++++++++++++++++++++++++++---
 frontend/src/pages/index.vue   |  13 ++--
 frontend/src/router/index.js   |   1 -
 frontend/src/store/index.js    |   7 ++-
 16 files changed, 415 insertions(+), 27 deletions(-)
 create mode 100644 backend/controller/oauthapi.go
 create mode 100644 backend/service/oauth.go

diff --git a/backend/config/config.go b/backend/config/config.go
index 02b5e17..85e1a2b 100644
--- a/backend/config/config.go
+++ b/backend/config/config.go
@@ -2,6 +2,8 @@ package config
 
 import (
 	"github.com/spf13/viper"
+
+	"github.com/google/uuid"
 )
 
 type Config struct {
@@ -12,9 +14,14 @@ func SetDefault() {
 	viper.SetDefault("backend.port", "8080")
 
 	// jwt
-	viper.SetDefault("auth.jwt.secret", "campux")
+	viper.SetDefault("auth.jwt.secret", uuid.New().String())
 	viper.SetDefault("auth.jwt.expire", 3600*6)
 
+	// oauth2
+	viper.SetDefault("oauth2.server.code_secret", uuid.New().String())
+	viper.SetDefault("oauth2.server.access_secret", uuid.New().String())
+	viper.SetDefault("oauth2.server.ak_expire", 3600*24*14)
+
 	// 服务token
 	viper.SetDefault("service.token", "campux")
 	viper.SetDefault("service.bots", []int64{123456789})
@@ -38,6 +45,7 @@ func SetDefault() {
 	viper.SetDefault("mq.redis.stream.new_post", "campux_new_post")
 	viper.SetDefault("mq.redis.stream.post_cancel", "campux_post_cancel")
 	viper.SetDefault("mq.redis.hash.post_publish_status", "campux_post_publish_status")
+	viper.SetDefault("mq.redis.prefix.oauth2_code", "campux_oauth2_code")
 
 }
 
diff --git a/backend/controller/api.go b/backend/controller/api.go
index 1139907..12fc652 100644
--- a/backend/controller/api.go
+++ b/backend/controller/api.go
@@ -22,6 +22,7 @@ func NewApiController(
 	ps service.PostService,
 	ms service.MiscService,
 	ads service.AdminService,
+	oas service.OAuth2Service,
 ) *APIController {
 	r := gin.Default()
 
@@ -65,6 +66,7 @@ func NewApiController(
 	NewPostRouter(rg, ps, as)
 	NewMiscRouter(rg, ms)
 	NewAdminRouter(rg, ads)
+	NewOAuth2Router(rg, oas)
 
 	return &APIController{
 		R: r,
@@ -167,7 +169,7 @@ func (ar *APIRouter) GetUin(c *gin.Context) (int64, error) {
 		// 删除Bearer
 		jwtToken = jwtToken[7:]
 
-		uin, err := util.ParseJWTToken(jwtToken)
+		uin, err := util.ParseUserJWTToken(jwtToken)
 
 		return uin, err
 	} else {
@@ -178,7 +180,7 @@ func (ar *APIRouter) GetUin(c *gin.Context) (int64, error) {
 			return -1, err
 		}
 
-		uin, err := util.ParseJWTToken(jwtToken)
+		uin, err := util.ParseUserJWTToken(jwtToken)
 
 		return uin, err
 	}
diff --git a/backend/controller/dto.go b/backend/controller/dto.go
index c461a2e..7ab4b4f 100644
--- a/backend/controller/dto.go
+++ b/backend/controller/dto.go
@@ -159,3 +159,19 @@ type OAuth2AppCreateBody struct {
 	// emoji
 	Emoji string `json:"emoji" binding:"required"`
 }
+
+type OAuth2AuthorizeBody struct {
+	// 应用id
+	ClientID string `json:"client_id" binding:"required"`
+}
+
+type OAuth2GetAccessTokenBody struct {
+	// 应用id
+	ClientID string `json:"client_id" binding:"required"`
+
+	// 应用密钥
+	ClientSecret string `json:"client_secret" binding:"required"`
+
+	// 授权码
+	Code string `json:"code" binding:"required"`
+}
diff --git a/backend/controller/oauthapi.go b/backend/controller/oauthapi.go
new file mode 100644
index 0000000..5f10673
--- /dev/null
+++ b/backend/controller/oauthapi.go
@@ -0,0 +1,110 @@
+package controller
+
+import (
+	"github.com/RockChinQ/Campux/backend/service"
+	"github.com/gin-gonic/gin"
+)
+
+type OAuth2Router struct {
+	APIRouter
+	OAuth2Service service.OAuth2Service
+}
+
+func NewOAuth2Router(rg *gin.RouterGroup, oas service.OAuth2Service) *OAuth2Router {
+
+	oar := &OAuth2Router{
+		OAuth2Service: oas,
+	}
+
+	group := rg.Group("/oauth2")
+
+	group.GET("/get-app-info", oar.GetOAuth2AppInfo)
+	group.GET("/authorize", oar.Authorize)
+	group.POST("/get-access-token", oar.GetAccessToken)
+
+	return oar
+}
+
+func (oar *OAuth2Router) GetOAuth2AppInfo(c *gin.Context) {
+	clientID := c.Query("client_id")
+
+	app, err := oar.OAuth2Service.GetOAuth2AppByClientID(clientID)
+
+	if err != nil {
+		oar.Fail(c, 1, err.Error())
+		return
+	}
+
+	if app == nil {
+		oar.Fail(c, 2, "此应用未注册")
+		return
+	}
+
+	oar.Success(c, gin.H{
+		"client_id": app.ClientID,
+		"name":      app.Name,
+	})
+}
+
+func (oar *OAuth2Router) Authorize(c *gin.Context) {
+
+	uin, err := oar.Auth(c, UserOnly)
+
+	if err != nil {
+		return
+	}
+
+	clientID := c.Query("client_id")
+
+	if clientID == "" {
+		oar.Fail(c, 1, "未提供 client_id")
+		return
+	}
+
+	// 检查是否存在这个应用
+	app, err := oar.OAuth2Service.GetOAuth2AppByClientID(clientID)
+
+	if err != nil {
+		oar.Fail(c, 2, err.Error())
+		return
+	}
+
+	if app == nil {
+		oar.Fail(c, 3, "此应用未注册")
+		return
+	}
+
+	// 计算code
+	code, err := oar.OAuth2Service.GenerateCode(app.ClientID, uin)
+
+	if err != nil {
+		oar.Fail(c, 4, err.Error())
+		return
+	}
+
+	oar.Success(c, gin.H{
+		"code": code,
+	})
+}
+
+func (oar *OAuth2Router) GetAccessToken(c *gin.Context) {
+
+	var body OAuth2GetAccessTokenBody
+
+	if err := c.ShouldBindJSON(&body); err != nil {
+		oar.Fail(c, 1, err.Error())
+		return
+	}
+
+	// 检查code
+	ak, err := oar.OAuth2Service.GetAccessToken(body.ClientID, body.ClientSecret, body.Code)
+
+	if err != nil {
+		oar.Fail(c, 2, err.Error())
+		return
+	}
+
+	oar.Success(c, gin.H{
+		"access_token": ak,
+	})
+}
diff --git a/backend/core/app.go b/backend/core/app.go
index 96e5229..7c92571 100644
--- a/backend/core/app.go
+++ b/backend/core/app.go
@@ -28,6 +28,7 @@ func NewApplication() *Application {
 	ps := service.NewPostService(*db, *fs, *msq)
 	ms := service.NewMiscService(*db)
 	ads := service.NewAdminService(*db)
+	oas := service.NewOAuth2Service(*db, *msq)
 
 	err := ScheduleRoutines(*db, *msq)
 	if err != nil {
@@ -35,7 +36,7 @@ func NewApplication() *Application {
 	}
 
 	return &Application{
-		API: controller.NewApiController(*as, *ps, *ms, *ads),
+		API: controller.NewApiController(*as, *ps, *ms, *ads, *oas),
 	}
 }
 
diff --git a/backend/mq/redis.go b/backend/mq/redis.go
index a5f2929..2b5150a 100644
--- a/backend/mq/redis.go
+++ b/backend/mq/redis.go
@@ -3,6 +3,7 @@ package mq
 import (
 	"context"
 	"strconv"
+	"time"
 
 	"github.com/redis/go-redis/v9"
 	"github.com/spf13/viper"
@@ -109,3 +110,13 @@ func (r *RedisStreamMQ) DeletePostPublishStatus(postID int) error {
 	_, err := r.Client.Del(context.Background(), viper.GetString("mq.redis.hash.post_publish_status")+strconv.Itoa(postID)).Result()
 	return err
 }
+
+// 存储oauth2_code和uin对应关系 十分钟过期
+func (r *RedisStreamMQ) SetOauth2Code(code string, uin int64) error {
+	return r.Client.Set(context.Background(), viper.GetString("mq.redis.prefix.oauth2_code")+code, uin, 60*10*time.Second).Err()
+}
+
+// 获取oauth2_code对应的uin
+func (r *RedisStreamMQ) GetOauth2Uin(code string) (int64, error) {
+	return r.Client.Get(context.Background(), viper.GetString("mq.redis.prefix.oauth2_code")+code).Int64()
+}
diff --git a/backend/service/account.go b/backend/service/account.go
index 7268c64..45ee01d 100644
--- a/backend/service/account.go
+++ b/backend/service/account.go
@@ -67,7 +67,7 @@ func (as *AccountService) CheckAccount(uin int64, pwd string) (string, error) {
 		return "", ErrPasswordIncorrect
 	}
 
-	jwt, err := util.GenerateJWTToken(uin)
+	jwt, err := util.GenerateUserJWTToken(uin)
 
 	return jwt, err
 }
diff --git a/backend/service/errors.go b/backend/service/errors.go
index d680e98..5232843 100644
--- a/backend/service/errors.go
+++ b/backend/service/errors.go
@@ -16,3 +16,6 @@ var ErrInvalidImageSuffix = errors.New("不允许的图片后缀")
 
 // OAuth2应用名称已存在
 var ErrOAuth2AppAlreadyExist = errors.New("OAuth2应用名称已存在")
+
+// OAuth2认证 Secret 不匹配
+var ErrOAuth2SecretNotMatch = errors.New("OAuth2 认证 Secret 不匹配")
diff --git a/backend/service/oauth.go b/backend/service/oauth.go
new file mode 100644
index 0000000..e494aa5
--- /dev/null
+++ b/backend/service/oauth.go
@@ -0,0 +1,67 @@
+package service
+
+import (
+	"github.com/RockChinQ/Campux/backend/database"
+	"github.com/RockChinQ/Campux/backend/mq"
+	"github.com/RockChinQ/Campux/backend/util"
+
+	"github.com/google/uuid"
+)
+
+type OAuth2Service struct {
+	CommonService
+	MQ mq.RedisStreamMQ
+}
+
+func NewOAuth2Service(db database.MongoDBManager, mq mq.RedisStreamMQ) *OAuth2Service {
+	return &OAuth2Service{
+		CommonService: CommonService{
+			DB: db,
+		},
+		MQ: mq,
+	}
+}
+
+func (oas *OAuth2Service) GetOAuth2AppByClientID(clientID string) (*database.OAuthAppPO, error) {
+	return oas.DB.GetOAuth2App(clientID)
+}
+
+func (oas *OAuth2Service) GenerateCode(clientID string, uin int64) (string, error) {
+	codeUUID := uuid.New().String()
+
+	err := oas.MQ.SetOauth2Code(codeUUID, uin)
+
+	if err != nil {
+		return "", err
+	}
+
+	return util.GenerateOAuth2CodeJWTToken(codeUUID, clientID)
+}
+
+func (oas *OAuth2Service) GetAccessToken(clientID, clientSecret, code string) (string, error) {
+	codeUUID, err := util.ParseOAuth2CodeJWTToken(code, clientID)
+
+	if err != nil {
+		return "", err
+	}
+	// 检查secret
+	app, err := oas.DB.GetOAuth2App(clientID)
+
+	if err != nil {
+		return "", err
+	}
+
+	if app.ClientSecret != clientSecret {
+		return "", ErrOAuth2SecretNotMatch
+	}
+
+	uin, err := oas.MQ.GetOauth2Uin(codeUUID)
+
+	if err != nil {
+		return "", err
+	}
+
+	accessToken, err := util.GenerateOAuth2AccessTokenJWTToken(uin, clientID)
+
+	return accessToken, err
+}
diff --git a/backend/util/jwt.go b/backend/util/jwt.go
index 407be9b..bd98241 100644
--- a/backend/util/jwt.go
+++ b/backend/util/jwt.go
@@ -8,8 +8,8 @@ import (
 )
 
 // 生成jwt token
-func GenerateJWTToken(uin int64) (string, error) {
-	
+func GenerateUserJWTToken(uin int64) (string, error) {
+
 	// 生成token
 	token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
 		"uin": uin,
@@ -26,8 +26,8 @@ func GenerateJWTToken(uin int64) (string, error) {
 }
 
 // 解析jwt token
-func ParseJWTToken(tokenString string) (int64, error) {
-	
+func ParseUserJWTToken(tokenString string) (int64, error) {
+
 	// 解析token
 	token, err := jwt.Parse(tokenString, func(token *jwt.Token) (interface{}, error) {
 		return []byte(viper.GetString("auth.jwt.secret")), nil
@@ -48,4 +48,81 @@ func ParseJWTToken(tokenString string) (int64, error) {
 	}
 
 	return int64(uin), nil
-}
\ No newline at end of file
+}
+
+func GenerateOAuth2CodeJWTToken(codeUUID, clientID string) (string, error) {
+	token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
+		"codeuuid": codeUUID,
+		"exp":      time.Now().Add(time.Second * 60 * 10).Unix(),
+	})
+
+	tokenString, err := token.SignedString([]byte(viper.GetString("oauth2.server.code_secret") + clientID))
+	if err != nil {
+		return "", err
+	}
+
+	return tokenString, nil
+}
+
+func ParseOAuth2CodeJWTToken(tokenString, clientID string) (string, error) {
+	token, err := jwt.Parse(tokenString, func(token *jwt.Token) (interface{}, error) {
+		return []byte(viper.GetString("oauth2.server.code_secret") + clientID), nil
+	})
+
+	if err != nil {
+		return "", err
+	}
+
+	claims, ok := token.Claims.(jwt.MapClaims)
+	if !ok {
+		return "", err
+	}
+
+	codeUUID, ok := claims["codeuuid"].(string)
+	if !ok {
+		return "", err
+	}
+
+	return codeUUID, nil
+}
+
+func GenerateOAuth2AccessTokenJWTToken(uin int64, clientID string) (string, error) {
+	token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
+		"uin": uin,
+		"cid": clientID,
+		"exp": time.Now().Add(time.Second * time.Duration(viper.GetInt("oauth2.server.ak_expire"))).Unix(),
+	})
+
+	tokenString, err := token.SignedString([]byte(viper.GetString("oauth2.server.access_secret")))
+	if err != nil {
+		return "", err
+	}
+
+	return tokenString, nil
+}
+
+func ParseOAuth2AccessTokenJWTToken(tokenString string) (int64, string, error) {
+	token, err := jwt.Parse(tokenString, func(token *jwt.Token) (interface{}, error) {
+		return []byte(viper.GetString("oauth2.server.access_secret")), nil
+	})
+	if err != nil {
+		return 0, "", err
+	}
+
+	claims, ok := token.Claims.(jwt.MapClaims)
+	if !ok {
+		return 0, "", err
+	}
+
+	uin, ok := claims["uin"].(float64)
+	if !ok {
+		return 0, "", err
+	}
+
+	cid, ok := claims["cid"].(string)
+	if !ok {
+		return 0, "", err
+	}
+
+	return int64(uin), cid, nil
+}
diff --git a/frontend/package.json b/frontend/package.json
index dd5dab8..985f96a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "axios": "^1.6.8",
     "core-js": "^3.34.0",
     "js-cookie": "^3.0.5",
+    "mitt": "^3.0.1",
     "roboto-fontface": "*",
     "vue": "^3.4.0",
     "vue-cookies": "^1.8.4",
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 3859cea..03aa566 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -23,6 +23,10 @@ const app = createApp(App)
 app.use(store)
 app.use(VueCookies)
 
+import mitt from 'mitt'
+
+const bus = mitt()
+
 // let config=require("../config.json");
 // fetch('/config.json').then(response => response.json()).then(config => {
 //     console.log(config)
@@ -41,6 +45,8 @@ const axiosInstance = axios.create({
 })
 app.config.globalProperties.$axios = { ...axiosInstance }
 
+app.config.globalProperties.$bus = bus
+
 registerPlugins(app)
 
 app.mount('#app')
diff --git a/frontend/src/pages/auth.vue b/frontend/src/pages/auth.vue
index 2af1fb6..fa6b26f 100644
--- a/frontend/src/pages/auth.vue
+++ b/frontend/src/pages/auth.vue
@@ -1,8 +1,9 @@
 <template style="">
-    <div style="display: flex; align-items: center; justify-content: center; height: 100%; background-color: #fff;flex-direction: column">
+    <div
+        style="display: flex; align-items: center; justify-content: center; height: 100%; background-color: #fff;flex-direction: column">
         <div class="auth-card">
-            <h2 style="margin-bottom: 32px;">{{ authTitle }}</h2>
-            <v-form v-if="!authMode">
+            <h2 style="margin-bottom: 18px;">{{ authTitle }}</h2>
+            <v-form style="margin-top: 30px;" v-if="!showOAuth2">
                 <v-text-field label="QQ 号" v-model="credientials.uin" variant="outlined"></v-text-field>
                 <v-text-field label="密码" v-model="credientials.passwd" variant="outlined"
                     type="password"></v-text-field>
@@ -62,6 +63,18 @@
                 </v-btn>
             </v-form>
 
+            <v-form v-else>
+                <p>允许此应用访问您 Campux 账号中的以下信息？</p>
+                <div id="oauth-scopes">
+                    <v-chip v-for="scope in currentSupportedScopes" :key="scope" color="primary" class="mr-2">
+                        {{ scope }}
+                    </v-chip>
+                </div>
+                <v-btn color="primary" text style="margin-top: 16px; width: 100%;" @click="doAuthorize">
+                    授权
+                </v-btn>
+            </v-form>
+
         </div>
 
         <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout">
@@ -86,15 +99,54 @@ export default {
                 show: false,
                 text: '',
                 color: ''
-            }
+            },
+            showOAuth2: false,
+            authorizingAppInfo: {
+                name: '',
+                emoji: '🥰',
+            },
+
+            currentSupportedScopes: [
+                '读取 UIN',
+                '读取 注册时间',
+                '读取 用户组',
+            ]
         }
     },
 
     mounted() {
+
         // get param
         if (this.$route.query.hint) {
             this.toast(this.$route.query.hint)
         }
+        this.$bus.on(
+            'tokenCheckSuccess',
+            () => {
+                console.log('token check success')
+                // oauth2 authorizing
+                if (this.$route.query.client_id && this.$route.query.redirect_uri) {
+                    this.$store.state.authMode = "oauth2"
+                    // 获取app信息
+                    this.$axios.get('/v1/oauth2/get-app-info?client_id=' + this.$route.query.client_id)
+                        .then(res => {
+                            if (res.data.code === 0) {
+                                console.log(res.data.data)
+                                this.authorizingAppInfo = res.data.data
+                                this.authTitle = '🔒 授权 ' + this.authorizingAppInfo.name
+                                this.showOAuth2 = true
+                            } else {
+                                this.toast('获取应用信息失败：' + res.data.msg)
+                            }
+                        })
+                        .catch(err => {
+                            this.toast('获取应用信息失败：' + err.response.data.msg)
+                        })
+                } else {
+                    this.$router.push('/')
+                }
+            }
+        )
     },
 
     methods: {
@@ -118,8 +170,7 @@ export default {
                 .then(res => {
                     if (res.data.code === 0) {
                         this.toast('登录成功', 'success')
-                        this.$store.commit('tokenCheck')
-                        this.$router.push('/')
+                        this.$store.commit('tokenCheck', this.$bus)
                     } else {
                         this.toast('登录失败：' + res.data.msg)
                     }
@@ -135,6 +186,35 @@ export default {
             this.snackbar.text = text
             this.snackbar.color = color
             this.snackbar.show = true
+        },
+        doAuthorize() {
+            this.$axios.get('/v1/oauth2/authorize', {
+                    params: {
+                        client_id: this.$route.query.client_id,
+                    }
+                })
+                .then(res => {
+                    if (res.data.code === 0) {
+                        
+                        let targetUri = this.$route.query.redirect_uri + '?code=' + res.data.data.code
+                        if (this.$route.query.state) {
+                            targetUri += '&state=' + this.$route.query.state
+                        }
+
+                        this.toast('授权成功，即将跳转到应用', 'success')
+                        
+                        //等待2秒
+                        setTimeout(() => {
+                            window.location.href = targetUri
+                        }, 2000)
+
+                    } else {
+                        this.toast('授权失败：' + res.data.msg)
+                    }
+                })
+                .catch(err => {
+                    this.toast('授权失败：' + err.response.data.msg)
+                })
         }
     }
 }
@@ -161,5 +241,10 @@ export default {
     color: #3f51b5;
 }
 
-
+#oauth-scopes {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.8rem;
+    margin-bottom: 0.8rem;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index b73774d..cae2b17 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -5,7 +5,7 @@
           <div style="font-size: 80px;">🚫</div>
           <div id="banning-details">
               <h3>账号已被封禁</h3>
-              <p><strong>UIN：</strong>{{ $store.state.account.uin }}</p>
+              <p><strong>UIN：</strong>{{ $store.state.account.uin}}</p>
               <p style="word-wrap: break-word;"><strong>封禁原因：</strong>{{ $store.state.account.access.comment }}</p>
               <p><strong>结束时间：</strong>{{ $store.state.account.access.end_time }}</p>
           </div>
@@ -17,7 +17,7 @@
 
   <!-- 左侧导航栏 -->
   <div id="container-wrap" style="height: calc(100vh - 64px)">
-    <div id="pctabs" v-if="$store.state.account.uin != 0">
+    <div id="pctabs" v-if="$store.state.account.uin != 0  && $store.state.authMode === 'login'">
       <h2 style="text-align: center; background-color: #42A5F5; color: #fff; padding: 8px 0px">Campux</h2>
       <div
         style="display: flex; justify-content: space-between; flex-direction: column; align-items: center; height: 100%">
@@ -63,7 +63,7 @@
     </div>
 
     <!-- 纵向分割线 -->
-    <div id="vdivider" v-if="$store.state.account.uin != 0" style="height: calc(100vh - 64px); width: 1px; background-color: #f5f5f5;">
+    <div id="vdivider" v-if="$store.state.account.uin != 0 && $store.state.authMode === 'login'" style="height: calc(100vh - 64px); width: 1px; background-color: #f5f5f5;">
     </div>
 
     <div id="container">
@@ -71,7 +71,7 @@
     </div>
   </div>
 
-  <BottomNavBar id="bnb" v-model="value" v-if="$store.state.account.uin != 0"/>
+  <BottomNavBar id="bnb" v-model="value" v-if="$store.state.account.uin != 0  && $store.state.authMode === 'login'"/>
 
 
 </template>
@@ -91,8 +91,8 @@ export default {
     }
   },
 
-  mounted() {
-    this.$store.commit('tokenCheck')
+  created() {
+    this.$store.commit('tokenCheck', this.$bus)
     this.$store.commit('initMetadata', 'banner')
     this.$store.commit('initMetadata', 'brand')
     this.$store.commit('initMetadata', 'popup_announcement')
@@ -100,7 +100,6 @@ export default {
     this.$store.commit('initMetadata', 'beianhao')
     console.log(this.$store.state.metadata)
     console.log(this.$store.state.account)
-
   },
 
   methods: {
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 7b9ee2d..36d9156 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -27,5 +27,4 @@ const router = createRouter({
   routes,
 })
 
-
 export default router
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index fb3e7f1..e871be4 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -31,7 +31,8 @@ export default createStore({
             "access": {
                 "is_banned": false
             }
-        }
+        },
+        authMode: "login",
     },
     mutations: {
         initMetadata(state, key) {
@@ -61,7 +62,7 @@ export default createStore({
         setBaseURL(state, url) {
             state.base_url = url
         },
-        tokenCheck(state) {
+        tokenCheck(state, bus) {
             axios.get(this.state.base_url + '/v1/account/token-check', { withCredentials: true })
                 .then(res => {
                     console.log(res)
@@ -77,6 +78,8 @@ export default createStore({
                             let date = new Date(this.state.account.access.end_time)
                             this.state.account.access.end_time = date.toLocaleString()
                         }
+
+                        bus.emit('tokenCheckSuccess')
                     }
                 })
                 .catch(err => {