GoLang 实践: 打包激活码至剪切板的前端UI

0x00 前言

偶然查看公众号的的时候，发现接口不能获取到IDEA激活码，同时也有不少朋友在问，所以周末花点时间修复下。

同时修复之前老接口未授权问题，对代码进行了不少改动，考虑之前通过接口的形式返回JSON数据给用户使用似乎还是不太方便。

那么为什么不趁着这次机会直接做一个长按复制到粘贴板的功能从而去方便别人去使用呢？对，开干。

0x01 前端设计

0x1.1 新建项目

定位是前后端分离

步骤分别如下:

1.项目新增一个html的文件夹

mkdir html

2.新建vue项目

npm create vue@latest

大部分都选择 No 即可

3.项目运行

cd activate
npm install
npm run format
npm run dev

0x1.2 精简结构

初始化项目的时候，会有一些支持Example的vue组件、CSS样式文件和JS加载文件，将没必要的文件删除，把项目结构精简一下。

执行打印目录树命令

tree --prune -I "node_modules"

精简后得到的结果如下:

├── README.md
├── index.html
├── packagse-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── base.css
│   │   ├── idea.png
│   │   └── main.css
│   ├── components
│   │   └── ActivationCode.vue
│   └── main.js
└── vite.config.js

目录树中VUE的项目组织逻辑:

Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，而Vue是一套用于构建用户界面的渐进式JavaScript框架

1.单HTML开发

首先通过 index.html 这一个入口文件，创建id等于 app的根元素, 然后加载渲染所需的用到位于 src/main.js JS文件

2. src/main.js 负责导入组件，并且基于 App这一组件挂载到 <divid="app">元素中作为根组件

3. App.vue通过导入 components中的其他组件，通过标签引用实现动态加载，从而构成一个完整的前端应用

0x1.3 ElementPlus 组件

对于一个JS和CSS且对前端懂得不多的人来说，ElementPlus算是一个久违的选择。

npm 安装 element-plus

npm install element-plus --save

为了方便，我推荐你直接全局引入，遵循官方的快速指南:https://element-plus.org/zh-CN/guide/quickstart.html

import './assets/main.css'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

visual studio 可以考虑安装两个插件来支持 ElementPlus的代码提示

1) vue-helper

2)ElementPlus

0x1.4 简单封装 axios

因为我并不打算弃用原来的那个返回JSON格式接口，所以我想了一下觉得还是需要贯彻前后端分离的理念，前端尽量独立出来，所以就需要对接口发起网络请求，这样子就需要封装 axios这个库来方便前端调用。

npm install --save axios 

首先在 src目录下新建一个 api目录并且新建一个 request.js文件

通过新建 axios 实例，实现全局拦截返回内容并统一处理,示例部分代码如下所示

import axios from "axios"
let service = axios.create({
  baseURL: '/',
  timeout: 3000,
});
// 在请求之后
service.interceptors.response.use((res) => {
    // console.log(res);
    const { code, data, msg } = res.data;
    //   根据后端的具体状态码决定
    if (code == 0) {
      return data;
    } else if (code == -1) {
        return Promise.reject(msg||'当前接口请求失败，请稍后再试！')
    }
  },
  (error) => {
    return Promise.reject(error);
  });
export default service;

同样的，将我们程序所需要用到的借口封装到 api.js文件，示例部分代码如下所示

import service  from "./request";
// 请求获取激活码接口
export default getActivateCode(token) {
    return service({
        method: "GET",
        url: "/code/" + token
    })
}

0x1.5 前端功能设计

前端功能主要分为两部分:

1) 请求接口获取激活码内容

2) 复制激活码框的内容到剪切板

第一部分, 主要实现的代码如下所示：

  const code = ref('')
  // 请求接口获取验证码
  const getCode = () => {
    dialogVisible.value = true
    // /index/:uuid
    const token = window.location.pathname.substring(7)
    if(token.length < 1){
      ElMessage.error("非法访问，您需要前往并关注<<黑客真酷公众号>>来获取到激活码")
    }else{
      const fillCode = async (token) => {
      const aCode = await getActivateCode(token).catch((error) => {
        ElMessage.error(error);
      })
      code.value = aCode;
    }
    fillCode(token)
    }
  }

