Skip to content

C
company_app
提交 dd03b1ba 作者: 毛细亚
操作

企业微信授权联调完成

上级 1d1d2b60
正在显示 包含 252 行增加 和 92 行删除
company_app/index.html
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>cebianlan</title><script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script><script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script><script defer="defer" src="static/js/app.def67d32.js"></script><link href="static/css/app.9dbe61af.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but cebianlan doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
\ No newline at end of file
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>cebianlan</title><script defer="defer" src="static/js/app.f903af3c.js"></script><link href="static/css/app.9dbe61af.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but cebianlan doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
\ No newline at end of file
package.json
......@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@wecom/jssdk": "^2.3.1",
"axios": "^1.9.0",
"babel-plugin-component": "^1.1.1",
"bi-eleme": "^2.4.4",
......
pnpm-lock.yaml
......@@ -8,6 +8,9 @@ importers:
.:
dependencies:
'@wecom/jssdk':
specifier: ^2.3.1
version: 2.3.1
axios:
specifier: ^1.9.0
version: 1.9.0
......@@ -1066,6 +1069,9 @@ packages:
'@webassemblyjs/wast-printer@1.14.1':
resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
'@wecom/jssdk@2.3.1':
resolution: {integrity: sha512-9XxeY/kljYZF1tKk9v0ZOR/Amz2Y8cxrmZTEBTN/Zqb6WsbpHiDPOWbvpvUBrTsiCW4w7nDnvYYi01ZsOUcUYQ==}
'@xtuc/ieee754@1.2.0':
resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
......@@ -6460,6 +6466,8 @@ snapshots:
'@webassemblyjs/ast': 1.14.1
'@xtuc/long': 4.2.2
'@wecom/jssdk@2.3.1': {}
'@xtuc/ieee754@1.2.0': {}
'@xtuc/long@4.2.2': {}
......
public/index.html
......@@ -6,8 +6,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
</head>
<body>
<noscript>
......
src/App.vue
<template>
<div id="app">
<h1>客服id:{{userInfo.userid}}</h1>
<h1>客户id:{{userInfo.externalUserId}}</h1>
<DdLogin/>
<router-view />
</div>
</template>
<script>
import * as ww from '@wecom/jssdk'
import { getAuthUser } from '@/api/user'
import {mapMutations} from 'vuex'
import {mapState,mapMutations} from 'vuex'
import DdLogin from '@/views/ddLogin'
export default {
name: 'App',
components: {
DdLogin
},
created() {
this.handleAuthCode();
......@@ -19,12 +24,8 @@ export default {
num:0
}
},
provide() {
return {
authPromise: new Promise((resolve) => {
this.resolveAuth = resolve;
})
};
computed: {
...mapState('user', ['userInfo','userid'])
},
methods: {
...mapMutations('user',['set_userInfo','set_userid']),
......@@ -40,40 +41,47 @@ export default {
window.location.href = returnUrl;
},
handleAuthCode() {
console.log('进入handleAuthCode')
const url = window.location.href;
const questionMarkIndex = url.indexOf('?');
const hashIndex = url.indexOf('#/');
// 确保URL中包含问号和#/
if (questionMarkIndex !== -1 && hashIndex !== -1) {
console.log('questionMarkIndex')
// 截取?和#/之间的内容
let params = url.substring(questionMarkIndex + 1, hashIndex);
if (params) {
console.log('params')
// 将参数字符串转换为对象
let paramsObj = Object.fromEntries(
params.split('&').map(param => param.split('='))
)
const { code, corp_id } = paramsObj;
if(code){
console.log('code')
this.getWxUserInfo(code, corp_id);
}else{
console.log('nocode')
this.Authorize();
}
} else {
console.log('noparams')
this.Authorize();
}
} else {
console.log('no questionMarkIndex')
this.Authorize();
}
},
getWxUserInfo(authCode) {
console.log('进入getWxUserInfo')
getAuthUser({ code: authCode, corp_id: 'wweaefe716636df3d1' }).then((res) => {
if (res.status_code === 1) {
let { userid } = res.data || {};
if ( res.data && userid) {
this.set_userInfo(res.data)
this.set_userid(userid)
// 解析 Promise
this.resolveAuth();
this.register()
} else {
this.Authorize()
}
......@@ -81,8 +89,73 @@ export default {
this.Authorize()
}
}).catch(() => {
console.log('请求 进入getWxUserInfo 失败')
this.Authorize()
})
},
register(data) {
console.log('进入register',this.userInfo)
let that = this
let jsApiList = ['checkJsApi', 'getContext', 'selectEnterpriseContact','getCurExternalContact'];
// 应用身份与权限
ww.register({
corpId: that.userInfo.corp_id, // 必填，当前用户企业所属企业ID
agentId: 1000013, // 必填，当前应用的AgentID
jsApiList: jsApiList, // 必填，需要使用的JSAPI列表
getConfigSignature:function(){ // // 必填，根据url生成企业签名的回调函数
return new Promise((resolve, reject) => {
resolve({
nonceStr: that.userInfo.nonceStr,
timestamp: that.userInfo.time,
signature: that.userInfo.corp_signature,
})
})
},
getAgentConfigSignature:function(){ // 必填，根据url生成应用签名的回调函数
return new Promise((resolve, reject) => {
resolve({
nonceStr: that.userInfo.nonceStr,
timestamp: that.userInfo.time,
signature: that.userInfo.agent_signature,
})
})
},
onConfigSuccess:function(res){
console.log('onConfigSuccess',res)
},
onConfigFail:function(err){
console.log('onConfigFail',err)
},
onConfigComplete:function(res){
console.log('onConfigComplete',res)
},
onAgentConfigSuccess:function(res){
console.log('onAgentConfigSuccess',res)
that.getCurExternalContact()
},
onAgentConfigFail:function(err){
console.log('onAgentConfigFail',err)
},
onAgentConfigComplete:function(res){
console.log('onAgentConfigComplete',res)
},
})
},
getCurExternalContact(){
let that = this;
ww.getCurExternalContact({
success: (res) => {
console.log('获取成功33',res)
if (res.err_msg === "getCurExternalContact:ok") {
console.log('获取成功开始',res.userid)
that.$set(that.userInfo,'externalUserId',res.userId)
that.set_userInfo(that.userInfo)
}
},
fail: (err) => {
console.log('获取失败',err)
}
})
}
},
}
......
src/docs/注意点.md 0 → 100644
# 后端签名时候的 url 应该是 重定向回来的那个 url 带 code 和 state 参数 而不是 在企微后台设置的那个 url
应该是 https://companywx.jianshuwenhua.com/company_app/index.html?code=-aXitj4Tt8UNLq_evPRgECSVS6zHpP6-r3ofYzk0BeM&state=STATE 带上参数去签名
\ No newline at end of file
src/router/index.js
......@@ -12,7 +12,12 @@ const routes = [
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
},
// {
// path: '/ddLogin',
// name: 'ddLogin',
// component: () => import('../views/ddLogin.vue')
// }
]
const router = new VueRouter({
mode: 'hash',
......
src/store/modules/user.js
const state = {
userInfo:{
userInfo: {
"userid": "JinDuoXia",
"corp_id": "wweaefe716636df3d1",
"nonceStr": "xL1ZHTEt8d5GrjMG",
"agent_signature": "05a47ef848266c48ff28f52e7749ba8b70adcc14",
"corp_signature": "29e61720786b3c6dac31f1041c70878b4819842e",
"time": 1747726636,
externalUserId:''
},
userid:''
userid:'userid'
}
const mutations = {
set_userInfo(state,userInfo){
......
src/views/AboutView.vue
<template>
<div class="about">
<h1 @click="$router.push('/')">about</h1>
<div class="home">
<h1 @click="$router.push('/about')">home</h1>
<h1>客服号userid:{{userInfo.userid}}</h1>
<h1>客户externalUserId:{{userInfo.externalUserId}}</h1>
</div>
</template>
<script>
import {mapState, mapActions} from 'vuex'
export default {
name: 'HomeView',
inject: ['authPromise'],
created() {
// 等待认证完成后执行 getAuthUser
this.authPromise.then(() => {
this.getAuthUser();
console.log('网页地址',window.location.href)
});
},
data() {
return {
}
},
computed: {
...mapState('user', ['userInfo'])
},
methods: {
getAuthUser() {
this.companyConfigInit()
},
//企业验证配置
companyConfigInit(data) {
console.log('进入companyConfigInit')
let that = this;
let { time, nonceStr, corp_signature,corp_id } = that.userInfo || {};
console.log(this.userInfo,'userInfo')
// eslint-disable-next-line
wx.config({
beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: corp_id, // 必填，企业微信的corpID
timestamp: time, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: corp_signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: ["getContext", "getCurExternalContact", "invoke"] //你要调用的sdk接口必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});
// eslint-disable-next-line
wx.ready(function (res) {
console.log('config成功了',res)
wx.checkJsApi({
jsApiList: ['agentConfig', 'getCurExternalContact'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success:function(res) {
console.log('checkJsApi成功了',res)
that.appAgentConfig();
},
})
});
// eslint-disable-next-line
wx.error(function (res) {
console.log('config失败了', res)
});
},
//应用验证配置
appAgentConfig(data) {
console.log('进入appAgentConfig')
console.log(this.userInfo,'userInfo')
let that = this;
let { time, nonceStr, agent_signature,corp_id } = that.userInfo || {};
wx.agentConfig({
corpid:corp_id,
agentid: 1000013,
timestamp: time,
nonceStr: nonceStr,
signature: agent_signature,
jsApiList: ["getContext", "getCurExternalContact", "invoke"],
success: function () {
// eslint-disable-next-line
wx.invoke('getCurExternalContact', {
}, function (res) {
console.log('invoke成功了', res)
if (res.err_msg == "getCurExternalContact:ok") {
localStorage.setItem('externalUserId', res.userId);
// this.$store.dispatch("common/setExternalUserId", res.userId);
that.externalUserId = res.userId; //返回当前外部联系人userId
// alert(that.externalUserId);
} else {
//错误处理
}
//查看相关接口是否可以调用
// that.checkJsApi();
});
},
fail: function (res) {
console.log('invoke失败了', res)
// alert('invoke失败了', res)
if (res.errMsg.indexOf("function not exist") > -1) {
alert("版本过低请升级");
}
}
});
},
}
}
</script>
src/views/HomeView.vue
<template>
<div class="home">
<h1 @click="$router.push('/about')">home</h1>
</div>
</template>
<script>
import {mapState, mapActions} from 'vuex'
import * as ww from '@wecom/jssdk'
console.log(ww,'ww')
export default {
name: 'HomeView',
inject: ['authPromise'],
created() {
// 等待认证完成后执行 getAuthUser
this.authPromise.then(() => {
this.getAuthUser();
console.log('网页地址',window.location.href)
});
// inject: ['authPromise'],
mounted() {
// this.authPromise.then(() => {
// this.getAuthUser();
// });
},
data() {
return {
......@@ -26,71 +25,9 @@ export default {
},
methods: {
getAuthUser() {
this.companyConfigInit()
},
//企业验证配置
companyConfigInit(data) {
let that = this;
let { time, noncestr, corp_signature,corp_id } = this.userInfo || {};
// eslint-disable-next-line
wx.config({
beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: corp_id, // 必填，企业微信的corpID
timestamp: time, // 必填，生成签名的时间戳
nonceStr: noncestr, // 必填，生成签名的随机串
signature: corp_signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: ["getContext", "getCurExternalContact", "invoke"] //你要调用的sdk接口必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});
// eslint-disable-next-line
wx.ready(function () {
console.log('config成功了')
that.appAgentConfig();
});
// eslint-disable-next-line
wx.error(function (res) {
console.log('config失败了', res)
});
},
//应用验证配置
appAgentConfig(data) {
let that = this;
let { time, noncestr, corp_signature,corp_id } = this.userInfo || {};
wx.agentConfig({
corpid:corp_id,
agentid: 1000013,
timestamp: time,
nonceStr: noncestr,
signature: corp_signature,
jsApiList: ["getContext", "getCurExternalContact", "invoke"],
success: function () {
// eslint-disable-next-line
wx.invoke('getCurExternalContact', {
}, function (res) {
// alert('invoke成功了')
// alert(JSON.stringify(res),'invokeData数据')
console.log('invoke成功了', res)
if (res.err_msg == "getCurExternalContact:ok") {
localStorage.setItem('externalUserId', res.userId);
// this.$store.dispatch("common/setExternalUserId", res.userId);
that.externalUserId = res.userId; //返回当前外部联系人userId
// alert(that.externalUserId);
} else {
//错误处理
}
//查看相关接口是否可以调用
// that.checkJsApi();
});
},
fail: function (res) {
console.log('invoke失败了', res)
// alert('invoke失败了', res)
if (res.errMsg.indexOf("function not exist") > -1) {
alert("版本过低请升级");
}
}
});
this.register()
},
}
}
</script>
src/views/ddLogin.vue 0 → 100644
<template>
<div class="DDlogin">
<h1>钉钉登录</h1>
</div>
</template>
<script>
export default {
name: 'DdLogin',
mounted() {
},
data() {
return {
}
},
computed: {
},
methods: {
}
}
</script>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论