vue页面嵌入飞书网页组件,用于在类似ERP,OA等系统中展示在线文档

2023-09-21 15:10:05

先展示最终效果(就是在vue页面中,内嵌了一块ifream页面):

1. 注册进入飞书开放平台,地址为: 飞书开放平台

2.进入开放平台后,选择--创建企业自建应用--创建网页应用,然后在主页面记住该应用的appId和appSecret参数,后面要用

3.然后注意一点的是,因为后面的授权等逻辑我们一般用我们自己的文档做测试,但是自己的文档也属于企业,所以需要将平台应用正式上线,这个需要企业管理员审核,提前说明一下,还需要开通部分接口和数据权限,也是需要审核的.建议最好弄个管理员账号过来开一下

4.在开放平台--开发者后台这里,点击左侧菜单栏的[添加应用能力]页签,然后在右侧菜单选择网页组件

然后在弹出框中点击[如何开发]进入到官方文档中

进入文档页面后,切换左侧的菜单到网页组件中,使用这个组件:

5. 使用该组件,最开始的一件事就是要完成一圈授权流程,在这里将会用到的授权的参数记录如下:

private static final String APP_ID                  = "";

private static final String APP_SECRET              = "";

/** 用appId和appSecret获取tenant_access_token(租户授权,目前用不到,暂时留存) */
private static final String TENANT_ACCESS_TOKEN_URI = "https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal";

/** 获取ticket参数的api */
private static final String JSAPI_TICKET_URI        = "https://open.feishu.cn/open-apis/jssdk/ticket/get";

/** 加签sha1的一个随机参数 */
private static final String NONCE_STR               = "abc123def456";

/** 用appId和appSecret获取app_access_token(应用级别的授权(只允许查看,不允许编辑,分享等功能权限)) */
private static final String APP_ACCESS_TOKEN_URI    = "https://open.feishu.cn/open-apis/auth/v3/app_access_token/internal";

/** 用户访问令牌(用户级别授权,和用户权限挂钩,唯有这种授权在用户拥有权限的情况下,可以实现在线编辑文档,目前暂不做) */
private static final String USER_ACCESS_TOKEN_URI   = "https://open.feishu.cn/open-apis/authen/v1/access_token";

/** 用户信息接口路径 */
private static final String USER_INFO_URI           = "https://open.feishu.cn/open-apis/authen/v1/user_info";

private static final String DOCUMENT_URL            = "https://xxxxxxx.feishu.cn/docx/xxxxxxxxxxxxxx";

需要注意的两个点是:

(1). 如果你使用app_access_token去进行后续的验证,那么默认无法获得在线文档编辑的操作,只允许操作,只有当使用user_access_token权限认证,才可以根据用户的权限进行后续的编辑等操作

(2). 请注意DOCUMENT_URL这个参数,这个组件貌似目前只能用/docs下的文档进行渲染,而不可以用我们知识库下的wiki组件,也就是说,你打开的文档如果是wiki的,那么需要将他另存到共享空间中,就会自动变成docs.才可以用

6.授权参数明确后,还有一件事,就是需要开通对应权限,开通对应的权限后还需要上架最新的应用

        (1):TENANT_ACCESS_TOKEN_URI不需要开通权限

        (2):APP_ACCESS_TOKEN_URI: 不需要开通权限

        (3):USER_ACCESS_TOKEN_URI:需要权限如下

7.授权相关后台代码(用了Hutool的Http请求封装,自己引入或者改一下):

package com.ruoyi.biz.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.alibaba.fastjson.JSONObject;
import com.ruoyi.biz.vo.FeishuWebComponentAuthVo;
import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.common.core.domain.AjaxResult;
import cn.hutool.http.HttpRequest;
import cn.hutool.http.HttpUtil;
import lombok.extern.slf4j.Slf4j;

/**
 * @author zhaoyuyang
 */
@RestController
@RequestMapping("/biz/help")
@Slf4j
public class HelpController extends BaseController
{
    private static final String APP_ID                  = "";

    private static final String APP_SECRET              = "";

    /** 用appId和appSecret获取tenant_access_token(租户授权,目前用不到,暂时留存) */
    private static final String TENANT_ACCESS_TOKEN_URI = "https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal";

