网站前端接入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跟后端交互就好了

微信的暂时没接过。后面再研究