如何实现企业微信扫码登录?

news2024/11/22 11:47:24

开发内容:实现网页企业微信扫码登录

企业微信提供了OAuth的授权登录方式,可以让从企业微信终端打开的网页获取成员的身份信息,从而免去登录的环节。
企业应用中的URL链接(包括自定义菜单或者消息中的链接),均可通过OAuth2.0验证接口来获取成员的UserId身份信息。

  • ResourceOwner为资源所有者,即为用户
  • User-Agent为浏览器
  • AuthorizationServer为认证服务器,可以理解为用户资源托管方,比如企业微信服务端
  • Client为第三方服务

调用流程为:
A) 用户访问第三方服务,第三方服务通过构造OAuth2链接(参数包括当前第三方服务的身份ID,以及重定向URI),将用户引导到认证服务器的授权页
B) 用户选择是否同意授权
C) 若用户同意授权,则认证服务器将用户重定向到第一步指定的重定向URI,同时附上一个授权码。
D) 第三方服务收到授权码,带上授权码来源的重定向URI,向认证服务器申请凭证。
E) 认证服务器检查授权码和重定向URI的有效性,通过后颁发AccessToken(调用凭证)
企业微信登录里流程

实现开发

  1. 申请企业微信应用
    创建企业微信应用

  2. 引入 企业微信信息请求

<script src="https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript"></script>
  1. 代码实现二维码展示
<template>
  <div class="loginQR">
  	<div id="wx_qrcode"></div>
  </div>
</template>

<script>
import { Base64 } from 'js-base64';


window.WwLogin({
 id: 'wx_qrcode',
 appid: '应用Id',
 agentid: '应用序号',
 redirect_uri: '重定向地址',
 href: `data:text/css;base64,${Base64.encode(`.impowerBox .qrcode {width: 178px;}`)}`
})
</script>
  1. 功能介绍
    id: 企业微信展示二维码的id
    appid: 企业微信应用Id
    agentid: 企业微信应用序号
    redirect_uri: 重定向地址
    href: 样式修改传值

最终生成的效果

企业微信登录二维码
5. 账号id
在这里插入图片描述
6. 扫码后重定向跳转地址
重定向返回图片
在这里插入图片描述
然后将appid传给后端,后端返回Token完成跳转

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/622992.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新手git使用记录

文章目录 前言一、下载安装git二、使用git1.基本概念2.git初始化设置3.基本操作3.1、拉取远程仓库代码&#xff0c;修改后在提交3.2、新建分支&#xff0c;提交 总结 前言 几年前在学校还学了git怎么使用&#xff0c;毕业后公司用tfs&#xff0c;这东西真的拉&#xff0c;感觉…

将Apple Vision Pro和visionOS与计算机视觉结合使用

在2023年6月5日的WWDC大会上&#xff0c;苹果宣布推出多年来最大规模的硬件和软件组合产品。今年的“One more thing”&#xff08;“还有一件事”&#xff09;发布是苹果视觉专业版&#xff08;Apple Vision Pro&#xff09;&#xff0c;这是一款集成了苹果生态系统的新型空间…

mybatis多数据源的SQL兼容

背景 最近公司要求支持国产数据库达梦&#xff0c;但达梦与PostgreSQL的语法有一些差异&#xff0c;需要做一些兼容操作。 操作步骤 本文采用dynamic-datasource-spring-boot-starter框架处理多数据源&#xff0c;多数据源配置如下spring:datasource:dynamic:primary: dm #设…

华为OD机试真题B卷 Java 实现【进制转换】,附详细解题思路

一、题目描述 写出一个程序&#xff0c;接受一个十六进制的数&#xff0c;输出该数值的十进制表示。 二、输入描述 输入一个十六进制的数值字符串。 三、输出描述 输出该数值的十进制字符串。不同组的测试用例用\n隔开。 四、解题思路 读取输入的十六进制数值字符串&…

Selenium Python教程第2章

2. Selenium 编程入门 2.1 简单用例 如果你已经安装好了selenium&#xff0c;你可以把下面的python代码拷贝到你的编辑器中 from selenium import webdriver from selenium.webdriver.common.keys import Keysdriver webdriver.Firefox() driver.get("http://www.pytho…

AUTOSAR DoIP介绍

DoIP是什么 DoIP全称是Diagnostic Over IP,顾名思义就是基于IP的诊断,即下图所关联的ISO13400规范,也就是说如果大家想了解DoIP可以详细阅读ISO13400。 根据下图(来自于ISO14229-1),我们可以得到以下两点关系: UDS协议(规范是ISO14229)是统一诊断服务,作为应用层协议…

浏览器相关前端开发事项

文章目录 存储浏览器持久化存储&#xff08;F12->应用->存储&#xff09;浏览器缓存&#xff08;F12->内存&#xff09;浏览器存储管理单位&#xff08;域名/IP为单位&#xff09;区别localStorage VS 浏览器缓存localStorage VS cookies 存储 浏览器持久化存储&…

机器视觉陶瓷板表面划痕丝印检测方法