    /** 获取ticket参数的api */
    private static final String JSAPI_TICKET_URI        = "https://open.feishu.cn/open-apis/jssdk/ticket/get";

    /** 加签sha1的一个随机参数 */
    private static final String NONCE_STR               = "abc123def456";

    /** 用appId和appSecret获取app_access_token(应用级别的授权(只允许查看,不允许编辑,分享等功能权限)) */
    private static final String APP_ACCESS_TOKEN_URI    = "https://open.feishu.cn/open-apis/auth/v3/app_access_token/internal";

    /** 用户访问令牌(用户级别授权,和用户权限挂钩,唯有这种授权在用户拥有权限的情况下,可以实现在线编辑文档,目前暂不做) */
    private static final String USER_ACCESS_TOKEN_URI   = "https://open.feishu.cn/open-apis/authen/v1/access_token";

    /** 用户信息接口路径 */
    private static final String USER_INFO_URI           = "https://open.feishu.cn/open-apis/authen/v1/user_info";

    private static final String DOCUMENT_URL            = "替换你自己的文档全路径";

    /**
     * 获取签名数据
     */
    @GetMapping("/getSignData")
    public AjaxResult getSignData()
    {
        // 1. 通过app_id和app_secret获取app_access_token
        Map<String, Object> paramMap = new HashMap<>();
        paramMap.put("app_id", HelpController.APP_ID);
        paramMap.put("app_secret", HelpController.APP_SECRET);
        String returnStr = HttpUtil.post(HelpController.APP_ACCESS_TOKEN_URI,
                paramMap);
        JSONObject jsonObject = JSONObject.parseObject(returnStr);
        String appAccessToken = jsonObject.getString("app_access_token");
        // 2.通过tenantAccessToken获取ticket
        String ticketResponseStr = HttpRequest
                .post(HelpController.JSAPI_TICKET_URI)
                .header("Authorization", "Bearer " + appAccessToken).execute()
                .body();
        String ticket = JSONObject.parseObject(ticketResponseStr)
                .getJSONObject("data").getString("ticket");
        // 3.按照要求拼接Signature,然后使用sha1进行加密
        StringBuilder signatureBuilder = new StringBuilder();
        Long timeStamp = System.currentTimeMillis();
        signatureBuilder.append("jsapi_ticket=").append(ticket)
                .append("&noncestr=").append(HelpController.NONCE_STR)
                .append("&timestamp=").append(timeStamp).append("&url=")
                .append(HelpController.DOCUMENT_URL);
        String signature = cn.hutool.crypto.SecureUtil
                .sha1(signatureBuilder.toString());
        // 4.返回数据,组装数据
        FeishuWebComponentAuthVo returnVo = new FeishuWebComponentAuthVo();
        List<String> list = new ArrayList<>();
        list.add("DocsComponent");
        // 如果为app_access_token模式进行授权,则不输入openId参数
        returnVo.setOpenId("").setSignature(signature)
                .setAppId(HelpController.APP_ID)
                .setTimestamp(timeStamp.toString())
                .setNonceStr(HelpController.NONCE_STR)
                .setUrl(HelpController.DOCUMENT_URL).setJsApiList(list)
                .setLocale("zh-CN");
        return AjaxResult.success(returnVo);
    }
}

8.前端代码:

<template>
  <div class="app-container">
    <div id="feishu-page"></div>
  </div>
