第三方登录 QQ WEIBO

最新推荐文章于 2021-06-17 09:48:54 发布
最新推荐文章于 2021-06-17 09:48:54 发布
阅读量2.6k 收藏
点赞数
分类专栏： 实用例子 文章标签： java web oauth
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wengjiasi_AWHG_2015/article/details/45295303
版权


①准备工作
               I--注册QQ互联账号 -->在管理中心注册为开发者 -->创建应用 -->获取应用APP ID

  II--在nat123注册应用域名

     III--下载包 
<!--qq互联-->
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.3</version>
        </dependency>
        <dependency>
            <groupId>commons-httpclient</groupId>
            <artifactId>commons-httpclient</artifactId>
            <version>3.1</version>
        </dependency>

②开始实践
------------------------------------------------------------------------------------------------------------------------
1>js版本（pc上）
------------------------------------------------------------------------------------------------------------------------

详情请见：http://connect.qq.com/intro/login/jssdk-demo
例子（网站请求页和回调地址页是同一个页面）

-------------------------------------------------------------------------------------------------------------
2>sdk_client版本（mobile）【使用java后台本地代理进行跨域请求】【jsonp也可以跨域请求】
          疑问：请求成功后返回的数据时html格式？非json格式
-------------------------------------------------------------------------------------------------------------

<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Client Flow Example</title>
    <script type="text/javascript" src="resources/js/jquery-2.0.3.min.js"></script>
</head>
<body>
<a href="https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=101201540&redirect_uri=http://jiasi.nat123.net/index.jsp&scope=get_user_info">qq</a>
<%--*http://jiasi.nat123.net/index.jsp?#access_token=C34A4EB530203E213DD9F5A5E9B891E6&expires_in=7776000*--%>
<a href="https://graph.qq.com/oauth2.0/me?access_token=C34A4EB530203E213DD9F5A5E9B891E6">获取openId</a>
<%--*callback( {"client_id":"101201540","openid":"AFBEA3786C12A923F66BAD7D2F87DFCC"} ); *--%>

<a href="https://graph.qq.com/user/get_user_info?access_token=C34A4EB530203E213DD9F5A5E9B891E6&oauth_consumer_key=101201540&openid=AFBEA3786C12A923F66BAD7D2F87DFCC">获取信息</a>

<%--用户信息--%>

<hr/>
<a href="https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=101201540&redirect_uri=http://jiasi.nat123.net/index.jsp&scope=get_user_info">腾讯QQ登录</a>
<img id="userImg"/>
<button type="submit" οnclick="clickQQ();"> QQ登录</button>
<span id="userName"></span>
<script type="text/javascript">
var accessToken = window.location.hash.substring(1);//获取路径中的access_token
    $.ajax({
        type: 'GET',
        url: 'https://graph.qq.com/oauth2.0/me?'+accessToken,
        async: false,
        dataType: "jsonp",
        jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback:"callback",
        success: function(o){
            console.log(o);//o就是上面提到的返回包
            $.ajax({
                type: 'POST',
                url:"/login.do",
                data:{url: 'https://graph.qq.com/user/get_user_info?'+accessToken+'&oauth_consumer_key=101201540&openid='+o.openid},
                async: false,
                dataType: "json",
                success: function(e){
                    alert(e.nickname);
                    console.log(e);
                    $("#userImg").attr("src",e.figureurl_qq_2);
                }
            });
        }
    });


</script>

</body>
</html>
============
public class LoginServlet extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("inter..................");
        /*req.getRequestDispatcher("/WEB-INF/success.jsp").forward(req, resp);*/
        String url = request.getParameter("url");
        System.out.println(url);
        HttpClient httpClient = new HttpClient();
        // 创建GET方法的实例
        GetMethod getMethod = new GetMethod(url);
        // 使用系统提供的默认的恢复策略
        getMethod.getParams().setParameter(HttpMethodParams.RETRY_HANDLER,
                new DefaultHttpMethodRetryHandler());
        try {
            // 执行getMethod
            int statusCode = httpClient.executeMethod(getMethod);
            if (statusCode != 200) {
                System.err.println("Method failed: "
                        + getMethod.getStatusLine());
            }
            // 读取内容
            byte[] responseBody = getMethod.getResponseBody();
            String Msg = getMethod.getResponseBodyAsString().trim();
            System.out.println("message--------------"+Msg);
            // 处理内容
        } catch (HttpException e) {
            // 发生致命的异常，可能是协议不对或者返回的内容有问题
            System.out.println();
            e.printStackTrace();
        } catch (IOException e) {
            // 发生网络异常
            e.printStackTrace();
        } finally {
            // 释放连接
            getMethod.releaseConnection();
        }
    }

