第三方接入备忘（人人、开心、新浪、腾讯）

 

标准流程

1. 用户登录『我的』网站，打开『授权框』。
2. 这个授权框中包含了『我』在『OpenID提供方』的应用注册信息，授权框将我的信息和用户提供的帐号密码一起提交到『OpenID提供方』。
3. 提供方将我的信息和用户信息各自验证。返回用户的『授权令牌』给『我』。
4. 我将『令牌』和我需要获取的用户信息请求打包再发给提供方。
5. 提供方返回『用户授权』的用户信息给我。
6. 流程结束。具体可以参考qq的登录文档或新浪的第三方登录文档。

技术做法

1. 人人提供了自己的javascript类库来向人人官网发送请求，并接受返回的用户信息。
2. 开心、新浪、支付宝是通过弹窗，由第三方书写cookie来实现交互。
3. 腾讯是直接通过页面传值实现。

纪实

1. 人人接口
   1. 放置跨域文件，请参考人人文档。当加入开心接口的，需要在人人跨域文件中写死域名。
   2. 在页面中加载脚本：<mce:script type='text/javascript' src="http://static.connect.renren.com/js/v1.0/FeatureLoader.jsp" mce_src="http://static.connect.renren.com/js/v1.0/FeatureLoader.jsp"></mce:script> 
   3. 插入代码：var Renren={ ApiKey:'014ee2f8e62d4***********25fc9', Receiver:'http://www.5paike.com/api/renren_user/js/xd_receiver.html', CallBack:'/user/return_renren', Init:function(){ var self=this; XN_RequireFeatures(["Connect"], function(){ XN.Main.init(self.ApiKey,self.Receiver,{"doNotUseCachedConnectState":true,'permsToRequestOnConnect':'email,publish_feed'}); loc = location.href.split('/').pop(); if( loc =='renren' ){ renrenLogin(); } }); }, Login:function(){ XN.Connect.requireSession(function(){ XN.Main.get_sessionState().waitUntilReady(function() { XN.Main.apiClient.users_getLoggedInUser(function(res_uid, ex) { if (!ex) { XN.Main.apiClient.users_getInfo([res_uid.uid], ['uid','name','sex','tinyurl'], function(res_info, ex) { if (!ex) { var query_str = "uid=" + res_info[0].uid; query_str += "&name=" + res_info[0].name; query_str += "&sex=" + res_info[0].sex; query_str += "&tinyurl=" + encodeURI( res_info[0].tinyurl ); window.location='http://www.**********/user/return_renren?'+query_str; }else{ alert("读取用户详细信息出错。"); } }); }else{ alert("读取用户ID出错。"); } }); }); }); } }; window.renrenLogin=Renren.Login; $(function(){ Renren.Init(); });
      
   4. 参考了xiami.com的写法。
2. 开心接口
   1. 放置跨域文件
   2. 载入脚本<script type='text/javascript' src='http://www.***/api/kaixin_user/js/featureloader-16.js'></script>(需从开心下载)
   3. 在页面中放置打开窗口的辅助程序：function openWind(url,width,height){ var top=(document.body.clientHeight-420)/2; var left=(document.body.clientWidth-520)/2; window.open(url,'第三方登录', 'height='+height+', width='+width+', toolbar =no, menubar=no, scrollbars=yes, resizable=no,top='+top+',left='+left+', location=no, status=no'); }
   4. 在按钮处放置代码：onclick="openWind('http://www.kaixin001.com/login/connect.php?appkey=58698957564026581170a8ff0735a091&re=/api/kaixin_user/kx001_receiver.html&t=57',640,480);return false;"
   5. 放置开心客户端代码：KX001.init("58698957564*******735a091", "/api/kaixin_user/kx001_receiver.html", "", ""); KX001.handleLogout(); function kx001_onlogin() { window.location.href = "http://www.**********/user/return_kaixin"; } 
   6. 在授权完成后开心会将用户信息写入COOKIE。
3. 新浪接口
   1. 在按钮处放置：openWind('http://www.5paike.com/api/sina_user',640,480);return
      false；
   2. 在回调页面载入新浪提供的库文件，实例化通信类，与新浪进行通信。
4. 腾讯接口
   1. 按照腾讯的7步文档完成通信，其中计算签名是需要主要参数要按照字典排序，组成的签名分两部分进行urlencode，然后再用&符号连接。
   2. 腾讯现在还不让普通接入点获取用户的详细信息。