智加文档 | 智加文档

前期准备工作

开发前请先仔细阅读该文档：浙政钉开发文档
准备专有钉钉、浙政钉账号，需要向业主申请。没有的话可以跟产品或直属领导沟通，务必确保开发人员需要有此账号。
浙政钉的开发文档具体参考【专有钉钉官网-前端API】
浙政钉上架需要做好浙政钉埋点处理
找产品获取浙政钉应用的相关信息：bid、signkey、sapp_id、sapp_name
专有钉钉是浙政钉的开发环境，也可使用IRS的测试环境。

部署【非必需】

确认浙政钉上架是直接提供链接还是需要上架到 IRS 平台，如果是链接的话，就按照正常的项目部署规则，然后提供该项目的登录页面的链接即可，如果需要上架到 IRS 平台，则参考如下规则
需要把前端打包的 dist 静态资源上传到IRS平台，上传之前需要用另外一个项目或使用zlb-build包装下
把前端的 dist 文件放入该项目中的 build 文件夹中，然后整个项目打成 ZIP 包进行上传即可
不需要提交该项目的 git 资源，该项目就是为了上架 IRS 平台所做的一个通用壳

接口对接【非必需】

如果需要通过 IRS 平台的请求方式进行接口请求的话，则需按照如下规则
由于上架到 IRS 平台，则所有的接口也需要上架到 IRS 平台，那接口的请求方式就不再是用传统的 axios 进行请求，需要使用 IRS 的请求库进行请求，具体使用参考如下规范

// 第一步 在 src/config/config.ts 的 request配置中新增以下两个配置
export default {
    request: {
        zlbAppKey: 'xxx', // 必填 应用平台的 APPKEY
        zlbHost: 'https://tgpt.dsjj.ningbo.gov.cn:8068' // 必填 应用平台的 HOST
    }
}

// 第二步 在 API 中所有的接口注册时 需要添加一个配置参数
export default {
    test() {
        return request({
            zlbApi: 'mgop.xxx.xxx.xxx', // IRS平台上 对于这个接口的映射 后端告知
            url: '/api/xxx/xxx/test',
            method: 'post',
            data: {},
        });
    },
};

浙政钉埋点处理

安装【脚手架中默认自带】

bash

yarn add wp-utils git+https://gitlab.zhijiasoft.com/vue3-base-framework/wp-utils.git

引入

// 在 vite.config.ts 文件中引入
import utils from 'wp-utils/vite'

基本配置

// 在 vite.config.ts 文件的 plugins 属性中添加如下代码：
utils.initZhezhengding({
    enable: true,
    bid: '',
    signkey: '',
    sapp_id: '',
    sapp_name: '',
})

// 类型说明
interface Config {
    enable: boolean // 是否启用
    bid: string // 浙政钉应用的 bid
    signkey: string // 浙政钉应用的 signkey
    sapp_id: string // 浙政钉应用的 sapp_id
    sapp_name: string // 浙政钉应用的 sapp_name
}

具体使用

// 第一步：在登录页面，点击登录或自动免登成功之后需要调用如下方法
import { createUserInfoBurialPointZzd } from 'wp-utils'
createUserInfoBurialPointZzd({
    _user_nick: '',
    _user_id: '',
    _dev_id: ''
})

// 类型说明
interface Config {
    _user_nick: string | undefined // 用户昵称 登录接口返回
    _user_id: string | undefined // 用户ID 登录接口返回
    _dev_id?: string | undefined // 用户设备ID 没有就不填
}

// 第二步：在 src/router/permission.ts 该文件中的 router.beforeEach 方法中，添加如下代码
import { createBaseBurialPointZzd } from 'wp-utils'
createBaseBurialPointZzd({
    page_id: '',
    page_name: '',
    page_url: ''
})

// 类型说明
interface Config {
    page_id: string | symbol // 页面ID 取 to.name
    page_name: string | undefined // 页面ID 取 to.meta.title
    page_url: string | undefined // 页面ID 取 to.fullPath
}

其他工具函数说明

获取浙政钉免登授权 code 函数

import {getAuthCodeZzd} from 'wp-utils';

getAuthCodeZzd().then((code: string) => {
    console.log(code);
}).catch((err) => {
    console.log((err));
}).finally(() => {});

浙政钉免登页面通用代码

vue

<template>
    <div class="p-20px h-100% text-center">
        <div class="text-left font-bold text-26px m-b-30px">登录</div>
        <n-form size="large" class="m-b-50px">
            <n-form-item label="手机号:">
                <n-input class="text-left" v-model:value="phone"></n-input>
            </n-form-item>
        </n-form>
        <van-button class="w-70%" type="primary" @click="goLogin"
        >登录</van-button
        >
    </div>
</template>

<script setup lang="ts">
import { showToast, closeToast } from 'vant';
import useStore from '@/store/modules/main';
import { getAuthCodeZzd, createUserInfoBurialPointZzd, utils } from 'wp-utils';
import {commonToast} from "@/utils/common";

const store = useStore();
const router = useRouter();

const phone = ref('');
const toast = ref();

// 初始化
const init = () => {
    toast.value = showToast({
        type: 'loading',
        forbidClick: true,
        duration: 0,
        message: '页面初始化',
    });
    zzdAuth();
};

// 浙政钉获取CODE
const getCode = () => {
    return new Promise((resolve) => {
        getAuthCodeZzd()
            .then((code: string) => {
                resolve(code);
            })
            .catch((err) => {
                setTimeout(() => {
                    showToast({
                        type: 'fail',
                        forbidClick: true,
                        message: `授权失败：${err}`,
                    });
                }, 500);
            })
            .finally(() => {
                closeToast();
            });
    });
};

// 浙政钉免登处理
const zzdAuth = async () => {
    toast.value.message = '免登授权中...';
    getCode().then(async (code: string) => {
        try {
            const res =
                await window.$apis.v1.app.zwding.dingUser.getClientToken({
                    auth_code: code,
                });
            await goPage(res.data);
        } catch (e) {
            commonToast(e)
        }
    });
};

// 进入首页
const goPage = async (res) => {
    await store.setToken(res.token);
    await store.setUnit(res.unit);
    await store.setUserinfo(res);
    const userInfo = await window.$apis.v1.app.zwding.dingUser.getUserInfo();
    await createUserInfoBurialPointZzd({
        _user_nick: userInfo.data.nickNameCn,
        _user_id: userInfo.data.accountId,
    });
    await router.replace('/');
};

// 手动登录
const goLogin = async () => {
    if (!phone.value) return window.$message.warning('请输入手机号');
    if (!utils.checkPhoneNumber(phone.value))
        return window.$message.warning('请输入正确的手机号');
    getCode().then(async (code: string) => {
        const res = await window.$apis.v1.app.zwding.dingUser.bind({
            mobile_phone: phone.value,
            auth_code: code,
        });
        await goPage(res.data);
    });
};

onMounted(init);
</script>

<style scoped lang="less"></style>

前期准备工作 #

部署【非必需】 #

接口对接【非必需】 #

浙政钉埋点处理 #

其他工具函数说明 #

浙政钉免登页面通用代码 #

前期准备工作

部署【非必需】

接口对接【非必需】

浙政钉埋点处理

其他工具函数说明

浙政钉免登页面通用代码