微信
大致流程
獲取code 》 獲取access_token
獲取code（前端）
網(wǎng)頁(yè)跳轉(zhuǎn)地址
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
參數(shù)如下
[圖片上傳失敗...(image-5835f5-1556616125487)]
多加一個(gè)self_redirect=true參數(shù)，因?yàn)檫@里用的iframe做的頁(yè)面內(nèi)授權(quán)
這里scope填寫(xiě)snsapi_login,snsapi_userinfo直接把用戶(hù)信息權(quán)限一起請(qǐng)求了
用戶(hù)登錄后，會(huì)跳轉(zhuǎn)到redirect_uri的地址并帶上code和state的參數(shù)
獲取access_token（服務(wù)端）
由于請(qǐng)求發(fā)送了secret懊渡，是不讓暴露在客戶(hù)端上的骄呼，所以需要服務(wù)端做請(qǐng)求發(fā)送
服務(wù)端應(yīng)發(fā)送get請(qǐng)求至
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
參數(shù)如下
[圖片上傳失敗...(image-ae9127-1556616125487)]
code由client傳參過(guò)來(lái)
獲取的返回如下
[圖片上傳失敗...(image-d939aa-1556616125487)]
因?yàn)橹耙呀?jīng)提前獲取了userinfo的權(quán)限栓始，所以這一步直接有unionid的字段（如果沒(méi)有userinfo權(quán)限則沒(méi)有）
到這一步openid和unionid就獲取完畢了屡贺。
大致流程
獲取access_token 》 獲取unionid
獲取access_token（前端）
網(wǎng)頁(yè)跳轉(zhuǎn)至
https://graph.qq.com/oauth2.0/authorize
get參數(shù)如下
[圖片上傳失敗...(image-4a1d18-1556616125487)]
注意：返回值會(huì)將access_token和state放在redirect_uri的hash部分
如 http://url?/#access_token=&state=
前端需要注意取參方式
獲取unionid（前端||服務(wù)端）
因?yàn)檫@步過(guò)程不需要發(fā)送secret届良，所以前后端都可以實(shí)現(xiàn)
發(fā)送get請(qǐng)求
https://graph.qq.com/oauth2.0/me?access_token=ACCESSTOKEN&unionid=1
參數(shù)如下
[圖片上傳失敗...(image-9934dc-1556616125487)]
注意unionid=1是需要在qq互聯(lián)上應(yīng)用里申請(qǐng)了unionId使用才有效
返回如下
[圖片上傳失敗...(image-ddd0c8-1556616125487)]
服務(wù)端需要特殊解析出data贝攒，前端可以使用jsonp的回調(diào)實(shí)現(xiàn)盗誊。
小米
大致流程
獲取code 》 獲取token 》 請(qǐng)求用戶(hù)信息
獲取code（前端）
網(wǎng)頁(yè)跳轉(zhuǎn)至
https://account.xiaomi.com/oauth2/authorize
請(qǐng)求參數(shù)如下
[圖片上傳失敗...(image-4c833e-1556616125487)]
scope這里寫(xiě)1空格3
（1是獲取用戶(hù)資料，3是獲取openid）
跳轉(zhuǎn)回redirect_uri并?帶上code和state
獲取access_token（服務(wù)端）
服務(wù)端發(fā)送get請(qǐng)求
https://account.xiaomi.com/oauth2/token
請(qǐng)求參數(shù)如下
[圖片上傳失敗...(image-1dffd9-1556616125487)]
code為前端發(fā)送
獲取的結(jié)果示例
[圖片上傳失敗...(image-f00437-1556616125487)]
還有這個(gè)特別注意
[圖片上傳失敗...(image-361b27-1556616125487)]
請(qǐng)求用戶(hù)信息（前端||服務(wù)端)
發(fā)送get請(qǐng)求
https://open.account.xiaomi.com/user/profile
請(qǐng)求參數(shù)如下
[圖片上傳失敗...(image-48fe2d-1556616125487)]
返回示例
[圖片上傳失敗...(image-fd0be3-1556616125487)]
小米未更新文檔隘弊，實(shí)際上userId已更新為unionId
至此哈踱，第二步有openid，第三步的unionid梨熙，流程結(jié)束
大致流程
獲取access_token 》 獲取id
獲取access_token（前端）
網(wǎng)頁(yè)跳轉(zhuǎn)至
https://www.facebook.com/v3.2/dialog/oauth?
請(qǐng)求參數(shù)如下
[圖片上傳失敗...(image-b6857-1556616125487)]
[圖片上傳失敗...(image-a9c542-1556616125487)]
這里的response_type我們填token
成功后跳轉(zhuǎn)到redirect_uri开镣，access_token會(huì)在hash部分，同qq
請(qǐng)求用戶(hù)接口（前端||服務(wù)端）
發(fā)送get請(qǐng)求至
https://graph.facebook.com/v3.2/me?fields=&access_token=
請(qǐng)求參數(shù)
fields因?yàn)槲覀冎恍枰猧d 這里填id
token就用上一步的token
返回如下
{
"id": "2135432543221"
}
Facebook并不提供unionid的接口串结，此處返回的id只是openid
如果需要進(jìn)一步判斷多應(yīng)用同一用戶(hù)的話哑子，參考facebook請(qǐng)求其他應(yīng)用用戶(hù)id的接口：
https://developers.facebook.com/docs/apps/for-business
