CINXE.COM

放置“QQ登录”按钮_OAuth2.0 — QQ互联WIKI

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> <meta http-equiv="Content-Language" content="zh-cn" /> <meta name="robots" content="all" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content="QQ登录是QQ互联的一种接入方式,通过接入QQ登录,用户可以使用QQ账号直接登录接入的站点,QQ登录同时提供API授权,帮助网站主将用户操作同步到QQ空间和朋友网;" /> <meta name="keywords" content="QQ登录、QQ登陆、QQ互联、API、QQ账号、QQ互联Wiki、微云API" /> <meta name="generator" content="wordpress"/> <meta name="author" content="Tencent"/> <meta name="copyright" content="&copy; 1998 - 2013 Tencent"/> <title>放置“QQ登录”按钮_OAuth2.0 &#8212; QQ互联WIKI</title> <script type="text/javascript">var _speedMark = new Date();</script> <link rel="profile" href="https://gmpg.org/xfn/11" /> <link rel="pingback" href="https://wiki.connect.qq.com/xmlrpc.php" /> <link media="all" rel="stylesheet" type="text/css" href="https://connect.qq.com/qconn/site/css/common.css?t=1387868823866"/> <link media="all" rel="stylesheet" type="text/css" href="https://connect.qq.com/qconn/wiki/wikiv2/style.css?v=2-1-2"/> <link rel='dns-prefetch' href='//connect.qq.com' /> <link rel='dns-prefetch' href='//s.w.org' /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.1\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/wiki.connect.qq.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.6"}}; !function(e,a,t){var r,n,o,i,p=a.createElement("canvas"),s=p.getContext&&p.getContext("2d");function c(e,t){var a=String.fromCharCode;s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,e),0,0);var r=p.toDataURL();return s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,t),0,0),r===p.toDataURL()}function l(e){if(!s||!s.fillText)return!1;switch(s.textBaseline="top",s.font="600 32px Arial",e){case"flag":return!c([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])&&(!c([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!c([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]));case"emoji":return!c([55357,56424,8205,55356,57212],[55357,56424,8203,55356,57212])}return!1}function d(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(i=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},o=0;o<i.length;o++)t.supports[i[o]]=l(i[o]),t.supports.everything=t.supports.everything&&t.supports[i[o]],"flag"!==i[o]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[i[o]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(r=t.source||{}).concatemoji?d(r.concatemoji):r.wpemoji&&r.twemoji&&(d(r.twemoji),d(r.wpemoji)))}(window,document,window._wpemojiSettings); </script> <link rel="https://api.w.org/" href="https://wiki.connect.qq.com/wp-json/" /><link rel="alternate" type="application/json" href="https://wiki.connect.qq.com/wp-json/wp/v2/posts/47" /><link rel="alternate" type="application/json+oembed" href="https://wiki.connect.qq.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwiki.connect.qq.com%2F%25e6%2594%25be%25e7%25bd%25aeqq%25e7%2599%25bb%25e5%25bd%2595%25e6%258c%2589%25e9%2592%25ae_oauth2-0" /> <link rel="alternate" type="text/xml+oembed" href="https://wiki.connect.qq.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwiki.connect.qq.com%2F%25e6%2594%25be%25e7%25bd%25aeqq%25e7%2599%25bb%25e5%25bd%2595%25e6%258c%2589%25e9%2592%25ae_oauth2-0&#038;format=xml" /> <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style> <!--[if lt IE 9]> <script src="https://pub.idqqimg.com/qconn/wiki/wikiv2/js/html5.js" type="text/javascript"></script> <![endif]--> </head> <body> <header class="header"> <nav> <a href="https://connect.qq.com" class="logo" id="top" style="background-image:url(https://sola.gtimg.cn/aoi/sola/20210118201807_sNZFi8SENi.png)"></a> <!-- ul class="userInfo" id="userInfo"> <li> <a href="javascript:void(0);" id="login" hidefocus="false">登录</a> <a href="javascript:void(0);" class="subNav" id="subNav"></a> <a href="javascript:void(0);" id="subNav_hover"></a> <ul id="personal_list"> <li><a href="https://connect.qq.com/toc/auth_manager">授权管理</a></li> <li><a id="logout" href="javascript:void(0)">退出</a></li> </ul> </li> </ul> <ul class="navigator"> <li id="nav_index"><a href="https://connect.qq.com" hidefocus="false">首页</a></li> <li id="nav_qqlogin"><a href="https://connect.qq.com/intro/login" hidefocus="false">QQ登录</a></li> <li id="nav_intro"><a href="https://connect.qq.com/intro/wpa" hidefocus="false">功能组件</a></li> <li id="nav_manage"><a href="https://connect.qq.com/manage/login" hidefocus="false">管理中心</a></li> <li class="current"><a href="/" hidefocus="false">文档资料</a></li> <li><a href="https://bbs.open.qq.com/forum.php?gid=110" hidefocus="false" target="_blank">论坛</a></li> <li><a href="/faq" hidefocus="false">FAQ</a></li> </ul --> </nav> </header> <div class="page"> <div class="page_main"> <aside class="page_sidebar"> <nav class="menu_sidebar_container"><ul id="menu_sidebar" class="menu_sidebar"><li><h3><a class="item_level1" data-title="重要更新" hidefocus="true" href="https://wiki.connect.qq.com/"><span class="icon dot">·</span><span class="icon arrow">></span>重要更新</a></h3></li> <li><h3><a class="item_level1" data-title="接入指南" hidefocus="true" href="javascript:;" isCategory="1"><span class="icon dot">·</span><span class="icon arrow">></span>接入指南</a></h3> <ul class="sub_menu sub_menu_level1"> <li><a data-title="成为开发者" hidefocus="true" title="成为开发者" href="https://wiki.connect.qq.com/%e6%88%90%e4%b8%ba%e5%bc%80%e5%8f%91%e8%80%85">成为开发者</a></li> <li><a data-title="创建应用" hidefocus="true" title="创建应用" href="https://wiki.connect.qq.com/__trashed-2">创建应用</a></li> <li><a data-title="Universal Links适配" hidefocus="true" title="Universal Links适配" href="https://wiki.connect.qq.com/universal-links%e9%80%82%e9%85%8dfaq">Universal Links适配</a></li> <li><h4><a data-title="SDK及资源下载" hidefocus="true" href="javascript:;" isCategory="1"><span class="icon triangle"></span>SDK及资源下载</a></h4> <ul class="sub_menu"> <li><a data-title="SDK下载" hidefocus="true" title="SDK下载" href="https://wiki.connect.qq.com/sdk%e4%b8%8b%e8%bd%bd">SDK下载</a></li> <li><a data-title="视觉素材下载" hidefocus="true" title="视觉素材下载" href="https://wiki.connect.qq.com/%e8%a7%86%e8%a7%89%e7%b4%a0%e6%9d%90%e4%b8%8b%e8%bd%bd">视觉素材下载</a></li> </ul> </li> <li><h4><a data-title="OAuth协议介绍" hidefocus="true" title="OAuth协议介绍" href="javascript:;" isCategory="1"><span class="icon triangle"></span>OAuth协议介绍</a></h4> <ul class="sub_menu"> <li><a data-title="OAuth2.0简介" hidefocus="true" title="OAuth2.0简介" href="https://wiki.connect.qq.com/oauth2-0%e7%ae%80%e4%bb%8b">OAuth2.0简介</a></li> <li><h4><a data-title="OAuth2.0开发指引" hidefocus="true" title="OAuth2.0开发指引" href="javascript:;" isCategory="1"><span class="icon triangle"></span>OAuth2.0开发指引</a></h4> <ul class="sub_menu"> <li><a data-title="开发攻略_Server-side" hidefocus="true" title="开发攻略_Server-side" href="https://wiki.connect.qq.com/%e5%bc%80%e5%8f%91%e6%94%bb%e7%95%a5_server-side">开发攻略_Server-side</a></li> <li><a data-title="开发攻略_Client-side" hidefocus="true" title="开发攻略_Client-side" href="https://wiki.connect.qq.com/%e5%bc%80%e5%8f%91%e6%94%bb%e7%95%a5_client-side">开发攻略_Client-side</a></li> </ul> </li> <li><h4><a data-title="OAuth2.0升级指引" hidefocus="true" title="OAuth2.0升级指引" href="javascript:;" isCategory="1"><span class="icon triangle"></span>OAuth2.0升级指引</a></h4> <ul class="sub_menu"> <li><a data-title="OAuth2.0常见问题" hidefocus="true" title="OAuth2.0常见问题" href="https://wiki.connect.qq.com/%e5%8d%87%e7%ba%a7oauth2-0%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98">OAuth2.0常见问题</a></li> </ul> </li> </ul> </li> <li><h4><a data-title="API文档" hidefocus="true" title="API文档" href="javascript:;" isCategory="1"><span class="icon triangle"></span>API文档</a></h4> <ul class="sub_menu"> <li><a data-title="API列表" hidefocus="true" title="API列表" href="https://wiki.connect.qq.com/api%e5%88%97%e8%a1%a8">API列表</a></li> <li><a data-title="API调试工具" target="_blank" hidefocus="true" title="API调试工具" href="http://connect.qq.com/sdk/webtools/index.html">API调试工具</a></li> <li><a data-title="返回码说明" hidefocus="true" title="返回码说明" href="https://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">返回码说明</a></li> </ul> </li> </ul> </li> <li><h3><a class="item_level1 item_level1_current" data-title="网站应用" hidefocus="true" href="javascript:;" isCategory="1"><span class="icon dot">·</span><span class="icon arrow">></span>网站应用</a></h3> <ul class="sub_menu menu_open sub_menu_level1"> <li><a data-title="网站应用接入概述" hidefocus="true" title="网站应用接入概述" href="https://wiki.connect.qq.com/%e7%bd%91%e7%ab%99%e5%ba%94%e7%94%a8%e6%8e%a5%e5%85%a5%e6%b5%81%e7%a8%8b">网站应用接入概述</a></li> <li><h4><a class="item_current item_open" data-title="网站开发流程" hidefocus="true" title="OAuth2.0开发文档" href="javascript:;" isCategory="1"><span class="icon triangle"></span>网站开发流程</a></h4> <ul class="sub_menu menu_open"> <li><a data-title="准备工作_OAuth2.0" hidefocus="true" title="准备工作_OAuth2.0" href="https://wiki.connect.qq.com/%e5%87%86%e5%a4%87%e5%b7%a5%e4%bd%9c_oauth2-0">准备工作_OAuth2.0</a></li> <li><a class="item_current item_open" data-title="放置“QQ登录”按钮" hidefocus="true" title="放置“QQ登录”按钮" href="https://wiki.connect.qq.com/%e6%94%be%e7%bd%aeqq%e7%99%bb%e5%bd%95%e6%8c%89%e9%92%ae_oauth2-0">放置“QQ登录”按钮</a></li> <li><a data-title="获取Access_Token" hidefocus="true" title="获取Access_Token" href="https://wiki.connect.qq.com/%e4%bd%bf%e7%94%a8authorization_code%e8%8e%b7%e5%8f%96access_token">获取Access_Token</a></li> <li><a data-title="获取用户OpenID" hidefocus="true" title="获取用户OpenID" href="https://wiki.connect.qq.com/%e8%8e%b7%e5%8f%96%e7%94%a8%e6%88%b7openid_oauth2-0">获取用户OpenID</a></li> <li><a data-title="OpenAPI调用说明" hidefocus="true" title="OpenAPI调用说明" href="https://wiki.connect.qq.com/openapi%e8%b0%83%e7%94%a8%e8%af%b4%e6%98%8e_oauth2-0">OpenAPI调用说明</a></li> </ul> </li> </ul> </li> <li><h3><a class="item_level1" data-title="移动应用" hidefocus="true" href="javascript:;" isCategory="1"><span class="icon dot">·</span><span class="icon arrow">></span>移动应用</a></h3> <ul class="sub_menu sub_menu_level1"> <li><h4><a data-title="Android应用" hidefocus="true" title="" href="javascript:;" isCategory="1"><span class="icon triangle"></span>Android应用</a></h4> <ul class="sub_menu"> <li><a data-title="Android_SDK环境搭建" hidefocus="true" title="Android_SDK环境搭建" href="https://wiki.connect.qq.com/qq%e7%99%bb%e5%bd%95">Android_SDK环境搭建</a></li> <li><a data-title="Android_SDK功能列表" hidefocus="true" title="Android_SDK功能列表" href="https://wiki.connect.qq.com/android_sdk%e5%8a%9f%e8%83%bd%e5%88%97%e8%a1%a8">Android_SDK功能列表</a></li> <li><a data-title="Android_SDK常见问题" hidefocus="true" title="Android_SDK常见问题" href="https://wiki.connect.qq.com/android%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98">Android_SDK常见问题</a></li> <li><a data-title="Android_SDK历史变更" hidefocus="true" title="Android_SDK历史变更" href="https://wiki.connect.qq.com/android_sdk%e5%8e%86%e5%8f%b2%e5%8f%98%e6%9b%b4">Android_SDK历史变更</a></li> </ul> </li> <li><h4><a data-title="iOS应用" hidefocus="true" href="javascript:;" isCategory="1"><span class="icon triangle"></span>iOS应用</a></h4> <ul class="sub_menu"> <li><a data-title="iOS_SDK环境搭建" hidefocus="true" title="iOS_SDK环境搭建" href="https://wiki.connect.qq.com/ios_sdk%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba">iOS_SDK环境搭建</a></li> <li><a data-title="iOS_SDK功能列表" hidefocus="true" title="iOS_SDK功能列表" href="https://wiki.connect.qq.com/ios_sdk%e5%8a%9f%e8%83%bd%e5%88%97%e8%a1%a8">iOS_SDK功能列表</a></li> <li><a data-title="iOS_SDK接口说明" hidefocus="true" title="iOS_SDK接口说明" href="https://wiki.connect.qq.com/ios_sdk%e5%a4%b4%e6%96%87%e4%bb%b6%e6%89%80%e6%9c%89api%e6%8e%a5%e5%8f%a3%e8%af%b4%e6%98%8e">iOS_SDK接口说明</a></li> <li><a data-title="iOS_SDK历史变更" hidefocus="true" title="iOS_SDK历史变更" href="https://wiki.connect.qq.com/ios_sdk%e5%8e%86%e5%8f%b2%e5%8f%98%e6%9b%b4">iOS_SDK历史变更</a></li> </ul> </li> <li><h4><a data-title="HarmonyOS应用" hidefocus="true" href="javascript:;" isCategory="1"><span class="icon triangle"></span>HarmonyOS应用</a></h4> <ul class="sub_menu"> <li><a data-title="HarmonyOS_SDK环境搭建" hidefocus="true" title="HarmonyOS_SDK环境搭建" href="https://wiki.connect.qq.com/harmonyos_sdk%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba">HarmonyOS_SDK环境搭建</a></li> <li><a data-title="HarmonyOS_SDK接口说明" hidefocus="true" title="HarmonyOS_SDK接口说明" href="https://wiki.connect.qq.com/harmonyos_sdk%e6%8e%a5%e5%8f%a3%e8%af%b4%e6%98%8e">HarmonyOS_SDK接口说明</a></li> <li><a data-title="HarmonyOS_SDK历史变更" hidefocus="true" title="HarmonyOS_SDK历史变更" href="https://wiki.connect.qq.com/harmonyos_sdk%e5%8e%86%e5%8f%b2%e5%8f%98%e6%9b%b4">HarmonyOS_SDK历史变更</a></li> <li><a data-title="HarmonyOS_SDK常见问题" hidefocus="true" title="HarmonyOS_SDK常见问题" href="https://wiki.connect.qq.com/harmonyos_sdk%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98">HarmonyOS_SDK常见问题</a></li> </ul> </li> </ul> </li> <li><h3><a class="item_level1" data-title="问题&amp;解答" hidefocus="true" href="javascript:;" isCategory="1"><span class="icon dot">·</span><span class="icon arrow">></span>问题&amp;解答</a></h3> <ul class="sub_menu sub_menu_level1"> <li><a data-title="概念和术语" hidefocus="true" title="概念和术语" href="https://wiki.connect.qq.com/%e6%a6%82%e5%bf%b5%e5%92%8c%e6%9c%af%e8%af%ad">概念和术语</a></li> <li><a data-title="申请注册相关" hidefocus="true" title="申请注册相关" href="https://wiki.connect.qq.com/%e5%b8%b8%e8%a7%84%e9%97%ae%e9%a2%98-20170322">申请注册相关</a></li> <li><a data-title="开发接入相关" hidefocus="true" title="开发接入相关" href="https://wiki.connect.qq.com/%e5%bc%80%e5%8f%91%e8%81%94%e8%b0%83%e7%9b%b8%e5%85%b3%e9%97%ae%e9%a2%98">开发接入相关</a></li> <li><a data-title="回调校验相关" hidefocus="true" title="回调校验相关" href="https://wiki.connect.qq.com/%e5%9b%9e%e8%b0%83%e5%9c%b0%e5%9d%80%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98%e5%8f%8a%e4%bf%ae%e6%94%b9%e6%96%b9%e6%b3%95">回调校验相关</a></li> <li><a data-title="常见问题" hidefocus="true" title="常见问题" href="https://wiki.connect.qq.com/%e7%89%b9%e6%ae%8a%e9%97%ae%e9%a2%98-top10">常见问题</a></li> <li><a data-title="联系我们" hidefocus="true" title="联系我们" href="https://wiki.connect.qq.com/%e5%bc%80%e5%8f%91%e8%80%85%e5%8f%8d%e9%a6%88">联系我们</a></li> </ul> </li> <li><h3><a class="item_level1" data-title="政策与规范" hidefocus="true" title="政策与规范" href="javascript:;" isCategory="1"><span class="icon dot">·</span><span class="icon arrow">></span>政策与规范</a></h3> <ul class="sub_menu sub_menu_level1"> <li><a data-title="QQ互联SDK隐私保护声明" hidefocus="true" title="QQ互联SDK隐私保护声明" href="https://wiki.connect.qq.com/qq%e4%ba%92%e8%81%94sdk%e9%9a%90%e7%a7%81%e4%bf%9d%e6%8a%a4%e5%a3%b0%e6%98%8e">QQ互联SDK隐私保护声明</a></li> <li><a data-title="应用审核规范" hidefocus="true" title="应用审核规范" href="https://wiki.connect.qq.com/%e7%bd%91%e7%ab%99%e5%ae%a1%e6%a0%b8%e8%a7%84%e8%8c%83">应用审核规范</a></li> <li><a data-title="网站前端页面规范" hidefocus="true" title="网站前端页面规范" href="https://wiki.connect.qq.com/%e7%a7%bb%e5%8a%a8%e5%ba%94%e7%94%a8%e6%8e%a5%e5%85%a5%e6%b5%81%e7%a8%8b%ef%bc%88%e6%94%b9%ef%bc%89test">网站前端页面规范</a></li> <li><a data-title="开发者协议" hidefocus="true" title="开发者协议" href="https://wiki.connect.qq.com/%e5%bc%80%e5%8f%91%e8%80%85%e5%8d%8f%e8%ae%ae">开发者协议</a></li> </ul> </li> </ul></nav> </aside> <div class="page_content"> <form role="search" method="get" id="searchform" action="https://wiki.connect.qq.com/" > <div class="search-tool"> <input type="text" value="" name="s" id="s"/> <input type="submit" id="searchsubmit" value="搜索" class="btn" /> </div> </form> <div id="share"> <span>分享到 : </span> <a class="qcShareQQDiv" href="###" target="_blank" hidefocus="true" title="分享到QQ" style="background-image: url(https://sola.gtimg.cn/aoi/sola/20210118201807_hzF9zYwEBj.png);background-position: 0;"></a> <!-- <a class="qzOpenerDiv" href="###" target="_blank" hidefocus="true" title="分享到Qzone"></a> --> </div> <div class="page_content_inner wrapper"> <div id="post-47" class="post"> <h1 class="post_title">放置“QQ登录”按钮_OAuth2.0</h1> <div class="wp-editor"> <p><b>本步骤的作用</b>:<br>在网站页面上放置“QQ登录”按钮,并为按钮添加前台代码,实现点击按钮即弹出QQ登录对话框。<br><b>本步骤在整个流程中的位置</b>:<br><img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/oauth2.0_guid_2.png" alt="oauth2.0_guid_2.png"></p> <h2><span class="mw-headline">上一步</span></h2> <p><a title="准备工作_OAuth2.0" href="https://wiki.connect.qq.com/%e5%87%86%e5%a4%87%e5%b7%a5%e4%bd%9c_oauth2-0">准备工作_OAuth2.0</a></p> <h2><span class="mw-headline">1. 下载“QQ登录”按钮图片,并将按钮放置在页面合适的位置</span></h2> <p>按钮图片下载: <a title="按钮图片" href="https://wiki.connect.qq.com/%e8%a7%86%e8%a7%89%e7%b4%a0%e6%9d%90%e4%b8%8b%e8%bd%bd">点击这里下载</a> 。<br>按照UI规范,将按钮放置在页面合适的位置:<a title="网站前端页面规范" href="https://wiki.connect.qq.com/%e7%a7%bb%e5%8a%a8%e5%ba%94%e7%94%a8%e6%8e%a5%e5%85%a5%e6%b5%81%e7%a8%8b%ef%bc%88%e6%94%b9%ef%bc%89test">点击这里查看</a>。</p> <p><span style="color: red;">注:移动端不建议使用iframe嵌入。</span> </p> <h2><span class="mw-headline">2. 为“QQ登录”按钮添加前台代码</span></h2> <h3><span class="mw-headline">2.1 效果演示</span></h3> <p>用户在页面上点击“QQ登录”按钮,将触发QQ登录对话框,效果如下图所示:<br><img loading="lazy" class="alignnone size-full wp-image-5312" src="https://wiki.connect.qq.com/wp-content/uploads/2017/02/网站接入概述3.png" alt="" width="679" height="390" srcset="https://wiki.connect.qq.com/wp-content/uploads/2017/02/网站接入概述3.png 679w, https://wiki.connect.qq.com/wp-content/uploads/2017/02/网站接入概述3-300x172.png 300w" sizes="(max-width: 679px) 100vw, 679px" /></p> <h3><span class="mw-headline">2.2 前台代码</span></h3> <p>为了实现上述效果,应该为“QQ登录”按钮图片添加如下前台代码:</p><div class="code"> <pre class="lang:js decode:true">&lt;img src=QQ登录图标文件在服务器上的地址 onclick=按钮点击事件&gt;</pre></div> <h3>2.3 代码示例</h3> <p>1. 写一个函数“toLogin()”,该函数通过调用“index.php”中的qq_login函数来实现将页面跳转到QQ登录页面。<br>(示例中的oauth/index.php,请参见从<a title="SDK下载" href="https://wiki.connect.qq.com/sdk%e4%b8%8b%e8%bd%bd">SDK下载</a>页面下载PHP SDK,在Connect2.1文件夹下的index.php文件。)<br></p><div class="code"> <pre class="lang:js decode:true">&lt;script&gt; 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"); } &lt;/script&gt;</pre></div> <p>2. 为按钮添加“toLogin()”事件:</p><div class="code"> <pre class="lang:js decode:true"> &lt;a href="#" onclick='toLogin()'&gt; &lt;img src="img/qq_login.png"&gt;&lt;/a&gt;</pre></div> <h2><span class="mw-headline">下一步</span></h2> <p>server-side模式:请参见<a title="使用Authorization_Code获取Access_Token" href="https://wiki.connect.qq.com/%e4%bd%bf%e7%94%a8authorization_code%e8%8e%b7%e5%8f%96access_token">使用Authorization_Code获取Access_Token </a></p> </div> </div> <div class="comment"> <!-- <div class="comment_process"> <h4 class="comment_title">欢迎对我们文档做出评价:</h4> <div class="comment_main"> <div id="commentTextareaWrap"> <textarea id="commentTextarea"></textarea> <span id="comment_msg">感谢您留下更多的建议反馈…(限500字以内)</span> </div> <div id="comment_login"> <div class="inner"><a href="javascript:void(0);" id="comment_login_btn" class="btn"></a>您还没有登录,</div> </div> </div> <div class="comment_footer"> <a href="javascript:void(0);" class="btn" id="comment_submit">提交</a> <span id="comment_tip"></span> </div> </div> <div id="comment_suc"> <p class="comment_suc_title">提交成功!</p> <p>感谢您的批评与建议,我们将针对性的进行优化,为您提供更好的服务。</p> <p>QQ互联与您一同成长!</p> </div> --> </div> </div> </div> </div> </div> <!--页脚部分--> <footer> <!--页脚链接--> <section class="links"> <!-- <a href="http://connect.qq.com/about">联系我们</a> --> <a href="http://open.qq.com/">开放平台</a> <a href="http://user.qzone.qq.com/1240081547">认证空间</a> <!-- <a href="http://e.t.qq.com/QQConnect">官方微博</a> --> <!-- <a href="http://b.qq.com/webc.htm?new=0&sid=800030681&eid=2188z8p8p8p8P8p8x8z8q&o=opensns.qq.com&q=7" target="_blank">在线客服</a> --> </section> <!--版权声明--> <section class="copyright"> Copyright &copy; 1998 - <script>document.write(new Date().getFullYear());</script> Tencent. <a href="https://www.tencent.com/en-us/le/copyrightstatement.shtml" target="_blank" class="c_tx2">All Rights Reserved.</a><br /> 腾讯公司 版权所有 </section> </footer> <!-- 回到顶部 --> <a href="#" class="totop" id="totop"> <i class="icon"></i> <span>返回顶部</span> </a> <link rel='stylesheet' id='wp-block-library-css' href='https://wiki.connect.qq.com/wp-includes/css/dist/block-library/style.min.css?ver=5.6' type='text/css' media='all' /> <script type='text/javascript' src='https://connect.qq.com/lib/jquery/1.7.2/jquery.min.js?ver=1.7.2' id='jquery-js'></script> <script type='text/javascript' src='https://wiki.connect.qq.com/wp-includes/js/wp-embed.min.js?ver=5.6' id='wp-embed-js'></script> <script type="text/javascript" src="https://connect.qq.com/qconn/wiki/wikiv2/js/all.js?v=2-1-2"></script> </html>

Pages: 1 2 3 4 5 6 7 8 9 10