前言

現在軟體開發不僅要面對前端碎片化，還要面對後端碎片化。針對前端碎片化，CabloyJS提供了pc=mobile+pad的跨端自適應方案，參見：自適應佈局：pc = mobile + pad

在這裡，咱們重點要解決的是後端碎片化。比如要開發一個業務系統，既需要與微信、企業微信整合，又需要與釘釘整合，該如何設計整個架構呢？

其實，不論是微信、企業微信，還是釘釘，面向實際業務層面的API都不復雜，複雜的是各自獨立的賬號體系如何與業務系統打通的問題。當賬號介面對接完成，後續的業務開發就很順暢了

CabloyJS設計了一套使用者系統與身份認證系統完全分離的機制，從而可以實現一個使用者可以繫結多種登入方式。而且，這些不同的登入方式都是通過Provider

相關文章參考

• Cabloy-通用的身份認證機制
• Cabloy-微信
• Cabloy-企業微信
• Cabloy-釘釘

Cabloy-釘釘是什麼

Cabloy-釘釘是基於CabloyJS全棧業務開發框架開發的釘釘介面模組，當前整合了H5微應用和釘釘小程式的介面，達到開箱即用的使用效果。在Cabloy-釘釘的基礎上，可以很方便的開發各類釘釘業務系統

核心目標

釘釘開發最複雜的就是賬號體系對接，比如：

1. 企業通訊錄同步：部門、成員
2. 在訊息推送系統中，對使用者進行認證
3. 通過網頁登入，對使用者進行認證
4. 通過釘釘小程式登入，對使用者進行認證

一旦完成了這些場景下的賬號體系對接，真正的業務開發就很簡單了

因此，Cabloy-釘釘模組的核心目標，就是自動完成這些場景下的賬號體系對接，我們所需要做的就是提供一些配置引數，然後就可以愉快的開啟業務邏輯的開發了

兩大亮點

基於CabloyJS全棧業務開發框架本身提供的特性，使得Cabloy-釘釘模組具有以下兩個顯著的亮點：

1. PC、Mobile自適應

許多釘釘應用存在這樣一個問題：在Mobile端只能使用一部分功能，其他更多功能則需要登入PC系統進行操作

而CabloyJS框架下的Cabloy-釘釘允許所有的業務功能同時支援PC和Mobile使用。同時又能保證以下兩點：

1. 通過角色許可權系統，控制不同使用者使用不同功能
2. 前端頁面採用非同步載入策略，從而適應大型專案的開發

• Mobile端效果

• PC端效果

2. 資料孤島

企業從不同服務提供商採購不同的釘釘應用，必然導致資料孤島的出現，而且這些資料散存在不同服務商的後臺，缺乏資料聯動與共享機制

而CabloyJS框架本身就是基於業務模組構建的。企業自建的模組或者使用第三方的模組，都彙集在一個CabloyJS專案之中，並進行私有部署，從而從根本上解決了資料孤島的問題，不僅能實現資料聯動與共享，也可以更靈活的進行資料採集、處理和分析

歸根結底一句話，資料和程式都掌握在自己的手中

特性

基於CabloyJS全棧框架提供的便利性和靈活性，Cabloy-釘釘主要有如下特性:

1. 一站式整合

當前整合了H5微應用和釘釘小程式的介面，具體如下：

2. 開箱即用

只需配置好釘釘賬號引數，所有介面自動完成對接

3. 多小程式支援

釘釘可以關聯多個釘釘小程式，因此，模組也提供了多小程式支援

4. 多租戶/多站點支援

通過CabloyJS提供的多例項特性，可以實現多租戶/多站點支援，比如為不同的企業提供釘釘服務。請參見：EggBornJS：多例項

5. PC、Mobile自適應

如上所述

新建CabloyJS專案

在進行後續模組的安裝之前，您必須先建立一個CabloyJS專案

請務必參照文件步驟配置MySQL資料庫連線引數、Redis連結引數

請參見：指南：快速開始

安裝釘釘模組

安裝釘釘模組a-dingtalk

$ npm i egg-born-module-a-dingtalk

