uniapp實現釘釘掃碼登入示例程式碼
阿新 • • 發佈：2021-12-15
由於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_a
2. 用於路由重定向的地址最好不要是調起釘釘二維碼的網頁地址（步驟1的地址）
因為在uniapp中如果兩個地址一樣會導致回傳code到登入的過程再次展示一下二維碼頁面才跳轉到登入成功介面。路由重定向頁面（本文采用構建），想要在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."></script>
<title></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without 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/script" 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引數
<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({
SNCxhpIlDc 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實現釘釘掃碼登入的文章就介紹到這了,更多相關uniapp釘釘掃碼登入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！