h5-企业微信单点登录

H5页面-企业微信单点登录-前端获取code

第一步：先去企业微信后台管理进行配置

URL地址：企业微信后台管理，需要管理员身份的人扫码登录进入才行。

企业ID

企业ID需要记住，在之后的开发中会使用到。
下面的appid就是企业ID。
在这里插入图片描述

第二步：创建应用

选择-企业管理-应用-自建
在这里插入图片描述
点击创建应用

按照要求填写资料，logo、名称、介绍、可见范围这几项不能为空。填写完成之后点击-创建应用。

获取应用的ID、应用秘钥

这一步很关键，需要注意。在新的应用里面可以看到有应用ID以及应用秘钥
在这里插入图片描述

到这里已经有三个参数了：appid、应用ID、应用秘钥。

配置网页授权-可信域名

下面就要先配置网页授权了
在这里插入图片描述
基本上这个域名就是项目接口的域名或者H5项目发布上线的域名。
如果这个域名填上去报错，那么可以点击–申请校验域名。
之后将下载的文件让后台开发人员放在这个域名的根目录下面。

点击确定之后就配置好了网页授权。
之后将上面的域名配置到企业微信授权登录web网页。这一步可以省略，不配置也可以。
在这里插入图片描述
两个的域名是一样的。

配置应用主页

点击设置-选择网页
在这里插入图片描述
填写网址，这个地方的网址就是企业微信文档里面所说的-构造网页授权链接

在这里插入图片描述
具体的拼接如下：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE&agentid=AGENTID#wechat_redirect

参数说明：

参数	必须	说明
appid	是	企业的CorpID
redirect_uri	是	授权后重定向的回调链接地址，请使用urlencode对链接进行处理
response_type	是	返回类型，此时固定为：code
scope	是	应用授权作用域。snsapi_base：静默授权，可获取成员的基础信息（UserId与DeviceId）；snsapi_privateinfo：手动授权，可获取成员的详细信息，包含头像、二维码等敏感信息。
state	否	重定向后会带上state参数，企业可以填写a-zA-Z0-9的参数值，长度不可超过128个字节
agentid	是	应用agentid，建议填上该参数（如果为第三方应用或者代开发自建应用，未填该参数不会触发接口许可自动激活）。snsapi_privateinfo时必填否则报错；
#wechat_redirect	是	终端使用此参数判断是否需要带上身份信息

示例：

假定当前企业CorpID：10001
访问链接：http://www.test.com

根据URL规范，将上述参数分别进行UrlEncode，得到拼接的OAuth2链接为：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=10001&redirect_uri=http%3A%2F%2Fwww.test.com&response_type=code&scope=snsapi_base&state=#wechat_redirect

将上面拼接好的url添加到-应用主页-设置-网页网址。点击确认就可以了。

总结：
1、登录企业微信后台管理，获得企业ID(appid)
2、创建应用获得应用ID(AgentId)、应用秘钥(Secret)
3、配置网页授权域名获得回调url(redirect_uri)
4、配置应用主页网址获得OAuth2链接

第三步：前端代码-获取code

这里写了两张获取code的方式。
1、使用Window.location获取。下面是封装好的获取方法。

/**
 * 
 * @param {string} name 获取url参数 
 */
export function getUrlParameter(name) {
    
    
  console.log("路径");
  // console.log(window.location);
console.log(window.location);
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    
    
    return unescape(r[2]);
  }
  return null;

}

在这里插入图片描述

2、直接在onload里面使用参数获取方式。

OAuth2URL链接可以在浏览器中打开，会显示一个新的回调url。这一步不用做任何操作。
https://www.test.com/?code=o81fZHalbbCQHNIxqR7oId9PDbLX7ZuovaH6UXFIgtA&state=STATE#/

区别：
两者的区别取决于上面新的url链接。
第一种获取方式：打开之后的URL连接里面域名之后没有 /#/ 参数就可以获取到code。
比如：https://www.test.com/?code=o81fZHalbbCQHNIxqR7oId9PDbLX7ZuovaH6UXFIgtA&state=STATE#/
第二种获取方式：打开之后的URL连接里面域名之后有 /#/ 参数就可以获取到code
比如： https://www.test.com/#/?code=o81fZHalbbCQHNIxqR7oId9PDbLX7ZuovaH6UXFIgtA&state=STATE#/

页面显示

写好的前端代码提交，让后台人员发布一下。发不好之后就可以看到code了。这里是直观的将code显示在页面。主要是联调的时候使用。
在这里插入图片描述

在这里插入图片描述

复制链接在浏览器里面也可以直观的看到code。可以看到在浏览器的URL里面直接带有code参数。
在这里插入图片描述