uniapp实现钉钉扫码登录_HBuilderX教程

导读：由于uniapp暂无钉钉授权登录所以本文将钉钉扫码登录作为网页嵌入uniapp，最终实现钉钉扫码登录app1. 用H5调起钉钉扫码登录钉钉在网页端的...

由于uniapp暂无钉钉授权登录所以本文将钉钉扫码登录作为网页嵌入uniapp，最终实现钉钉扫码登录app

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/oauth2/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);

      }

    }

2. 用于路由重定向的地址最好不要是调起钉钉二维码的网页地址（步骤1的地址），因为在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" />

    

    <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>

    

  </body>　　

  <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>

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

<template>

    <view>

        <web-view :src="url"></web-view>

    </view>

</template>

<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实现钉钉扫码登录

最新推荐

本周排行