开放平台-web实现QQ第三方登录

news/2024/11/15 1:20:19/

应用场景

    web应用通过QQ登录授权实现第三方登录。
 

操作步骤

    1  注册成为QQ互联平台开发者， http://connect.qq.com/
    2  准备一个可访问的域名，如dev.foo.com
    3  创建网页应用，配置必要信息，其中包括域名以及回调地址；
        其中域名需要验证，需确保对域名主机有足够的控制权限
    4  获取应用appID、appKey进行开发
 

登录流程

    开发平台的登录授权采取oauth2.0机制，这也是目前几乎所有互联网开放平台所采取的方式。
    
 
    需更多了解oauth2.0可参考阮老师的文章： http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html
 

实现方式

    client-side
        流程：
        前端页面通过Implict方式 登录授权 -> 回调获得accessToken -> 获取openid -> 同步用户信息并登录
 
        为了保证数据安全，在获取用户信息并登录这一步必须由服务端实现。
        这种方式的开发相对便捷，也是后面的实战案例将要采取的方式。
 
    server-side
        流程：
        由server端页面跳转到登录授权页面(Authorization code方式) -> 回调获得code -> 置换accessToken -> 获取openid -> 同步用户信息并登录
        可参考：http://wiki.connect.qq.com/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_server-side

SDK使用

    JSSDK  可快捷实现前端登录授权的功能，可自定制登录按钮
        使用文档：http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
        缺点：存在浏览器兼容风险，此外登录按钮UI的定制也存在受限
 
    JavaSDK  屏蔽了oauth授权的复杂度，方便后端实现授权及api操作
        缺点：增加依赖jar包，项目容易变得臃肿，尤其是当前项目已经存在oauth功能实现时可不必采用。
 
 

案例实战

 
    功能描述
    clientside + server-side 通过QQ网页授权登录，并获取用户信息
 

    1  本地开发环境准备

        修改hosts文件将dev.foo.com映射到127.0.0.1；
        本地服务器以80端口启动， windows下可能会出现80端口被系统进程占用的情况，解决方法可参考 http://www.cnblogs.com/littleatp/p/4414578.html
        本地服务器启动后，以dev.foo.com的域名进行访问，在QQ登录授权时可通过域名验证这一步
 

    2  登录跳转页面

<html><head><title>QQ登录跳转</title><script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">//切割字符串转换参数表function toParamMap(str){var map = {};var segs = str.split("&");for(var i in segs){var seg = segs[i];var idx = seg.indexOf('=');if(idx < 0){continue;}var name = seg.substring(0, idx);var value = seg.substring(idx+1);map[name] = value;}return map;}//隐式获取url响应内容(JSONP)function openImplict(url){var script = document.createElement('script');script.src = url;document.body.appendChild(script);        }//获得openid的回调function callback(obj){var openid = obj.openid;$("#openid").text(openid);//跳转服务端登录urlvar resulturl = "@{openapi.QQs.login_result()}"; var accessToken = $("#accessToken").text();//向服务端传输access_token及openid参数document.location.href=resulturl + "?access_token=" + accessToken + "&openid=" + openid;}</script></head><body><p>AccessToken:<span id="accessToken"></span>--ExpireIn<span id="expire"></span></p><p>OpenID:<span id="openid"></span></p><!-- 执行脚本 --><script type="text/javascript">//应用的APPIDvar appID = "101207268";//登录授权后的回调地址，设置为当前urlvar redirectURI = "@@{openapi.QQs.login()}";//初始构造请求if (window.location.hash.length == 0){var path = 'https://graph.qq.com/oauth2.0/authorize?';var queryParams = ['client_id=' + appID,'redirect_uri=' + redirectURI,'scope=' + 'get_user_info,list_album,upload_pic,add_feeds,do_like','response_type=token'];var query = queryParams.join('&');var url = path + query;window.location.href= url;}//在成功授权后回调时location.hash将带有access_token信息，开始获取openidelse{//获取access tokenvar accessToken = window.location.hash.substring(1);var map = toParamMap(accessToken);//记录accessToken$("#accessToken").text(map.access_token);$("#expire").text(map.expires_in);//使用Access Token来获取用户的OpenIDvar path = "https://graph.qq.com/oauth2.0/me?";var queryParams = ['access_token='+map.access_token, 'callback=callback'];var query = queryParams.join('&');var url = path + query;openImplict(url);}</script></body>
</html>

    功能描述
        页面在第一次打开时跳转到QQ登录授权页面；
        授权成功之后回到当前页面通过url参数(hash串)获得accessToken；
        此后可通过jsonp方式获取用户的openid，url如： 
