大纲
1、集成钉钉jspai
2、免登
3、鉴权
4、页面主动刷新后，鉴权失效如何配置
5、Gitee示例代码地址
集成钉钉jspai
1、在index.html页面中增加钉钉的jsApi.js：
<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>
2、在页面中可以使用window.dd来操作了
免登
1、免登操作，此处我是结合鉴权来使用的，所以corpId使用后台返回的数据，不需鉴权的话，可以直接用钉钉开发者后台对应的corpId代替即可。
window.dd.runtime.permission.requestAuthCode({
corpId: _config.corpId,
onSuccess: function(result) {
// that.toast('登录中,请稍后...');
console.log(result.code);
that.$store.dispatch('DDLogin', result.code).then(() => {
that.$store.dispatch('GetInfo').then(res => {
uni.reLaunch({
url: '/pages/index/index'
});
});
})
.catch((res) => {
console.log(res)
that.toast('登录异常,请联系管理员排查系统账号和钉钉账号对应关系');
});
},
onFail: function(err) {
alert('err:')
alert(err)
}
});
2、如果需要鉴权后免登的，可以在登录页login.vue使用如下方式
<template>
<view>
<u-loading-page loading-text="loading..." bg-color="#e8e8e8" loading-color="#000000"></u-loading-page>
</view>
</template>
<script>
import {
getSignatureInfo
} from '@/api/login';
export default {
data() {
return {
};
},
onLoad() {
// 设置全局鉴权的url，方便页面主动刷新导致的鉴权失败问题
uni.setStorageSync('permission_url', location.href);
// 免登
this.ddLogin();
},
methods: {
// 钉钉登录
ddLogin() {
let that = this;
// 获取后台鉴权信息
getSignatureInfo(location.href).then(res => {
const _config = res.data;
var endStamp=Date.now()+2*60*60*1000;
// 默认鉴权有效期是2小时，鉴权数据存本地，避免每次都去服务器申请
uni.setStorageSync('endStamp', endStamp);
uni.setStorageSync('_config.agentId', _config.agentId);
uni.setStorageSync('_config.corpId', _config.corpId);
uni.setStorageSync('_config.timeStamp', _config.timeStamp);
uni.setStorageSync('_config.nonceStr', _config.nonceStr);
uni.setStorageSync('_config.signature', _config.signature);
//console.log(res.data)
var jsapilist = [
'device.notification.alert', //警告框
'device.notification.confirm', //确认框
'biz.navigation.setTitle', //设置导航栏标题
'biz.navigation.quit', //关闭页面
'biz.util.openModal', //打开弹窗（模态窗）
'biz.contact.complexPicker', //选择人员
'device.geolocation.get', //获取当前地理位置信息
'biz.map.locate', //地图定位
'biz.map.search', //地图页面支持搜索
'biz.map.view' //展示位置
] //需要使用的jsapi列表
//1、鉴权
window.dd.config({
agentId: _config.agentId,
corpId: _config.corpId, //必填，企业ID
timeStamp: _config.timeStamp, // 必填，生成签名的时间戳
nonceStr: _config.nonceStr, // 必填，生成签名的随机串
signature: _config.signature, // 必填，签名
jsApiList: jsapilist // 必填，需要使用的jsapi列表，注意：不要带dd。
});
window.dd.error(function(err) { //验证失败
console.log("进入到error中");
console.log('dd error: ' + JSON.stringify(err));
})
// 免登
window.dd.runtime.permission.requestAuthCode({
corpId: _config.corpId,
onSuccess: function(result) {
// that.toast('登录中,请稍后...');
console.log(result.code);
that.$store.dispatch('DDLogin', result.code).then(() => {
that.$store.dispatch('GetInfo').then(res => {
uni.reLaunch({
url: '/pages/index/index'
});
});
})
.catch((res) => {
console.log(res)
that.toast('登录异常,请联系管理员排查系统账号和钉钉账号对应关系');
});
},
onFail: function(err) {
alert('err:')
alert(err)
}
});
});
},
}
};
</script>
<style lang="scss">
.eye {
position: absolute;
height: 50rpx;
width: 50rpx;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.register {
margin-top: 20rpx;
color: #69c8fa;
text-align: right;
}
.tishi {
font-size: 20rpx;
color: gray;
}
.login {
width: 200rpx;
color: white;
height: 75rpx;
font-size: 30rpx;
background-color: #69c8fa;
}
.codeImg {
height: 64rpx;
position: absolute;
right: 0;
top: 10rpx;
width: 200rpx;
}
</style>
鉴权
1、鉴权,上面在登录页我们进行登录的时候进行了一次鉴权操作，在跳转到其他页面的时候，手动刷新页面会导致鉴权失败，需要在app.vue中配置全局的鉴权方法。
// 钉钉鉴权--全局引用
ddPermission() {
let that = this;
var url=uni.getStorageSync('permission_url');
var jsapilist = [
'device.notification.alert', //警告框
'device.notification.confirm', //确认框
'biz.navigation.setTitle', //设置导航栏标题
'biz.navigation.quit', //关闭页面
'biz.util.openModal', //打开弹窗（模态窗）
'biz.contact.complexPicker', //选择人员
'device.geolocation.get', //获取当前地理位置信息
'biz.map.locate', //地图定位
'biz.map.search', //地图页面支持搜索
'biz.map.view' //展示位置
]; //需要使用的jsapi列表
// 默认鉴权有效期是2小时，如果鉴权还没过期（提前10分钟），就直接拿本地的数据，如果过期了，再服务器上拿
if(uni.getStorageSync('endStamp') && uni.getStorageSync('endStamp')-Date.now()>10*60*1000){
//1、鉴权
window.dd.config({
agentId: uni.getStorageSync('_config.agentId'),
corpId: uni.getStorageSync('_config.corpId'), //必填，企业ID
timeStamp: uni.getStorageSync('_config.timeStamp'), // 必填，生成签名的时间戳
nonceStr: uni.getStorageSync('_config.nonceStr'), // 必填，生成签名的随机串
signature: uni.getStorageSync('_config.signature'), // 必填，签名
jsApiList: jsapilist // 必填，需要使用的jsapi列表，注意：不要带dd。
});
window.dd.error(function(err) { //验证失败
console.log("进入到error中");
console.log('dd error: ' + JSON.stringify(err));
})
} else {
getSignatureInfo(url).then(res => {
console.log("重新鉴权成功");
const _config = res.data;
// 默认鉴权有效期是2小时，鉴权数据存本地，避免每次都去服务器申请
var endStamp=Date.now()+2*60*60*1000;
uni.setStorageSync('endStamp', endStamp);
uni.setStorageSync('_config.agentId', _config.agentId);
uni.setStorageSync('_config.corpId', _config.corpId);
uni.setStorageSync('_config.timeStamp', _config.timeStamp);
uni.setStorageSync('_config.nonceStr', _config.nonceStr);
uni.setStorageSync('_config.signature', _config.signature);
//1、鉴权
window.dd.config({
agentId: _config.agentId,
corpId: _config.corpId, //必填，企业ID
timeStamp: _config.timeStamp, // 必填，生成签名的时间戳
nonceStr: _config.nonceStr, // 必填，生成签名的随机串
signature: _config.signature, // 必填，签名
jsApiList: jsapilist // 必填，需要使用的jsapi列表，注意：不要带dd。
});
window.dd.error(function(err) { //验证失败
console.log("进入到error中");
console.log('dd error: ' + JSON.stringify(err));
})
});
}
},
主动刷新页面后，监控页面刷新并重新鉴权
1、需要在app.vue中增加如下代码，全局监听页面的刷新操作，避免在每个页面上配置重新鉴权：
mounted() {
window.addEventListener("load", () => {
//页面手动刷新后，需要重新鉴权
console.log("我被刷新了");
getApp().ddPermission();
});
},
完整代码
1、app.vue页面
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-ui/index.scss";
</style>
<script>
import {
getSignatureInfo
} from '@/api/login';
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
mounted() {
window.addEventListener("load", () => {
//页面手动刷新后，需要重新鉴权
console.log("我被刷新了");
getApp().ddPermission();
});
},
methods: {
// 钉钉鉴权--全局引用
ddPermission() {
let that = this;
var url=uni.getStorageSync('permission_url');
var jsapilist = [
'device.notification.alert', //警告框
'device.notification.confirm', //确认框
'biz.navigation.setTitle', //设置导航栏标题
'biz.navigation.quit', //关闭页面
'biz.util.openModal', //打开弹窗（模态窗）
'biz.contact.complexPicker', //选择人员
'device.geolocation.get', //获取当前地理位置信息
'biz.map.locate', //地图定位
'biz.map.search', //地图页面支持搜索
'biz.map.view' //展示位置
]; //需要使用的jsapi列表
// 如果鉴权还没过期（提前10分钟），就直接拿本地的数据，如果过期了，再服务器上拿
if(uni.getStorageSync('endStamp') && uni.getStorageSync('endStamp')-Date.now()>10*60*1000){
//1、鉴权
window.dd.config({
agentId: uni.getStorageSync('_config.agentId'),
corpId: uni.getStorageSync('_config.corpId'), //必填，企业ID
timeStamp: uni.getStorageSync('_config.timeStamp'), // 必填，生成签名的时间戳
nonceStr: uni.getStorageSync('_config.nonceStr'), // 必填，生成签名的随机串
signature: uni.getStorageSync('_config.signature'), // 必填，签名
jsApiList: jsapilist // 必填，需要使用的jsapi列表，注意：不要带dd。
});
window.dd.error(function(err) { //验证失败
console.log("进入到error中");
console.log('dd error: ' + JSON.stringify(err));
})
} else {
getSignatureInfo(url).then(res => {
console.log("重新鉴权成功");
const _config = res.data
var endStamp=Date.now()+2*60*60*1000;
uni.setStorageSync('endStamp', endStamp);
uni.setStorageSync('_config.agentId', _config.agentId);
uni.setStorageSync('_config.corpId', _config.corpId);
uni.setStorageSync('_config.timeStamp', _config.timeStamp);
uni.setStorageSync('_config.nonceStr', _config.nonceStr);
uni.setStorageSync('_config.signature', _config.signature);
//1、鉴权
window.dd.config({
agentId: _config.agentId,
corpId: _config.corpId, //必填，企业ID
timeStamp: _config.timeStamp, // 必填，生成签名的时间戳
nonceStr: _config.nonceStr, // 必填，生成签名的随机串
signature: _config.signature, // 必填，签名
jsApiList: jsapilist // 必填，需要使用的jsapi列表，注意：不要带dd。
});
window.dd.error(function(err) { //验证失败
console.log("进入到error中");
console.log('dd error: ' + JSON.stringify(err));
})
});
}
},
}
}
</script>
<style lang="scss">
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
min-height: 100%;
height: auto;
}
view {
font-size: 30rpx;
line-height: inherit;
}
.pt5 {
padding-top: 10rpx;
}
.pr5 {
padding-right: 10rpx;
}
.pb5 {
padding-bottom: 10rpx;
}
.mt5 {
margin-top: 10rpx;
}
.mr5 {
margin-right: 10rpx;
}
.mb5 {
margin-bottom: 10rpx;
}
.ml5 {
margin-left: 10rpx;
}
.mt10 {
margin-top: 20rpx;
}
.mr10 {
margin-right: 20rpx;
}
.mb10 {
margin-bottom: 20rpx;
}
.ml0 {
margin-left: 20rpx;
}
.mt20 {
margin-top: 40rpx;
}
.mr20 {
margin-right: 40rpx;
}
.mb20 {
margin-bottom: 40rpx;
}
.m20 {
margin-left: 40rpx;
}
.ui-all {
padding: 20rpx 40rpx;
.avatar {
width: 100%;
text-align: left;
padding: 20rpx 0;
border-bottom: solid 1rpx #f2f2f2;
position: relative;
.imgAvatar {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
.iavatar {
width: 100%;
height: 100%;
display: block;
}
}
text {
display: inline-block;
vertical-align: middle;
color: #8e8e93;
font-size: 28rpx;
margin-left: 40rpx;
}
&:after {
content: ' ';
width: 20rpx;
height: 20rpx;
border-top: solid 1rpx #030303;
border-right: solid 1rpx #030303;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
position: absolute;
top: 85rpx;
right: 0;
}
}
.ui-list {
width: 100%;
text-align: left;
padding: 20rpx 0;
border-bottom: solid 1rpx #f2f2f2;
position: relative;
text {
color: #4a4a4a;
font-size: 28rpx;
display: inline-block;
vertical-align: middle;
width: 150rpx;
}
uni-radio-group {
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
background: none;
margin: 0;
padding: 0;
}
input {
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
left: 150rpx;
width: calc(100% - 150rpx);
}
button {
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
background: none;
width: calc(100% - 150rpx);
margin: 0;
text-align: left;
padding: 0;
height: 30rpx;
line-height: 30rpx;
&::after {
display: none;
}
}
picker {
width: calc(100% - 150rpx);
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
position: absolute;
left: 150rpx;
top: 25rpx;
}
.continer {
width: calc(100% - 150rpx);
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
left: 150rpx;
}
textarea {
color: #030303;
font-size: 30rpx;
vertical-align: middle;
height: 150rpx;
width: 100%;
margin-top: 50rpx;
left: 150rpx;
}
}
.right:after {
content: ' ';
width: 20rpx;
height: 20rpx;
border-top: solid 1rpx #030303;
border-right: solid 1rpx #030303;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
position: absolute;
top: 30rpx;
right: 0;
}
.input-body {
width: 90%;
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
position: absolute;
top: 30rpx;
left: 150rpx;
}
.save {
background: #030303;
border: none;
color: #ffffff;
margin-top: 40rpx;
font-size: 28rpx;
}
}
</style>
2、login.vue页面
<template>
<view>
<u-loading-page loading-text="loading..." bg-color="#e8e8e8" loading-color="#000000"></u-loading-page>
</view>
</template>
<script>
import {
getSignatureInfo
} from '@/api/login';
export default {
data() {
return {
};
},
onLoad() {
// 设置全局鉴权的url，方便页面主动刷新导致的鉴权失败问题
uni.setStorageSync('permission_url', location.href);
// 免登
this.ddLogin();
},
methods: {
// 钉钉登录
ddLogin() {
let that = this;
// 获取后台鉴权信息
getSignatureInfo(location.href).then(res => {
const _config = res.data;
var endStamp=Date.now()+2*60*60*1000;
uni.setStorageSync('endStamp', endStamp);
uni.setStorageSync('_config.agentId', _config.agentId);
uni.setStorageSync('_config.corpId', _config.corpId);
uni.setStorageSync('_config.timeStamp', _config.timeStamp);
uni.setStorageSync('_config.nonceStr', _config.nonceStr);
uni.setStorageSync('_config.signature', _config.signature);
//console.log(res.data)
var jsapilist = [
'device.notification.alert', //警告框
'device.notification.confirm', //确认框
'biz.navigation.setTitle', //设置导航栏标题
'biz.navigation.quit', //关闭页面
'biz.util.openModal', //打开弹窗（模态窗）
'biz.contact.complexPicker', //选择人员
'device.geolocation.get', //获取当前地理位置信息
'biz.map.locate', //地图定位
'biz.map.search', //地图页面支持搜索
'biz.map.view' //展示位置
] //需要使用的jsapi列表
//1、鉴权
window.dd.config({
agentId: _config.agentId,
corpId: _config.corpId, //必填，企业ID
timeStamp: _config.timeStamp, // 必填，生成签名的时间戳
nonceStr: _config.nonceStr, // 必填，生成签名的随机串
signature: _config.signature, // 必填，签名
jsApiList: jsapilist // 必填，需要使用的jsapi列表，注意：不要带dd。
});
window.dd.error(function(err) { //验证失败
console.log("进入到error中");
console.log('dd error: ' + JSON.stringify(err));
})
// 免登
window.dd.runtime.permission.requestAuthCode({
corpId: _config.corpId,
onSuccess: function(result) {
// that.toast('登录中,请稍后...');
console.log(result.code);
that.$store.dispatch('DDLogin', result.code).then(() => {
that.$store.dispatch('GetInfo').then(res => {
uni.reLaunch({
url: '/pages/index/index'
});
});
})
.catch((res) => {
console.log(res)
that.toast('登录异常,请联系管理员排查系统账号和钉钉账号对应关系');
});
},
onFail: function(err) {
alert('err:')
alert(err)
}
});
});
},
}
};
</script>
<style lang="scss">
.eye {
position: absolute;
height: 50rpx;
width: 50rpx;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.register {
margin-top: 20rpx;
color: #69c8fa;
text-align: right;
}
.tishi {
font-size: 20rpx;
color: gray;
}
.login {
width: 200rpx;
color: white;
height: 75rpx;
font-size: 30rpx;
background-color: #69c8fa;
}
.codeImg {
height: 64rpx;
position: absolute;
right: 0;
top: 10rpx;
width: 200rpx;
}
</style>
1931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
