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

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

一、扫码登录配置

官网文档： 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)