学习笔记—QQ登录对接之网站应用申请

学习笔记—QQ登录对接之网站应用申请

为了使网站接入QQ登录，先要去QQ互联平台申请应用，获取APP_ID与APP_KEY。然而在申请的过程中，总是遇到各种问题。就比如没有在网站首页放置QQ登录图标、点击图标出现跳转错误等问题被驳回申请，网上也缺乏相关的教程，经过本人多次尝试，“意外”成功申请通过，拿到了APP_ID和APP_KEY。下面分享一下个人经验，希望对有需要的人有帮助。

以下步骤都是在你有云服务器，且申请域名备案成功的前提下才能进行，因为QQ应用申请需要填写回调地址，而回调地址是填写备案了的域名。

1.下载QQ登录图片

下载QQ登录图标或者图片 下载地址：视觉素材下载 — QQ互联WIKI 我自己用的下面那个，这个随意，右键保存，改一下后缀名为jpg或者png就行。

2.准备前端项目

前端vue页面部分代码 （写个div 包住img，给图片设置一个点击事件，本人前端不太行）

      <div style="margin-left: 136px">
        <img src="../assets/qq.png" height="80px" width="60px" @click="login()" />
      </div>

事件函数

    login() {
      window.location.href='https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=appid&redirect_uri=callback&state=';
    }

这个函数的意思就是将当前页面地址替换成目标地址，你一点QQ登录图片，触发这个函数，页面就会跳转到目标地址，这个地址其实就是QQ的登录页面地址。注意 单引号内的地址appid和callback好像需要替换，我当时是把QQ提供的一个演示项目的appid和callback填了进去，并进行提交申请，最后就通过了，感兴趣的可以下载演示项目 地址 https://github.com/734407088/qq_connenct_demo appid和callback在演示项目中有，我直接给大家粘到这里，只需要把下面的值替换到上面那个路径中即可。

appid=101490224
callback=http://localhost:3000/home

最后只要你页面上的QQ图标一点击能跳转到QQ登录页面即可，如下图

登录页面

点击后跳转

3.测试跳转

关于怎么把前端部署到云服务器大家应该都知道，这里不做说明。部署到服务器后，最好再测试一下能不能正常访问并跳转，因为审核可能就会因为你的页面无法访问或者无法正常跳转导致申请被驳回。一切没问题后就可以申请了，就申请APPID和APP_KEY而言，不用写任何后端实现逻辑。但如果你要实现qq登录，那肯定还得去看官方文档，并编写后端逻辑。

4.申请应用

4.1注册开发者

进入QQ互联平台 https://connect.qq.com/ ，注册成为开发者，按页面上的提示进行操作即可，好像需要人脸验证，提交审核可能需要一天左右的时间。

之后的操作，由于我的身份证已经注册过，无法继续截图演示，但按着页面提示操作即可。

4.2申请应用

补充： 关于下面网站地址那个，填的是你的前端首页地址，审核人员到时候就是访问那个地址看你前端页面合不合法，符不符合规范，反正你部署的时候，别整太麻烦，就写一个前端登录页面就行。

主要就是以上几步比较重要了，其他的不再一一说明，之后申请后等结果就行，差不多一天审核完成。