QQ第三方登陆
网站接入流程--qq登陆
===============
QQ分享空间
分享QQ好友：
------------------------=---
分享到各网站的js代码

-----------------------------------------------------------------------------------------------------------------------------------
后期修改                           js版QQ登陆改为手机版本
-----------------------------------------------------------------------------------------------------------------------------------

第一种方案：页面上获取access_token和openid，后台处理用户数据
1、页面部署
+++++++++第一种情况++++++++++
----在放置qq  button的页面引入js库
    <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101201540" data-redirecturi="http://jiasi.nat123.net/ole-mobile/index.html" charset="utf-8" ></script>
---添加qq按钮和按钮样式
 <span id="qqButton" ></span>
QC.Login({
                btnId : "qqButton",//插入按钮的html标签id
                size : "B_M",//按钮尺寸
                scope : "get_user_info",//展示授权，全部可用授权可填 all
                display : "mobile"//应用场景，可选
            });
---回调页面获取access_token和openid并发送请求到后台处理获得用户数据
var accessToken = window.location.hash.substring(1);//获取路径中的access_token
            if(accessToken) {
                $.ajax({
                    type: 'GET',
                    url: 'https://graph.qq.com/oauth2.0/me?' + accessToken,
                    async: false,
                    dataType: "jsonp",
                    jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                    jsonpCallback: "callback",
                    success: function (o) {
                        alert(o.openid);
                        $.ajax({
                            type: 'POST',
                            url: "/member/qq_login",
                            data: {url: 'https://graph.qq.com/user/get_user_info?' + accessToken + '&oauth_consumer_key=101201540&openid=' + o.openid},
                            async: false,
                            dataType: "json",
                            success: function (e) {
                                alert(e);
                                alert(e.msg);
                                if (e.success) {
                                }
                            }
                        });
                    }
                });
            }
+++++++++第二种情况++++++++++
tip①不需要再页面引入js库，没有qq按钮的样式 
<span id="qq_click" href="#" style="color:red;">
<img src="img/qq.png"/>
</span>
注意使用<a>标签链接的形式没办法打开页面
所以使用html可识别的标签并使用jquery 点击事件打开网页 

$("#qq_click").click(function(){
    window.location.href = "https://graph.qq.com/oauth2.0/authorize?response_type=token&display=mobile&client_id=101201540&scope=get_user_info&redirect_uri=http://jiasi.nat123.net/ole-mobile/qq_login.html";
});
为了把QQ登录和正常登录的页面解耦，于是单独把QQ登录的处理过程另外放到一个页面去处理 
<script type="text/javascript" src="js/jquery.min-2.1.1.js"></script>

<script type="text/javascript">

    var accessToken = window.location.hash.substring(1);//获取路径中的access_token
    if (accessToken) {
        $.ajax({
            type: 'GET',
            url: 'https://graph.qq.com/oauth2.0/me?' + accessToken,
            async: false,
            dataType: "jsonp",
            jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
            jsonpCallback: "callback",
            success: function (o) {
                $.ajax({
                    type: 'POST',
                    url: "/ole-web/m/member/qq_login",
                    data: {url: 'https://graph.qq.com/user/get_user_info?' + accessToken + '&oauth_consumer_key=101201540&openid=' + o.openid},
                    async: false,
                    dataType: "json",
                    success: function (e) {
                        alert(e.msg);
                        if (e.success) {

                            window.localStorage.setItem("member_info", e.data.memberId + '|' +
                            e.data.token + '|' +
                            e.data.nickname + '|' +
                            e.data.portrait + '|' +
                            e.data.balance);

                            window.location.href = "/ole-mobile/index.html#memberview";
                        }

                    }
                });
            }
        });
    }
