企业微信三方开发(五)：扫码登录

电玩女神 2023-02-27 05:40 75阅读 0赞

**其他链接**

[初识微信开发][Link 1]

[企业微信三方开发：注册企业微信服务商][Link 2]

[企业微信三方开发(一)：回调验证及重要参数获取][Link 3]

[企业微信三方开发(二)：获取access\_token][access_token]

[企业微信三方开发(三)：网页授权登录][Link 4]

[企业微信三方开发(四)：发送消息][Link 5]

[企业微信三方开发(五)：扫码登录][Link 6]

### 这里写目录标题 ###

*  前言
 *  一、登录授权配置
 *  二、开始开发
 *  总结

# 前言 #

在[企业微信三方开发(三)：网页授权登录][Link 4]一节中讲了网页授权登录的过程。其中aouth2.0授权只能通过企业微信客户端，不能通过其它浏览器授权。可能是微信出于安全考虑，或者微信的授权需要浏览器用到一些特殊内置包。那么如果要在其它浏览器的网页进行授权就需要用到扫码授权登录！

# 一、登录授权配置 #

首先进入**服务商后台->应用管理->登录授权**配置上我们发起授权的域名（也就是我项目所在域名），以及回调域名  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70]

> 下面微信还很贴心的为我们准备了一个好看的登录按钮，复制到登录页

# 二、开始开发 #

[接口文档][Link 7]

与ouath授权很类似，需要访问一个构建链接，链接转向微信扫码授权页，参数带上服务商corpid，以及授权成功后的重定向链接，也就是我的首页地址：

<template>
    	<view style="width: 96%;margin: 0 auto;">
    		<view>
    	
    			 <view @click="doSSO"><img src="//wwcdn.weixin.qq.com/node/wwopen/wwopenmng/style/images/independent/brand/300x40_blue$cecbbc4e.png" srcset="//wwcdn.weixin.qq.com/node/wwopen/wwopenmng/style/images/independent/brand/300x40_blue_2x$c22687e4.png 2x" alt="企业微信登录"></view>
    		</view>
    	</view>
    </template>
    
    <script>
    
    	export default { 
    
    		data() { 
    			return { 
    				usercode: '',
    				password: '',
    				passwordHidden: true
    			}
    		},
    		onLoad:function(){ 
    
    		},
    		methods: { 
    			doSSO:function(){ 
    				let CorpID = "XXXXX"
    				let baseUrl = encodeURI("http://www.xxxx.com")
    				let URL = "https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?appid="+CorpID+"&redirect_uri="+baseUrl+"&state=web_login@gyoss9&usertype=admin"
    				window.location.href = URL
    			}
    			
    		}
    	}
    </script>
    
    <style>
    	.loginBtn{ 
    		color: #337bd4!important;
    		border:1rpx solid #337bd4!important;
    		font-size: 30rpx;
    		border-radius: 50rpx;
    	}
    </style>

发行并上传到服务器，访问一下：  
![在这里插入图片描述][20200717113412348.png]  
样式略丑，不管了，点击登录按钮！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 1]

> 进入了扫码界面就对了！

拿出手机扫码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 2]

> 成功跳转到重定向地址（我的首页）

![在这里插入图片描述][20200717113718642.png]

> 同时可以看到重定向地址携带上了auth\_code

拿到auth\_code就跟前面网页授权登录获取用户信息串起来了！

# 总结 #

自此企业微信的两种授权登录方式就完成。但在跟朋友讨论时仅仅就一个登录还是有许多疑问，比如单独的APP怎样引入企业微信登录？如果是做普通微信登录还有开放平台的加持。另外企业微信三方开放支不支持支付功能还需要验证。感觉一如微信深似海，哎~

[Link 1]: https://blog.csdn.net/YNEWA/article/details/106499467
[Link 2]: https://blog.csdn.net/YNEWA/article/details/106555178
[Link 3]: https://blog.csdn.net/YNEWA/article/details/106784137
[access_token]: https://blog.csdn.net/YNEWA/article/details/106885604
[Link 4]: https://blog.csdn.net/YNEWA/article/details/106949281
[Link 5]: https://blog.csdn.net/YNEWA/article/details/107340385
[Link 6]: https://blog.csdn.net/YNEWA/article/details/107381341
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70]: /images/20230209/59b7c1b019d14bf19a0f1d7fc39078a1.png
[Link 7]: https://work.weixin.qq.com/api/doc/90001/90143/91123
[20200717113412348.png]: /images/20230209/3f8bedc43cdf4f328052130369310f8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 1]: /images/20230209/e6ae2ff6b4ca458a8f9a0192efc51853.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 2]: /images/20230209/362112e1d20649e88324839b171d5090.png
[20200717113718642.png]: /images/20230209/c6c99299ee944d68ae5736d8093f51ae.png