https://graph.qq.com/oauth2.0/me?access_token=YOUR_ACCESS_TOKEN
        获取到用户OpenID，返回包如下(JSONP方式获取)： 
callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} )
         将access_token及openid传到服务端进行处理
 

   3  server端获取用户信息

     接收openid的页面方法 
      /*** 登录结果** @param access_token* @param openid*/public static void login_result(String access_token, String openid) {//调用api获取qq用户信息QQUserInfo user = QQApi.getUserInfo(access_token, openid);//此时若取得user信息，则可以进行保存，并执行用户登录操作....//登录成功后跳转redirect(xxx);}

 

    QQApi的实现   
/*** QQ互联API* * <pre>* 登录流程：* * 1 前端跳转qq授权页面* 2 js获得access_token* 3 通过jsonp方式获得openid* 4 server端根据上传的access_token及openid获取用户信息，如昵称、头像* * 参考文档：* http://wiki.connect.qq.com/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_client-side#Step2.EF.BC.9A.E8.8E.B7.E5.8F.96AccessToken* </pre>* * @author xxx* @createDate 2015年3月10日* */
public class QQApi {public static String appId = "xxx";public static String appSecret = "xxx";public static String baseUrl = "https://graph.qq.com";protected static final String URL_GET_USERINFO = baseUrl+ "/user/get_user_info?access_token=%s&oauth_consumer_key=%s&openid=%s";protected static final long ACCESS_TIMEOUT = 15;protected static final String DEF_APP_TOKEN_EXPIRE = "3h";/*** 获取用户信息* * <pre>* http://wiki.connect.qq.com/get_user_info* * * 调用地址：* https://graph.qq.com/user/get_user_info* 参数*   access_token=*************&*   oauth_consumer_key=12345&*   openid* * 返回结果如下：* {*     "ret": 0,*     "msg": "",*     "is_lost": 0,*     "nickname": "小吞",*     "gender": "女",*     "province": "广东",*     "city": "广州",*     "year": "1993",*     "figureurl": "http://qzapp.qlogo.cn/qzapp/101207268/982C9FEADAF7B242C5069B8F390784BF/30",*     "figureurl_1": "http://qzapp.qlogo.cn/qzapp/101207268/982C9FEADAF7B242C5069B8F390784BF/50",*     "figureurl_2": "http://qzapp.qlogo.cn/qzapp/101207268/982C9FEADAF7B242C5069B8F390784BF/100",*     "figureurl_qq_1": "http://q.qlogo.cn/qqapp/101207268/982C9FEADAF7B242C5069B8F390784BF/40",*     "figureurl_qq_2": "http://q.qlogo.cn/qqapp/101207268/982C9FEADAF7B242C5069B8F390784BF/100",*     "is_yellow_vip": "0",*     "vip": "0",*     "yellow_vip_level": "0",*     "level": "0",*     "is_yellow_year_vip": "0"* }* </pre>* * @param accessToken* @return*/public static QQUserInfo getUserInfo(String accessToken, String openid) {if (StringUtils.isEmpty(accessToken) || StringUtils.isEmpty(openid)) {return null;}String url = String.format(URL_GET_USERINFO, accessToken, appId, openid);String resultString = DefaultHttp.get(url, ACCESS_TIMEOUT, GlobalConstants.UTF_8);Logger.debug("[sso-qq]get　userinfo. use url '%s'", url);QQUserInfo userinfo = JsonUtil.fromJson(resultString, QQUserInfo.class);if (userinfo == null || !userinfo.hasGot()) {Logger.debug("[sso-qq]get userinfo failed, with result of '%s'", resultString);return null;}Logger.debug("[sso-qq]get userinfo success, with result of '%s'", resultString);return userinfo;}

常见问题

 
网页跳转提示 "redirect_uri_mismatch"
        通常是应用配置中的域名与当前开发服务器访问地址不一致导致，参照案例中的本地开发环境准备小节
 
api调用返回错误
        查看返回的ret字段，对于非0值的ret则表示异常结果，可通过以下地址查询错误原因：
        http://wiki.connect.qq.com/%E5%85%AC%E5%85%B1%E8%BF%94%E5%9B%9E%E7%A0%81%E8%AF%B4%E6%98%8E
 
接口调用过于频繁或超过限制
        应用系统可做好access_token的存储，此外对于用户数据(昵称、头像)也做好缓存或持久化，以减少接口的调用频度。

原文地址：http://littleatp.cnblogs.com/p/4374679.html
 
    

http://www.ppmy.cn/news/682616.html

相关文章

网易云音乐app用户个人中心(对比QQ音乐）

网易云音乐app用户个人中心(对比QQ音乐）

打开网易云&#xff0c;寻找用户个人中心 咋一看&#xff0c;顶部居中的三枚按钮没有个人中心&#xff0c;排除法&#xff0c;点来左上角类似设置的图标 发现个人中心入口&#xff0c;一张晶莹剔透的背景墙上有头像&#xff0c;昵称&#xff0c;用户等级的信息&#xff0c;这个…
阅读更多...
微信小程序使用QQ音乐API完整实例

微信小程序使用QQ音乐API完整实例

微信小程序使用QQ音乐API完整实例 一、QQ音乐常用API接口&#xff1a;1.1、音乐搜索接口&#xff1a;1.2、最新音乐排行榜top1001.3. 随机推荐 二、请求数据格式&#xff08;以搜索为例&#xff09;三、播放链接&#xff08;重点&#xff09;3.1、获取歌曲信息3.2 获取token3.3…
阅读更多...
成为腾讯开发者——如何使用QQ开放平台和微信开放平台

成为腾讯开发者——如何使用QQ开放平台和微信开放平台

最近的项目有这样一个需求&#xff0c;需要分享链接到QQ和微信中&#xff0c;这样iOS中应该怎样实现呢。方法也许有很多&#xff0c;但是我选择的是使用第三方API来实现这个功能——ShareSDK。这就需要我们先去申请成为QQ开发者和微信平台开发者。 QQ开发者 &#xff08;1&a…
阅读更多...
音乐平台项目

音乐平台项目

文章目录 项目简介数据库配置与设计设定统一的配置类设置统一的响应类设置统一的Constant类 登录模块登录的设计以及后端代码创建User类创建UserMapper使用postman进行登录接口测试实现加密登录MD5加密BCrypt加密 注册模块UserMapper层UserController层 上传音乐Music类创建Mus…
阅读更多...
网易云音乐/QQ音乐API更新,支持多音质切换/MV获取

网易云音乐/QQ音乐API更新,支持多音质切换/MV获取

自从上一版开源过后到现在音乐接口的调用量已经达到了快100W,但是最近由于网易云的更新,导致部分接口不能使用,最近在工作之余抽出时间把API重写。 本次API版本不再使用PHP,使用Java,相比以前速度更快&#xff08;毕竟我是撸Java的,不会PHP&#xff09;,前期不考虑开源,当API完…
阅读更多...
QQ音乐播放地址api

QQ音乐播放地址api

播放地址 https://api.bzqll.com/music/tencent/url?id002GrJ771EmliH&key579621905&br320请求方式&#xff1a; GET 参数 id: 歌曲id&#xff0c;播放列表可以右键查看 key: 默认值 579621905 br: 码率 默认最大码率 即最高音质 320 返回 302 说明&#xff1a; 30…
阅读更多...
QQ音乐的API

QQ音乐的API

原文地址&#xff1a;QQ音乐的API 作者&#xff1a;子木潇雨 我一直是QQ音乐的用户&#xff0c;最近想做一个应用&#xff0c;想用QQ音乐的API&#xff0c;搜索了很久无果&#xff0c;于是就自己分析QQ音乐的API。 前不久发现QQ音乐 出了网页版的&#xff0c;是Flash的&#xf…
阅读更多...
怎么使用QQ音乐api搭建个人音乐站点

怎么使用QQ音乐api搭建个人音乐站点

怎么使用QQ音乐api搭建个人音乐站点 最近经常有人在oschina上追问怎么用QQ音乐接口的问题。 闲得无聊&#xff0c;重新折腾了一下网页版QQ音乐压缩版源码&#xff0c;整理了一个完整音乐站点搭建的过程。 https://y.qq.com/ 话不多说&#xff0c;主要分三步&#xff0c;直接上…
阅读更多...
最新文章

Copyright @ 2022~2023