網站前端接入QQ和支付寶聯登

tips：寫這篇文章，主要是爲了記錄下網站前端js接入QQ和支付寶聯合登錄，避免閱讀官方文檔浪費時間

QQ聯登

官方文檔點這裏

步驟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>
複製代碼

這裏須要本身填的參數是

• data-appid：這個是appid，須要上qq互聯去申請獲取：connect.qq.com，先登錄審覈帳號以後，建立應用管理，會生成appid
• data-redirecturi：這個是回調地址，通常填前端地址，而後獲取location.hash裏面的openid等參數跟後端api交互。

這裏申請應用注意的點是，你填寫的網站名稱和備案號等信息必須跟你在ICP備案上一致，否則QQ審覈會提示備案號跟備案不一致
ICP備案查詢地址點這裏

步驟二：html模版及初始化

<span id="qqLoginBtn"></span>
<script type="text/javascript">
    QC.Login({
       btnId:"qqLoginBtn"	//插入按鈕的節點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的話，須要本身去調用getOpenId，而後重寫window.callback，在callback中執行自定義操做。具體解讀源碼

支付寶聯登

官網文檔地址點這裏

步驟1：跳轉支付寶受權頁

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

支付寶的回調url中location.search會帶上auth_code，直接用auth_code跟後端交互就好了

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