</template>
<script>
import { getSignData } from '@/api/biz/help'
export default {
  data() {
    return {}
  },
  created() {
    this.$modal.loading('正在加载文档')
  },
  mounted() {
    const script = document.createElement('script')
    script.src =
      'https://lf1-cdn-tos.bytegoofy.com/goofy/locl/lark/external_js_sdk/h5-js-sdk-1.1.3.js'
    script.async = true
    script.onload = () => {
      // 执行一些操作，例如初始化该库或者调用一些方法
      this.authPage()
    }
    document.head.appendChild(script)
  },
  methods: {
    authPage() {
      getSignData().then((response) => {
        let openId = response.data.openId
        let signature = response.data.signature
        let appId = response.data.appId
        let timestamp = response.data.timestamp
        let nonceStr = response.data.nonceStr
        let url = response.data.url
        let jsApiList = response.data.jsApiList
        let locale = response.data.locale
        let that = this
        window.webComponent
          .config({
            openId, // 当前登录用户的open id，要确保与生成 signature 使用的 user_access_token 相对应，使用 app_access_token 时此项不填。注意：仅云文档组件可使用app_access_token
            signature, // 签名
            appId, // 应用 appId
            timestamp, // 时间戳（毫秒）
            nonceStr, // 随机字符串
            url, // 第3步参与加密计算的url,同时也是最终需要访问的url
            jsApiList, // 指定要使用的组件列表，请根据对应组件的开发文档填写。如云文档组件，填写['DocsComponent']
            locale, // 指定组件的国际化语言：en-US-英文、zh-CN-中文、ja-JP-日文
          })
          .then((res) => {
            // 动态渲染，返回组件实例。
            let myComponent = window.webComponent.render(
              'DocsComponent',
              {
                //组件参数
                src: url,
                minHeight: '500px',
                height: '1100px', //该参数控制了页面的最大展开高度,不允许为Auto,也不能不写,会导致锚点定位,文本搜索失效
                width: '100%',
              },
              document.querySelector('#feishu-page'), // 将组件挂在到哪个元素上
            )
            // 通过setFeatureConfig方法修改组件的配置属性
            myComponent.config.setFeatureConfig({
              //文档头部菜单栏
              HEADER: {
                enable: true, // 隐藏头部
              },
              //点赞
              LIKE: {
                enable: true, // 隐藏点赞
              },
              //图片
              IMAGE: {
                maxWidth: 500, // 图片最大宽度
              },
              //分享
              SHARE: {
                enable: false, // 是否显示分享按钮
                visibleConfig: {
                  // 区域的显隐配置
                  invite: false, //邀请区域
                  shareLink: false, //分享链接区域
                  shareMethod: false, //分享方式区域
                },
              },
              //模态窗
              MODAL: {
                innerMask: true, // 有模态窗时， 组件内是否有遮罩
                outerMask: {
                  enable: true, // 有模态窗时， 组件外是否有遮罩
                  zIndex: 1000, // 遮罩层的z-index
                },
                offset: {
                  // 模态窗的偏移量
                  x: 0,
                  y: 0,
                },
              },
              //文档内容
              CONTENT: {
                readonly: false, // 是否只读
                padding: [0, 0, 0, 0], // 文档内边距，例：[10, 0, 10, 0] 为上下增加 10 px 边距
                maxWidth: 0, //内部最大宽度
                titleVisible: true, //标题是否可见
                unscrollable: false, //云文档组件是都允许滚动
              },
              //评论
              COMMENT: {
                partial: {
                  //局部评论
                  enable: false, //是否启用局部评论
                  open: false, //是否展开局部评论侧栏
                },
                global: {
                  //全局评论
                  enable: false, //是否启用全局评论
                },
              },
              //侧边栏
              SIDEBAR: {
                borderSide: [false, false, false, false], //侧边栏边框显隐，例：[true, true, false, false] 上、右侧有边框
              },
              //目录
              DIRECTORY: {
                enable: true, //是否显示目录
                pin: true, //是否固定目录
              },
              //文档头部右侧更多菜单
              MORE_MENU: {
                enable: true, //是否显示更多菜单
                items: {
                  //菜单子项
                  findAndReplaceEnable: true, //是否显示查找替换
                  makeCopyEnable: false, //是否显示创建副本
                  applyEditPermissionEnable: false, //是否显示申请编辑权限入口
                  exportEnable: false, //是否显示导出
                  documentInfoEnable: false, //是否显示文档详情
                  editHistoryEnable: false, //是否显示编辑历史'
                  commentHistoryEnable: false, //是否显示评论历史
                  translateEnable: false, //是否显示翻译
                  printEnable: false, //是否显示打印
                  deleteEnable: false, //是否显示删除
                },
              },
              //右下角全屏按钮
              FULLSCREEN: {
                enable: true, //是否显示按钮
              },
              //文档头部右侧协作者列表
              COLLABORATOR: {
                enable: false, //是否显示协作者列表
              },
            })
            myComponent.event.onMountSuccess(function () {
              that.$modal.closeLoading()
            })
          })
      })
    },
  },
}
</script>

更多推荐

从网约车平台合规问题看企业合规难题如何破解

