uniapp如何实现钉钉扫码登录

这篇文章主要为大家展示了"uniapp如何实现钉钉扫码登录"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"uniapp如何实现钉钉扫码登录"这篇文章吧。

1. 用H5调起钉钉扫码登录

钉钉在网页端的扫码登录可参考钉钉文档：扫码登录第三方网站 - 钉钉开放平台 (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，例如
或        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);      }    }

2. 用于路由重定向的地址最好不要是调起钉钉二维码的网页地址（步骤1的地址）

因为在uniapp中如果两个地址一样会导致回传code到登录的过程再次展示一下二维码页面才跳转到登录成功界面。路由重定向页面（本文采用Vue构建），想要在H5中使用uni的API，需要在public/index.html中引入uni的jdk

重定向页面：

3. uniapp中可以使用webview去承载钉钉扫码的网页，并接收钉钉扫码后获取的code参数　

好了，大功告成！！！

如果有需要从钉钉扫码的页面返回uniapp切换登录方式的操作，可以通过uni的API跳回uniapp

uni.webView.navigateTo({    url: "/pages/login/index"});

以上是"uniapp如何实现钉钉扫码登录"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！