使用企业微信扫码登录流程、使用企业微信扫码登录获取code

浅浅的花香味﹌ 2023-07-11 05:45 49阅读 0赞

官方文档：[https://work.weixin.qq.com/api/doc/90000/90135/90988][https_work.weixin.qq.com_api_doc_90000_90135_90988]

其实看文档就可以明白啦。

两种方式：

1、构造独立窗口登录二维码

2、构造内嵌登录二维码

我使用的是 第二种方式：构造内嵌登录二维码

（1）引入js文件。( index.html 或者 .ejs入口文件    根据自己项目而定)

> <script src="http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js"></script>

（2）在需要登录二维码的页面，实例js对象

useEffect(() => {
        window.WwLogin({
          "id" : "js-layout-login-login-wechat-qrcode",  
          "appid" : appId,    // 企业微信的CorpID
          "agentid" : agentId,   // 授权方的网页应用ID
          "redirect_uri" :encodeURIComponent('url'),   // url与配置的要一致
          "state" : "",
          "href" : "",
        })
    }, [])
    
    
    <div id="js-layout-login-login-wechat-qrcode" className={styles.box}></div>

注：redirect\_uri配置不一致的话，会出现如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

（3）使用企业微信扫码授权。授权成功后，**会重定向到redirect\_uri，并且code会拼接在链接后面。**

[https_work.weixin.qq.com_api_doc_90000_90135_90988]: https://work.weixin.qq.com/api/doc/90000/90135/90988
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200304104002977.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70