随着互联网的快速发展，网约车行业逐渐崛起并成为人们出行的重要选择之一。然而，虽然网约车平台带来了便利和效率，但也引发了一系列合规问题。近日，西安市交通运输综合执法支队和西安市出租汽车管理处组织开展了西安市网约车行业“全过程执法、全链条监管、全合规营运百日攻坚行动”。约谈会上，西安市出租汽车管理处相关负责人通报了“百日攻

华为OD机试真题 Java 实现【简易内存池】【2023 B卷 200分 考生抽中题】

目录一、题目描述二、输入描述三、输出描述样例：输出样例：四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明4、再输入5、再说明6、如果走后一次请求的是20，会怎么样呢？华为OD机试2023B卷题库疯狂收录中，刷题点这里一、题目描述请实现一个简易内存池,根据请求命令完成内存分配和释放。内存池支持两种操作

Shiro【散列算法、Shiro会话、退出登录 、权限表设计、注解配置鉴权 】(五)-全面详解（学习总结---从入门到深化）

目录Shiro认证_散列算法Shiro认证_过滤器Shiro认证_获取认证数据Shiro认证_Shiro会话Shiro认证_会话管理器Shiro认证_退出登录Shiro认证_RememberMeShiro授权_权限表设计Shiro授权_数据库查询权限Shiro授权_在Realm进行授权Shiro授权_过滤器配置鉴权Sh

轻量服务器2核与1核的区别

​1.核心数量轻量服务器2核与1核最明显的区别在于核心数量。1核服务器只有一个处理器核心，而2核服务器有两个处理器核心。这使得2核服务器在处理数据时能够同时执行更多的任务。2.并行处理能力由于只有1个核心，1核服务器不具备并行处理任务的能力。而2核服务器在处理数据时可以同时执行多个任务，提高了服务器的处理速度和效率。3

GitLab数据迁移后出现500错误

一、背景去年做GitLab数据迁移时，写过一篇文章《GitLab的备份与还原》。后来发现新创建的项目没问题，但对于迁移过来的项目，修改名称等信息，或者删除该项目时，会出现500错误，以为是系统问题，一直也查到解决办法。二、原因前段时间再次搜索解决办法，终于解决了，在这里记录一下。导致这样的原因，了解到是db_key_b

辅助驾驶功能开发-功能规范篇(21)-3-XP行泊一体方案功能规范

XPilotParking自动泊车系统七、全自动泊车（AutoParking）•自动泊车辅助（AutoParkingAssist）、斜列式车位泊车辅助（DiagonalAutoParkingAssist）-产品定义基于超声波传感器和环视摄像头对空间和车位的识别，通过自动泊车系统实现全自动泊车入库。-功能说明当车辆以不高

前端杂记1

React是基于函数式编程的运行时框架，UI=fn（state），它的状态改变是通过发布订阅模式，单向数据流方式，更新是通过运行时diff，然后将变化的部分渲染，而vue是通过响应式以组件为颗粒进行更新，因此它可以在预编译阶段进行动静态标记来优化更新比较过程reactscheduler会将组件根据优先级划分成更小颗粒的

Vue全局事件总线

1.简介全局事件总线时一种组件间通信的方式，适用于任意组件间通信2.原理分析：如果A组件想要传递数据给B组件，那么就通过全局事件总线在B组件中绑定一个自定义事件，并界定一个参数来接收传递的数据，在A组件中，就需要通过全局事件总线对自定义事件进行触发，并传递参数简单理解：全局事件总线其实就是一个中间介质，组件间的相互通信

flex弹性盒模型与阿里图标的使用

华子目录flex布局flex布局原理flex使用三要素阿里图标（字体）flex布局相关学习网站：http://c.biancheng.net/css3/flex.html1.flex是当前最主流的布局方式：用它布局起来更方便，取代了浮动的作用。2.浮动布局有缺陷，会脱离文档流，可能会导致布局崩塌注：用flex布局的元素

SQL中LIKE和REGEXP简单对比

一、在SQL中，LIKE和REGEXP是用于模式匹配的两种不同语法。它们用于在数据库查询中匹配符合特定模式的字符串。1.LIKE是SQL中用于模糊匹配的运算符，它使用通配符%来表示任意个数字符序列（包括空字符序列）的位置。例如：SELECT*FROMtable_nameWHEREcolumn_nameLIKE'AA%'

