admin管理员组文章数量:1568354
H5页面-企业微信单点登录-前端获取code
- 第一步:先去企业微信后台管理进行配置
- 企业ID
- 第二步:创建应用
- 获取应用的ID、应用秘钥
- 配置网页授权-可信域名
- 配置应用主页
- 第三步:前端代码-获取code
- 页面显示
第一步:先去企业微信后台管理进行配置
URL地址:企业微信后台管理,需要管理员身份的人扫码登录进入才行。
企业ID
企业ID需要记住,在之后的开发中会使用到。
下面的appid就是企业ID。
第二步:创建应用
选择-企业管理-应用-自建
点击创建应用
按照要求填写资料,logo、名称、介绍、可见范围这几项不能为空。填写完成之后点击-创建应用。
获取应用的ID、应用秘钥
这一步很关键,需要注意。在新的应用里面可以看到有应用ID以及应用秘钥
到这里已经有三个参数了:appid、应用ID、应用秘钥。
配置网页授权-可信域名
下面就要先配置网页授权了
基本上这个域名就是项目接口的域名或者H5项目发布上线的域名。
如果这个域名填上去报错,那么可以点击–申请校验域名。
之后将下载的文件让后台开发人员放在这个域名的根目录下面。
点击确定之后就配置好了网页授权。
之后将上面的域名配置到企业微信授权登录web网页。这一步可以省略,不配置也可以。
两个的域名是一样的。
配置应用主页
点击设置-选择网页
填写网址,这个地方的网址就是企业微信文档里面所说的-构造网页授权链接
具体的拼接如下:
https://open.weixin.qq/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
根据URL规范,将上述参数分别进行UrlEncode,得到拼接的OAuth2链接为:
https://open.weixin.qq/connect/oauth2/authorize?appid=10001&redirect_uri=http%3A%2F%2Fwww.test&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/?code=o81fZHalbbCQHNIxqR7oId9PDbLX7ZuovaH6UXFIgtA&state=STATE#/
区别:
两者的区别取决于上面新的url链接。
第一种获取方式:打开之后的URL连接里面域名之后没有 /#/ 参数就可以获取到code。
比如:https://www.test/?code=o81fZHalbbCQHNIxqR7oId9PDbLX7ZuovaH6UXFIgtA&state=STATE#/
第二种获取方式:打开之后的URL连接里面域名之后有 /#/ 参数就可以获取到code
比如: https://www.test/#/?code=o81fZHalbbCQHNIxqR7oId9PDbLX7ZuovaH6UXFIgtA&state=STATE#/
页面显示
写好的前端代码提交,让后台人员发布一下。发布好之后就可以看到code了。这里是直观的将code显示在页面。主要是联调的时候使用。
复制链接在浏览器里面也可以直观的看到code。可以看到在浏览器的URL里面直接带有code参数。
版权声明:本文标题:h5-企业微信单点登录 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726186553a1059584.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论