phpcms 网站 关闭,天津网站优化哪家好,深圳小区封闭最新通知,网站群建设意见征集可参考官网#xff1a;扫码登录第三方网站 - 钉钉开放平台
方式一#xff1a;网站将钉钉登录二维码内嵌到自己页面中
script srchttps://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js/script
在需要使用钉钉登录的地方实例以下JS对象
…可参考官网扫码登录第三方网站 - 钉钉开放平台
方式一网站将钉钉登录二维码内嵌到自己页面中
script srchttps://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js/script
在需要使用钉钉登录的地方实例以下JS对象
/*
* 解释一下goto参数参考以下例子
* var url encodeURIComponent(http://localhost.me/index.php?test1aa2);
* var goto encodeURIComponent(https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appidSuiteKeyresponse_typecodescopesnsapi_loginstateSTATEredirect_uriurl)
*/
var obj DDLogin({id:login_container,//这里需要你在自己的页面定义一个HTML标签并设置id例如div idlogin_container/div或span idlogin_container/spangoto: , //请参考注释里的方式style: border:none;background-color:#FFFFFF;,width : 365,height: 400});
参数说明 参数 说明 goto goto参数结构https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appidSuiteKeyresponse_typecodescopesnsapi_loginstateSTATEredirect_uriREDIRECT_URI并且要将goto参数urlencode编码。 style 渲染二维码的区域的样式可以自定义去除背景颜色和边框。 width 表示显示二维码的区域的宽。 width和height不代表二维码的大小二维码大小是固定的210px*210px。 height 表示显示二维码的区域的高。 width和height不代表二维码的大小二维码大小是固定的210px*210px。
加载钉钉API接口以后获取用户扫描之后将获取的loginTmpCode。通过一下方法获取
var handleMessage function (event) {var origin event.origin;console.log(origin, event.origin);if( origin https://login.dingtalk.com ) { //判断是否来自ddLogin扫码事件。var loginTmpCode event.data; //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了console.log(loginTmpCode, loginTmpCode);}
};
if (typeof window.addEventListener ! undefined) {window.addEventListener(message, handleMessage, false);
} else if (typeof window.attachEvent ! undefined) {window.attachEvent(onmessage, handleMessage);
}
在vue项目中可通过动态创建script标签加载js库。如
const loadRemoteScript (url) {return new Promise((resolve, reject) {const script document.createElement(script);script.src url;script.onload resolve;script.onerror reject;document.head.appendChild(script);});
}const loadRemoteimg () {loadRemoteScript(https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js)// loadRemoteScript(https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js).then(() {console.log(登录);ddLoginInitinfo()}).catch(() {console.log(外部js加载异常)});
}const ddLoginInitinfo () {const url encodeURIComponent(redirect_uri地址);// console.log(8888, https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid${state.baseConfig.app_key}response_typecodescopesnsapi_loginstateSTATEredirect_uri${url});window.DDLogin({id: ding-login, // 装钉钉二维码的盒子goto: encodeURIComponent(https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appidappkey值response_typecodescopesnsapi_loginstateSTATEredirect_uri${url}),style: border:none;background-color:#FFFFFF;padding-bottom: 24px,width: 250,height: 300,}, )var handleMessage function (event) {var origin event.origin;console.log(origin, event.origin);if( origin https://login.dingtalk.com ) { //判断是否来自ddLogin扫码事件。var loginTmpCode event.data;fetch(https://oapi.dingtalk.com/connect/oauth2/sns_authorize?response_typecodescopesnsapi_loginstateSTATEredirect_uriREDIRECT_URIloginTmpCodeloginTmpCode, {method: GET, // 默认就是GET所以这一行可以省略headers: {Content-Type: application/json,},}).then(response response.json()) // 将响应解析为JSON.then(res {console.log(5555, res)// 登录成功操作}).catch((error) {console.log(Error:, error);});//获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了console.log(loginTmpCode, loginTmpCode);}};if (typeof window.addEventListener ! undefined) {window.addEventListener(message, handleMessage, false);} else if (typeof window.attachEvent ! undefined) {window.attachEvent(onmessage, handleMessage);}
}
方式二使用钉钉提供的扫码登录页
// 相对上面一种方式 更换引入的js库
// https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.jsconst loadRemoteimg () {loadRemoteScript(https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js).then(() {console.log(登录);ddLoginInitinfo()}).catch(() {console.log(外部js加载异常)});
}const ddLoginInitinfo () {window.DTFrameLogin({id: ding-login, // 装钉钉二维码的盒子width: 250,height: 270,},{redirect_uri: encodeURIComponent(redirect_uri地址),client_id: app_key地址,scope: openid,response_type: code,prompt: consent,state: ddd,},(loginResult) {console.log(loginResult, loginResult);const { redirectUrl, authCode, state } loginResult;baseService.get(接口地址).then((res) {console.log(测试接口, res);});if (res.code 0) {//成功反馈}},(errorMsg) {console.log(errorMsg : errorMsg);})
