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

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

企业微信提供了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完成跳转

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值