企业微信H5_身份验证,PC网站企业微信扫码授权登录

文章目录

一、扫码登录配置
- 1. 企业微信扫码登录接入流程
- 2. 企业微信扫码登录接入流程拆解
- 3. 开启网页授权登录
二、实战演练
- 2.1. 用户发起流程
- 2.2. 构造授权链接
- 2.3. 显示扫码二维码
- 2.4. 用户扫码
- 2.5. 用户确认登录
- 2.6. 回调前端携带code
- 2.7.携带code请求后端
- 2.8.接收code获取用户信息
- 2.9.获取用户id
- 2.10. 获取用户详情
- 2.11. 用户详情展示
三、源码分享
- 3.1. 后端源码
- 3.2. 前端源码

一、扫码登录配置

官网文档： https://developer.work.weixin.qq.com/document/path/91025

1. 企业微信扫码登录接入流程

2. 企业微信扫码登录接入流程拆解

步骤如下->
①用户->访问->前端

②前端->构造登录链接请求->后端API获取企业微信扫码登录链接

③后端API->返回生成REDIRECT_URI及app_id等信息的企业微信oauth授权链接->前端重定向->企业微信网站展示扫描二维码

④用户->使用微信扫码并确认授权->企业微信网站

⑤企业微信网站->返回用户登录成功->用户

⑤企业微信网站->携带code回调->前端

⑥前端->携带code请求后端API->请求

⑦后端API->请求企业微信API->获取用户简要信息->后端API

⑧后端API->携带userid请求企业微信API->获取用户详细信息->后端API

⑨后端API->携带详细信息响应->前端

3. 开启网页授权登录

企业微信管控台配置
企业微信管控台：https://work.weixin.qq.com/wework_admin/frame#contacts
登录企业管理端后台->进入需要开启的自建应用->点击 “企业微信授权登录”，进入如下页面

然后点击 “设置授权回调域”，输入回调域名，点击“保存”。
要求配置的授权回调域，必须与访问链接的域名完全一致

二、实战演练

真实场景，应该是用户点击某个链接或者按钮触发扫码流程
官网文档： https://developer.work.weixin.qq.com/document/path/91025

2.1. 用户发起流程

①用户->访问->前端
②前端->构造登录链接请求->后端API获取企业微信扫码登录链接

2.2. 构造授权链接

③后端API->返回生成REDIRECT_URI及app_id等信息的企业微信oauth授权链接->前端重定向->企业微信网站展示扫描二维码

2.3. 显示扫码二维码

④用户->使用微信扫码并确认授权->企业微信网站

2.4. 用户扫码

⑤企业微信网站->返回用户登录成功->用户

2.5. 用户确认登录

2.6. 回调前端携带code

⑤企业微信网站->携带code回调->前端

2.7.携带code请求后端

⑥前端->携带code请求后端API->请求

2.8.接收code获取用户信息

⑦后端API->请求企业微信API->获取用户简要信息->后端API

2.9.获取用户id

⑧后端API->携带userid请求企业微信API->获取用户详细信息->后端API

2.10. 获取用户详情

⑨后端API->携带详细信息响应->前端

2.11. 用户详情展示

{"errcode": 0,"gender": "1","is_leader_in_dept": [0],"direct_leader": [],"userid": "ZeXin","thumb_avatar": "http://wx.qlogo.cn/mmhead/Q3auHgzwzM4de1RtaqgB6CTZ1mOMTFK9JH8brF8FZlqJP20rcuyTFA/132","enable": 1,"qr_code": "https://open.work.weixin.qq.com/wwopen/userQRCode?vcode=vce2609ebe698837fd","alias": "泽昕","department": [1],"biz_mail": "zexin@zxkjgfyxgs10.wecom.work","email": "gblfy002@163.com","order": [0],"isleader": 0,"address": "北京市通州区华馨园6楼号","mobile": "13396492261","errmsg": "ok","telephone": "88888888","avatar": "http://wx.qlogo.cn/mmhead/Q3auHgzwzM4de1RtaqgB6CTZ1mOMTFK9JH8brF8FZlqJP20rcuyTFA/0","hide_mobile": 0,"main_department": 1,"token": "tobdeveyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0b2JkZXYiLCJ1c2VyX2lkIjoiWmVYaW4iLCJ1c2VyX25hbWUiOiLms73mmJUiLCJ1c2VyX3R5cGUiOjAsImlhdCI6MTY0NTk1MDkwMiwiZXhwIjoxNjQ2NTU1NzAyfQ.aaIP3AOEA3GyeZwROVfVVjPRPD77NC_FtcbTj8riZTA","name": "泽昕","extattr": {"attrs": []},"position": "项目经理","external_profile": {"external_attr": [],"external_corp_name": ""},"status": 1
}

三、源码分享

3.1. 后端源码

后端：https://gitee.com/gblfy/qywx-inner-java

3.2. 前端源码

前端：https://gitee.com/gblfy/qywx-vuejs
ps://gitee.com/gblfy/qywx-vuejs)