</script>
2、后台处理用户数据 
@Transactional
    public ThirdpartyMember getUserInfoFromQQ(String url/*HttpServletRequest request*/) {
        log.info("QQ第三方登录");
//        String url = request.getParameter("url");
        System.out.println("url:"+url);
        /*获取openid*/
        String[] params = url.split("&");
        String openid = params[OPENID_AND_VALUE_INDEX].substring(OPENID_INDEX);

        HttpClient httpClient = new HttpClient();
        // 创建GET方法的实例
        GetMethod getMethod = new GetMethod(url);
        // 使用系统提供的默认的恢复策略
        getMethod.getParams().setParameter(HttpMethodParams.RETRY_HANDLER,
                new DefaultHttpMethodRetryHandler());
        try {
            // 执行getMethod
            int statusCode = httpClient.executeMethod(getMethod);
            if (statusCode != 200) {
                System.err.println("Method failed: "
                        + getMethod.getStatusLine());
            }
            // 读取内容
            byte[] responseBody = getMethod.getResponseBody();
            String msg = getMethod.getResponseBodyAsString().trim();
            if (msg != null && !msg.equals("")) {
                System.out.println("message----" + msg);
                String[] s = msg.split(",");
                StringBuffer sb = new StringBuffer();
                for (String s1 : s) {
                    if (s1.contains("nickname")) {
                        sb.append(s1.split(":")[NICKNAME_INDEX].replace("\"", ""));
                    } else if (s1.contains("figureurl")) {
                        sb.append(",");
                        sb.append(s1.substring(PORTRAIT_INDEX));
                    }
                    if(s1.contains("figureurl_qq_1")) {
                        sb.append(",");
                        System.out.println("----====qq--"+s1);
                        sb.append(s1.substring(24));
                        System.out.println("24---"+s1.substring(24));
                        break;
                    }
                }
                String nickname = sb.toString().split(",")[0];
                String portrait = sb.toString().split(",")[1];
                String qq_portrait = sb.toString().split(",")[2];
                System.out.println("...qq_pro--"+qq_portrait);
            /*保存第三方登录的用户信息 memberThirdParty 和 member 实体*/
                Member member= saveThirdparty(openid, nickname, portrait, ThirdParty.QQ);
                ThirdpartyMember thirdpartyMember = new ThirdpartyMember();
                thirdpartyMember.setNickname(nickname);
                thirdpartyMember.setPortrait(portrait);
                thirdpartyMember.setOrigin(ThirdParty.QQ);
                thirdpartyMember.setUsername(member.getUsername());
                thirdpartyMember.setMemberId(member.getId());
                System.out.println("username......"+member.getUsername());
                thirdpartyMember.setPassword("third");
                System.out.println("memberservice--------------"+member.getPassword());
                return thirdpartyMember;
            }
            ResponseEntity<HttpEntity> hi = new ResponseEntity(responseBody, HttpStatus.OK);

            System.out.println("hi----"+hi.toString());
            // 处理内容
//            return new ResponseEntity(responseBody, HttpStatus.OK);
        } catch (HttpException e) {
            // 发生致命的异常，可能是协议不对或者返回的内容有问题
            System.out.println();
            e.printStackTrace();
//            return new ResponseEntity("Please check your provided http address!", HttpStatus.BAD_REQUEST);
        } catch (IOException e) {
            // 发生网络异常
            e.printStackTrace();
//            return new ResponseEntity("Time out!", HttpStatus.BAD_GATEWAY);
        } finally {
            // 释放连接
            getMethod.releaseConnection();
        }
        return null;
    }

第二种方案 页面点击QQ登录  完全交给后台获取access_token、openid、处理用户数据

1、页面
用jquery构造触发点击事件 GET请求至qqRequest

2、后台处理
这是在Controller层的，可以调用上面提到的getUserInfoFromQQ

