这篇文章主要为大家展示了“uniapp如何实现钉钉扫码登录”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“uniapp如何实现钉钉扫码登录”这篇文章吧。1. 用H5调起钉钉扫码登录钉钉在网页端的扫
这篇文章主要为大家展示了“uniapp如何实现钉钉扫码登录”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“uniapp如何实现钉钉扫码登录”这篇文章吧。
钉钉在网页端的扫码登录可参考钉钉文档：扫码登录第三方网站 - 钉钉开放平台 (dingtalk.com)
// 钉钉扫码登录 dingLoginFn() { let dingData = { appid: OUT_LINK_CONFIG.dingAppid, state: "STATE", url: encodeURIComponent('登录后的回调地址：可以是你的H5的一个页面地址（href）') // 这个地址御用钉钉扫码确认后的路由重定向（会携带扫码获取的code值） }; let oauth = `https://oapi.dingtalk.com/connect/oauth3/sns_authorize?appid=${dingData.appid}&response_type=code&scope=snsapi_login&state=${dingData.state}&redirect_uri=${dingData.url}`; let Goto = encodeURIComponent(oauth); DDLogin({ id: "loginContainer", //这里需要你在自己的页面定义一个html标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span> goto: goto, style: "border:none;background-color:#FFFFFF;", width: "268" }); let handleMessage = (event) => { // 判断是否来自ddLogin扫码事件。 if (event.origin == "Https://login.dingtalk.com" && event.data) { console.log("loginTmpCode", event.data); window.location.href = `${oauth}&loginTmpCode=${event.data}`; // 获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了 } }; if (typeof window.addEventListener != "undefined") { window.addEventListener("message", handleMessage, false); } else if (typeof window.attachEvent != "undefined") { window.attachEvent("onmessage", handleMessage); } }因为在uniapp中如果两个地址一样会导致回传code到登录的过程再次展示一下二维码页面才跳转到登录成功界面。路由重定向页面（本文采用Vue构建），想要在H5中使用uni的API，需要在public/index.html中引入uni的jdk
<!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,minimum-scale=1,maximum-scale=1,user-Scalable=no" /> <!-- 引入钉钉扫码登录的JDK --> <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script> <title></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlwebpackPlugin.options.title %> doesn't work properly without javascript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> <!-- 引入uni API的JDK 注意：一定要在body后引入 在head中引入可能获取失败 --> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.WEBview.1.5.2.js"></script></html>重定向页面：
<template> <div></div></template><script>export default { name: "LoginCallback", mounted() { // 在mounted生命周期监听钉钉重定向后携带的参数并回传uniapp document.addEventListener("plusready", () => { this.$nextTick(() => { // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。如果不是一打开页面就调用 可以不用这个监听 document.addEventListener("UniAppJSBridgeReady", () => { // this.$toast("location.search:::", JSON.stringify(location.search)); if (location.search.includes("?code")) { console.log("getCode:::"); let code = location.search.split("?")[1].split("&")[0].split("=")[1]; // 这里获取code后通过uni API 跳转回uniapp的页面并携带参数（uniapp中在onLoad中获取） 也可以通过uniapp提供的 uni.postMessage({data: [code]}) 去传递（注意：通过postMessage传的参数在uniap中获取的data是一个数组） uni.webView.navigateTo({ url: `/pages/login/login_webview?code=$[code]` }); } }); }); }); }};</script><script> import { dingLogin } from '@/api/login' import { setToken } from "@/utils/auth" export default { name: "LoginWebview", data() { return { url: 'http://xxxxxxx/dd_login' // 这里的 url 就是步骤1中写的钉钉扫码网页地址 } }, onLoad(options) { // 这里是扫码后回传的参数code 用于登录 if (options.code) { this.login(options.code) } }, methods: { async login(code) { uni.showLoading() try { const res = await dingLogin(code) if (res.data.code === 200) { setToken(res.data.token) uni.reLaunch({ url: '/pages/home/index' }) } uni.hideLoading() } catch (e) { console.log('登录失败', e) uni.hideLoading() } } } }</script>好了，大功告成！！！
如果有需要从钉钉扫码的页面返回uniapp切换登录方式的操作，可以通过uni的API跳回uniapp
uni.webView.navigateTo({ url: "/pages/login/index"});以上是“uniapp如何实现钉钉扫码登录”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！
--结束END--
本文标题: uniapp如何实现钉钉扫码登录
本文链接: https://www.lsjlt.com/news/301817.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0