一、微信开放平台申请网站应用
1、微信开放平台中注册开发者账号,在管理中心选择网站应用,创建相关应用。按照要求准备好资料,提交审核即可,一般2天左右就会有审核结果。
注意:
- 基本信息-应用官网:填写公司官网即可;
- 开发信息-授权回调域:只能填写一个回调域,无需带上http或者https,这个配置十分重要,用户扫码成功后,会跳转到这个回调域;
2、应用审核通过后,会显示相关详情信息,在后面的接入流程中会使用;
注意:
- AppSecret信息不是明文的,点击重置进行获取,需妥善保存,一般不要放在前端项目中。
- 微信登录的接口是已获得的状态,说明开发者可以使用登录相关接口了;
- 开发信息-授权回调域可以直接进行修改,无需审核;
二、微信登录对接
开放平台-微信登录功能有相关的文档说明,详细地介绍了如何接入微信登录,以下为相关拆解步骤。
整体流程:
- 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;
- 通过code参数加上AppID和AppSecret等,通过API换取access_token;
- 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。
获取access_token时序图:
1、微信二维码链接
配置链接参数,生成完整的微信二维码链接;
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect](https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
参数说明:
appid:必填,应用唯一标识;
redirect_uri:必填,请使用urlEncode对链接进行处理,建议对回调域进行编码处理;
response_type:必填,值为code;
scope:必填,网页应用目前仅填写snsapi_login;
state:选填,用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验;
lang:选填,界面语言,支持cn(中文简体)与en(英文),默认为cn;
若提示“该链接无法访问”,请检查参数是否填写错误;
redirect_uri 参数错误:
原因分析:
- 回调地址不能填入端口号+名称,eg: open.weixin.qq.com:8080/index;
- 回调地址只能写该域名下的地址;
- 回调地址必须是全路径,最好进行转码操作;
2、获取code
用户扫码、授权后,会将页面重定向到回调域(redirect_uri),并且带上code和state参数:redirect_uri?code=CODE&state=STATE,比如:
https://open.weixin.qq.com?code=CODE&state=STATE
移动端微信扫码成功后,会显示授权页面;
授权成功后,微信会提示登录通知;
注意:若用户禁止授权,则不会发生重定向,可在当前页面重新获取微信二维码;
3、通过code获取access_token、openid、unionid
该接口通过code等相关参数可获取access_token,为了安全考虑,开发者请勿将access_token返回给前端,需要开发者保存在后台,访问微信api的请求由后台发起;所以该接口是提供给后端调用的,前端调用无效。
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
参数说明:
appid:必填,应用唯一标识;
secret:必填,在微信开放平台提交应用审核通过后获得;
code:必填,上面获取的code参数;
grant_type:必填,值为authorization_code;
返回说明:
access_token:接口调用凭证
expires_in:access_token接口调用凭证超时时间,单位(秒)
refresh_token:用户刷新access_token
openid:授权用户唯一标识
scope:用户授权的作用域,使用逗号(,)分隔
unionid:当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
4、通过access_token调用接口
获取access_token后,进行接口调用,有以下前提:
- access_token有效且未超时;
- 微信用户已授权给第三方应用账号相应接口作用域(scope)。
可通过对应的接口获取登录信息、用户个人信息等。
5、前后端对接
完成上面的流程后,后端会获取到用户相关的登录信息、个人信息等,前端可以在上面填入的回调页面中,调用后端的接口获取相关数据,进行相关逻辑处理。
以上就是web端接入第三方微信的流程。