/* @RequestMapping(value = "/qqRequest",method = RequestMethod.GET)
    public String qqRequest(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String code = request.getParameter("code");
        request.setAttribute("code", code);
        System.out.println("...................");
        *//* 获取access_token*//*
        String parames = "grant_type=authorization_code&client_id="+ CommonUtil.APP_ID +"&client_secret="+ CommonUtil.APP_KEY +"&code="+code+"&redirect_uri=" + CommonUtil.REDIRECT_URI;
        String access_result = HttpRequestUtil.httpsRequest(CommonUtil.REQUEST_TOKEN_URL, "GET", parames);
        if(access_result.contains("callback")){
        *//*当返回的access_token是callback( {"error":100019,"error_description":"code to access token error"} )类似的数据;
        * 表示获取access_token失败，需要返回点击QQ登陆页面让用户重新登陆授权
        *//*
            try {
                response.sendRedirect("/ole-mobile/index2.html");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }else {
            String access_token = access_result.split("&")[0];
            System.out.println("access_token="+access_token);

            *//* 获取openid
             * 成功后返回信息格式：callback( {"client_id":"10xxxxx18","openid":"DDxxxxxxxxxxx587"} );
             *//*
            String open_id = HttpRequestUtil.httpsRequest(CommonUtil.REQUEST_OPENID_URL, "GET", access_token);
            System.out.println("open_id="+open_id);

            if(open_id.contains("error")){
                *//*当返回的open_id是callback( {"error":100007,"error_description":"param access token is wrong or lost "} );类似的数据;
                 * 表示获取open_id失败，需要返回点击QQ登陆页面让用户重新登陆授权
                 *//*
                try {
                    response.sendRedirect("/ole-mobile/index2.html");
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }else {
                String openId = open_id.substring(open_id.indexOf("openid")+9, open_id.lastIndexOf("\""));
                String url = "https://graph.qq.com/user/get_user_info?"+access_token+"&oauth_consumer_key=101201540&openid=" + openId;
                System.out.println("url:"+url);
                ThirdpartyMember thirdpartyMember = memberService.getUserInfoFromQQ(url);
                System.out.println("thirdpartyMember---"+thirdpartyMember.getUsername());
                if (thirdpartyMember != null) {
                    Map<String, ThirdpartyMember> map = new HashMap<>();
                    map.put("thirdQuery", thirdpartyMember);
                    //用户第三方登录的会员名字和密码 正常登录 保存token
                    System.out.println("login success!");
                    //登录成功，保存改用户token
                    Token memberToken = new Token();
                    memberToken.setMemberId(thirdpartyMember.getMemberId());
                    memberToken.setToken(UUID.randomUUID().toString());
                    tokenRepository.save(memberToken);

                    //查询该会员账户余额
                    BigDecimal balance = accountService.findBalanceByMemberId(thirdpartyMember.getMemberId());
                    MemberBean memberBean = new MemberBean();
                    memberBean.setMobile(thirdpartyMember.getUsername());
                    memberBean.setNickname(thirdpartyMember.getNickname());
                    memberBean.setPortrait(thirdpartyMember.getPortrait());
                    memberBean.setMemberId(thirdpartyMember.getMemberId());
                    memberBean.setToken(memberToken.getToken());
                    memberBean.setBalance(balance);
                    System.out.println("json="+JSON.toJSONString(memberBean));
                    return new Message(true,"login success!",memberBean).toJson();

                }
            }
        }
        return new Message(true,"login fail!").toJson();
    }*/

