uniapp实现钉钉扫码登录示例代码
由于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" />
<!-- 引入钉钉扫码登录的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生命周期监听钉钉重定向后携带的参数并回传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({
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钉钉扫码登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
使用 UniApp 实现小程序的微信登录功能
1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录.则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey.OpenId 等信息[本应后台接口.但是此处使用js发送请求] 通过 openId 调用后台 Api 获取用户的信息 获取成功,则说明已经授权过了,直接登录成功 获取失败,则说明没有授权过,需要授权之后才能进行登录 用户点击页面
-
uniapp实现钉钉扫码登录示例代码
由于uniapp暂无钉钉授权登录所以本文将钉钉扫码登录作为网页嵌入uniapp,最终实现钉钉扫码登录app 1. 用H5调起钉钉扫码登录 钉钉在网页端的扫码登录可参考钉钉文档:扫码登录第三方网站 - 钉钉开放平台 (dingtalk.com) // 钉钉扫码登录 dingLoginFn() { let dingData = { appid: OUT_LINK_CONFIG.dingAppid, state: "STATE", url: encodeURIComponent('登录后的回
-
Android二维码的生成与扫码-zxing示例代码
由于GitHub上面的zxing功能太多,有的用不到,我就抽取了重要的出来使用,这个可以生成二维码,扫描二维码和相册中的二维码 Demo效果: 1.在project的build.gradle添加如下代码: allprojects { repositories { maven { url 'https://jitpack.io' } } } 2.在build.gradle添加依赖: dependencies { compile 'com.github.goodboy321:Scan-Zxing:1
-
SpringBoot实现扫码登录的示例代码
目录 一.首先咱们需要一张表 二.角色都有哪些 三.接口都需要哪些? 四.步骤 五.疯狂贴代码 SpringBoot中操作WebSocket 最近有个项目涉及到websocket实现扫码登录,看到一篇不错的技术文,分享一下. 一.首先咱们需要一张表 这表是干啥的呢?就是记录一下谁扫码了.谁登录了. User_Token表 字段如下: uuid : 用于确保唯一性 userId :谁登录的 loginTime :登录时间 createTime :创建时间 用于判断是否过期 state:是否二维码失
-
基于Java实现扫码登录的示例代码
目录 基本介绍 原理解析 1. 身份认证机制 2. 流程概述 代码实现 1. 环境准备 2. 主要依赖 3. 生成二维码 4. 扫描二维码 5. 确认登录 6. PC 端轮询 7. 拦截器配置 效果演示 1. 工具准备 2. 数据准备 3. 扫码登录流程展示 结语 基本介绍 相信大家对二维码都不陌生,生活中到处充斥着扫码登录的场景,如登录网页版微信.支付宝等.最近学习了一下扫码登录的原理,感觉蛮有趣的,于是自己实现了一个简易版扫码登录的 Demo,以此记录一下学习过程. 实际上是面试的时候被问到
-
python+selenium 实现扫码免密登录示例代码
目录 一.需求描述 二.首先扫码登录获取cookies保存到本地未后面免密登录做准备 三.初始化浏览器 四.获取本地保存的cookies实现登录 一.需求描述 web 自动化测试/python爬虫往往会遇到扫码登录的情况,不是所有的网站都支持用户密码登录,遇到这种扫码登录的情况会阻碍我们自动化测试/爬虫的进行,所有为了可以顺畅的进行我们的需求,在进行自动化或者爬虫前我们首先要解决扫码登录的问题,下面讲解如何实现扫码免密登录. 二.首先扫码登录获取cookies保存到本地未后面免密登录做准备 具体
-
Vue+abp微信扫码登录的实现代码示例
最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册微信开放平台账号# 在微信开放平台注册,注意是开放平台不是公众平台,这里需要300元,然后申请网站应用.审核通过后获取到AppID和AppSecret以及登记的网站url.只有此url下的地址微信扫码后才能回调. 具体申请条件见官方文档. 生成登录二维码# 在vue登录页面嵌入登录二维码,根据官方文
-
Vue PC端实现扫码登录功能示例代码
目录 需求描述 思路解析 前端功能实现 如何控制二维码的时效性? 前端如何获取服务器二维码的状态? 本篇文章给大家带来了关于Vue的相关知识,其中主要介绍了在PC端实现扫码的原理是什么?怎么生成二维码图片?怎么用Vue实现前端扫码登录?感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助. 需求描述 目前大多数PC端应用都有配套的移动端APP,如微信,淘宝等,通过使用手机APP上的扫一扫功能去扫页面二维码图片进行登录,使得用户登录操作更方便,安全,快捷. 思路解析 PC 扫码原理? 扫码登录功能涉
-
java实现微信扫码登录第三方网站功能（原理和代码）
目录 一.查看微信扫码登录官方文档 二.实现微信第三方登录流程: 三.代码实现: 为避免繁琐的注册登陆,很多平台和网站都会实现三方登陆的功能,增强用户的粘性.这篇文章主要介绍了java实现微信扫码登录第三方网站功能(原理和代码),避免做微信登录开发的朋友们少走弯路. 一.查看微信扫码登录官方文档 官方文档:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&
-
自定义PC微信扫码登录样式写法
PC微信扫码登录 近期做一个PC端微信扫码登录的需求,微信扫码有两种方式,一种是新开一个二维码页面,另一种是内嵌入产品网页.本次以内嵌二维码为例,具体怎样在页面中显示一个登陆二维码,文档说的很清楚,就不赘述了,文档地址:https://open.weixin.qq.com/cg... 解决自定义微信二维码样式问题 当一切准备妥当之后,网页上的二维码初始默认是这个样子. 特别大不说(默认二维码大小280x280),还有微信登录的title,下方也有扫码登录的提示. 幸运的是,微信留了一个api给我
-
基于 Swoole 的微信扫码登录功能实现代码
随着微信的普及,扫码登录方式越来越被现在的应用所使用.它因为不用去记住密码,只要有微信号即可方便快捷登录.微信的开放平台原生就有支持扫码登录的功能,不过大部分人还是在用公众平台,所以扫码登录只能自行实现.这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录.大体流程如下: 客户端打开登录界面,连接到 WebSocket 服务 WebScoket 服务生成带参数二维码返回给客户端 用户扫描展示的带参数二维码 微信服务器回调扫码事件并通知开发者服务