前提

  1. 拥有自己的域名和服务器
  2. 域名已备案

完整项目

github太慢了,我放在了码云上面

查看完整项目

教学视频

点击观看

关于第三方登录

简要介绍

第三方登录:用户登录操作不是基于自身建设账号体系,而是基于用户在第三方平台上已有的账号和密码来快速完成登录的过程。 下面我列举了几点第三方登录的优点。

  1. 极大的简化登录注册的流程。
  2. 方便用户快捷登录,降低用户的登录流失率,第三方大厂的用户某种意义上都可以是你用户。传统的登录注册,如果网站较小或者用户不经常使用,可能时间长了,用户就把登录的用户名和密码忘记了。
  3. 第三方登录接入后,应用可直接获取用户昵称、头像、用户ID等信息,方便产品获取用户的基本资料。

第三方登录有哪些

  • 国内比较广泛使用的第三方登录方式为微博、微信、QQ,天翼账号等。
  • 国外广泛使用的登录方式为Facebook,Twitter等。

QQ登录

官方文档

成为开发者

开发者通过以下几个步骤,即可接入互联开放平台: 注册开发者→创建应用→通过审核并获取接口权限

1. 在QQ互联开放平台首页 ,点击右上角的“登录”按钮,使用QQ帐号登录,如下图所示:
重要提示:
开发者QQ号码一旦注册不能变更,建议使用公司公共QQ号码而不是员工私人号码注册,以免遇到员工离职等情况造成不必要的麻烦。


2. 登录成功后会跳转到开发者注册页面,在注册页面按要求提交公司或个人的基本资料。下图所示的是公司注册页面:

3.按要求提交资料后,审核人员会进行审核,通过审核即可成为开发者。

创建应用

网站应用及移动应用接入申请

应用接入前,首先需进行申请,获得对应的appid与appkey,以保证后续流程中可正确对网站与用户进行验证与授权。

开发者注册完成后,点击“应用管理”按钮。
跳转到qq互联管理中心页面,点击创建应用。
选择需要创建的应用类型,我们以网站应用为例:
点击创建网站应用后,按要求完善信息:

  1. 网站回调地址填写规范
  2. 备案信息填写规范


网站信息填写完成,点击“创建应用”后,网站应用创建完成,点击“应用管理”,进入管理中心,在管理中心可以查看到网站获取的appid和appkey,如下图所示:

备注:创建移动应用与网站应用步骤方法一致,在此不赘述。
 

网站信息完善

点击“应用中心”,应用右侧的“查看”,进入应用详情页面。
应用详情页面可点击“修改”来编辑应用“基本信息”和“平台信息”。
点击“应用接口”可查看已获取的接口,使用QQ登录功能。

下载官方Demo

关注我的公众号,后台回复“QQ登录”就可以获得官方Demo。

整合官方Demo

修改qqconnectconfig.properties

引入依赖(以SpringBoot为例)

        <!-- QQ登录依赖包 -->
        <dependency>
            <groupId>net.gplatform</groupId>
            <artifactId>Sdk4J</artifactId>
            <version>2.0</version>
        </dependency>

编写Controller

package com.moti.controller;

import com.qq.connect.QQConnectException;
import com.qq.connect.api.OpenID;
import com.qq.connect.api.qzone.UserInfo;
import com.qq.connect.javabeans.AccessToken;
import com.qq.connect.javabeans.qzone.UserInfoBean;
import com.qq.connect.oauth.Oauth;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Map;

/**
 * @ClassName: LoginController
 * @Description: QQ登录控制器
 * @author: xw
 * @date 2020/2/21 10:54
 * @Version: 1.0
 **/
@Controller
public class LoginController {

    @RequestMapping("/")
    public String login(){
        return "login";
    }
    /**
     * 请求QQ登录
     */
    @RequestMapping("/loginByQQ")
    public void loginByQQ(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("text/html;charset=utf-8");
        try {
            response.sendRedirect(new Oauth().getAuthorizeURL(request));
            System.out.println("请求QQ登录,开始跳转...");
        } catch (QQConnectException | IOException e) {
            e.printStackTrace();
        }
    }
    /**
     * QQ登录回调地址
     *
     * @return
     */
    @RequestMapping("/connection")
    public String connection(HttpServletRequest request, HttpServletResponse response, Map<String,Object> map) {
        try {
            AccessToken accessTokenObj = (new Oauth()).getAccessTokenByRequest(request);
            String accessToken = null, openID = null;
            long tokenExpireIn = 0L;
            if ("".equals(accessTokenObj.getAccessToken())) {
                System.out.println("登录失败:没有获取到响应参数");
                return "accessTokenObj=>" + accessTokenObj + "; accessToken" + accessTokenObj.getAccessToken();
            } else {
                accessToken = accessTokenObj.getAccessToken();
                tokenExpireIn = accessTokenObj.getExpireIn();
                System.out.println("accessToken" + accessToken);
                request.getSession().setAttribute("demo_access_token", accessToken);
                request.getSession().setAttribute("demo_token_expirein", String.valueOf(tokenExpireIn));

                // 利用获取到的accessToken 去获取当前用的openid -------- start
                OpenID openIDObj = new OpenID(accessToken);
                openID = openIDObj.getUserOpenID();

                UserInfo qzoneUserInfo = new UserInfo(accessToken, openID);
                UserInfoBean userInfoBean = qzoneUserInfo.getUserInfo();
                if (userInfoBean.getRet() == 0) {
                    String name = removeNonBmpUnicode(userInfoBean.getNickname());
                    String imgUrl = userInfoBean.getAvatar().getAvatarURL100();
                    map.put("openId",openID);
                    map.put("name",name);
                    map.put("imgUrl",imgUrl);
                } else {
                    System.out.println("很抱歉,我们没能正确获取到您的信息,原因是: " + userInfoBean.getMsg());
                }
            }
        } catch (QQConnectException e) {
            e.printStackTrace();
        }
        return "index";
    }

    /**
     * 处理掉QQ网名中的特殊表情
     * @param str
     * @return
     */
    public String removeNonBmpUnicode(String str) {
        if (str == null) {
            return null;
        }
        str = str.replaceAll("[^\\u0000-\\uFFFF]", "");
        if ("".equals(str)) {
            str = "(* _ *)";
        }
        return str;
    }
}

一定要注意,当QQ网名中包含了表情,那么会导致登录失败。就像上图一样

项目一定要运行在你注册的服务器上面,在本机测试的话不能成功。

最后修改日期:2020-07-12

作者

留言

感谢

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。