Uniapp implements DingTalk scan code login sample code
|
Since Uniapp does not have DingTalk authorization login, this article embeds DingTalk QR code login as a web page into Uniapp, and finally realizes DingTalk QR code login app 1. Use H5 to launch DingTalk and scan the QR code to log inFor more information about scanning code to log in to DingTalk on the web, please refer to the DingTalk document: Scan code to log in to third-party websites - DingTalk Open Platform (dingtalk.com)
// DingTalk scan code to log in dingLoginFn() {
let dingData = {
appid: OUT_LINK_CONFIG.dingAppid,
state: "STATE",
url: encodeURIComponent('Callback address after login: can be a page address of your H5 (href)') // This address is used for route redirection after confirming by scanning the code with DingTalk (it will carry the code value obtained by scanning the 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", //Here you need to define an HTML tag in your own page and set the id, such as <div id="login_container"></div> or <span id="login_container"></span>
goto: goto,
style: "border:none;background-color:#FFFFFF;",
width: "268"
});
let handleMessage = (event) => {
// Determine whether it is from the ddLogin code scanning event.
if (event.origin == "https://login.dingtalk.com" && event.data) {
console.log("loginTmpCode", event.data);
window.location.href = `${oauth}&loginTmpCode=${event.data}`; // After getting loginTmpCode, you can construct a jump link here to jump.}
};
if (typeof window.addEventListener != "undefined") {
window.addEventListener("message", handleMessage, false);
} else if (typeof window.attachEvent != "undefined") {
window.attachEvent("onmessage", handleMessage);
}
}2. The address used for routing redirection should not be the web address that calls the DingTalk QR code (the address in step 1)Because in uniapp, if the two addresses are the same, the code will be returned to the login process and the QR code page will be displayed again before jumping to the login success interface. Routing redirection page (this article is built with Vue). If you want to use uni's API in H5, you need to import uni's jdk in public/index.html
<!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" />
<!-- Introducing JDK for scanning code login for DingTalk -->
<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> <!-- Import the JDK of uni API Note: It must be imported after the body. Importing in the head may fail to obtain -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</html>Redirect page:
<template>
<div></div>
</template>
<script>
export default {
name: "LoginCallback",
mounted() { // In the mounted lifecycle, listen for the parameters carried after DingTalk redirection and return them to uniapp
document.addEventListener("plusready", () => {
this.$nextTick(() => {
// After the `UniAppJSBridgeReady` event is triggered, you can call the uni API. If you don't call it as soon as the page is opened, you don't need this listener 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]; // After getting the code here, jump back to the uniapp page through the uni API and carry the parameters (obtained in onLoad in uniapp) or pass it through uni.postMessage({data: [code]}) provided by uniapp (Note: the parameters passed through postMessage get the data in uniap as an array)
uni.webView.navigateTo({
url: `/pages/login/login_webview?code=$[code]`
});
}
});
});
});
}
};
</script>3. In uniapp, you can use webview to host the webpage for scanning the code on DingTalk and receive the code parameters obtained after scanning the code on DingTalk
<script>
import { dingLogin } from '@/api/login'
import { setToken } from "@/utils/auth"
export default {
name: "LoginWebview",
data() {
return {
url: 'http://xxxxxxx/dd_login' // The url here is the DingTalk QR code scanning webpage address written in step 1}
},
onLoad(options) { // This is the parameter code returned after scanning the code for login 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('Login failed', e)
uni.hideLoading()
}
}
}
}
</script>Okay, it’s done! ! ! If you need to return to uniapp from the DingTalk scan code page to switch login methods, you can jump back to uniapp through uni's API
uni.webView.navigateTo({
url: "/pages/login/index"
});This is the end of this article about how to implement DingTalk QR code scanning login on uniapp. For more information about how to implement DingTalk QR code scanning login on uniapp, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Measured image HTTP request
>>: Detailed explanation of the difference and usage of quotes and backticks in MySQL
Recommend
Floating menu, can achieve up and down scrolling effect
The code can be further streamlined, but due to t...
CSS3 changes the browser scroll bar style
Note: This method is only applicable to webkit-ba...
How to import Tomcat source code into idea
Table of contents 1. Download the tomcat code 2. ...
JavaScript counts the number of times a character appears
This article example shares the specific code of ...
Vue implements a simple shopping cart example
This article example shares the specific code of ...
The button has a gray border that is ugly. How to remove it?
I used the dialog in closure and drew a dialog wit...
Interpretation of syslogd and syslog.conf files under Linux
1: Introduction to syslog.conf For different type...
Some notes on modifying the innodb_data_file_path parameter of MySQL
Preface innodb_data_file_path is used to specify ...
How to understand JavaScript modularity
Table of contents 1. Browser support 2. export ex...
25 Ways and Tips to Increase Web Page Loading Speed
Introduction <br />Not everyone has access t...
Vue implements simple calculator function
This article example shares the specific code of ...
Analysis of the usage of Xmeter API interface testing tool
XMeter API provides a one-stop online interface t...
Problems encountered when installing mysql8.0.15 winx64 on Win10 and connecting to the server
1. Download, install and configure mysql-8.0.15 1...
Solution to the VMware virtual machine prompt that the exclusive lock of this configuration file failed
After VMware is abnormally shut down, it prompts ...
Ubuntu 19.04 installation tutorial (picture and text steps)
1. Preparation 1.1 Download and install VMware 15...