由于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实现钉钉扫码登录的更多相关文章

  1. 使用Django2.0.4集成钉钉第三方扫码登录

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_124 钉钉作为阿里旗下的一款免费移动通讯软件,受众群体越来越多,这里我们使用Django来集成一下钉钉的三方账号登录,首先注册钉钉 ...

  2. 钉钉授权第三方WEB网站扫码登录

    一.阅读开发文档 首先阅读钉钉官方的开发文档,扫码登录其实用的是官方文档描述的第二种方式,即将钉钉登录二维码内嵌到自己页面中,用户使用钉钉扫码登录第三方网站,网站可以拿到钉钉的用户信息. 二.准备工作 ...

  3. 钉钉扫码登录web网站

    钉钉扫码登录网站 前言  由于本公司前后台分离,这里主要讲述后台的实现逻辑与过程,前端相关的一略而过.前端我们采用的是把二维码内嵌到我们的网页中. 流程如下: 1.登录钉钉后台创建一个企业应用 2.根 ...

  4. （钉钉）第三方WEB网站扫码登录

    年底在做钉钉和公司的知识库产品的对接,怎么使用钉钉api的如下: 第一步: 登录:https://oa.dingtalk.com/#/welcome 这点可以自己建立一个企业账号进行测试 点击工作台建 ...

  5. 【JavaWeb开发】初步实现网站应用钉钉扫码登录

    http://blog.csdn.net/baofeidyz/article/details/59059379 版权声明:转载请注明我的个人微信平台 暴沸 目录(?)[+] 写在前面:如果你还不知道钉 ...

  6. RobotFramework:钉钉扫码登录UI自动化

    背景: 遇到一个项目,使用的是钉钉扫码登录,一时间不知道该怎么下手了,还是先F12抓包看下都有什么数据传输吧. 分析: 先熟悉下钉钉扫码登录的逻辑,参考官文:https://open-doc.ding ...

  7. 网页接入dingding扫码登录

    前言 有时候我们做了一些网页,希望只有某些人才能看的话,可以搞一个钉钉扫码登录,接入也比较简单,下面记录下接入的过程. 流程 我们先看看官方的文档:钉钉接入文档梳理一下官方的流程:1.先跳去一个扫码网 ...

  8. Web应用多账号系统设计及微信扫码登录实现

    Web应用多账号系统设计及微信扫码登录实现 1   前言概述 公司对功能测试,性能测试,安全测试等等都做了比较好的自动化后,急需要一个MIS系统来统一管理这些结果及报表. 此MIS系统特点如下: 仅内 ...

  9. C#开发微信门户及应用(45)--微信扫码登录

    在前面随笔<C#开发微信门户及应用(41)--基于微信开放平台的扫码登录处理>介绍了基于微信开放平台接口实现的微信扫码直接登录的过程.本篇介绍对扫码登录的一些改进和处理,以便更方便应用在实 ...

随机推荐

  1. 美团饿了么领取外卖优惠券微信小程序的开发及上线_怎样点外卖省钱_外卖小程序的开发及上线

    都1202年了,估计没人不知道外卖了,那么就有两种人在思考两种问题: 普通人:怎么点外卖划算? 程序员:怎么通过外卖赚钱? 话不多说,为了让你们相信我有能力来讲这块内容,先给你们看一个很简单的小程序: ...

  2. [bzoj2789]Letters

    考虑A中第i次出现的j字符,最终位置一定是在B中第i次出现的j字符的位置,然后即求逆序对数量,cdq/线段树即可 1 #include<bits/stdc++.h> 2 using nam ...

  3. FastAPI（六十三）实战开发《在线课程学习系统》梳理系统需要接口

    针对上一篇FastAPI(六十二)实战开发<在线课程学习系统>需求分析需求的功能,我们对需要的接口进行梳理,大概的规划出来现有的接口,作为我们第一版的接口的设计出版,然后我们根据设计的接口 ...

  4. LifseaOS 悄然来袭，一款为云原生而生的 OS

    作者:黄韶宇.初扬 审核&校对:溪洋.海珠 编辑&排版:雯燕 LifseaOS 在刚刚过去的云栖大会上,一款新的 Linux Base 操作系统悄悄发布,它就是 LifseaOS(Li ...

  5. 『与善仁』Appium基础 — 10、Appium基本原理

    目录 1.Appium自动化测试架构 2.Appium架构图 3.Session说明 4.Desired Capabilities说明 5.Appium Server说明 6.Appium Clien ...

  6. 图片处理看这篇就完了「GitHub 热点速览 v.21.48」

    作者:HelloGitHub-小鱼干 图像处理一直是个实用且热门的研究领域,而本周的 GitHub 项目则多个图像项目上榜.先是勉强和图像处理搭边的渲染引擎 Filament,它能渲染出效果极佳的 3 ...

  7. FESTUNG模型介绍—1.对流方程求解

    FESTUNG模型介绍-1.对流方程求解 1. 控制方程 对流问题中,控制方程表达式为 \[\partial_t C + \partial_x (u^1 C) + \partial_y (u^2 C) ...

  8. 汽车C2M模式综述

  9. Python中类的相关介绍

    本文主要介绍python中类的概念性内容,如类的定义.说明及简单使用 1. 类的简单介绍 1 # -*- coding:utf-8 -*- 2 # Author:Wong Du 3 4 ''' 5 - ...

  10. 【模板】负环（SPFA/Bellman-Ford）/洛谷P3385

    题目链接 https://www.luogu.com.cn/problem/P3385 题目大意 给定一个 \(n\) 个点有向点权图,求是否存在从 \(1\) 点出发能到达的负环. 题目解析 \(S ...