diff --git a/yudao-ui-admin-vue3/src/api/login/index.ts b/yudao-ui-admin-vue3/src/api/login/index.ts
index ad056157c..485d273c9 100644
--- a/yudao-ui-admin-vue3/src/api/login/index.ts
+++ b/yudao-ui-admin-vue3/src/api/login/index.ts
@@ -62,3 +62,10 @@ export const sendSmsCodeApi = (data: SmsCodeVO) => {
 export const smsLoginApi = (data: SmsLoginVO) => {
   return request.post({ url: '/system/auth/sms-login', data })
 }
+
+// 社交授权的跳转
+export const socialAuthRedirectApi = (type: string, redirectUri: string) => {
+  return request.get({
+    url: '/system/auth/social-auth-redirect?type=' + type + '&redirectUri=' + redirectUri
+  })
+}
diff --git a/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue b/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
index 9bea00428..e65e0ca22 100644
--- a/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
+++ b/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
@@ -131,6 +131,17 @@ const getRoutes = async () => {
   permissionStore.setIsAddRouters(true)
   push({ path: redirect.value || permissionStore.addRouters[0].path })
 }
+
+// 社交登录
+const doSocialLogin = async (type: string) => {
+  loginLoading.value = true
+  // 计算 redirectUri
+  const redirectUri =
+    location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/')
+  // 进行跳转
+  const res = await LoginApi.socialAuthRedirectApi(type, encodeURIComponent(redirectUri))
+  window.open = res
+}
 watch(
   () => currentRoute.value,
   (route: RouteLocationNormalizedLoaded) => {
@@ -267,24 +278,28 @@ onMounted(async () => {
               :size="iconSize"
               class="cursor-pointer anticon"
               :color="iconColor"
+              @click="doSocialLogin('github')"
             />
             <Icon
               icon="ant-design:wechat-filled"
               :size="iconSize"
               class="cursor-pointer anticon"
               :color="iconColor"
+              @click="doSocialLogin('wechat')"
             />
             <Icon
               icon="ant-design:alipay-circle-filled"
               :size="iconSize"
               :color="iconColor"
               class="cursor-pointer anticon"
+              @click="doSocialLogin('alipay')"
             />
             <Icon
               icon="ant-design:dingtalk-circle-filled"
               :size="iconSize"
               :color="iconColor"
               class="cursor-pointer anticon"
+              @click="doSocialLogin('dingtalk')"
             />
           </div>
         </el-form-item>