码迷,mamicode.com
首页 > Web开发 > 详细

给网站加第三方社交登录的

时间:2015-06-25 22:48:05      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:

起因

 接到个任务 需要微博,QQ,百度,人人等联合登录。然后花了一天时间整理了一下,写给大家分享下。


 

想法:

1. 首先想到的是QQ登录,跑到QQ互联折腾了一下,注册开发者哇,然后填写应用信息哇,

最后发现QQ登录的域名不能有端口,服务器外网带端口号的,然后就撤退了。

 

2 转战百度开放者平台,说实话这个平台看的眼花缭乱的,云存储云服务的,想到以前的bae,还以为是百度的托管平台似的。

百度这里面有个坑,中间有个第三方的登录,一看还以为是自己找的,然后点击进去了。

 

技术分享

 

 看了下例子,android,ios,js,反正就是找不到web,汗!有个js的登录例子,里面用了些百度的JS,找找百度的JS库,发现需要下载SDK,感觉是客户端东东,然后就算了重新搜索了。

 

技术分享

 

 继续bing搜索呢 ,这次搜到百度API里面去了,打开网站就看到一段描述

 

1、支持多家主流社交平台账号 
支持百度、新浪微博、腾讯微博、QQ、人人、开心网等多家平台的账号系统帮助用户低成本登录。 
2、最简单化的接入账号 
适用于PC&移动,只需简单配置和调用,即可轻松搭建完成账号功能。 

 

感觉是自己想要的接口了,然后点进去又吐血了,又回到第二步的百度SDK例子了。

 

技术分享

 

然后继续看了看这个百度API的网站 发现下面推荐服务 有个百度帐号连接有点像,然后点那个SDK与文档进去看看文档。

 

技术分享

 

然后找到了以下几个重要文档了。

 

第三方接入网站社会化登陆

 


 

正式开发

有文档了就开始忙活了,首先想到的是调试,然后想到了花生壳,然后去花生壳官网,刚好看到了内网映射一块钱支付免费用。

然后就下了客户端 配了本机映射,开始写代码咯。

对着这个一步步的做,这里有有个坑了,百度的指南是2.0版本的,现在3.0了有些地方不一样。不过好在只是界面不一样,编码流程是不变的。

1.进百度开发者服务 创建工程

技术分享

2.这里写你的网站名字,然后勾选合作网站,解决方案bae不要勾选。

技术分享

3.以上2步就已经把网站接入到bae了,然后点击应用,进入应用设置,设置一下网站的描述,这样用户跳转的时候会有对该网站的有好描述

技术分享

4.设置社会化服务回调地址,跟指南第二步一样的写就好了,这里的地址写花生壳解析的外网地址,不过跟官网文档不一样的就是,设置的位置变了。

技术分享

5 托管第三方应用

让百度托管 QQ 微博 开心 人人等登录设置,这里简单使用的话,默认的就可以了,让百度给我们做好了集成,如果不用默认的话,自己就要去各个平台去建立APP,拿到API KEY啥的。一个个做关联。

6 用JS登录获取授权码

下面有个注意的  

redirect_uri 必须和你第四步后台应用设置的一样 不然会报错
domid  这个是一个ID值,对应的是你界面方登录图标的容器元素的 id
   <script type="text/javascript" id="bd_soc_login_boot"></script>
    <script type="text/javascript">
    (function(){
          var t = new Date().getTime(),
          script = document.getElementById("bd_soc_login_boot"),
          redirect_uri = encodeURIComponent("http://xxx.eicp.net/xxxxx/other-login"),
          domid = "login", 
          src = "http://openapi.baidu.com/social/oauth/2.0/connect/login?redirect_uri=" + redirect_uri + "&domid=" + domid + "&client_type=web&response_type=code&media_types=sinaweibo%2Cqqdenglu%2Cbaidu%2Cqqweibo%2Ckaixin%2Crenren&size=-1&button_type=4&client_id=xxxxxxxxx&view=embedded&t=" + t;
        script.src = src;
    })();
    </script>

 这个样式的设置地址在下图。

技术分享

6 下一步就是根据得到的CODE来POST请求获取用户的实际信息了,例子是PHP代码,JAVA的处理方法也差不多只是语法不一样。

我这里有部分JAVA 伪代码给参考下

设计思想:

对原有用户表的一个扩充,加入了一个第三方登录绑定表(用户表ID,平台类别,平台主键,平台用户名,访问授权码)等。

当登录的时候 首先查询平台主键是否有关联用户表ID 如果有 查询出用户表ID 然后调用正常的登录方法

如果没有,就新增用户,然后继续调用正常的登录方法

 

@SkipCheck
    @Action("other-login")
    public String OtherLogin() throws Exception {
        String result = HttpKit.get(OtherLoginContent.url, getParam());
        log.info(result);
        JSONObject map = com.alibaba.fastjson.JSON.parseObject(result);
        
        log.info(map.get("name"));
        //首先查询是否绑定
        String customerNo = customerDao.selectOtherLogin(map.getString("social_uid"));
        if(customerNo==null){
            //如果没有 用social_uid+name等当用户名自动添加用户 
            //并且自动关联绑定
            customerNo=customerService.addOtherLink(map);
        }
        customer = customerDao.selectById(customerNo);
        return loginCheck();//正常的登录流程
    }
    private Map<String,String > getParam(){
        String code =  getParam("code");
        Map<String,String > param = new HashMap<String,String>();
        param.put("grant_type", "authorization_code");//固定
        param.put("code", code);
        param.put("client_id", OtherLoginContent.client_id);
        param.put("client_secret", OtherLoginContent.client_secret);
        param.put("redirect_uri",OtherLoginContent.redirect_uri);
        return param;
    }

 

给网站加第三方社交登录的

标签:

原文地址:http://www.cnblogs.com/keeley/p/4600861.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!