第二部分剪切板设计，考虑兼容性问题，故直接使用第三方的模块: vue-clipboard3

npm install --save vue-clipboard3

代码大致如下:

import { ElNotification } from 'element-plus'
import { ElMessage } from 'element-plus'
import useClipboard from 'vue-clipboard3'
...
  const handleCopy = async () => {
        // 复制code的内容到剪切板
        const { toClipboard } = useClipboard()
        try {
          await toClipboard(code.value).then((res) => {
            if(res){
              ElNotification({
                title: '消息提醒',
                type: 'success',
                message: h('i', { style: 'color: teal' }, '激活码已复制到剪切板'),
              })
            }
          }
          ).catch((error) =>{
              ElNotification({
              title: '消息提醒',
              type: 'error',
              message: h('i', { style: 'color: teal' }, "激活码获取异常, 无法复制到剪切板"),
            })
          })
      } catch (e) {
        ElMessage.warning('您的浏览器不支持复制：', e)
      }
    }

0x02 后端设计

基于前端的总体设计再来设计后端提供的功能，整体难度会简单不少，拆分组成结构如下：

1) 需要设计返回前端页面的URL，同时需要携带上关键路由路径的参数信息如 index/#:token

2) 修复一个未授权访问接口的Bug，严格控制用户必须经过公众号授权才能获取到激活码

0x2.1 集成前端

首先，需要更改下前端的 base路径为 index,要不然后面Gin路由不好控制前端显示的内容。

配置完成执行如下命令打包前端的代码到 dist目录

npm run build

不得不说，前端大小加起来也快2M了，真是不优雅的一种写法，但胜在简单好用，接着，将编译后的 dis·文件夹移动到项目目录下的 template

mv ./dist ../../template

0x2.2 打包前端

go1.16 之后支持使用 embed 将静态文件打包到二进制，具体操作步骤如下

1) 在后端项目根目录的 template新建 static.go文件，重点需要注意的是注释部分，指定静态文件列表加载。

package static
import "embed"
//go:embed index.html favicon.ico assets
var Static embed.FS

2) 在 main.go主文件，调用即可，在这里我们只需要关注路由设置跟前端 base设置为一样的 index就行。

r.StaticFS("/index", http.FS(static.Static))

最后改在公众号信息返回链接为静态文件的URL携带路由token即可。

0x2.3 前端适配

一开始打算直接使用 window.location.pathname.substring直接截断获取，当作 token参数传递即可

后来发现这种方式会给我带来不少麻烦，以后做这类操作的，使用 window.location.hash这个变量会更为保守

0x2.5 Bug修复

之前，自己写代码的时候，遗留了一个API，只需要直接删除 uuid部分路由就可以直接调用它直接来获取到激活码，本来这个还想留着给别人拿来玩的，不过既然都改了不少东西，顺便就把这个接口给删除，哈哈哈。。。

0x03 效果演示

如果你直接访问的话，页面会提示你去关注本公众号，原因当然是你缺失动态路由的参数。

作为一个正常用户，走正常流程，是这样子的，先关注本公众号回复关键词: idea

ok，直接点击链接打开页面

不出意外的话，会出现如图的一个界面，然后你只需要点击一下复制激活码到剪切板按钮，即可实现快速复制

激活成功！

0x04 其他想法

一开始自己只是为了随便写写代码学习一下Go语言，不过后面发现其实还是可以有很多想法的。

比如做一个接口管理后台，类似机器人的一个功能，如果能在Web后台控制，动态加载一些功能那么肯定会方便不少吧。

当然我也知道肯定有这样的项目，暂且把这个当作一个想法吧。

鉴于目前自己这样的身体状态，只能说在真正需要的时候，自己可能才会去上手改造一下，真要弄的话，那么集成JWT肯定是需要的，对于GO项目而言，JWT Token 似乎是大多数人的选择，关于这类项目的也存在很多固定密钥的问题，这也是自己后续需要留意的地方。