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参数
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<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实现钉钉扫码登录的更多相关文章
- 使用Django2.0.4集成钉钉第三方扫码登录
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_124 钉钉作为阿里旗下的一款免费移动通讯软件,受众群体越来越多,这里我们使用Django来集成一下钉钉的三方账号登录,首先注册钉钉 ...
- 钉钉授权第三方WEB网站扫码登录
一.阅读开发文档 首先阅读钉钉官方的开发文档,扫码登录其实用的是官方文档描述的第二种方式,即将钉钉登录二维码内嵌到自己页面中,用户使用钉钉扫码登录第三方网站,网站可以拿到钉钉的用户信息. 二.准备工作 ...
- 钉钉扫码登录web网站
钉钉扫码登录网站 前言 由于本公司前后台分离,这里主要讲述后台的实现逻辑与过程,前端相关的一略而过.前端我们采用的是把二维码内嵌到我们的网页中. 流程如下: 1.登录钉钉后台创建一个企业应用 2.根 ...
- （钉钉）第三方WEB网站扫码登录
年底在做钉钉和公司的知识库产品的对接,怎么使用钉钉api的如下: 第一步: 登录:https://oa.dingtalk.com/#/welcome 这点可以自己建立一个企业账号进行测试 点击工作台建 ...
- 【JavaWeb开发】初步实现网站应用钉钉扫码登录
http://blog.csdn.net/baofeidyz/article/details/59059379 版权声明:转载请注明我的个人微信平台 暴沸 目录(?)[+] 写在前面:如果你还不知道钉 ...
- RobotFramework:钉钉扫码登录UI自动化
背景: 遇到一个项目,使用的是钉钉扫码登录,一时间不知道该怎么下手了,还是先F12抓包看下都有什么数据传输吧. 分析: 先熟悉下钉钉扫码登录的逻辑,参考官文:https://open-doc.ding ...
- 网页接入dingding扫码登录
前言 有时候我们做了一些网页,希望只有某些人才能看的话,可以搞一个钉钉扫码登录,接入也比较简单,下面记录下接入的过程. 流程 我们先看看官方的文档:钉钉接入文档梳理一下官方的流程:1.先跳去一个扫码网 ...
- Web应用多账号系统设计及微信扫码登录实现
Web应用多账号系统设计及微信扫码登录实现 1 前言概述 公司对功能测试,性能测试,安全测试等等都做了比较好的自动化后,急需要一个MIS系统来统一管理这些结果及报表. 此MIS系统特点如下: 仅内 ...
- C#开发微信门户及应用(45)--微信扫码登录
在前面随笔<C#开发微信门户及应用(41)--基于微信开放平台的扫码登录处理>介绍了基于微信开放平台接口实现的微信扫码直接登录的过程.本篇介绍对扫码登录的一些改进和处理,以便更方便应用在实 ...
随机推荐
- Node http
要开发HTTP服务器程序,从头处理TCP连接,解析HTTP是不现实的.这些工作实际上已经由Node.js自带的http模块完成了.应用程序并不直接和HTTP协议打交道,而是操作http模块提供的req ...
- [bzoj1853]幸运数字
容易发现幸运数字只有1024个,暴力标记倍数还是会tle的 容斥,即从中任选i个的lcm,复杂度为$o(2^1024)$ 剪枝一:当答案超过1024就不用算了 剪枝二:当某个数是另一个数的倍数时就删掉 ...
- 手把手教你实现Android真机远程截屏
先看效果演示 接下来手把手教你实现这样的效果. minicap简介 minicap是一个可以远程获取android屏幕画面的开源库,它在低版本的Android系统上采用截屏的方式获取画面,在Andro ...
- *(volatile unsigned int *)的理解
1. 解释 前面是无符号整型unsigned int的指针, 后面加一个地址,就是无符号整型的地址,前面又一个星号就是这个地址的值. 2.volatile 同步 因为同一个东西可能在不同的存储介质中有 ...
- 从零开始，使用Dapr简化微服务
序言 现有的微服务模式需要再业务代码中集成大量基础设施模块,比如注册中心,服务发现,服务调用链路追踪,请求熔断,重试限流等等,使得系统过于臃肿重量级. Dapr作为新一代微服务模式,使用sidecar ...
- 【NOI 2002 银河英雄传说】【带权并查集】
题面 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的两大军事集*在巴米利恩星域爆发战争.泰山压顶集 ...
- LOJ 2555 & 洛谷 P4602 [CTSC2018]混合果汁（二分+主席树）
LOJ 题目链接 & 洛谷题目链接 题意:商店里有 \(n\) 杯果汁,第 \(i\) 杯果汁有美味度 \(d_i\),单价为 \(p_i\) 元/升.最多可以添加 \(l_i\) 升.有 \ ...
- Atcoder Grand Contest 015 F - Kenus the Ancient Greek（找性质+乱搞）
洛谷题面传送门 & Atcoder 题面传送门 一道难度 Au 的 AGC F,虽然看过题解之后感觉并不复杂,但放在现场确实挺有挑战性的. 首先第一问很简单,只要每次尽量让"辗转相除 ...
- CSP-S2021 挂分记
赛前 数了数,这是我第五次来南航,不知道以后还有机会了(2018 NOIP, 2019CSP, 2020CSP, 2020NOIP). 上午一觉睡到 10 点,学了一下感觉很有用的 BIT 倍增,顺手 ...
- 2021-2-3-利用anaconda+prefetch+aspera从NCBI的SRA数据库中下载原始测序数据
目录 1.Conda连接不上镜像源问题 2. aspera不能再独立使用 3.使用prefetch搭配aspera 4. prefetch下载方法 记录下下载过程,为自己和后人避坑. 1.Conda连 ...