企业微信扫码登录教程（浏览器登录）
本帖最后由 phoben 于 2021-3-6 21:45 编辑最近论坛里发现好几个人在问企业微信如何在浏览器端扫码登录，如何实现。刚好本人也在研究将自己的应用对接企业微信，也涉及到解决这个问题，所以经过日日夜夜在论坛里查找资料，一共花了3天完成，看了3个小时的C#基础入门教程，然后研究了一晚上的DEMO，经过反复测试调试，现在终于大功告成，下一步准备开始对接企业微信众多接口到应用里！
因为没有现成的API或者插件来帮助我们实现所以我把大概思路和部分核心代码贴出来，让大家参考相信我一个没有代码基础的小白能做到，大家一样能做到！
第一种登录方式：构建链接跳转扫码
第二种登录方式：不跳转到微信网址，直接本页JS获取二维码，跳转
显然采取第二种更漂亮，用户体验也更好！
上方的流程图，大家一定要看懂，代码只是工具这就是扫码登录的核心原理如果一句话概括，怎么登录的，那就是
构建链接、拿到CODE、换取ID、单点登录
目录
[*]1楼：前端页面构建+代码
[*]2楼：后端API代码解析
[*]3楼：单点登录解析
————————————————————————————————————
兼职活字格开发，欢迎各位大佬联系！ VX:13972707111
本帖最后由 phoben 于 2020-8-3 13:57 编辑
觉得我的分享还可以的话麻烦给我投一票 支持我的处女作（微信打开或扫一扫）
https://gcdn.grapecity.com.cn/data/attachment/forum/202008/03/115218yqz49csiqglz4p9o.png
第一步
首先在应用原有的基础上增加一个空白逻辑页面
这个页面只为处理单点登录业务，常规登录是用不到这个页面的。
首页微信扫码的链接做常规的命令跳转就可以
第二步
在逻辑空白页放置JS代码，根据需要可以修改
//构建一个获取地址栏URL后CODE代码的函数
function GetRequest() {
var url = location.search
//获取url中"?"符后的字串
if (url.indexOf('?') != -1) {
var str = url.substr(1)
strs = str.split('&')
for (var i = 0; i < strs.length; i++) {
//如果发现CODE字段
if (strs.split('=') == 'code') {
code = strs.split('=')
return code
}
}
}
return ''
}
//调用函数获取CODE
var code = GetRequest()
//如果获取到的CODE不为空
if (code != '') {
//构建POST请求地址，根据自己API地址修改
var url = Forguncy.ForguncyData.ForguncyRoot + 'customapi/wechatapi/wxlogin'
//创建一个数据包
var data = {}
data['code'] = code
data['url'] = 'https://你的应用地址'
//发起POST请求，将URL和数据包一同提交过去
$.post(url, data, function (result) {
console.log(result)
//如果返回的是HTTP开头的网址，说明单点登录请求成功
if (result.indexOf('http') == 0) {
//直接跳转返回带TOKEN的地址就可以成功登录
window.location.href = result
} else {
//如果返回的不是地址，说明有错误，直接打印错误，并跳转首页
console.log(result)
window.location.href = 'https://你的应用地址'
}
})
}else{
//如果获取不到CODE，直接跳转首页
alert("没有获取到微信CODE")
window.location.href = 'https://你的应用地址'
}
前端准备工作完毕
在逻辑空白页面，页面加载命令里执行上方JS，前端的构建就完成了，非常简单
本帖最后由 phoben 于 2020-8-3 10:39 编辑
第三步
在服务端写好接口API
后端代码比较复杂，还在整理，我是根据公司大佬Eric.Liang 提供的DEMO和教程进行修改的，大家可以先研究！
微信公众号集成（扫码定位接口实现）
首先看一眼API的构成，其他折叠的大家先不用管，先看看标识的部分就可以。
再看代码
微信登录成功的核心逻辑，就是建立一个GET请求，客户端将咱们之前说到的CODE提交过过来以后，服务端背后有一套动作，就是先取access_token,然后拿CODE去换USERID，怎么换？
看官方文档：
请求方式：GET（HTTPS）
请求地址：https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo?access_token=ACCESS_TOKEN&code=CODE
按照这个格式提交GET，就可以获得扫码人的用户名(USERID），这个用户名和系统是一致的。
得到了USERID，我们就要让它免密码登录，这时候又要向活字格服务器，发送一次单点登录授权请求了
单点登录代码如下：
解释一下，就是建立一个专门的方法，用来获取活字格单点登录TOKEN，参数就是给我用户名，单点登录密码就放在程序内部就行。
方法得到用户名，会和密码打包在一起，提交单点登录请求，通过后，服务器就返回一个TOKEN，这时候拼一个完整带TOKEN的网址返回就行。
到这里基本就结束了,剩下的就是上面JS中提到的，跳转返回的网址就行了！
本帖最后由 phoben 于 2020-8-3 13:56 编辑
3楼：单点登录代码解析（占位）
protected string GetTokenUrl(string baseUrl, string userid){var userName = userid; //微信解析好了用户名,就扔过来var password = "********"; // 这个密码是单点登录密码//有了用户名和单点密码，剩下的就是POST一下就完事儿!HttpWebRequest rq = HttpWebRequest.Create(baseUrl + "/SSO/GetUserToken") as HttpWebRequest;rq.Method = WebRequestMethods.Http.Post;rq.Accept = "application/json";rq.ContentType = "application/json";var loginStr = "{userName:\"" + userName + "\", password:\"" + password + "\"}";var data = Encoding.UTF8.GetBytes(loginStr);using (Stream stream = rq.GetRequestStream()){stream.Write(data, 0, data.Length);}var response = rq.GetResponse();//如果提交的数据没有错误,服务器就会返回一个带token的网址,用户端直接跳转,就可以了,无需密码!return new StreamReader(response.GetResponseStream()).ReadToEnd();
先来占坑:loveliness:膜拜~~~ 接着的快点来，板凳坐很久了~~~
6666 这功能挺实用的 厉害厉害！:hjyzw: phoben 发表于 2020-7-25 23:20
后端代码比较复杂，还在整理，我是根据公司大佬Eric.Liang 提供的DEMO和教程进行修改的，大家可以先研究！
...
第二集第三集啥时候来？还在等哟~~~ 火钳刘明，广告位招租
页:
[1]
2