From 54f9d0c10fbe16050304f06dd186b8f8b16ecf02 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 16 Apr 2025 18:35:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20sso=20=E5=8D=95?=
 =?UTF-8?q?=E7=82=B9=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/request.ts              |   3 +
 apps/web-antd/src/router/routes/core.ts       |   8 +
 apps/web-antd/src/store/auth.ts               |   2 +-
 .../_core/authentication/social-login.vue     |   3 +-
 .../views/_core/authentication/sso-login.vue  | 205 ++++++++++++++++++
 .../common-ui/src/ui/authentication/index.ts  |   1 +
 .../src/ui/authentication/qrcode-login.vue    |   3 +-
 7 files changed, 222 insertions(+), 3 deletions(-)
 create mode 100644 apps/web-antd/src/views/_core/authentication/sso-login.vue

diff --git a/apps/web-antd/src/api/request.ts b/apps/web-antd/src/api/request.ts
index b6375aaff..8c36097ff 100644
--- a/apps/web-antd/src/api/request.ts
+++ b/apps/web-antd/src/api/request.ts
@@ -51,6 +51,9 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   async function doRefreshToken() {
     const accessStore = useAccessStore();
     const refreshToken = accessStore.refreshToken as string;
+    if (!refreshToken) {
+      throw new Error('Refresh token is null!');
+    }
     const resp = await refreshTokenApi(refreshToken);
     const newToken = resp?.data?.data?.accessToken;
     // add by 芋艿：这里一定要抛出 resp.data，从而触发 authenticateResponseInterceptor 中，刷新令牌失败！！！
diff --git a/apps/web-antd/src/router/routes/core.ts b/apps/web-antd/src/router/routes/core.ts
index ad8fc861d..5058a2d5b 100644
--- a/apps/web-antd/src/router/routes/core.ts
+++ b/apps/web-antd/src/router/routes/core.ts
@@ -97,6 +97,14 @@ const coreRoutes: RouteRecordRaw[] = [
           title: $t('page.auth.login'),
         },
       },
+      {
+        name: 'SSOLogin',
+        path: 'sso-login',
+        component: () => import('#/views/_core/authentication/sso-login.vue'),
+        meta: {
+          title: $t('page.auth.login'),
+        },
+      }
     ],
   },
 ];
