企业微信扫码登录教程（浏览器登录）

最近论坛里发现好几个人在问企业微信如何在浏览器端扫码登录，如何实现。

刚好本人也在研究将自己的应用对接企业微信，也涉及到解决这个问题，所以经过日日夜夜在论坛里查找资料，一共花了3天完成，看了3个小时的C#基础入门教程，然后研究了一晚上的DEMO，经过反复测试调试，现在终于大功告成，下一步准备开始对接企业微信众多接口到应用里！

   因为没有现成的API或者插件来帮助我们实现

所以我把大概思路和部分核心代码贴出来，让大家参考

相信我一个没有代码基础的小白能做到，大家一样能做到！

第一种登录方式：构建链接跳转扫码

第二种登录方式：不跳转到微信网址，直接本页JS获取二维码，跳转

显然采取第二种更漂亮，用户体验也更好！

实现步骤

上方的流程图，大家一定要看懂，代码只是工具

这就是扫码登录的核心原理

如果一句话概括，怎么登录的，那就是

构建链接、拿到CODE、换取ID、单点登录

目录

• 1楼：前端页面构建+代码
• 2楼：后端API代码解析
• 3楼：单点登录解析
  

————————————————————————————————————
兼职活字格开发，欢迎各位大佬联系！ VX:13972707111

觉得我的分享还可以的话

麻烦给我投一票 支持我的处女作

（微信打开或扫一扫）

第一步

首先在应用原有的基础上增加一个空白逻辑页面

这个页面只为处理单点登录业务，常规登录是用不到这个页面的。

首页微信扫码的链接做常规的命令跳转就可以

第二步

在逻辑空白页放置JS代码，根据需要可以修改

1. //构建一个获取地址栏URL后CODE代码的函数
   
2. function GetRequest() {
   
3.   var url = location.search
   
4.   //获取url中"?"符后的字串
   
5.   if (url.indexOf('?') != -1) {
   
6.     var str = url.substr(1)
   
7.     strs = str.split('&')
   
8.     for (var i = 0; i < strs.length; i++) {
   
9.       //如果发现CODE字段
   
10.       if (strs[i].split('=')[0] == 'code') {
    
11.         code = strs[i].split('=')[1]
    
12.         return code
    
13.       }
    
14.     }
    
15.   }
    
16.   return ''
    
17. }
    
18. 
    
19. //调用函数获取CODE
    
20. var code = GetRequest()
    
21. 
    
22. //如果获取到的CODE不为空
    
23. if (code != '') {
    
24.   //构建POST请求地址，根据自己API地址修改
    
25.   var url = Forguncy.ForguncyData.ForguncyRoot + 'customapi/wechatapi/wxlogin'
    
26. 
    
27.   //创建一个数据包
    
28.   var data = {}
    
29.   data['code'] = code
    
30.   data['url'] = 'https://你的应用地址'
    
31. 
    
32.   //发起POST请求，将URL和数据包一同提交过去
    
33.   $.post(url, data, function (result) {
    
34.     console.log(result)
    
35.     //如果返回的是HTTP开头的网址，说明单点登录请求成功
    
36.     if (result.indexOf('http') == 0) {
    
37.       //直接跳转返回带TOKEN的地址就可以成功登录
    
38.       window.location.href = result
    
39.     } else {
    
40.       //如果返回的不是地址，说明有错误，直接打印错误，并跳转首页
    
41.       console.log(result)
    
42.       window.location.href = 'https://你的应用地址'
    
43.     }
    
44.   })
    
45. }else{
    
46.   //如果获取不到CODE，直接跳转首页
    
47.   alert("没有获取到微信CODE")
    
48.   window.location.href = 'https://你的应用地址'
    
49. }
    

复制代码

前端准备工作完毕

在逻辑空白页面，页面加载命令里执行上方JS，前端的构建就完成了，非常简单

第三步

在服务端写好接口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中提到的，跳转返回的网址就行了！

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();

先来占坑膜拜~~~

接着的快点来，板凳坐很久了~~~

6666 这功能挺实用的

厉害厉害！

phoben 发表于 2020-7-25 23:20
后端代码比较复杂，还在整理，我是根据公司大佬Eric.Liang 提供的DEMO和教程进行修改的，大家可以先研究！
...

第二集第三集啥时候来？还在等哟~~~

火钳刘明，广告位招租