分享到 :

放置“QQ登录”按钮_OAuth2.0

本步骤的作用
在网站页面上放置“QQ登录”按钮,并为按钮添加前台代码,实现点击按钮即弹出QQ登录对话框。
本步骤在整个流程中的位置
oauth2.0_guid_2.png

上一步

准备工作_OAuth2.0

1. 下载“QQ登录”按钮图片,并将按钮放置在页面合适的位置

按钮图片下载: 点击这里下载
按照UI规范,将按钮放置在页面合适的位置:点击这里查看

注:移动端不建议使用iframe嵌入。

2. 为“QQ登录”按钮添加前台代码

2.1 效果演示

用户在页面上点击“QQ登录”按钮,将触发QQ登录对话框,效果如下图所示:

2.2 前台代码

为了实现上述效果,应该为“QQ登录”按钮图片添加如下前台代码:

<img src=QQ登录图标文件在服务器上的地址 onclick=按钮点击事件>

2.3 代码示例

1. 写一个函数“toLogin()”,该函数通过调用“index.php”中的qq_login函数来实现将页面跳转到QQ登录页面。
(示例中的oauth/index.php,请参见从SDK下载页面下载PHP SDK,在Connect2.1文件夹下的index.php文件。)

<script>
 function toLogin()
 {
   //以下为按钮点击事件的逻辑。注意这里要重新打开窗口
   //否则后面跳转到QQ登录,授权页面时会直接缩小当前浏览器的窗口,而不是打开新窗口
   var A=window.open("oauth/index.php","TencentLogin",
   "width=450,height=320,menubar=0,scrollbars=1,
   resizable=1,status=1,titlebar=0,toolbar=0,location=1");
 }
</script>

2. 为按钮添加“toLogin()”事件:

 <a href="#" onclick='toLogin()'>
 <img src="img/qq_login.png"></a>

下一步

server-side模式:请参见使用Authorization_Code获取Access_Token

返回顶部