1、获取component_access_token
http请求方式: POST（请使用https协议） https://api.weixin.qq.com/cgi-bin/component/api_component_token{"component_appid":"appid_value" , //第三方平台的appid"component_appsecret": "appsecret_value", //第三方平台的secret"component_verify_ticket": "ticket_value" /*微信服务器会向你在后台设置的“授权事件接收URL”定时推送component_verify_ticket(每隔10分钟)在收到ticket推送后也需进行解密,接收到后必须直接返回字符串success*/}第三方平台component_access_token是第三方平台的接口调用凭据，也叫做令牌（component_access_token）。每个令牌是存在有效期（2小时）的，且令牌的调用不是无限制的，请第三方平台做好令牌的管理，在令牌快过期时（比如2小时）再进行刷新在这里我自己封装了一个比较过期的方案
/** @params old:过去的时间 expire:过期时间直接取返回的expire就可以* 我们在计算过期时间的时候可以提前五分钟判断过期重新获取* 第一次获取到token的时候我们可以保存到localStorage 时间就保存时间戳就可以这样方便比较*/let contrast = (old, expire) => { //时间对比 提前五分钟对比 true:过期 false:未过期 return ((Date.now() - old) / 1000) > (expire - 300) ? true : false;}结果参数说明
| 参数 | 说明 |
|---|---|
| component_access_token | 接口的调用凭据 |
| expires_in | 过期时间单位(秒) |
2、获取预授权码pre_auth_code
获取pre_auth_code是接着上一个步骤的在我们成功获取到component_access_token可以通过component_access_token 然后在post请求写入参数component_appid 这样就可以获取到pre_auth_code
流程和上面获取的方式一致保存方式保持一致,这样在component_access_token刷新的时我们也要刷新pre_auth_code
http请求方式: POST（请使用https协议）https://api.weixin.qq.com/cgi-bin/component/api_create_preauthcode?component_access_token=xxxPOST数据示例:{ "component_appid":"appid_value" }{ "pre_auth_code":"Cx_Dk6qiBE0Dmx4EmlT3oRfArPvwSQ-oa3NL_fwHM7VI08r52wazoZX2Rhpz1dEw", "expires_in":600}结果参数说明
| 参数 | 说明 |
|---|---|
| pre_auth_code | 预授权码 |
| expires_in | 过期时间单位(秒) |
3、引导进去授权页面
- 方法一:授权注册页面扫码授权
“`
https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid=xxxx&pre_auth_code=xxxxx&redirect_uri=xxxx&auth_type=xxx
“`
| 参数 | 是否必填 | 参数说明 |
|---|---|---|
| component_appid | 是 | 第三方平台方appid |
| pre_auth_code | 是 | 第二个步骤获取的pre_auth_code |
| redirect_uri | 是 | 回调url(用户成功授权给你的平台的时候会在你的参数后面加上?pre_auth_code=xxx&expires_in=3600) |
| auth_type | 否 | 要授权的帐号类型：1则商户点击链接后，手机端仅展示公众号、2表示仅展示小程序，3表示公众号和小程序都展示。如果为未指定，则默认小程序和公众号都展示。第三方平台开发者可以使用本字段来控制授权的帐号类型。 |
| biz_appid | 否 | 指定授权唯一的小程序或公众号 |
注：、auth_typebiz_appid两个字段互斥
还有一点需要前端同学特别注意的是如果你用了路由系统history模式加入你的路径中有/#/,http://www.abc.com/#/index,这样的话微信在成功授权的时候会把参数这样插入
http://www.abc.com/#?redirect_url?auth_code=xxx&expires_in=3600/index
下面是我的获取参数的方法 注意我们在获取完参数之后需要改变当前页面的路径
//获取完参数之后我们重定向路径
location.replace('http://localhost:8080/#/version/codes');
if (location.search) {
let obj = location.search.slice(location.search.indexOf('?') + 1).split("&");
auth_code = obj[0].split("=")[1];
}
授权页面截图
4、使用授权码换取公众号或小程序的接口调用凭据和授权信息
该API用于使用授权码换取授权公众号或小程序的授权信息，并换取authorizer_access_token和authorizer_refresh_token
authorizer_refresh_token 这个就是我们在代小程序中需要的token
接口调用请求说明
http请求方式: POST（请使用https协议） https://api.weixin.qq.com/cgi-bin/component/api_query_auth?component_access_token=xxxx
请求参数说明
| 请求参数 | 说明 |
|---|---|
| component_appid | 第三方平台appid |
| authorization_code | 上一个步骤获得 |
{"authorization_info": {"authorizer_appid": "wxf8b4f85f3a794e77","authorizer_access_token": "QXjUqNqfYVH0yBE1iI_7vuN_9gQbpjfK7hYwJ3P7xOa88a89-Aga5x1NMYJyB8G2yKt1KCl0nPC3W9GJzw0Zzq_dBxc8pxIGUNi_bFes0qM","expires_in": 7200,"authorizer_refresh_token": "dTo-YCXPL4llX-u1W1pPpnp8Hgm4wpJtlR6iV0doKdY","func_info": [{"funcscope_category": {"id": 1}},{"funcscope_category": {"id": 2}},{"funcscope_category": {"id": 3}}]}}结果参数说明
| 参数 | 说明 |
|---|---|
| authorization_info | 授权信息 |
| authorizer_appid | 授权方appid |
| authorizer_access_token | 授权方接口调用凭据（在授权的公众号或小程序具备API权限时，才有此返回值），也简称为令牌(这个就是我们最终要只用的token) |
| expires_in | 有效期（在授权的公众号或小程序具备API权限时，才有此返回值） |
| authorizer_refresh_token | 接口调用凭据刷新令牌（在授权的公众号具备API权限时，才有此返回值），刷新令牌主要用于第三方平台获取和刷新已授权用户的access_token，只会在授权时刻提供，请妥善保存。 一旦丢失，只能让用户重新授权，才能再次拿到新的刷新令牌*(我们需要把这个token保存到对应用户数据库里面这样下次进来我们是不需要用户授权了除非用户取消授权,我们可以用这个去刷新authorizer_access_token) |
| func_info | 授权给开发者的权限集列表，ID为1到26分别代表： 1、消息管理权限 2、用户管理权限 3、帐号服务权限 4、网页服务权限 5、微信小店权限 6、微信多客服权限 7、群发与通知权限 8、微信卡券权限 9、微信扫一扫权限 10、微信连WIFI权限 11、素材管理权限 12、微信摇周边权限 13、微信门店权限 14、微信支付权限 15、自定义菜单权限 16、获取认证状态及信息 17、帐号管理权限（小程序） 18、开发管理与数据分析权限（小程序） 19、客服消息管理权限（小程序） 20、微信登录权限（小程序） 21、数据分析权限（小程序） 22、城市服务接口权限 23、广告管理权限 24、开放平台帐号管理权限 25、 开放平台帐号管理权限（小程序） 26、微信电子发票权限 请注意： 1）该字段的返回不会考虑公众号是否具备该权限集的权限（因为可能部分具备），请根据公众号的帐号类型和认证情况，来判断公众号的接口权限。 |
5、获取（刷新）授权公众号或小程序的接口调用凭据（令牌）
该API用于在授权方令牌（authorizer_access_token）失效时，可用刷新令牌（authorizer_refresh_token）获取新的令牌。请注意，此处token是2小时刷新一次，开发者需要自行进行token的缓存，避免token的获取次数达到每日的限定额度。缓存方法可以自行保存到对应用户字段里面
接口调用请求说明
http请求方式: POST（请使用https协议） https:// api.weixin.qq.com /cgi-bin/component/api_authorizer_token?component_access_token=xxxxx
请求参数说明
| 参数 | 说明 |
|---|---|
| component_appid | 第三方平台appid |
| authorizer_appid | 授权方appid |
| authorizer_refresh_token | 授权方的刷新令牌，刷新令牌主要用于第三方平台获取和刷新已授权用户的access_token，只会在授权时刻提供，请妥善保存。一旦丢失，只能让用户重新授权，才能再次拿到新的刷新令牌 |
结果参数说明
| 参数 | 说明 |
|---|---|
| authorizer_access_token | 有效期，为2小时 |
| expires_in | 授权方appid |
| authorizer_refresh_token | 刷新令牌 |
*这里有一点需要注意点是我们每次通过该结构获取到authorizer_access_token 要注意authorizer_refresh_token需要更新到数据库的字段里面不然下次就无法刷新啦
以上就是我对授权流程的总结路线是对着官方文档在加上自己遇到的坑总结出来的有哪一点不知道的可以在下方留言
