溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

uniapp如何實(shí)現(xiàn)釘釘掃碼登錄

發(fā)布時(shí)間：2021-12-14 10:05:03 來(lái)源：億速云 閱讀：275 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了“uniapp如何實(shí)現(xiàn)釘釘掃碼登錄”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“uniapp如何實(shí)現(xiàn)釘釘掃碼登錄”這篇文章吧。

1. 用H5調(diào)起釘釘掃碼登錄

釘釘在網(wǎng)頁(yè)端的掃碼登錄可參考釘釘文檔：掃碼登錄第三方網(wǎng)站 - 釘釘開放平臺(tái) (dingtalk.com)

// 釘釘掃碼登錄
    dingLoginFn() {
      let dingData = {
        appid: OUT_LINK_CONFIG.dingAppid,
        state: "STATE",
        url: encodeURIComponent('登錄后的回調(diào)地址：可以是你的H5的一個(gè)頁(yè)面地址（href）') // 這個(gè)地址御用釘釘掃碼確認(rèn)后的路由重定向（會(huì)攜帶掃碼獲取的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", //這里需要你在自己的頁(yè)面定義一個(gè)HTML標(biāo)簽并設(shè)置id，例如<div id="login_container"></div>或<span id="login_container"></span>
        goto: goto,
        style: "border:none;background-color:#FFFFFF;",
        width: "268"
      });
      let handleMessage = (event) => {
        // 判斷是否來(lái)自ddLogin掃碼事件。
        if (event.origin == "https://login.dingtalk.com" && event.data) {
          console.log("loginTmpCode", event.data);
          window.location.href = `${oauth}&loginTmpCode=${event.data}`; // 獲取到loginTmpCode后就可以在這里構(gòu)造跳轉(zhuǎn)鏈接進(jìn)行跳轉(zhuǎn)了
        }
      };
      if (typeof window.addEventListener != "undefined") {
        window.addEventListener("message", handleMessage, false);
      } else if (typeof window.attachEvent != "undefined") {
        window.attachEvent("onmessage", handleMessage);
      }
    }

2. 用于路由重定向的地址最好不要是調(diào)起釘釘二維碼的網(wǎng)頁(yè)地址（步驟1的地址）

因?yàn)樵趗niapp中如果兩個(gè)地址一樣會(huì)導(dǎo)致回傳code到登錄的過(guò)程再次展示一下二維碼頁(yè)面才跳轉(zhuǎn)到登錄成功界面。路由重定向頁(yè)面（本文采用Vue構(gòu)建），想要在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>

重定向頁(yè)面：

<template>
  <div></div>
</template>
<script>
export default {
  name: "LoginCallback",
  mounted() {　　// 在mounted生命周期監(jiān)聽釘釘重定向后攜帶的參數(shù)并回傳uniapp
    document.addEventListener("plusready", () => {
      this.$nextTick(() => {
        // 待觸發(fā) `UniAppJSBridgeReady` 事件后，即可調(diào)用 uni 的 API。如果不是一打開頁(yè)面就調(diào)用 可以不用這個(gè)監(jiān)聽
        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后通過(guò)uni API 跳轉(zhuǎn)回uniapp的頁(yè)面并攜帶參數(shù)（uniapp中在onLoad中獲取） 也可以通過(guò)uniapp提供的 uni.postMessage({data: [code]}) 去傳遞（注意：通過(guò)postMessage傳的參數(shù)在uniap中獲取的data是一個(gè)數(shù)組）
            uni.webView.navigateTo({
              url: `/pages/login/login_webview?code=$[code]`
            });
          }
        });
      });
    });
  }
};
</script>

3. uniapp中可以使用webview去承載釘釘掃碼的網(wǎng)頁(yè)，并接收釘釘掃碼后獲取的code參數(shù)　

<script>
    import { dingLogin } from '@/api/login'
    import { setToken } from "@/utils/auth"
    export default {
        name: "LoginWebview",
        data() {
            return {
                url: 'http://xxxxxxx/dd_login' // 這里的 url 就是步驟1中寫的釘釘掃碼網(wǎng)頁(yè)地址
            }
        },
        onLoad(options) {　　　　　　　　　　　　　　// 這里是掃碼后回傳的參數(shù)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>

好了，大功告成?。?！

如果有需要從釘釘掃碼的頁(yè)面返回uniapp切換登錄方式的操作，可以通過(guò)uni的API跳回uniapp

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

以上是“uniapp如何實(shí)現(xiàn)釘釘掃碼登錄”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手