0
点赞
收藏
分享

微信扫一扫

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


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

企业微信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. 企业微信扫码登录接入流程

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

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

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

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

②前端->构造登录链接请求->后端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​​ 登录 企业管理端后台->进入需要开启的自建应用->点击 “企业微信授权登录”,进入如下页面

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


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


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


然后点击 “设置授权回调域”,输入回调域名,点击“保存”。

要求配置的授权回调域,必须与访问链接的域名完全一致

二、实战演练

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

2.1. 用户发起流程

①用户->访问->前端

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

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

2.2. 构造授权链接

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

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


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

2.3. 显示扫码二维码

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

2.4. 用户扫码

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

2.5. 用户确认登录

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

2.6. 回调前端携带code

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

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

2.7.携带code请求后端

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

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

2.8.接收code获取用户信息

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

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

2.9.获取用户id

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

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

2.10. 获取用户详情

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

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

2.11. 用户详情展示

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


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

{
"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​​

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

3.2. 前端源码

前端:​​https://gitee.com/gblfy/qywx-vuejs​​

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

ps://gitee.com/gblfy/qywx-vuejs)


举报

相关推荐

0 条评论