各三方网页OAuth登录获取openid和unionid

微信

大致流程

获取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就获取完毕了。

QQ

大致流程

获取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,流程结束

Facebook

大致流程

获取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

各三方网页OAuth登录获取openid和unionid.jpg

你可能感兴趣的:(各三方网页OAuth登录获取openid和unionid)