微信
大致流程
获取code 》 获取access_token
获取code(前端)
网页跳转地址
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
参数如下
[图片上传失败...(image-5835f5-1556616125487)]
多加一个self_redirect=true参数,因为这里用的iframe做的页面内授权
这里scope填写snsapi_login,snsapi_userinfo直接把用户信息权限一起请求了
用户登录后,会跳转到redirect_uri的地址并带上code和state的参数
获取access_token(服务端)
由于请求发送了secret,是不让暴露在客户端上的,所以需要服务端做请求发送
服务端应发送get请求至
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
参数如下
[图片上传失败...(image-ae9127-1556616125487)]
code由client传参过来
获取的返回如下
[图片上传失败...(image-d939aa-1556616125487)]
因为之前已经提前获取了userinfo的权限,所以这一步直接有unionid的字段(如果没有userinfo权限则没有)
到这一步openid和unionid就获取完毕了。
大致流程
获取access_token 》 获取unionid
获取access_token(前端)
网页跳转至
https://graph.qq.com/oauth2.0/authorize
get参数如下
[图片上传失败...(image-4a1d18-1556616125487)]
注意:返回值会将access_token和state放在redirect_uri的hash部分
如 http://url?/#access_token=&state=
前端需要注意取参方式
获取unionid(前端||服务端)
因为这步过程不需要发送secret,所以前后端都可以实现
发送get请求
https://graph.qq.com/oauth2.0/me?access_token=ACCESSTOKEN&unionid=1
参数如下
[图片上传失败...(image-9934dc-1556616125487)]
注意unionid=1是需要在qq互联上应用里申请了unionId使用才有效
返回如下
[图片上传失败...(image-ddd0c8-1556616125487)]
服务端需要特殊解析出data,前端可以使用jsonp的回调实现。
小米
大致流程
获取code 》 获取token 》 请求用户信息
获取code(前端)
网页跳转至
https://account.xiaomi.com/oauth2/authorize
请求参数如下
[图片上传失败...(image-4c833e-1556616125487)]
scope这里写1空格3
(1是获取用户资料,3是获取openid)
跳转回redirect_uri并?带上code和state
获取access_token(服务端)
服务端发送get请求
https://account.xiaomi.com/oauth2/token
请求参数如下
[图片上传失败...(image-1dffd9-1556616125487)]
code为前端发送
获取的结果示例
[图片上传失败...(image-f00437-1556616125487)]
还有这个特别注意
[图片上传失败...(image-361b27-1556616125487)]
请求用户信息(前端||服务端)
发送get请求
https://open.account.xiaomi.com/user/profile
请求参数如下
[图片上传失败...(image-48fe2d-1556616125487)]
返回示例
[图片上传失败...(image-fd0be3-1556616125487)]
小米未更新文档,实际上userId已更新为unionId
至此,第二步有openid,第三步的unionid,流程结束
大致流程
获取access_token 》 获取id
获取access_token(前端)
网页跳转至
https://www.facebook.com/v3.2/dialog/oauth?
请求参数如下
[图片上传失败...(image-b6857-1556616125487)]
[图片上传失败...(image-a9c542-1556616125487)]
这里的response_type我们填token
成功后跳转到redirect_uri,access_token会在hash部分,同qq
请求用户接口(前端||服务端)
发送get请求至
https://graph.facebook.com/v3.2/me?fields=&access_token=
请求参数
fields因为我们只需要id 这里填id
token就用上一步的token
返回如下
{
"id": "2135432543221"
}
Facebook并不提供unionid的接口,此处返回的id只是openid
如果需要进一步判断多应用同一用户的话,参考facebook请求其他应用用户id的接口:
https://developers.facebook.com/docs/apps/for-business