uniapp實現(xiàn)釘釘掃碼登錄示例代碼
更新時間：2021年12月14日 08:34:16 作者：fanmengfei
由于uniapp暫無釘釘授權(quán)登錄所以本文將釘釘掃碼登錄作為網(wǎng)頁嵌入uniapp，最終實現(xiàn)釘釘掃碼登錄app，本文通過實例代碼給大家介紹uniapp釘釘掃碼登錄功能，感興趣的朋友一起看看吧
由于uniapp暫無釘釘授權(quán)登錄所以本文將釘釘掃碼登錄作為網(wǎng)頁嵌入uniapp，最終實現(xiàn)釘釘掃碼登錄app
1. 用H5調(diào)起釘釘掃碼登錄
釘釘在網(wǎng)頁端的掃碼登錄可參考釘釘文檔：掃碼登錄第三方網(wǎng)站 - 釘釘開放平臺 (dingtalk.com)
// 釘釘掃碼登錄
dingLoginFn() {
let dingData = {
appid: OUT_LINK_CONFIG.dingAppid,
state: "STATE",
url: encodeURIComponent('登錄后的回調(diào)地址：可以是你的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標(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) => {
// 判斷是否來自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)鏈接進行跳轉(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)頁地址（步驟1的地址）
因為在uniapp中如果兩個地址一樣會導(dǎo)致回傳code到登錄的過程再次展示一下二維碼頁面才跳轉(zhuǎn)到登錄成功界面。路由重定向頁面（本文采用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>
重定向頁面：
<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。如果不是一打開頁面就調(diào)用 可以不用這個監(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后通過uni API 跳轉(zhuǎn)回uniapp的頁面并攜帶參數(shù)（uniapp中在onLoad中獲?。?也可以通過uniapp提供的 uni.postMessage({data: [code]}) 去傳遞（注意：通過postMessage傳的參數(shù)在uniap中獲取的data是一個數(shù)組）
uni.webView.navigateTo({
url: `/pages/login/login_webview?code=$[code]`
});
}
});
});
});
}
};
</script>
3. uniapp中可以使用webview去承載釘釘掃碼的網(wǎng)頁，并接收釘釘掃碼后獲取的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)頁地址
}
},
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>
好了，大功告成?。?！
如果有需要從釘釘掃碼的頁面返回uniapp切換登錄方式的操作，可以通過uni的API跳回uniapp
uni.webView.navigateTo({
url: "/pages/login/index"
});
到此這篇關(guān)于uniapp實現(xiàn)釘釘掃碼登錄的文章就介紹到這了,更多相關(guān)uniapp釘釘掃碼登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
某些情況下我們需要獲取中文字符串的實際長度，下面有個示例，大家可以參考下2014-06-06
JavaScript代碼實現(xiàn)左右上下自動晃動自動移動
最近幾天做了一個項目，原來是用css3動畫做的，由于不兼容IE，改成用js做了，特此分享給大家，供大家參考2016-04-04
這篇文章主要為大家詳細介紹了javascript創(chuàng)建對象的幾種不同方法2016-03-03
requirejs是一個JavaScript文件和模塊加載器。requireJS允許你把你的javascript代碼獨立成文件和模塊，同時管理每個模塊間的依賴關(guān)系。本文主要對require.js的使用與工作原理進行系統(tǒng)介紹。需要的朋友來看下吧2016-12-12
本文主要介紹JavaScript 繼承的知識，這里整理了詳細的資料及簡單示例代碼，幫助大家學(xué)習(xí)參考，有興趣的小伙伴可以參考下2016-09-09
JS中關(guān)于事件處理函數(shù)名后面是否帶括號的問題
JS中的事件處理（事件綁定）就是讓某種或某些事件觸發(fā)某些活動。有兩種常見的形式，分別是DOM Level 0 和DOM Level 2。今天總結(jié)一個關(guān)于事件處理程序的小細節(jié)。感興趣的朋友一起學(xué)習(xí)吧2016-11-11
這篇文章主要為大家詳細介紹了微信小程序彩票號碼生成器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JS事件監(jiān)聽與事件委托舉例詳解(前端小白必學(xué))
在JavaScript的學(xué)習(xí)中我們經(jīng)常會遇到JavaScript的事件機制,例如,事件綁定、事件監(jiān)聽、事件委托(事件代理)等,下面這篇文章主要給大家介紹了關(guān)于JS事件監(jiān)聽與事件委托的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了JS實現(xiàn)同步文本框內(nèi)容的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)錄音上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11