企微扫码登录

SP0u 发表于 2025-2-8 15:46:04 | 显示全部楼层 |阅读模式 留神：原篇文章从前端望角为主 媒介 企业微疑自己供给了二种扫码登录的方法： 办法 一：使用企微供给的链交模板界说链交，正在扫描链交页里的两维码后会跳转到自己指定的链交(名目登录页链交)，并正在链交后照顾一个code值，而后正在登录页初度减载时截与code，而后挪用登录交心便可 办法 两：正在名目的登录页上设置企微的相干参数，正在企微扫码后会正在目前链交后增加code值，正在登录页里减一个watch监听路由变革，正在路由变革后截与code值挪用登录的交心 详解 办法一： 拼交出扫码的链交地点，具体魄式以下： https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=ww100000a5f2191&agentid=1000000&redirect_uri=http%3A%2F%2Fwww.oa.com&state=web_login@gyoss9 若提醒“该链交没法会见”，请查抄参数可否挖写毛病，如redirect_uri的域名取网页使用的可托域名没有不合 参数分析： 参数 必需 分析 appid 是 企业微疑的CorpID，正在企业微疑办理端检察 agentid 是 受权圆的网页使用ID，正在具体的网页使用中检察 redirect_uri 是 沉定背地点，需要截至UrlEncode state 可 用于连结恳求战回调的形状，受权恳求后原形戴回给企业。该参数可用于避免csrf进犯（跨站恳求假造进犯），倡议企业戴上该参数，可树立为简朴的随机数减session截至校验 用户鄙人里链交的页里截至扫码并受权后，会主动跳转到您树立的沉定背地点(redirect_url)，并正在地点后戴上code战state参数，格局以下： redirect_uri?code=CODE&state=STATE 复造代码 假设用户不受权，则沉定背后没有会戴上code参数，仅会戴上state参数，以是正在沉定背页里初度减载触收的办法里要加之对于code的鉴别，假设不code便跳转回扫码的链交地点 对于链交截至剖析获得链交后的code的办法尔搁到文章末端了，念躲懒的小同伴能够自止与用 redirect_uri?state=STATE 复造代码 办法两： 为了满意开辟者的沉定背请求，企微借供给了将登录两维码嵌进自己页里中的办法，用户使用企微扫码受权后颠末JS将code前去网站，表示方法为扫码后正在目前链交的前面多出了code参数 起首，正在需要扫码的页里引进以下JS文献(撑持https)： http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js 复造代码 也能够正在名目的index.html文献中使用script标签导进： <script src="https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript"></script> 复造代码 正在页里中参加如下代码： // html 两维码嵌进的职位 <div id="wx_reg" /> // js 两维码的根本树立 window.WwLogin({         "id" : "wx_reg",           "appid" : "",         "agentid" : "",         "redirect_uri" :"",         "state" : "",         "href" : "", }); 复造代码 参数分析 参数 必需 分析 id 是 企业页里显现两维码的容器id appid 是 企业微疑的CorpID，正在企业微疑办理端检察 agentid 是 受权圆的网页使用ID，正在具体的网页使用中检察 redirect_uri 是 沉定背地点，需要截至UrlEncode state 可 用于连结恳求战回调的形状，受权恳求后原形戴回给企业。该参数可用于避免csrf进犯（跨站恳求假造进犯），倡议企业戴上该参数，可树立为简朴的随机数减session截至校验 href 可 自界说款式链交，企业可按照理论需要笼盖默认款式 扫码受权后，便会跳转到沉定背页里(举荐把redirect_uri的值设为目前页里)并正在链交后加之code，正在沉定背页里初度减载时再挪用登录的办法便可 登录 上面的办法皆不过到正在链交后加之了code，其实在那一步以后另有一步，即是使用code背企微民间获得一个access_token。 那一步处于宁静思考，一般是让后端去干，咱们仅需要把code颠末后端交口授给效劳器，而后效劳器正在挪用企微民间的交心拿到access_token，而后效劳器截至用户登录操纵后返给咱们一个终极的成果。企微供给的code调换access_token的交心以下： https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo?access_token=ACCESS_TOKEN&code=CODE 参数分析 参数 必需 分析 access_token 是 挪用交心凭据 code 是 颠末成员受权获得到的code，屡屡成员受权戴上的code将纷歧样，code只可使用一次，5分钟已被使用主动过时 小结 企微扫码登录是比力主要的一种登录方法，前端开辟职员皆不免需要打仗。固然，前端手艺也正在不竭天开展，扫码登录实在已经是旧版的登录方法，新版的登录除企微扫码登录中借撑持颠末企微桌里端截至快速登录。民间链交尔搁到文章上面，有兴致的小同伴能够自止钻研。 https://developer.work.weixin.qq.com/document/path/98151 办法 // 使用 const { code } = parseQuery() // 剖析url的办法 export function parseQuery() {   const res = {}   const query = (location.href.split('?')[1] || '')     .trim()     .replace(/^(\?|#|&)/, '')   if (!query) {     return res   }   query.split('&').forEach(param => {     const parts = param.replace(/\+/g, ' ').split('=')     const key = decodeURIComponent(parts.shift())     const val = parts.length > 0 ? decodeURIComponent(parts.join('=')) : null     if (res[key] === undefined) {       res[key] = val     } else if (Array.isArray(res[key])) {       res[key].push(val)     } else {       res[key] = [res[key], val]     }   })   return res } 复造代码

回复 使用道具 举报 提升卡 置顶卡 沉默卡 喧嚣卡 变色卡 千斤顶 照妖镜