diff --git a/apps/web-antd/src/store/auth.ts b/apps/web-antd/src/store/auth.ts
index 7f91d4639..4807dfcd8 100644
--- a/apps/web-antd/src/store/auth.ts
+++ b/apps/web-antd/src/store/auth.ts
@@ -108,7 +108,7 @@ export const useAuthStore = defineStore('auth', () => {
     let authPermissionInfo: AuthPermissionInfo | null = null;
     authPermissionInfo = await getAuthPermissionInfoApi();
     // userStore
-    userStore.setUserInfo(authPermissionInfo.user); // TODO @芋艿：这里有报错
+    userStore.setUserInfo(authPermissionInfo.user);
     userStore.setUserRoles(authPermissionInfo.roles);
     // accessStore
     accessStore.setAccessMenus(authPermissionInfo.menus);
diff --git a/apps/web-antd/src/views/_core/authentication/social-login.vue b/apps/web-antd/src/views/_core/authentication/social-login.vue
index a13b01697..f70fcf167 100644
--- a/apps/web-antd/src/views/_core/authentication/social-login.vue
+++ b/apps/web-antd/src/views/_core/authentication/social-login.vue
@@ -16,7 +16,7 @@ import { getTenantSimpleList, getTenantByWebsite } from '#/api/core/auth';
 
 const { tenantEnable, captchaEnable } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
-defineOptions({ name: 'Login' });
+defineOptions({ name: 'SocialLogin' });
 
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
@@ -34,6 +34,7 @@ const fetchTenantList = async () => {
   if (!tenantEnable) {
     return;
   }
+
   try {
     // 获取租户列表、域名对应租户
     const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
diff --git a/apps/web-antd/src/views/_core/authentication/sso-login.vue b/apps/web-antd/src/views/_core/authentication/sso-login.vue
new file mode 100644
index 000000000..29b0f1c17
--- /dev/null
+++ b/apps/web-antd/src/views/_core/authentication/sso-login.vue
@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { AuthenticationAuthTitle, VbenButton } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { computed, reactive, ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { authorize, getAuthorize } from '#/api/system/oauth2/open';
+
+defineOptions({ name: 'SSOLogin' });
+
+const { query } = useRoute(); // 路由参数
+
+const client = ref({
+  name: '',
+  logo: ''
+}); // 客户端信息
+
+const queryParams = reactive({
+  responseType: '',
+  clientId: '',
+  redirectUri: '',
+  state: '',
+  scopes: [] as string[] // 优先从 query 参数获取；如果未传递，从后端获取
+}); // URL 上的 client_id、scope 等参数
+
+const loading = ref(false); // 表单是否提交中
+
+/** 初始化授权信息 */
+const init = async () => {
+  // 防止在没有登录的情况下循环弹窗
+  if (typeof query.client_id === 'undefined') {
+    return;
+  }
+  // 解析参数
+  // 例如说【自动授权不通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read%20user.write
+  // 例如说【自动授权通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read
+  queryParams.responseType = query.response_type as string;
+  queryParams.clientId = query.client_id as string;
+  queryParams.redirectUri = query.redirect_uri as string;
+  queryParams.state = query.state as string;
+  if (query.scope) {
+    queryParams.scopes = (query.scope as string).split(' ');
+  }
+
+  // 如果有 scope 参数，先执行一次自动授权，看看是否之前都授权过了。
+  if (queryParams.scopes.length > 0) {
+    const data = await doAuthorize(true, queryParams.scopes, []);
+    if (data) {
+      location.href = data;
+      return;
+    }
+  }
+
+  // 1.1 获取授权页的基本信息
+  const data = await getAuthorize(queryParams.clientId);
+  client.value = data.client;
+  // 1.2 解析 scope
+  let scopes;
+  // 如果 params.scope 非空，则过滤下返回的 scopes
+  if (queryParams.scopes.length > 0) {
+    scopes = data.scopes.filter(scope => queryParams.scopes.includes(scope.key));
+    // 如果 params.scope 为空，则使用返回的 scopes 设置它
+  } else {
+    scopes = data.scopes;
+    queryParams.scopes = scopes.map(scope => scope.key);
+  }
+
+  // 2.设置表单的初始值
+  formApi.setFieldValue('scopes', scopes.filter(scope => scope.value).map(scope => scope.key));
+};
+
+/** 处理授权的提交 */
+const handleSubmit = async (approved: boolean) => {
+  // 计算 checkedScopes + uncheckedScopes
+  let checkedScopes: string[];
+  let uncheckedScopes: string[];
+  if (approved) {
+    // 同意授权，按照用户的选择
+    checkedScopes = (await formApi.getValues()).scopes;
+    uncheckedScopes = queryParams.scopes.filter((item) => checkedScopes.indexOf(item) === -1);
+  } else {
+    // 拒绝，则都是取消
+    checkedScopes = [];
+    uncheckedScopes = queryParams.scopes;
+  }
+
+  // 提交授权的请求
+  loading.value = true;
+  try {
+    const data = await doAuthorize(false, checkedScopes, uncheckedScopes);
+    if (!data) {
+      return;
+    }
+    // 跳转授权成功后的回调地址
+    location.href = data;
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 调用授权 API 接口 */
+const doAuthorize = (autoApprove: boolean, checkedScopes: string[], uncheckedScopes: string[]) => {
+  return authorize(
+    queryParams.responseType,
+    queryParams.clientId,
+    queryParams.redirectUri,
+    queryParams.state,
+    autoApprove,
+    checkedScopes,
+    uncheckedScopes
+  );
+};
+
+/** 格式化 scope 文本 */
+const formatScope = (scope: string) => {
+  // 格式化 scope 授权范围，方便用户理解。
+  // 这里仅仅是一个 demo，可以考虑录入到字典数据中，例如说字典类型 "system_oauth2_scope"，它的每个 scope 都是一条字典数据。
+  switch (scope) {
+    case 'user.read':
+      return '访问你的个人信息';
+    case 'user.write':
+      return '修改你的个人信息';
+    default:
+      return scope;
+  }
+};
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      fieldName: 'scopes',
+      label: '授权范围',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: queryParams.scopes.map(scope => ({
+          label: formatScope(scope),
+          value: scope
+        })),
+        class: 'flex flex-col gap-2'
+      },
+    },
+  ];
+});
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: formSchema,
+    showDefaultActions: false,
+  }),
+);
+
+/** 初始化 */
+onMounted(() => {
+  init();
+})
+</script>
+
+<template>
+  <div @keydown.enter.prevent="handleSubmit(true)">
+    <AuthenticationAuthTitle>
+      <slot name="title">
+        {{ `${client.name} 👋🏻` }}
+      </slot>
+      <template #desc>
+        <span class="text-muted-foreground">
+          此第三方应用请求获得以下权限：
+        </span>
+      </template>
+    </AuthenticationAuthTitle>
+
+    <Form />
+
+    <div class="flex gap-2">
+      <VbenButton
+        :class="{
+          'cursor-wait': loading,
+        }"
+        :loading="loading"
+        aria-label="login"
+        class="w-2/3"
+        @click="handleSubmit(true)"
+      >
+        同意授权
+      </VbenButton>
+      <VbenButton
+        :class="{
+          'cursor-wait': loading,
+        }"
+        :loading="loading"
+        aria-label="login"
+        class="w-1/3"
+        variant="outline"
+        @click="handleSubmit(false)"
+      >
+        拒绝
+      </VbenButton>
+    </div>
+  </div>
+</template>
diff --git a/packages/effects/common-ui/src/ui/authentication/index.ts b/packages/effects/common-ui/src/ui/authentication/index.ts
index 71f41a889..0120531d1 100644
--- a/packages/effects/common-ui/src/ui/authentication/index.ts
+++ b/packages/effects/common-ui/src/ui/authentication/index.ts
@@ -5,4 +5,5 @@ export { default as AuthenticationLogin } from './login.vue';
 export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
 export { default as AuthenticationRegister } from './register.vue';
 export { default as DocLink } from './doc-link.vue';
+export { default as AuthenticationAuthTitle } from './auth-title.vue';
 export type { AuthenticationProps } from './types';
diff --git a/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue b/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
index aee41a8db..3813f11d8 100644
--- a/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
@@ -52,7 +52,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const router = useRouter();
 
-const text = ref('https://vben.vvbin.cn');
+// const text = ref('https://vben.vvbin.cn');
+const text = ref('https://t.zsxq.com/FUtQd');
 
 const qrcode = useQRCode(text, {
   errorCorrectionLevel: 'H',