安裝釘釘測試模組（可選）

釘釘測試模組用於演示如何在模組a-dingtalk的基礎上進行具體的業務開發（同時包含釘釘小程式的demo程式）。有兩種方式來使用釘釘測試模組：

1. 安裝到node_modules

如果僅僅是預覽效果，可以直接安裝到{project}/node_modules

$ npm i egg-born-module-test-dingtalk

2. 安裝到src/module

可以將測試模組安裝到{projecct}/src/module，然後在此模組的基礎上進行自定義開發

$ mv {project}/node_modules/egg-born-module-test-dingtalk src/module/test-dingtalk

配置釘釘引數

直接在專案配置檔案中配置H5微應用和釘釘小程式的引數

src/backend/config/config.default.js

  // modules
  config.modules = {
    'a-dingtalk': {
      account: {
        dingtalk: {
          corpid: 'ww1fe9daaaa045aaaa',
          ssosecret: '02322323dsssw2',
          // apps
          apps: {
            selfBuilt: {
              agentid: '',
              appkey: '',
              appsecret: '',
              businessCallback: {
                host: 'yourdomain.com',
                token: appInfo.name,
                encodingAESKey: '',
              },
            },
          },
          // webs
          webs: {
            default: {
              appid: '',
              appsecret: '',
            },
          },
          // minis
          minis: {
            default: {
              agentid: '',
              appkey: '',
              appsecret: '',
            },
          },
        },
      },
    },
};

執行

啟動後端服務

$ npm run dev:backend

啟動前端服務

$ npm run dev:front

nginx配置

由於釘釘應用一定要繫結域名。為了支援開發除錯，可以有不同的策略。如果我們想在伺服器上配置開發環境，然後通過nginx把前端服務和後端服務反向代理給前端，請參見：nginx配置

如何訪問系統

1. 進入後臺管理頁面

• 網址：http://yourdomain.com/
• 使用者名稱：root
• 密碼：123456

2. 同步通訊錄

只有加入到釘釘通訊錄中的使用者才可以訪問H5微應用和釘釘小程式。因此，我們需要先進行通訊錄同步操作

當第一次同步完部門和成員後，以後所有的變更（增、刪、改）都會自動進行同步

依次進入：首頁->設定->釘釘->通訊錄管理

3. H5微應用-Mobile網頁

在釘釘中直接訪問首頁，系統會自動進行釘釘登入

• 首頁：http://yourdomain.com/

4. H5微應用-Web掃碼登入

在瀏覽器中直接訪問首頁，登入頁面會自動顯示釘釘登入按鈕，點選按鈕，即可顯示二微信，通過手機釘釘掃描，自動完成登入

• 首頁：http://yourdomain.com/

需要進入釘釘的管理後臺，在移動接入應用-登入中建立掃碼登入應用授權，回撥域名設定為: http://yourdomain.com/api/a/dingtalk/passport/a-dingtalk/dingtalkweb/callback

5. 管理後臺進入

在釘釘管理端的工作臺，點選H5微應用的圖示可以直接進入應用的後臺管理頁面

需要進入釘釘的管理後臺，在H5微應用的開發管理中設定管理應用後臺的URL地址為: http://yourdomain.com/api/a/dingtalk/passport/a-dingtalk/dingtalkadmin/callback

釘釘小程式

測試模組test-dingtalk已經包含了一個釘釘小程式的demo程式，使用步驟如下：

1. 在釘釘開發者工具中直接匯入demo程式，目錄路徑：{project}/src/module/test-dingtalk/front/demo/miniprogram

2. 修改初始化引數：

{project}/src/module/test-dingtalk/front/demo/miniprogram/app.js

// 初始化cabloy
const cabloyOptions = {
  base: {
    scene: 'default',
    locale: 'en-us',
  },
  api: {
    baseURL: 'http://yourdomain.com',
  },
};
this.cabloy = Cabloy(this, cabloyOptions);

預設對應的是default小程式，如果要開發其他小程式，只需修改如下引數

相關連結

• 官網: https://cabloy.com/
• GitHub: https://github.com/zhennann/cabloy