开发内容:实现网页企业微信扫码登录
企业微信提供了OAuth的授权登录方式,可以让从企业微信终端打开的网页获取成员的身份信息,从而免去登录的环节。
企业应用中的URL链接(包括自定义菜单或者消息中的链接),均可通过OAuth2.0验证接口来获取成员的UserId身份信息。
- ResourceOwner为资源所有者,即为用户
- User-Agent为浏览器
- AuthorizationServer为认证服务器,可以理解为用户资源托管方,比如企业微信服务端
- Client为第三方服务
调用流程为:
A) 用户访问第三方服务,第三方服务通过构造OAuth2链接(参数包括当前第三方服务的身份ID,以及重定向URI),将用户引导到认证服务器的授权页
B) 用户选择是否同意授权
C) 若用户同意授权,则认证服务器将用户重定向到第一步指定的重定向URI,同时附上一个授权码。
D) 第三方服务收到授权码,带上授权码来源的重定向URI,向认证服务器申请凭证。
E) 认证服务器检查授权码和重定向URI的有效性,通过后颁发AccessToken(调用凭证)
实现开发
-
申请企业微信应用
-
引入 企业微信信息请求
<script src="https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript"></script>
- 代码实现二维码展示
<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>
- 功能介绍
id: 企业微信展示二维码的id
appid: 企业微信应用Id
agentid: 企业微信应用序号
redirect_uri: 重定向地址
href: 样式修改传值
最终生成的效果
5. 账号id
6. 扫码后重定向跳转地址
然后将appid传给后端,后端返回Token完成跳转