Skip to content

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

掌权跳转成功

上级 dd03b1ba
正在显示 包含 242 行增加 和 22 行删除
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 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
<!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://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script><script defer="defer" src="static/js/chunk-vendors.c4430008.js"></script><script defer="defer" src="static/js/app.7fd393c4.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
......@@ -14,6 +14,7 @@
"bi-eleme": "^2.4.4",
"bi-element-ui": "^1.5.2",
"core-js": "^3.8.3",
"dingtalk-jsapi": "^3.1.0",
"element-ui": "^2.15.14",
"moment": "^2.29.1",
"sass": "^1.89.0",
......
pnpm-lock.yaml
......@@ -26,6 +26,9 @@ importers:
core-js:
specifier: ^3.8.3
version: 3.42.0
dingtalk-jsapi:
specifier: ^3.1.0
version: 3.1.0
element-ui:
specifier: ^2.15.14
version: 2.15.14(vue@2.7.16)
......@@ -2019,6 +2022,9 @@ packages:
resolution: {integrity: sha512-glXVh42vz40yZb9Cq2oMOt70FIoWiv+vxNvdKdU8CwjLad25qHM3trLxhl9bVjdr6WaslIXhWpn0NO8T/67Qjg==}
engines: {node: '>= 8.0.0'}
dingtalk-jsapi@3.1.0:
resolution: {integrity: sha512-2W1XuOR3g/0eYbqXXOMKwmTSUzyIeKNIQ1DDgUrMmf3eNdfOb8ShcQZ02QNvn/j5Vpy6Pd0Yf+uRkWVB3Pl9gA==}
dir-glob@3.0.1:
resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
engines: {node: '>=8'}
......@@ -3937,6 +3943,9 @@ packages:
peerDependencies:
webpack: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
promise-polyfill@7.1.2:
resolution: {integrity: sha512-FuEc12/eKqqoRYIGBrUptCBRhobL19PS2U31vMNTfyck1FxPyMfgsXyW4Mav85y/ZN1hop3hOwRlUDok23oYfQ==}
proto-list@1.2.4:
resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
......@@ -7447,6 +7456,10 @@ snapshots:
digest-header@1.1.0: {}
dingtalk-jsapi@3.1.0:
dependencies:
promise-polyfill: 7.1.2
dir-glob@3.0.1:
dependencies:
path-type: 4.0.0
......@@ -9573,6 +9586,8 @@ snapshots:
log-update: 2.3.0
webpack: 5.99.8
promise-polyfill@7.1.2: {}
proto-list@1.2.4:
optional: true
......
public/index.html
......@@ -6,6 +6,8 @@
<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://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
</head>
<body>
<noscript>
......
src/App.vue
<template>
<div id="app">
<h1>客服id:{{userInfo.userid}}</h1>
<h1>客户id:{{userInfo.externalUserId}}</h1>
<!-- <h1>客服id:{{userInfo.userid}}</h1>
<h1>客户id:{{userInfo.externalUserId}}</h1> -->
<DdLogin/>
<router-view />
</div>
......@@ -17,7 +17,7 @@ export default {
DdLogin
},
created() {
this.handleAuthCode();
// this.handleAuthCode();
},
data() {
return {
......@@ -32,13 +32,13 @@ export default {
Authorize() {
// 先获取企微配置信息
let redirectUrl = location.origin + location.pathname;
let returnUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wweaefe716636df3d1&redirect_uri=${encodeURIComponent(redirectUrl)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
let returnUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wweaefe716636df3d1&redirect_uri=${encodeURIComponent(redirectUrl)}&response_type=code&scope=snsapi_base&state=wweaefe716636df3d1#wechat_redirect`
this.num++;
console.log('进入Authorize', returnUrl)
if(this.num>3){
return
}
window.location.href = returnUrl;
// window.location.href = returnUrl;
},
handleAuthCode() {
console.log('进入handleAuthCode')
......@@ -147,7 +147,7 @@ export default {
success: (res) => {
console.log('获取成功33',res)
if (res.err_msg === "getCurExternalContact:ok") {
console.log('获取成功开始',res.userid)
console.log('获取成功开始',res.userId)
that.$set(that.userInfo,'externalUserId',res.userId)
that.set_userInfo(that.userInfo)
}
......
src/api/user.js
......@@ -8,3 +8,25 @@ export function getAuthUser(data) {
data
})
}
export function getOrganization(data) {
return new Promise((resovle, reject) => {
cross_systemRequest({
system: 'zq',
api: '/api/login/organization',
params: data
}).then((res) => {
resovle(res)
})
})
}
export function cross_systemRequest(data) {
!data.noApi ? data.api = '/api' + data.api : ''
return request({
url: '/api/cross_system/request',
method: 'post',
headers:{
"Corp-Id":"wweaefe716636df3d1"
},
data
})
}
\ No newline at end of file
src/docs/钉钉登录.md 0 → 100644
# 钉钉扫码登录接入文档
# 钉钉扫码登录接入文档
## 一、前期准备
### 1.1 开发者平台配置
1. 登录 钉钉开放平台
2. 创建应用并获取以下信息：
- AppID（应用ID）
- AppSecret（应用密钥）
3. 配置应用回调域名
4. 开通"扫码登录"功能权限
## 二、项目配置
### 2.1 引入钉钉 SDK
在项目的 index.html 中添加：
```
<script src="https://g.alicdn.com/dingding/
dingtalk-jsapi/2.13.42/dingtalk.open.js"></
script>
```
### 2.2 创建登录组件
```
<template>
  <div class="DDlogin">
    <h2>钉钉扫码登录</h2>
    <div id="login_container"></div>
  </div>
</template>
<script>
export default {
  name: "DDLogin",
  data() {
    return {
      appid: process.env.
      VUE_APP_DINGTALK_APPID,
      dingRedirect_uri: encodeURIComponent
      (window.location.origin + '/login'),
      dingCodeConfig: {
        id: "login_container",
        style: "border:none;
        background-color:#FFFFFF;",
        width: "400",
        height: "400",
      }
    }
  },
  methods: {
    initDingLogin() {
      window.DDLogin(this.getDingCodeConfig);
    },
    addDingListener() {
      const handleMessage = (event) => {
        if (event.origin === "https://login.
        dingtalk.com") {
          this.handleLoginTmpCode(event.data);
        }
      };
      window.addEventListener("message", 
      handleMessage, false);
    }
  }
}
</script>
```
## 三、登录流程
1. 用户访问登录页面
2. 初始化钉钉扫码组件
3. 用户使用钉钉APP扫描二维码
4. 获取临时授权码（loginTmpCode）
5. 重定向到回调地址并携带 code
6. 后端验证 code 并返回登录态
## 四、环境配置
### 4.1 开发环境配置
```
// .env.development
VUE_APP_DINGTALK_APPID=your_development_appid
VUE_APP_REDIRECT_URI=http://localhost:8080/
login
```
### 4.2 生产环境配置
```
// .env.production
VUE_APP_DINGTALK_APPID=your_production_appid
VUE_APP_REDIRECT_URI=https://your-domain.com/
login
```
## 五、注意事项
### 5.1 安全性
1. AppSecret 禁止在前端暴露
2. 必须使用 HTTPS 协议
3. 注意防范 CSRF 攻击
### 5.2 开发建议
1. 建议本地开发使用 HTTPS
2. 区分开发和生产环境配置
3. 做好错误处理和异常提示
## 六、常见问题
### 6.1 扫码无法回调
- 检查回调域名配置
- 验证 AppID 正确性
- 确认环境是否支持 HTTPS
### 6.2 登录失败
- 检查网络连接
- 验证应用配置
- 查看控制台错误信息
## 七、上线检查清单
- 更新正式环境 AppID
- 配置正确的回调域名
- 确认 HTTPS 证书有效
- 测试完整登录流程
- 验证错误处理机制
- 检查日志记录
## 八、参考资料
- 钉钉开放平台文档
- 扫码登录接入指南
\ No newline at end of file
src/views/ddLogin.vue
<template>
<div class="DDlogin">
<h1>钉钉登录</h1>
钉钉扫码
<div v-if="!organizationShow" class="contain-contain">
<div class="back">
<span style="font-size: 12px">当前组织：</span>
<span style="color: #3396fa; font-size: 14px">{{
currentApp.name
}}</span>
<el-tooltip
class="item"
effect="dark"
content="点此切换其他组织"
placement="top"
>
<i class="el-icon-arrow-up" @click="organizationShow = true"></i>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'DdLogin',
</div>
<div id="login_container"></div>
</div>
</template>
<script>
import { getOrganization } from "@/api/user";
export default {
name: "App",
components: {},
data() {
return {
organizationList: [],
currentApp: {},
organizationShow: false,
dingAppid: window.location.host === 'zq.wozhangwan.com' ? 'dingoafvrnicn48bydk92l' : 'dingoamtigagqd7h2mxawd',
dingRedirect_uri: process.env.NODE_ENV === 'production' ? encodeURIComponent(window.location.origin + '/login') : 'https://companywx.jianshuwenhua.com/company_app/index.html?type=zq',
};
},
created() {
this.initOrganization();
},
mounted() {
},
data() {
return {
methods: {
async initOrganization() {
this.organizationList = [];
const res = await getOrganization();
if (res.status_code === 1) {
this.organizationList = res.data.data
this.initCurrentApp();
this.$nextTick(() => {
this.dingInit();
});
}
},
computed: {
initCurrentApp() {
const currentApp = this.organizationList.find(
(item) => item.app_key === "dingjigp0ksn9nbljdli"
);
this.$set(this, "currentApp", currentApp);
},
methods: {
dingInit() {
const obj = DDLogin({
id: 'login_container',
// goto这里需要对url整体做一个urlencode编码
goto: encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.currentApp.app_key}&response_type=code&scope=snsapi_login&state=${this.currentApp.app_key}&redirect_uri=${this.dingRedirect_uri}`),
style: 'border:none;background-color:#FFFFFF;margin:0',
width: '210',
height: '250'
})
const hanndleMessage = (event) => {
const origin = event.origin
// 判断是否来自ddLogin扫码事件
if (origin === 'https://login.dingtalk.com') {
const loginTmpCode = event.data
// 这里url不用进行urlencode编码
const url = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=' + this.currentApp.app + '&response_type=code&scope=snsapi_login&state=' + this.currentApp.app_key + '&redirect_uri=' + this.dingRedirect_uri + '&loginTmpCode=' + loginTmpCode
window.location.href = url
}
}
</script>
\ No newline at end of file
if (typeof window.addEventListener !== 'undefined') {
window.addEventListener('message', hanndleMessage, false)
} else if (typeof window.attachEvent !== 'undefined') {
window.attachEvent('onmessage', hanndleMessage)
}
},
},
};
</script>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论