diff --git a/src/api/account.ts b/src/api/account.ts
index b13d89a..1191a9f 100644
--- a/src/api/account.ts
+++ b/src/api/account.ts
@@ -1,11 +1,10 @@
-import { BASE_API } from '@/data/constants'
+import { ACCOUNT_API_URL, BASE_API } from '@/data/constants'
 import { APIRoot } from './api-models'
 import { QueryPostAPI } from '@/api/query'
 import { UserInfo } from '@/api/api-models'
 import { ref } from 'vue'
 import { useCookies } from '@vueuse/integrations/useCookies'
 
-const ACCOUNT_URL = `${BASE_API}account/`
 export const ACCOUNT = ref<UserInfo>()
 
 const cookies = useCookies()
@@ -24,7 +23,7 @@ export function useAccount() {
 }
 
 export async function Register(name: string, email: string, password: string, token: string): Promise<APIRoot<string>> {
-  return QueryPostAPI<string>(`${ACCOUNT_URL}register`, {
+  return QueryPostAPI<string>(`${ACCOUNT_API_URL}register`, {
     name,
     email,
     password,
@@ -33,11 +32,11 @@ export async function Register(name: string, email: string, password: string, to
 }
 
 export async function Login(nameOrEmail: string, password: string): Promise<APIRoot<string>> {
-  return QueryPostAPI<string>(`${ACCOUNT_URL}login`, {
+  return QueryPostAPI<string>(`${ACCOUNT_API_URL}login`, {
     nameOrEmail,
     password,
   })
 }
 export async function Self(): Promise<APIRoot<UserInfo>> {
-  return QueryPostAPI<UserInfo>(`${ACCOUNT_URL}self`)
+  return QueryPostAPI<UserInfo>(`${ACCOUNT_API_URL}self`)
 }
diff --git a/src/api/query.ts b/src/api/query.ts
index 1f3c398..6a3781f 100644
--- a/src/api/query.ts
+++ b/src/api/query.ts
@@ -1,12 +1,18 @@
 /* eslint-disable indent */
 import { APIRoot, PaginationResponse } from './api-models'
 
-export async function QueryPostAPI<T>(url: string, body?: unknown): Promise<APIRoot<T>> {
+export async function QueryPostAPI<T>(url: string, body?: unknown, headers?: any): Promise<APIRoot<T>> {
+  if (headers) {
+    headers['Content-Type'] = 'application/json'
+  }
+  else {
+    headers = {
+      'Content-Type': 'application/json',
+    }
+  }
   const data = await fetch(url, {
     method: 'post',
-    headers: {
-      'Content-Type': 'application/json',
-    },
+    headers: headers,
     body: JSON.stringify(body),
   }) // 不处理异常, 在页面处理
   return (await data.json()) as APIRoot<T>
diff --git a/src/api/user.ts b/src/api/user.ts
index 7363ab6..5690a93 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,9 +1,8 @@
 import { QueryGetAPI } from '@/api/query'
-import { BASE_API } from '@/data/constants'
+import { BASE_API, USER_API_URL } from '@/data/constants'
 import { APIRoot, UserInfo } from './api-models'
 import { ref } from 'vue'
 
-const ACCOUNT_URL = `${BASE_API}user/`
 export const USERS = ref<{ [uId: number]: UserInfo }>({})
 
 export async function useUser(uId: number) {
@@ -17,7 +16,7 @@ export async function useUser(uId: number) {
 }
 
 export async function GetInfo(uId: number): Promise<APIRoot<UserInfo>> {
-  return QueryGetAPI<UserInfo>(`${ACCOUNT_URL}info`, {
+  return QueryGetAPI<UserInfo>(`${USER_API_URL}info`, {
     uId: uId,
   })
 }
diff --git a/src/components/RegisterAndLogin.vue b/src/components/RegisterAndLogin.vue
index b98fe3a..ee4b80c 100644
--- a/src/components/RegisterAndLogin.vue
+++ b/src/components/RegisterAndLogin.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import { FormInst, FormItemInst, FormItemRule, FormRules, NButton, NCard, NForm, NFormItem, NInput, NSpace } from 'naive-ui'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import { ACCOUNT_API_URL } from '@/data/constants'
+import { FormInst, FormItemInst, FormItemRule, FormRules, NButton, NCard, NForm, NFormItem, NInput, NSpace, NSpin } from 'naive-ui'
 import { ref } from 'vue'
+import VueTurnstile from 'vue-turnstile'
 
 interface RegisterModel {
   username: string
@@ -14,17 +17,25 @@ interface LoginModel {
 }
 
 const isRegister = ref(false)
+const isLoading = ref(false)
 
 const registerModel = ref<RegisterModel>({} as RegisterModel)
 const loginModel = ref<LoginModel>({} as LoginModel)
+const token = ref()
 
 const formRef = ref<FormInst | null>(null)
 const rPasswordFormItemRef = ref<FormItemInst | null>(null)
-const rules: FormRules = {
-  account: [
+const registerRules: FormRules = {
+  username: [
     {
       required: true,
-      message: '请输入用户名或邮箱',
+      message: '请输入用户名',
+    },
+  ],
+  email: [
+    {
+      required: true,
+      message: '请输入邮箱',
     },
   ],
   password: [
@@ -51,6 +62,20 @@ const rules: FormRules = {
     },
   ],
 }
+const loginRules: FormRules = {
+  account: [
+    {
+      required: true,
+      message: '请输入用户名或邮箱',
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: '请输入密码',
+    },
+  ],
+}
 function validatePasswordStartWith(rule: FormItemRule, value: string): boolean {
   return !!registerModel.value.password && registerModel.value.password.startsWith(value) && registerModel.value.password.length >= value.length
 }
@@ -62,48 +87,107 @@ function onPasswordInput() {
     rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
   }
 }
+function onregisterButtonClick(e: MouseEvent) {
+  e.preventDefault()
+  isLoading.value = true
+  formRef.value?.validate().then(async () => {
+    await QueryPostAPI(
+      ACCOUNT_API_URL + 'register',
+      {
+        name: registerModel.value.username,
+        email: registerModel.value.email,
+        password: registerModel.value.password,
+      },
+      {
+        Turnstile: token.value,
+      }
+    )
+      .then((data) => {
+        if (data.code == 200) {
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  })
+}
+function onLoginButtonClick(e: MouseEvent) {
+  e.preventDefault()
+  isLoading.value = true
+  formRef.value?.validate().then(async () => {
+    await QueryPostAPI(
+      ACCOUNT_API_URL + 'login',
+      {
+        nameOrEmail: loginModel.value.account,
+        password: loginModel.value.password,
+      },
+      {
+        Turnstile: token.value,
+      }
+    )
+      .then((data) => {
+        if (data.code == 200) {
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  })
+}
 </script>
 
 <template>
-  <NCard embedded>
-    <template #header>
-      <Transition name="fade" mode="out-in">
-        <span v-if="isRegister"> 注册 </span>
-        <span v-else> 登陆 </span>
+  <NSpin :show="isLoading">
+    <NCard embedded>
+      <template #header>
+        <Transition name="fade" mode="out-in">
+          <span v-if="isRegister"> 注册 </span>
+          <span v-else> 登陆 </span>
+        </Transition>
+      </template>
+      <Transition name="scale" mode="out-in">
+        <div v-if="isRegister">
+          <NForm ref="formRef" :rules="registerRules" :model="registerModel">
+            <NFormItem path="username" label="用户名">
+              <NInput v-model:value="registerModel.username" />
+            </NFormItem>
+            <NFormItem path="email" label="邮箱">
+              <NInput v-model:value="registerModel.email" />
+            </NFormItem>
+            <NFormItem path="password" label="密码">
+              <NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
+            </NFormItem>
+            <NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
+              <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
+            </NFormItem>
+          </NForm>
+          <NSpace vertical justify="center" align="center">
+            <NButton type="primary" size="large" @click="onregisterButtonClick"> 注册 </NButton>
+            <NButton @click="isRegister = false" size="small" text> 或者现在去登陆 </NButton>
+          </NSpace>
+        </div>
+        <div v-else>
+          <NForm ref="formRef" :rules="loginRules" :model="loginModel">
+            <NFormItem path="account" label="用户名或邮箱">
+              <NInput v-model:value="loginModel.account" />
+            </NFormItem>
+            <NFormItem path="password" label="密码">
+              <NInput v-model:value="loginModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
+            </NFormItem>
+          </NForm>
+          <NSpace vertical justify="center" align="center">
+            <NButton type="primary" size="large" @click="onLoginButtonClick"> 登陆 </NButton>
+            <NButton @click="isRegister = true" size="small" text> 或者现在去注册 </NButton>
+          </NSpace>
+        </div>
       </Transition>
-    </template>
-    <Transition name="scale" mode="out-in">
-      <div v-if="isRegister">
-        <NForm ref="formRef" :rules="rules" :model="registerModel">
-          <NFormItem path="username" label="用户名">
-            <NInput v-model:value="registerModel.username" />
-          </NFormItem>
-          <NFormItem path="email" label="邮箱">
-            <NInput v-model:value="registerModel.email" />
-          </NFormItem>
-          <NFormItem path="password" label="密码">
-            <NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
-          </NFormItem>
-          <NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
-            <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
-          </NFormItem>
-        </NForm>
-        <NButton @click="isRegister = false"> 或者现在去登陆 </NButton>
-      </div>
-      <div v-else>
-        <NForm ref="formRef" :rules="rules" :model="registerModel">
-          <NFormItem path="account" label="用户名或邮箱">
-            <NInput v-model:value="loginModel.account" />
-          </NFormItem>
-          <NFormItem path="password" label="密码">
-            <NInput v-model:value="loginModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
-          </NFormItem>
-        </NForm>
-        <NSpace vertical justify="center" align="center">
-          <NButton type="primary" size="large"> 登陆 </NButton>
-          <NButton @click="isRegister = true" size="small" text> 或者现在去注册 </NButton>
-        </NSpace>
-      </div>
-    </Transition>
-  </NCard>
+      <VueTurnstile site-key="0x4AAAAAAAETUSAKbds019h0" v-model="token" theme="auto" style="text-align: center" />
+    </NCard>
+  </NSpin>
 </template>
diff --git a/src/data/constants.ts b/src/data/constants.ts
index 02d57ec..59db512 100644
--- a/src/data/constants.ts
+++ b/src/data/constants.ts
@@ -3,4 +3,5 @@ const releseAPI = `${document.location.protocol}//api.vtsuru.live/`
 export const BASE_API = process.env.NODE_ENV === 'development' ? debugAPI : releseAPI
 export const FETCH_API = 'https://fetch.vtsuru.live/'
 
-export const USER_URL = `${BASE_API}user/`
+export const USER_API_URL = `${BASE_API}user/`
+export const ACCOUNT_API_URL = `${BASE_API}account/`
diff --git a/src/main.ts b/src/main.ts
index d17552e..da7707e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,4 +6,4 @@ import { GetSelfAccount } from './api/account'
 
 createApp(App).use(store).use(router).mount('#app')
 
-await GetSelfAccount()
+GetSelfAccount()
diff --git a/src/views/ViewerLayout.vue b/src/views/ViewerLayout.vue
index 8c24ed3..1376abd 100644
--- a/src/views/ViewerLayout.vue
+++ b/src/views/ViewerLayout.vue
@@ -6,7 +6,7 @@ import { BookOutline as BookIcon, PersonOutline as PersonIcon, WineOutline as Wi
 import { GetInfo, useUser } from '@/api/user'
 import { useRoute } from 'vue-router'
 import { UserInfo } from '@/api/api-models'
-import { FETCH_API, USER_URL } from '@/data/constants'
+import { FETCH_API } from '@/data/constants'
 import { useAccount } from '@/api/account'
 
 const route = useRoute()
@@ -56,7 +56,7 @@ onMounted(async () => {
 
 <template>
   <NResult v-if="!uId" status="error" title="输入的uId无效" description="再检查检查" />
-  <NResult v-else-if="false" status="error" title="未找到指定 uId 的用户" description="或者是没有进行认证" />
+  <NResult v-else-if="!userInfo" status="error" title="未找到指定 uId 的用户" description="或者是没有进行认证" />
   <NLayout v-else style="height: 100vh">
     <NLayoutHeader style="height: 50px; display: flex; justify-content: left; align-items: center; padding-left: 15px">
       <NSpace>