vue項目對接釘釘企業內部H5微應用

應用場景

將之前已經有的 H5 應用接入釘釘內，無需輸入賬號密碼便可直接登錄。

準備工作

開發流程

項目修改

項目情況

接入步驟

依賴安裝

獲取微應用免登授權碼方法封裝

應用入口頁面修改

對接感受

參考資料

準備工作

1.注冊釘釘(廢話)

2.負責開發的相關人員申請成為釘釘子管理員(找公司內的超管申請)

注意需要管理員賦予必要的權限，例如：

開發應用的數據權限

開發者權限

工作臺管理

應用中心管理

3.登錄釘釘開發者后臺

只有管理員和子管理員可登錄開發者后臺

4.在應用開發頁面，選擇企業內部開發 > H5微應用，然后單擊創建應用

5.填寫應用的基本信息，然后單擊確定創建

6.在應用信息頁面，單擊開發管理，然后單擊修改

這里注意『開發模式』的選擇。如果已有可接入的H5應用時，文檔提示說選擇『快捷鏈接』的方式，但是如果后端需要請求釘釘的話就要配置服務器出口IP(白名單)了，所以還是得選擇『開發應用』，不然無法配置后端請求的白名單(坑)

7.單擊憑證與基礎信息獲取應用的AppKey和AppSecret

8.如果需要獲取通訊錄權限，就要添加合適的接口權限

開發流程

1.獲取免登授權碼。

H5微應用免登流程

2.獲取access_token。

調用gettoken接口獲取access_token。

3.獲取用戶userid。

調用user/getuserinfo接口獲取用戶的userid，通過免登碼獲取用戶userid。

4.獲取用戶詳情。

調用user/get接口獲取用戶詳情信息。

5.根據手機號做登錄。

視自己應用情況而定

項目修改

技術棧

vue 2.6.11

vue-cli 2.9.6

更目錄執行以下命令

npm install dingtalk-jsapi --save

項目的 utils 目錄下(當然也可以選擇 common 組件目錄)新建文件dd.js

import * as dd from 'dingtalk-jsapi' export function getCode(callback) { let corpId = 'your corpId' if (dd.env.platform !== 'notInDingTalk') { dd.ready(() => { //使用SDK 獲取免登授權碼 dd.runtime.permission.requestAuthCode({ corpId: corpId, onSuccess: info => { // 根據釘釘提供的api 獲得code后,再次調用這個callback方法 // 由于是釘釘獲取code是異步操作,不知道什么時候執行完畢 // callback 函數會等他執行完畢后在自己調用自己 callback(info.code) }, onFail: err => { alert('fail') alert(JSON.stringify(err)) } }) }) } }

corpId 可到后臺 基本信息->開發信息(舊版)->企業自用賬號信息 下查看。

import { getCode } from '@/utils/dd' export default { data() { return { } }, methods: {}, created() { getCode(code => { // 登錄處理 }) } }

對接感受

從 H5 微應用的對接來看沒有特別復雜的配置，對接起來很流暢，基本沒有卡殼的地方

官方文檔有一處寫的不夠準確，已有H5應用時引導用戶選擇快捷鏈接開發模式，但是這種模式下如果后端需要請求釘釘接口的話就找不到配置IP白名單的地方了，比較尷尬。

權限管理的地方，涉及到通訊錄權限時，基本信息與成員手機號、郵箱都是分開的權限需要手動添加，不然是獲取不到相應信息的

參與測試人員需要在應用的版本管理與發布tab頁單獨設置可使用范圍才能使相關開發人員在釘釘客戶端上看見入口

參考資料

釘釘開發者后臺

H5微應用免登流程

通過免登碼獲取用戶userid

獲取用戶詳情信息

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。