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> <!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 \ No newline at end of file
package.json
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@wecom/jssdk": "^2.3.1",
"axios": "^1.9.0", "axios": "^1.9.0",
"babel-plugin-component": "^1.1.1", "babel-plugin-component": "^1.1.1",
"bi-eleme": "^2.4.4", "bi-eleme": "^2.4.4",
......
pnpm-lock.yaml
...@@ -8,6 +8,9 @@ importers: ...@@ -8,6 +8,9 @@ importers:
.: .:
dependencies: dependencies:
'@wecom/jssdk':
specifier: ^2.3.1
version: 2.3.1
axios: axios:
specifier: ^1.9.0 specifier: ^1.9.0
version: 1.9.0 version: 1.9.0
...@@ -1066,6 +1069,9 @@ packages: ...@@ -1066,6 +1069,9 @@ packages:
'@webassemblyjs/wast-printer@1.14.1': '@webassemblyjs/wast-printer@1.14.1':
resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==} 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': '@xtuc/ieee754@1.2.0':
resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
...@@ -6460,6 +6466,8 @@ snapshots: ...@@ -6460,6 +6466,8 @@ snapshots:
'@webassemblyjs/ast': 1.14.1 '@webassemblyjs/ast': 1.14.1
'@xtuc/long': 4.2.2 '@xtuc/long': 4.2.2
'@wecom/jssdk@2.3.1': {}
'@xtuc/ieee754@1.2.0': {} '@xtuc/ieee754@1.2.0': {}
'@xtuc/long@4.2.2': {} '@xtuc/long@4.2.2': {}
......
public/index.html
...@@ -6,8 +6,6 @@ ...@@ -6,8 +6,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <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> </head>
<body> <body>
<noscript> <noscript>
......
src/App.vue
<template> <template>
<div id="app"> <div id="app">
<h1>客服id:{{userInfo.userid}}</h1>
<h1>客户id:{{userInfo.externalUserId}}</h1>
<DdLogin/>
<router-view /> <router-view />
</div> </div>
</template> </template>
<script> <script>
import * as ww from '@wecom/jssdk'
import { getAuthUser } from '@/api/user' import { getAuthUser } from '@/api/user'
import {mapMutations} from 'vuex' import {mapState,mapMutations} from 'vuex'
import DdLogin from '@/views/ddLogin'
export default { export default {
name: 'App', name: 'App',
components: { components: {
DdLogin
}, },
created() { created() {
this.handleAuthCode(); this.handleAuthCode();
...@@ -19,12 +24,8 @@ export default { ...@@ -19,12 +24,8 @@ export default {
num:0 num:0
} }
}, },
provide() { computed: {
return { ...mapState('user', ['userInfo','userid'])
authPromise: new Promise((resolve) => {
this.resolveAuth = resolve;
})
};
}, },
methods: { methods: {
...mapMutations('user',['set_userInfo','set_userid']), ...mapMutations('user',['set_userInfo','set_userid']),
...@@ -40,40 +41,47 @@ export default { ...@@ -40,40 +41,47 @@ export default {
window.location.href = returnUrl; window.location.href = returnUrl;
}, },
handleAuthCode() { handleAuthCode() {
console.log('进入handleAuthCode')
const url = window.location.href; const url = window.location.href;
const questionMarkIndex = url.indexOf('?'); const questionMarkIndex = url.indexOf('?');
const hashIndex = url.indexOf('#/'); const hashIndex = url.indexOf('#/');
// 确保URL中包含问号和#/ // 确保URL中包含问号和#/
if (questionMarkIndex !== -1 && hashIndex !== -1) { if (questionMarkIndex !== -1 && hashIndex !== -1) {
console.log('questionMarkIndex')
// 截取?和#/之间的内容 // 截取?和#/之间的内容
let params = url.substring(questionMarkIndex + 1, hashIndex); let params = url.substring(questionMarkIndex + 1, hashIndex);
if (params) { if (params) {
console.log('params')
// 将参数字符串转换为对象 // 将参数字符串转换为对象
let paramsObj = Object.fromEntries( let paramsObj = Object.fromEntries(
params.split('&').map(param => param.split('=')) params.split('&').map(param => param.split('='))
) )
const { code, corp_id } = paramsObj; const { code, corp_id } = paramsObj;
if(code){ if(code){
console.log('code')
this.getWxUserInfo(code, corp_id); this.getWxUserInfo(code, corp_id);
}else{ }else{
console.log('nocode')
this.Authorize(); this.Authorize();
} }
} else { } else {
console.log('noparams')
this.Authorize(); this.Authorize();
} }
} else { } else {
console.log('no questionMarkIndex')
this.Authorize(); this.Authorize();
} }
}, },
getWxUserInfo(authCode) { getWxUserInfo(authCode) {
console.log('进入getWxUserInfo')
getAuthUser({ code: authCode, corp_id: 'wweaefe716636df3d1' }).then((res) => { getAuthUser({ code: authCode, corp_id: 'wweaefe716636df3d1' }).then((res) => {
if (res.status_code === 1) { if (res.status_code === 1) {
let { userid } = res.data || {}; let { userid } = res.data || {};
if ( res.data && userid) { if ( res.data && userid) {
this.set_userInfo(res.data) this.set_userInfo(res.data)
this.set_userid(userid) this.set_userid(userid)
// 解析 Promise this.register()
this.resolveAuth();
} else { } else {
this.Authorize() this.Authorize()
} }
...@@ -81,8 +89,73 @@ export default { ...@@ -81,8 +89,73 @@ export default {
this.Authorize() this.Authorize()
} }
}).catch(() => { }).catch(() => {
console.log('请求 进入getWxUserInfo 失败')
this.Authorize() 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 = [ ...@@ -12,7 +12,12 @@ const routes = [
path: '/about', path: '/about',
name: 'about', name: 'about',
component: () => import('../views/AboutView.vue') component: () => import('../views/AboutView.vue')
} },
// {
// path: '/ddLogin',
// name: 'ddLogin',
// component: () => import('../views/ddLogin.vue')
// }
] ]
const router = new VueRouter({ const router = new VueRouter({
mode: 'hash', mode: 'hash',
......
src/store/modules/user.js
const state = { 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 = { const mutations = {
set_userInfo(state,userInfo){ set_userInfo(state,userInfo){
......
src/views/AboutView.vue
<template> <template>
<div class="about"> <div class="home">
<h1 @click="$router.push('/')">about</h1> <h1 @click="$router.push('/about')">home</h1>
<h1>客服号userid:{{userInfo.userid}}</h1>
<h1>客户externalUserId:{{userInfo.externalUserId}}</h1>
</div> </div>
</template> </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> <template>
<div class="home"> <div class="home">
<h1 @click="$router.push('/about')">home</h1>
</div> </div>
</template> </template>
<script> <script>
import {mapState, mapActions} from 'vuex' import {mapState, mapActions} from 'vuex'
import * as ww from '@wecom/jssdk'
console.log(ww,'ww')
export default { export default {
name: 'HomeView', name: 'HomeView',
inject: ['authPromise'], // inject: ['authPromise'],
created() { mounted() {
// 等待认证完成后执行 getAuthUser // this.authPromise.then(() => {
this.authPromise.then(() => { // this.getAuthUser();
this.getAuthUser(); // });
console.log('网页地址',window.location.href)
});
}, },
data() { data() {
return { return {
...@@ -26,71 +25,9 @@ export default { ...@@ -26,71 +25,9 @@ export default {
}, },
methods: { methods: {
getAuthUser() { getAuthUser() {
this.companyConfigInit() this.register()
},
//企业验证配置
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("版本过低请升级");
}
}
});
}, },
} }
} }
</script> </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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论