增加Facebook三方授权页面

src/api/accountManagement.js

@@ -37,3 +37,14 @@ export function getGoogleAuthUrl() {
   })
 }
 
+/**
+ * 获取Facebook授权URL
+ * @returns {Promise}
+ */
+export function getFacebookAuthUrl() {
+  return request({
+    url: process.env.PUTIN_API + '/facebook/authorization-url',
+    method: 'get'
+  })
+}
+

src/main.js

@@ -59,7 +59,7 @@ Vue.filter("toFixed", function (price, limit) {
 });
 
 router.beforeEach((to, from, next) => {
-  if (to.path == "/login" || to.path == "/materialUpload" || to.path == "/materialTag" || to.path == "/tools/uploadYoutubeNew" || to.path == "/privacy") {
+  if (to.path == "/login" || to.path == "/materialUpload" || to.path == "/materialTag" || to.path == "/tools/uploadYoutubeNew" || to.path == "/privacy" || to.path == "/facebook-auth") {
     next();
   } else {
     gatewayUserRouters().then(res => {

src/permission.js

@@ -5,7 +5,7 @@ import 'nprogress/nprogress.css'// Progress 进度条样式
 import { Message } from 'element-ui'
 import { getToken } from '@/utils/auth' // 验权
 
-const whiteList = ['/login', '/youtube/add/getRefreshToken', '/privacy'] // 不重定向白名单
+const whiteList = ['/login', '/youtube/add/getRefreshToken', '/privacy', '/facebook-auth'] // 不重定向白名单
 router.beforeEach((to, from, next) => {
   NProgress.start()
   if (getToken()) {

src/router/index.js

@@ -232,6 +232,13 @@ export const constantRouterMap = [
     component: () => import("@/views/privacy/index"),
     hidden: true
   },
+
+  {
+    path: "/facebook-auth", // Facebook三方授权页面
+    name: "facebook-auth",
+    component: () => import("@/views/auth/FacebookAuth"),
+    hidden: true
+  },
 ];
 
 Vue.use(Router);

src/views/auth/FacebookAuth.vue

+<template>
+  <div class="facebook-auth-container">
+    <div class="auth-card">
+      <div class="header">
+        <h1>Facebook账号授权</h1>
+        <p>请点击下方按钮完成Facebook账号授权</p>
+      </div>
+
+      <!-- 授权状态显示 -->
+      <div v-if="authStatus" class="status-container">
+        <div v-if="authStatus === 'success'" class="success-message">
+          <div class="icon">✓</div>
+          <h2>授权成功</h2>
+          <p>您的Facebook账号已成功授权，可以关闭此页面。</p>
+        </div>
+
+        <div v-if="authStatus === 'error'" class="error-message">
+          <div class="icon">✗</div>
+          <h2>授权失败</h2>
+          <p>{{ errorMessage || '授权过程中出现错误，请重试。' }}</p>
+          <button @click="resetAuth" class="retry-btn">重新授权</button>
+        </div>
+      </div>
+
+      <!-- 授权按钮 -->
+      <div v-else class="auth-button-container">
+        <button
+          @click="startFacebookAuth"
+          :disabled="loading"
+          class="facebook-auth-btn"
+        >
+          <span v-if="loading">授权中...</span>
+          <span v-else>
+            <svg class="facebook-icon" viewBox="0 0 24 24">
+              <path fill="#1877F2" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+            </svg>
+            使用Facebook授权
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFacebookAuthUrl } from '@/api/accountManagement'
+
+export default {
+  name: 'FacebookAuth',
+  data() {
+    return {
+      loading: false,
+      authStatus: null, // null, 'success', 'error'
+      errorMessage: ''
+    }
+  },
+  mounted() {
+    // 检查URL参数，看是否是从Facebook回调过来的
+    this.checkAuthCallback()
+  },
+  methods: {
+    // 开始Facebook授权
+    async startFacebookAuth() {
+      this.loading = true
+      try {
+        const res = await getFacebookAuthUrl()
+        console.log("Facebook授权URL响应：", JSON.stringify(res))
+
+        if (res.status === 200) {
+          // 跳转到Facebook授权页面
+          window.location.href = res.result.data.authorizationUrl
+        } else {
+          this.showError(res.message || 'Facebook授权失败')
+        }
+      } catch (error) {
+        console.error('Facebook授权异常', error)
+        this.showError('获取Facebook授权链接失败')
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // 检查授权回调
+    checkAuthCallback() {
+      const urlParams = new URLSearchParams(window.location.search)
+      const code = urlParams.get('code')
+      const error = urlParams.get('error')
+      const state = urlParams.get('state')
+
+      if (code) {
+        // 授权成功
+        this.authStatus = 'success'
+        // 清理URL参数
+        this.cleanUrl()
+      } else if (error) {
+        // 授权失败
+        this.showError('用户拒绝授权或授权过程中出现错误')
+      }
+    },
+
+    // 显示错误状态
+    showError(message) {
+      this.authStatus = 'error'
+      this.errorMessage = message
+    },
+
+    // 重置授权状态
+    resetAuth() {
+      this.authStatus = null
+      this.errorMessage = ''
+      this.cleanUrl()
+    },
+
+    // 清理URL参数
+    cleanUrl() {
+      const url = new URL(window.location)
+      url.search = ''
+      window.history.replaceState({}, document.title, url.pathname)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.facebook-auth-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.auth-card {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  text-align: center;
+  max-width: 400px;
+  width: 90%;
+}
+
+.header h1 {
+  color: #333;
+  margin: 0 0 12px 0;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.header p {
+  color: #666;
+  margin: 0 0 32px 0;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.facebook-auth-btn {
+  background: #1877F2;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 16px 32px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  transition: all 0.2s ease;
+}
+
+.facebook-auth-btn:hover:not(:disabled) {
+  background: #166fe5;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.3);
+}
+
+.facebook-auth-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.facebook-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.status-container {
+  padding: 20px 0;
+}
+
+.success-message, .error-message {
+  padding: 32px 24px;
+  border-radius: 12px;
+  margin-bottom: 24px;
+}
+
+.success-message {
+  background: #f0f9ff;
+  border: 2px solid #10b981;
+}
+
+.error-message {
+  background: #fef2f2;
+  border: 2px solid #ef4444;
+}
+
+.success-message .icon {
+  color: #10b981;
+  font-size: 48px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+
+.error-message .icon {
+  color: #ef4444;
+  font-size: 48px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+
+.success-message h2 {
+  color: #10b981;
+  margin: 0 0 12px 0;
+  font-size: 24px;
+}
+
+.error-message h2 {
+  color: #ef4444;
+  margin: 0 0 12px 0;
+  font-size: 24px;
+}
+
+.success-message p, .error-message p {
+  color: #666;
+  margin: 0 0 16px 0;
+  line-height: 1.5;
+}
+
+.retry-btn {
+  background: #ef4444;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.retry-btn:hover {
+  background: #dc2626;
+}
+
+@media (max-width: 480px) {
+  .auth-card {
+    padding: 24px;
+    margin: 20px;
+  }
+
+  .header h1 {
+    font-size: 24px;
+  }
+
+  .facebook-auth-btn {
+    padding: 14px 24px;
+    font-size: 15px;
+  }
+}
+</style>

src/views/promotionManagement/AccountManagement.vue

@@ -7,11 +7,11 @@
         type="primary"
         @click="googleAuthorization"
       >Google</el-button>
-<!--      <el-button-->
-<!--        class="authorization-btn"-->
-<!--        type="primary"-->
-<!--        @click="facebookAuthorization"-->
-<!--      >Facebook</el-button>-->
+      <el-button
+        class="authorization-btn"
+        type="primary"
+        @click="facebookAuthorization"
+      >Facebook</el-button>
     </div>
 
     <!-- 过滤条件区域 -->
@@ -87,7 +87,7 @@
 </template>
 
 <script>
-import { getAccountList, deleteAccount, refreshToken, getGoogleAuthUrl } from '@/api/accountManagement'
+import { getAccountList, deleteAccount, refreshToken, getGoogleAuthUrl, getFacebookAuthUrl } from '@/api/accountManagement'
 
 export default {
   name: 'AccountManagement',
@@ -155,11 +155,13 @@ export default {
     // Facebook授权
     facebookAuthorization() {
       // 调用后端获取授权URL，并跳转到Facebook授权页面
-      this.$http.get('/api/account/facebook/auth-url').then(res => {
-        if (res.data.code === 200) {
-          window.location.href = res.data.data
+      getFacebookAuthUrl().then(res => {
+        console.log("=====", JSON.stringify(res))
+        if (res.status === 200) {
+          window.location.href = res.result.data.authorizationUrl
         } else {
-          this.$message.error(res.data.message || 'Facebook授权失败')
+          this.$message.error(res.message || 'Facebook授权失败')
+          console.error('获取授权URL失败', res)
         }
       }).catch(error => {
         console.error('Facebook授权异常', error)