tips：寫這篇文章，主要是為了記錄下網(wǎng)站前端js接入QQ和支付寶聯(lián)合登陸，避免閱讀官方文檔浪費時間

QQ聯(lián)登

官方文檔點這里

步驟1: 引入script

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"></script> 復制代碼

這里需要自己填的參數(shù)是

• data-appid：這個是appid，需要上qq互聯(lián)去申請獲取：connect.qq.com，先登陸審核賬號之后，創(chuàng)建應用管理，會生成appid
• data-redirecturi：這個是回調(diào)地址，一般填前端地址，然后獲取location.hash里面的openid等參數(shù)跟后端api交互。

這里申請應用注意的點是，你填寫的網(wǎng)站名稱和備案號等信息必須跟你在ICP備案上一致，不然QQ審核會提示備案號跟備案不一致
ICP備案查詢地址點這里

步驟二：html模版及初始化

<span id="qqLoginBtn"></span> <script type="text/javascript">QC.Login({btnId:"qqLoginBtn" //插入按鈕的節(jié)點id }); </script> 復制代碼

這就完事了，不過有個問題是，模版ui啥的會被QQ的js源文件qc-1.0.1.js限制，如果要定義個性化的ui，需要自己去修改qc_loader.js及其對應的qc-1.0.1.js等版本源碼

附上源碼地址：
qc_loader.js源碼點這里
qc-1.0.1.js源碼點這里

如果有個性化需求，自己獲取token和openid的話，需要自己去調(diào)用getOpenId，然后重寫window.callback，在callback中執(zhí)行自定義操作。具體解讀源碼

支付寶聯(lián)登

官網(wǎng)文檔地址點這里

步驟1：跳轉(zhuǎn)支付寶授權(quán)頁

https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=商戶的APPID&scope=auth_user&redirect_uri=ENCODED_URL&state=init 復制代碼

appid和redirect_uri也是類似qq。只不過appid在支付寶上去申請
申請地址點這里

步驟2：獲取auth_code

支付寶的回調(diào)url中l(wèi)ocation.search會帶上auth_code，直接用auth_code跟后端交互就行了

微信的暫時沒接過。后面再研究

轉(zhuǎn)載于:https://juejin.im/post/5cb3ec17e51d456e8a12ef7b

總結(jié)

以上是生活随笔為你收集整理的网站前端接入QQ和支付宝联登的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。