随着陶瓷制品在建筑、电子、医疗等领域的应用越来越广泛&#xff0c;对陶瓷制品的质量要求也越来越高。而陶瓷制品表面的划痕和丝印等缺陷会降低产品的美观度和质量&#xff0c;甚至会影响产品的安全性和使用寿命。传统的陶瓷板检测方式主要依赖人工目视检测&#xff0c;效率低…

FL Stuido21中文版水果编曲软件下载

FL stuido水果编曲软件做舞曲以及电子乐的利器&#xff0c;即便是在IPAD或者电脑端上操作&#xff0c;都非常的简便。界面逻辑非常友好&#xff0c;做rnb也是很可以的东西。可以作半成品的内容&#xff0c;声音采样方面还行&#xff0c;同样需要接口卡支持。钢琴卷帘操作还算便…

华为OD机试真题 Java 实现【字符串序列判定】【2022Q4 100分】,附详细解题思路

一、题目描述 输入两个字符串a和b&#xff0c;都只包含英文小写字母。a长度<100&#xff0c;b长度<500,000。 判定a是否是b的有效子串。 判定规则&#xff1a; a中的每个字符在b中都能找到&#xff08;可以不连续&#xff09;&#xff0c;且a在b中字符的前后顺序与a中…

FTL潜规则:调优,才是算法精华

前言 在存储领域中有一个FTL的概念&#xff0c;这是一种Flash的内存管理算法&#xff0c;属于各个厂商的核心机密&#xff0c;每个厂商的处理方式不同&#xff0c;有的处理简单&#xff0c;有的处理复杂。 FTL&#xff0c;即Flash Translations layer&#xff0c;也就是闪存转…

wayland浅析之EGL、Opengles、GBM

本文针对不同的compositor&#xff0c;浅析eglopenglesgbm搭配使用情况&#xff1b; 文章目录 1. 前言1.1 问题一&#xff1a;是不是调用eglSwapBuffers函数以后图像就直接显示到屏幕上了&#xff1f;1.2 问题二&#xff1a;EGL基本使用流程&#xff0c;EGL搭配GBM上屏显示基本…

JavaSE06_面向对象之封装

JavaSE-06 [面向对象OOP 封装] 第一章 面向对象思想 1.1 面向过程和面向对象 面向过程&#xff1a; 面向过程就是分析出解决问题所需要的步骤&#xff0c;然后用函数把这些步骤一步一步实现&#xff0c;使用的时候一个一个依次调用就可以了面向对象&#xff1a; 面向对象是…

Servlet、JSP

一、web服务器 1.1 常用服务器产品 Tomcat&#xff08;Apache开源&#xff0c;主流的web服务器之一&#xff0c;多用于javaweb项目开发&#xff09; jetty&#xff08;效率高于Tomcat&#xff09; WebLogic&#xff08;Oracl 收费&#xff09; WebSpera&#xff08;IBM&#xf…

cesium学习之旅1:cesium 基本介绍以及 cesium 的 hello world 程序

一&#xff1a;什么是Cesium Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。Cesium 使用WebGL 来进行硬件加速图形&#xff0c;使用时不需要任何插件支持&#xff0c;但是浏览器必须支持WebGL。Cesium是基于Apache2.0 许可的开源程序。它可以免费的用于…

代码随想录二刷 day16 | 二叉树之104.二叉树的最大深度 559.n叉树的最大深度 111.二叉树的最小深度 222.完全二叉树的节点个数

day16 104.二叉树的最大深度559.n叉树的最大深度111.二叉树的最小深度222.完全二叉树的节点个数 104.二叉树的最大深度 题目链接 解题思路&#xff1a;本题中根节点的高度就是最大深度 二叉树节点的深度&#xff1a; 指从根节点到该节点的最长简单路径边的条数或者节点数&…

TensorFlow项目练手——天气预测

项目介绍 通过以往的天气数据和实际天气温度&#xff0c;做一次回归预测&#xff0c;模型的输入是当前的所有特征值&#xff0c;而模型的输出是当天的实际天气温度 字段分析 目前已有的数据有348条svc数据&#xff0c;他们的字段分别代表 year&#xff1a;年month&#xff…

美客多卖家攻略:养号技巧分享

在跨境电商平台上成功运营并建立起具有竞争力的店铺并不容易。美客多作为一个颇具影响力的平台&#xff0c;更需要卖家们仔细研究和精心运营。在这里&#xff0c;我将分享一些秘诀&#xff0c;这些秘诀是在我自养号过程中总结出来的&#xff0c;有助于增加销量并提升店铺的排名…

高级数据分析师岗位的职责描述

高级数据分析师岗位的职责描述1 职责&#xff1a; 1.搭建和完善数据中心的数据指标体系与监控预测体系&#xff0c;并推动系统化实现; 2.负责对市场、行业、竞争对手、产品、客户、业务运营等方面数据的收集、分析&#xff0c;完成整理出分析报告、提供数据支持、分析建议; 3.对…

AI 写的高考作文,你打几分?

又是一年高考时&#xff0c;高考真的是人生的一件大事&#xff0c;毕业这么多年&#xff0c;每次看到高考相关信息&#xff0c;还是会不由自主的点进来&#xff0c;其中语文的作文是每年大伙津津乐道的话题。 树先生今天就收到了某条小秘书的【邀请函】&#xff0c;邀请参与「…