增加授权页面

src/api/report.js

@@ -413,5 +413,13 @@ export function backhaul(params) {
   })
 }
 
+export function getGoogleTokenList() {
+  return request({
+    // url: 'http://localhost:8567/youtube/getTokenList',
+    url: 'https://data-api.zhangxinhulian.com/youtube/getTokenList',
+    method: "get",
+  })
+}
+
 
 // ----------------------------------------

src/router/index.js

@@ -85,6 +85,12 @@ export const constantRouterMap = [
         name: "assetManagement.createMaterial",
         component: () => import("@/views/createMaterial"),
         meta: { title: "创意素材", icon: "chart" }
+      },
+      {
+        path: "/assetManagement/googleOauthYoutube",
+        name: "assetManagement.createMaterial",
+        component: () => import("@/views/authAccount/googleOauthYoutube"),
+        meta: { title: "创意素材", icon: "chart" }
       }
     ]
   },

src/views/authAccount/googleOauthYoutube.vue

+<template>
+  <div class="app-container">
+    <el-form inline>
+      <el-form-item label="别名:">
+        <el-input v-model="alias" placeholder="请输入别名"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="authorize()" :disabled="!alias">请求授权</el-button>
+      </el-form-item>
+    </el-form>
+
+
+<!--      <p v-if="authCode">授权码: {{ authCode }}</p>-->
+<!--      <p v-if="accessToken">访问令牌: {{ accessToken }}</p>-->
+<!--      <p v-if="refreshToken">刷新令牌: {{ refreshToken }}</p>-->
+
+
+    <el-table :data="tokenList" style="width: 100%" border>
+<!--      <el-table-column prop="id" label="ID" width="50"></el-table-column>-->
+<!--      <el-table-column prop="appName" label="应用名" ></el-table-column>-->
+<!--      <el-table-column prop="pkg" label="包名"></el-table-column>-->
+      <el-table-column prop="alias" label="别名"></el-table-column>
+      <el-table-column prop="access_token" label="访问密钥"></el-table-column>
+      <el-table-column prop="refresh_token" label="刷新密钥"></el-table-column>
+      <el-table-column prop="create_time" label="创建时间" :formatter="formatDate"></el-table-column>
+      <el-table-column prop="update_time" label="更改时间":formatter="formatDate"></el-table-column>
+    </el-table>
+
+
+  </div>
+</template>
+
+<style>
+.jsoneditor-vue {
+  height: 600px;
+}
+
+.el-drawer {
+  width: 50% !important;
+}
+</style>
+<script>
+
+import {commonFetchData, getAdAccountApps, saveNewMessage,getRefreshToken} from "@/api/report";
+import moment from "moment";
+import axios from 'axios';
+import ZxAppsSelect from '@/components/ZxAppsSelect'
+
+import vueJsonEditor from "vue-json-editor";
+import {getGoogleTokenList} from "../../api/report";
+
+export default {
+  components: {vueJsonEditor},
+  data: () => ({
+    alias:'',
+    authCode: null,
+    accessToken: null,
+    refreshToken: null,
+    tokenList: [],
+    showSuccessMessage: false,
+    showErrorMessage: false,
+    errorMessage: '',
+  }),
+  created() {
+    this.getTokenList();
+  },
+  mounted() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const success = urlParams.get('success');
+    const error = urlParams.get('error');
+
+    if (success === 'true') {
+      this.showSuccessMessage = true;
+      setTimeout(() => {
+        this.showSuccessMessage = false;
+      }, 3000);
+    } else if (success === 'false') {
+      this.showErrorMessage = true;
+      this.errorMessage = error || '未知错误';
+    }
+  },
+  methods: {
+    authorize() {
+      if (!this.alias){
+        this.$message.error("别名不能为空")
+        return;
+      }
+      const alias=this.alias;
+      const state = alias;
+      const redirectUri = `https://adputin.zhangxindiet.com/youtube/add/getRefreshToken`;
+      const clientId ='797378266354-sd6e02o2qpdk2rhsb0ltjc98i5k9l2co.apps.googleusercontent.com'
+      const scope = 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtubepartner https://www.googleapis.com/auth/yt-analytics-monetary.readonly https://www.googleapis.com/auth/yt-analytics.readonly https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.channel-memberships.creator https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtube.upload https://www.googleapis.com/auth/youtubepartner https://www.googleapis.com/auth/youtubepartner-channel-audit https://www.googleapis.com/auth/yt-analytics-monetary.readonly https://www.googleapis.com/auth/yt-analytics.readonly';
+      const responseType = 'code';
+      const accessType = 'offline';
+      const authUrl = new URL('https://accounts.google.com/o/oauth2/v2/auth');
+
+      authUrl.searchParams.append('redirect_uri', redirectUri);
+      authUrl.searchParams.append('response_type', responseType);
+      authUrl.searchParams.append('client_id', clientId);
+      authUrl.searchParams.append('scope', scope);
+      authUrl.searchParams.append('access_type', accessType);
+      authUrl.searchParams.append('state', state);
+      window.location.href = authUrl.toString();
+          },
+
+    getTokenList(){
+      getGoogleTokenList().then(res => {
+        this.tokenList = res.result.data;
+      })
+    },
+
+    formatDate(row, column, cellValue) {
+      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+};
+</script>
+<style scoped>
+
+</style>