Dubbo可以代替Feign、Hystrix、Sentinel，Ribbon？

文章目录一、概念二、功能介绍1、@Service2、@Reference3、@Method4、@Argument三、分析四、如何实现？1、熔断（CircuitBreaker）XML配置方式注解方式2、降级（Fallback）XML配置方式注解方式3、限流（RateLimiting）XML配置方式注解方式4、负载均衡（L

热文推荐
  1. React antd Select 无法在disabled状态下选择并复制输入框内的内容情况分析及解决方案

    文章目录背景问题分析解决思路一：会不会是由于在选择框内hover的时候出现的那个图标导致的解决思路二：会不会是这个span禁止复制解决思路三：去看看antd具体实现最终解决方案其他版本的解决方案antd3.*antd5.*背景在React项目开发中，我们经常会用到antd内的Select组件。有时候我们会在disabl

  2. Eureka注册中心

    文章目录1.Eureka的结构与作用2.搭建eureka-server服务3.注册service服务4.服务发现1.Eureka的结构与作用在Eureka架构中，微服务角色有两类：lEurekaServer：服务端，注册中心记录服务信息u心跳监控lEurekaClient：客户端Provider：服务提供者注册自己的信

  3. 数据结构前瞻

    集合框架JAVA的集合框架是定义在java.util包下的一组接口和实现类，用于将多个元素置于一个单元中，对这些元素进行快速，便捷的存储，减速和管理，即增删查改下面的格子，黄色代表接口，蓝色代表抽象类，棕色代表类是动态数组（顺序表）优先级队列是双向列表底层就是一颗红黑树重要的四个接口算法效率时间复杂度即算法中基本操作的

  4. 2022年贵州省职业院校技能大赛中职组网络安全赛项规程

    2022年贵州省职业院校技能大赛中职组网络安全赛项规程一、赛项名称赛项名称：网络安全赛项归属：信息技术类二、竞赛目的为检验中职学校网络信息安全人才培养成效，促进网络信息安全专业教学改革，培养大批既满足国家网络安全战略需要有具备世界水平的优秀技能人才，在社会上营造“技能改变命运、匠心成就人生”的崇尚技能的氛围，国家教育部

  5. 深入理解WPF中MVVM的设计思想

    近些年来，随着WPF在生产，制造，工业控制等领域应用越来越广发，很多企业对WPF开发的需求也逐渐增多，使得很多人看到潜在机会，不断从Web，WinForm开发转向了WPF开发，但是WPF开发也有很多新的概念及设计思想，如：数据驱动，数据绑定，依赖属性，命令，控件模板，数据模板，MVVM等，与传统WinForm，ASP.

  6. Redis实现Session持久化

    Redis实现Session持久化1.前言直接使用Session存储用户登录信息，此时的会话信息是存储在内中的，只要项目重启存储的Session信息就会丢失。而使用Redis存储Session的话就不会存在这种情况，即使项目重启也并不影响，也无需用户重新登录。使用Redis存储Session，还能让项目支持分布式的，比

  7. 如何将 Transformer 应用于时间序列模型

    在机器学习的广阔前景中，transformers就像建筑奇迹一样高高耸立，以其复杂的设计和捕获复杂关系的能力重塑了我们处理和理解大量数据的方式。自2017年创建第一个Transformer以来，Transformer类型呈爆炸式增长，其中包括ChatGPT和DALL-E等强大的生成式AI模型。虽然transformer

  8. Beyong compare 介绍

    "BeyondCompare"是一个强大的文件和文件夹比较工具，它允许你比较两个或更多的目录/文件并显示差异。这个工具特别有用，当你需要找出两个不同版本的文件之间的改变时。如果你想要使用BeyondCompare，你需要按照以下步骤操作：1.**下载和安装**：首先，你需要从BeyondCompare的官方网站或其他可

  9. 接口文档规范

    接口文档规范主要包括以下几个方面：1.接口基本信息应该在文档的开头提供接口的基本信息，包括接口名称、接口URL、请求方法、请求参数、返回值、返回状态码等。这些信息应该清晰明了，并且易于理解。2.请求参数接口文档应该明确列出请求参数，并提供每个参数的名称、类型、是否必填、描述等信息。对于复杂结构的请求参数，例如JSON或