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

其他链接

初识微信开发

企业微信三方开发：注册企业微信服务商

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

企业微信三方开发(二)：获取access_token

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

企业微信三方开发(四)：发送消息

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

前言

在企业微信三方开发(三)：网页授权登录一节中讲了网页授权登录的过程。其中aouth2.0授权只能通过企业微信客户端，不能通过其它浏览器授权。那么如果要在其它浏览器的网页进行授权就需要用到扫码授权登录！

一、登录授权配置

首先进入服务商后台->应用管理->登录授权配置上我们发起授权的域名（也就是我项目所在域名），以及回调域名

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

二、开始开发

接口文档

与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>

发行并上传到服务器，访问一下：

样式略丑，不管了，点击登录按钮！

进入了扫码界面就对了！

拿出手机扫码：

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

同时可以看到重定向地址携带上了auth_code

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

总结

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