-
2023-11-29
-
2023-11-29
-
2023-11-27
-
2023-11-27
-
2023-11-27
qq注册网页
更新时间：2010-03-04 来源：a型血 点击：
【www.naimujj.com--a型血】
qq注册网页(一)
如何在自己的网站上实现QQ授权登录？
如何在自己的网站上实现QQ授权登录？
最近在实现QQ授权登录，现将我的实现过程以及我的理解整理如下。以下所述如有不对之处，请指正。
官方提供的SDK有：JS，PHP，Java。我的网站使用Scala+Play搭建的，所以只能用JS SDk。
AppID：你的应用(网站)的ID。
AppKey：对你的应用的验证。
Redirect_uri：用户确认授权后的回调地址。(需自己设置，有防止别人盗用你的身份获取授权用户信息的作用)
OpenID：用户身份的唯一标识。建议保存在本地并与本地创建的uid绑定，以便用户下次登录时可对应到其之前的身份信息，不需要重新授权，使用户体验一致。(获取不到用户的QQ号)
AccessToken：表示当前用户在此网站/应用的登录状态与授权信息，建议保存在本地。(相当于token，令牌) Scope：你要获取的信息。
2.准备
注册QQ互联开发者身份
需要去腾讯QQ互联注册：
准备好网站
网站要基本开发完成。网站域名，Logo等都有。
创建应用
在QQ互联管理中心创建应用。
上面的信息，创建好了之后随时可以更改。
网站验证
上图中的网站地址后面的验证，我选择的是在自己网站首页HTML代码的HEAD标签中添加： <meta property="qc:admins" content="你的验证信息" />
回调地址可以自己设置一个。我网站首页是
其他的按需填写。
创建了应用可获得AppID与AppKey。
3.部署测试【qq注册网页】
添加登录入口
引入JS SDK文件：
在登录页面<head></head>中引入： <script type="text/javascript"
src="
s"
data-appid="APPID"
data-redirecturi="REDIRECTURI" charset="utf-8"> </script>
将APPID换成你自己的APPID，REDIRECTURI换成你自己设置的回调地址。 放置QQ图标(下面有素材地址)，设置图标超链接地址：
<a
href="
play=pc&response_type=token&client_id=xxxxxxx&redirect_uri=
xx.com&scope=get_user_info">【qq注册网页】
<img src="/assets/images/Connect_logo_1.png" alt="QQ授权登录
QQ授权登录开发 QQ授权登录管理"> 将client_id换成你的AppID，redirect_uri换成你的回调地址。 如果你要获取其他信息或者调用其它接口，请将scope改成你需要的API名或者直接改成 all 。(API列表可查看
我的登录入口样例：
官方资料：
素材与放置规范 或者这个
官方提供的登录按钮代码，可直接将代码贴到你想要放置入口的位置就行： <span id="qqLoginBtn"></span>
<script type="text/javascript">
QC.Login({【qq注册网页】
btnId:"qqLoginBtn" //插入按钮的节点id【qq注册网页】
});
</script>
设置回调页面 1. 同样需要引入JS SDK文件，参照上面。
2. 用JS SDK协助调用OpenAPI的get_user_info方法，获取用户头像、用户
名等基础信息。
我的回调页面代码如下：
<html>【qq注册网页】
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> QQConnect JSDK - redirectURI </title>
<script
src="/assets/javascripts/jquery.min.js"></script>
<script type="text/javascript"
src="data-appid="xxxxxxx" data-redirecturi="
charset="utf-8"></script>
<style type="text/css">
html, body{font-size:14px; line-height:180%;} </style>
</head> <body onload="getInfo()">
<div> <h3>数据传输中，请稍后...</h3>
</div>
</body>
</html>
<script type="text/javascript">
function getInfo() {
if(QC.Login.check()){
QC.api("get_user_info")
.success(function(s){//成功回调
QC.Login.getMe(function(openId, accessToken){
$.post('/你的后台处理Action',{name:s.data.nickname,openid:openId,otype:1,token:accessToken},function(data,status){
if(status=="success"){
alert(s.data.nickname+"恭喜你,登录成功!");
location.href = "/";
}else{
alert("获取用户信息成功！登录失败！");
location.href = "/blog/to/login";
}