vue钉钉授权第三方网页登录,扫码登录,vue hash模式下回调地址错误踩坑
vue接入钉钉登录及遇到的问题以上就是vue钉钉登录的内容,主要就是vue hash模式下的坑,导致回调地址错误。
·
前言
vue接入钉钉登录及遇到的问题
一、引入钉钉扫码登录JSSDK
在index.html中引入
<script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>
二、使用步骤
1.通过打开授权页面的方式
钉钉的配置使用后端配置好的,通过接口返回,参数主要是重定向的url地址(需要encode),和client_id。
代码如下:
// 跳转链接钉钉操作
ddHrefLogin() {
const { agentId, url } = this.ddConfig;
const cloneUrl = encodeURIComponent(url);
const hrefUrl = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${cloneUrl}&response_type=code&client_id=${agentId}&scope=openid&state=dddd&prompt=consent`;
window.open(hrefUrl, '_self');
},
扫码完成之后,页面会重定向到配置的地址上,附带authCode就是需要这个参数
在created生命周期中使用自己项目的登录接口
// 获取到钉钉返回的code就请求登录接口
if (this.$route.query.authCode) {
this.handleCodeLogin(this.$route.query.authCode);
}
2.通过扫描二维码的方式登录
代码如下:
ddLoginInit() {
const _this = this;
window.DTFrameLogin(
{
id: "qr-code-scan", // 装钉钉二维码的盒子
width: 300,
height: 300,
},
{
redirect_uri: encodeURIComponent(_this.ddConfig.url),
client_id: _this.ddConfig.agentId,
scope: "openid",
response_type: "code",
prompt: "consent",
state: "ddd",
},
(loginResult) => {
const { redirectUrl, authCode, state } = loginResult;
console.log("loginResult", loginResult);
console.log("_this.ddConfig", _this.ddConfig);
// 这里可以直接进行重定向
window.location.href = redirectUrl;
// 也可以在不跳转页面的情况下,使用code进行授权
console.log(authCode);
},
(errorMsg) => {
// 这里一般需要展示登录失败的具体原因
alert(`Login Error: ${errorMsg}`);
console.log("_this.ddConfig", _this.ddConfig);
}
);
},
取到authCode之后做自己的操作
三、踩坑
vue的hash模式,钉钉重定向回来的地址有误,路径错误无法获取到$route.query.authCode
期望得到的回调地址:
https://xxxx/#/login?authCode=faf0517xxxxxxxxxxxxxxx96373&state=dddd
实际在hash模式下得到的回调地址:
https://xxxx/?authCode=faf0517xxxxxxxxxxxxxxx96373&state=dddd#/login
四、解决方法
重新组装回调之后的路径
created() {
//code是登录所需最终参数
let url = new URL(window.document.URL); // 获取路径
const code = this.$utils.string.getUrlKeyVal("authCode"); // 通过路径获取authCode
if (url.search && code) { // 钉钉重定向地址错误 重新组装路径
window.open(`${url.origin}${url.hash}&authCode=${code}`, '_self')
}
// 获取到钉钉返回的code就请求登录接口
if (this.$route.query.authCode) {
this.handleCodeLogin(this.$route.query.authCode);
}
},
获取路径中对应key的值方法
const getUrlKeyVal = (key) => {
var value = "";
///获取当前页面的URL
var sURL = window.document.URL;
///URL中是否包含查询字符串
if (sURL.indexOf("?") > 0) {
//分解URL,第二的元素为完整的查询字符串
//即arrayParams[1]的值为【id=1&action=2】
var arrayParams = sURL.split("?");
//分解查询字符串
//arrayURLParams[0]的值为【id=1 】
//arrayURLParams[2]的值为【action=add】
var arrayURLParams = arrayParams[1].split("&");
//遍历分解后的键值对
for (var i = 0; i < arrayURLParams.length; i++) {
//分解一个键值对
var sParam = arrayURLParams[i].split("=");
if (sParam[0] == key && sParam[1] != "") {
//找到匹配的的键,且值不为空
value = sParam[1];
break;
}
}
}
return value;
},
总结
以上就是vue钉钉登录的内容,主要就是vue hash模式下的坑,导致回调地址错误。
更多推荐
所有评论(0)