企業微信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)

總結

以上是生活随笔為你收集整理的企业微信H5_身份验证,PC网站企业微信扫码授权登录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。