wengjiasi_awhg_2015
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最新版Ecshop插件 第三方登录 QQ微博支付宝
02-07
最新版Ecshop插件 第三方登录 QQ微博支付宝
QQ登录接口调用
weixin_40170892的博客
08-05 2599
QQ开放平台申请网站应用,获得APPID和APPKEY,第三方应用接入QQ登录 APPID:xxxxxxxxx APPKey:yyyyyyyyyyy 第一步:请求一下路径获得code 参数:response_type=code , client_id=APPID,redirect_url=注册appid时填写的主域名下的地址,注意需要将url进行URLEncode。state=随机字符串 htt...
pc网站qq互联登录授权php版
ni听得道的博客
08-02 4737
首先看下工具类<?php /** * QQ互联pc网页授权类 */ namespace App\Lib\QQconnect;use App\Lib\Util\Curl;class QQconnect{ const err = [ 0 =>'成功', 100000 => '缺少参数response_type或response_type非法',
【ie兼容】判断ie版本跳转到指定页面下载浏览器
wjx_jasin的博客
09-11 871
//判断是否是ie且给出ie版本号 function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSI...
QQ第三方登陆及同步内容到腾讯微博，腾讯空间，朋友网
stepByStep
01-14 6369
一、开发前准备工作 1 进入http://connect.qq.com进行登陆，然后点击网站接入（根据需求，如果需要移动应用接入点击移动应用接入）。下列例子为网站接入。 2 创建应用页面中，将鼠标放在”验证”按钮上，会弹出一个小窗口，将要复制的内容复制下来放在你网站的首页对应位置，然后点击”开始验证”按钮 二、开发 1 将该代码放入你网站登陆页面 按钮图片下载官
微信QQ微博第三方登录java代码
01-11
微信 QQ 微博 第三方登录 java 微信QQ微博第三方登录java代码
QQ 新浪微博第三方登录
11-12
网站实现QQ、新浪微博的第三方登录。
微信，微博，qq第三方登录demo，thinkphp框架
04-03
thinkphp框架下开发微信，微博，qq第三方登录demo，简单的，供大家使用
第三方登陆包含qq微信微博
12-27
第三方登陆包含qq微信微博
ShopNC中使用QQ互联遇到的坑
thy专栏
03-21 4000
在ShopNC中启动QQ互联，遇到不少坑，小记一下： 1. 在QQ互联中填写回调地址 按照shop/api.php中的代码： elseif ($_GET['act'] == 'toqq'){ define('SHOP_SITE_URL',$site_url); if ($_GET['op'] == 'g'){ include 'api/qq/oauth/qq_ca
腾讯开放平台——client id is illegal(100008)！错误解决
精彩人生
02-07 3万+
今天心血来潮想借腾讯的开放平台熟悉oauth。结果就摆弄了起来，腾讯的文档还是写得很详细的，比我上一次看的已经好很多了。而且还提供了sdk，可以快速调用腾讯的开放平台，既然是学习来的，也就没图快，决定从零开始，手写代码。 一切都是按文档来的，可没想到第一步取access token就受挫了： 代码如下： function get_access_token() { var r
关于qq第三方登录一些问题!无法获取信息等等
MagicYeyu的博客
11-14 3521
今天用到qq第三方登录 , 遇到一些问题 记录下来,防止忘记 SDK下载地址或者自己选择所需要的 然后导入到自己的项目 只记录一些关键代码: qqLogin.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) {
【Spring Security OAuth2笔记系列】- Spring Social第三方登录 - QQ登录下
代码有毒的博客
08-22 2097
qq登录下 前面把所有的代码组件都弄好了。现在可以开启调试了 在这之前你需要有一个qq互联的应用；也就是为了拿到appid和appSecret；自己去qq互联创建一个应用即可 这里讲下本地怎么调试应用 本地调试qq互联应用 申请好应用。并配置好 imooc: security: browser: # loginPage: /demo-signIn.html...
qq第三方登录
qq_33854869的博客
07-21 4680
同事搞了个qq第三方登录,学习下.    qq第三方登录(qq oAuth2.0),在oauth的协议的基础上实现的(新浪,wx等一些第三方登录都遵循这个原则),第三方分网站与移动应用    网站接入:总体流程 QQ登录OAuth2.0总体处理流程如下： Step1：申请接入，获取appid和apikey； Step2：开发应用，并设置协作者帐号进行测试联调； Step3：放置QQ登录
Token验证失败的解决方法
热门推荐
拔萝卜的码农
11-11 10万+
Token验证失败的解决方法
access_token 失效及如何解决
api工厂
06-17 2万+
在调用微信公众号 / 小程序相关接口的时候，如果返回如下错误，则说明当前的 access_token 是错误的： { "errcode": 40001, "errmsg": "invalid credential, access_token is invalid or not latest rid: 5f38a263-3d4c3ccd-01e705f7" } 根据上面的字面提示很容易理解这个错误的原因，或者也可以查询微信官方开发文档上对于 40001 错误码的说明。 ...
微信开发之access_token之坑
随心而笑
09-21 2万+
首先不得不提到access_token的分类，一是普通access_token，二是网页授权access_token。其中前者是用于调用微信提供的各种借口，作为开发者的调用凭证，一般有效期为7200S，获取次数受限；另一种是第三方网页若需要使用用户微信账户登录，需要获取该access_token从而来获取用户微信账户信息。这个一定得区分开。 另外获取用户微信账户信息也有两种情况，一是普通的
uniapp 第三方登录
最新发布
09-14
uni-app支持在APP开发中实现第三方登录功能。你可以使用uni-app提供的接口和配置来实现微信、QQ、微博等多种第三方登录方式。 首先，在通用配置中，你需要编辑manifest.json文件并进行可视化操作，选择App模块配置，进行OAuth鉴权配置。在配置中，你可以选择所需要的登录方式，比如选择QQ、微信等。 对于微信小程序的第三方登录，你可以按照以下步骤进行配置和开发： 1. 首先，判断用户是否已经登录，你可以使用uni-app提供的接口来实现此功能。 2. 接下来，开发登录页面，你可以使用uni-app提供的组件和样式来设计和布局登录页面。在登录页面中，你可以使用微信小程序的登录接口来实现第三方登录功能。 对于APP的第三方登录，你可以根据上述通用配置中的步骤进行配置和开发。由于APP的第三方登录方式可能有所不同，具体的实现方式可以根据你选择的第三方平台进行相应的开发。 除了第三方登录功能，uni-app还支持分享功能。你可以在APP中实现分享到聊天和朋友圈的功能。具体的接口和实现方式也有所不同，你可以根据uni-app的文档和示例来进行开发。 综上所述，uni-app提供了丰富的接口和配置来实现APP的第三方登录功能。你可以根据具体的需求和选择的第三方平台来进行相应的配置和开发。同时，你也可以使用uni-app提供的接口来实现分享功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值