feat: add oauth (#82)

* feat: add oauth

* fix: add content

Author: wuhang2003

components/Icons/UilKeySkeletonAlt.tsx

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react'
+
+export function UilKeySkeletonAlt(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" {...props}><path fill="currentColor" d="m21.71 6.53l-1.42-1.41l1.42-1.41a1 1 0 1 0-1.42-1.42L9.75 12.83a5 5 0 1 0 1.42 1.42l4.88-4.89l1.41 1.42a1 1 0 0 0 .71.29a1 1 0 0 0 .71-.29a1 1 0 0 0 0-1.42L17.46 8l1.42-1.42L20.29 8a1 1 0 0 0 .71.29a1 1 0 0 0 .71-.29a1 1 0 0 0 0-1.47M7 20a3 3 0 1 1 3-3a3 3 0 0 1-3 3"></path></svg>
+  )
+}

pages/themes/shiro/index.mdx

@@ -33,11 +33,14 @@ import { ToGitHub } from '@components/ToGitHub'
 - 你已安装 Mix Space 后端并且已启动
 - （选择 Vercel 部署）已注册 [Vercel](https://vercel.com/) 和 [GitHub](https://github.com/) 账号
 
-<!-- <Callout type="warning">
-  请注意，Shiro 主题的部署教程与初版有所不同，如果你已经部署过 Shiro
+<Callout type="warning">
+  自 Core v7 起，已抛弃 Clerk，取而待之的是 GitHub 和 Google 的 OAuth 2.0
+  配置请参考[OAuth 2.0](/usage/oauth)
+
+  ~~请注意，Shiro 主题的部署教程与初版有所不同，如果你已经部署过 Shiro
   主题，请重新阅读本文档（尤其是填入配置文件环节，配置有所变化），并阅读
-  [「移除 Edge Config」](#移除-edge-config) 部分。
-</Callout> -->
+  [「移除 Edge Config」](#移除-edge-config) 部分。~~
+</Callout>
 
 ## 准备步骤
 
@@ -265,11 +268,11 @@ import { EnvVariableConfig } from '@components/EnvVariableConfig'
     },
     {
       key: 'NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY',
-      name: 'Clerk 页面的公钥',
+      name: 'Clerk 页面的公钥（已过时）',
     },
     {
       key: 'CLERK_SECRET_KEY',
-      name: 'Clerk 页面的私钥',
+      name: 'Clerk 页面的私钥（已过时）',
     },
     {
       key: 'ENABLE_EXPERIMENTAL_COREPACK',
@@ -311,7 +314,7 @@ import { EnvVariableConfig } from '@components/EnvVariableConfig'
 
 参见 [README 相关部分](https://github.com/Innei/Shiro/blob/main/README.md#whale-运行) 完成对应操作，随后配置[反向代理](/docs/extra#反向代理)。
 
-## Clerk 登录与 Mix Space 后端绑定
+## Clerk 登录与 Mix Space 后端绑定（已过时）
 
 如果你遇到在 Shiro 登录之后，无法评论遇到 "和主人重名" 的报错，是因为 Clerk 的用户名和 Mix Space 后端的用户名重复了，你需要绑定本系统和 Clerk 的用户。让某个 Clerk 用户具有管理员权限。
 

pages/usage/_meta.json

@@ -10,6 +10,7 @@
   "backup": "备份与回滚",
   "update": "更新 Mix Space",
   "security": "Key 加密与安全性",
+  "oauth": "OAuth 2.0",
   "-- community": {
     "type": "separator",
     "title": "社区使用指南"

pages/usage/index.mdx

@@ -16,6 +16,7 @@ import { UilSearchAlt } from '@components/Icons/SearchAlt'
 import { UilBitcoin } from '@components/Icons/Bitcoin'
 import { UilHistoryAlt } from '@components/Icons/HistoryAlt'
 import { UilArrowCircleUp } from '@components/Icons/ArrowCircleUp'
+import { UilKeySkeletonAlt } from '@components/Icons/UilKeySkeletonAlt'
 
 <Cards num={3}>
   <Card
@@ -49,6 +50,12 @@ import { UilArrowCircleUp } from '@components/Icons/ArrowCircleUp'
     href={'/usage/security'}
     title="Key 加密与安全性"
   />
+  <Card
+    icon={<UilKeySkeletonAlt />}
+    arrow
+    href={'/usage/oauth'}
+    title="OAuth 2.0"
+  />
 </Cards>
 
 ### 社区使用指南

pages/usage/oauth.mdx

@@ -0,0 +1,32 @@
+# OAuth 2.0
+
+import { Steps } from 'nextra/components';
+
+在 Core v7.0.0 版本，Mx-Space 重写了第三方登录功能，抛弃了 Clerk，转而直接使用对应的账户授权 SDK 实现第三方登录。
+
+## 如何配置
+
+<Steps>
+
+### 新建应用
+
+参考以下两篇：
+
+- [在 GitHub 新建 OAuth 应用](https://docs.github.com/zh/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app)
+- [在 Google Cloud 新建 OAuth 应用](https://developers.google.com/identity/protocols/oauth2/web-server?hl=zh-cn#creatingcred)
+
+对于 GitHub，`Homepage URL` 填写前端地址，`Authorization callback URL` 根据后台提示复制粘贴。
+
+对于 Google，`已获授权的 JavaScript 来源` 填写前端地址，`已获授权的重定向 URI` 根据后台提示复制粘贴。
+
+完成后会获取 Client ID 和 Client Secret，将他们复制下来备用。
+
+### 后台设置
+
+进入博客后台 -> 设定 -> 登录方式，在 OAuth 部分对应的平台名称下填写对应的 Client ID 和 Client Secret，保存后测试是否可以调用授权，若可调用即可启用并保存。
+
+### 和主人身份绑定
+
+在测试时通过 OAuth 授权登录后会提示是否将此账号设置为主人，允许即可。
+
+</Steps>