JAVA-网站应用从零接入QQ 第三方登录

一时失言乱红尘 2022-01-28 08:15 302阅读 0赞

### JAVA-网站应用从零接入QQ 第三方登录 ###

整理一遍接入 QQ 登录的流程吧，整个流程是比较复杂的，难的不会，会的不难。如果本身基础比较弱也没问题，多看几遍官方文档就行了。

其实接入 GitHub 登录是最省心的，有兴趣可以试一下。微博登录页稍微比 QQ 登录简单。微信登录需要 300 大洋，先放一放。。

#### （一）首先弄清楚几个问题： ####

**（1）需要域名和备案吗？**

需要域名，且需要进行备案（备案一般还需要有云服务器），域名不贵，备案相对麻烦。

**（2）我没有上线可以不用云服务器，本地用 [http://localhost:8080/][http_localhost_8080] 调试吗？**

可以，通过后，回调地址可以随便更改，不需要再次审核，改成类似：

http://localhost:8080/自定义路径

**（3）审核通过的必要条件是哪些？**

*  网站名称要和备案的名称一致
 *  备案号要按照格式写

不然肯定通过不了。可以自己先到：[http://www.beianbeian.com/][http_www.beianbeian.com] 网站进行查询测试

**（4）那用 Java 的话，可以用 Springboot 吗？**

当然可以，我就是，这个不需要任何框架支持，只需要一个工具类 HttpUtil 应该大多数，都用过，我下面也会给。

#### （二）必要步骤 - 开发者认证，创建应用： ####

（1）先在 QQ 互联 [https://connect.qq.com/manage.html\#/][https_connect.qq.com_manage.html] 进行个人开发者认证，并审核

（2）创建【网站应用】，填写正确信息，获得对应的 appid 与 appkey，并审核  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2][]  
（3）查看官网文档 [http://wiki.connect.qq.com/][http_wiki.connect.qq.com] （自学推荐3遍，本文也会介绍很多，本文就够）  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4][]

#### （三）前端 QQ 登录入口 ####

新建 login.html 一行就够了

（提示：Springboot 的静态资源放在 resources/static 下可以通过路径访问）

这里是把所有请求都交给后端去处理，当然也可以在前端处理，大多数倾向让和后端来做

**login.html 源代码：**

#### （四）后端处理逻辑介绍 ####

（1）第一次请求：前端向后端首请求，我需要 QQ 登录

> 前端请求地址：account/qq/login  
> 前端请求类型：get  
> 前端请求参数：无  
> 前端请求意思：我需要 QQ 登录

到了后端

> 后端：收到了，给你重定向  
> 后端重定向地址：[https://graph.qq.com/oauth2.0/authorize][https_graph.qq.com_oauth2.0_authorize]  
> 重定向参数：  
> response\_type=code（固定为：code）  
> client\_id=123456（APPID）  
> redirect\_uri=http://www.java997.com（这里地址要和创建应用回调地址一模一样）  
> state=（随意字符串）

然后到了这个界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5][]

（2）上面页面，用户登录后，跳转到回调地址，并携带参数

> 回调参数：  
> state：（原样返回）  
> code：（authorization\_code 授权码）

（3）然后我们使用 HttpUtil 发送 Get 请求，即通过 Authorization Code 获取 AccessToken：

> 请求地址：[https://graph.qq.com/oauth2.0/token][https_graph.qq.com_oauth2.0_token]  
> 请求参数：  
> grant\_type=authorization\_code（固定）  
> client\_id=123456（APPID）  
> client\_secret=（应用密钥）  
> code=（返回的授权码）  
> redirect\_uri=（重定向地址，需要和上面的回调地址一样）

返回的 AccessToken，类型：

> access\_token=（授权令牌，Access\_Token）  
> expires\_in=（该 access token 的有效期，单位为秒）  
> refresh\_token=（在授权自动续期步骤中，获取新的 Access\_Token 时需要提供的参数）

（4）然后通过 AccessToken 获取 OpenId

> openid 是此网站上唯一对应用户身份的标识, 网站可将此 ID 进行存储便于用户下次登录时辨识其身份, 或将其与用户在网站上的原有账号进行绑定  
> 请求地址：[https://graph.qq.com/oauth2.0/me][https_graph.qq.com_oauth2.0_me]  
> 请求类型：get  
> 请求参数：  
> access\_token=（授权令牌，Access\_Token）

#### （五）后端处理具体实现 ####

（1）第一次请求登录：

/** * Step1：获取 Authorization Code * * @return java.lang.String 重定向 * @author java997.com */
    @RequestMapping(value = "/account/qq/login", method = RequestMethod.GET)
    public String qqLogin() { 
         String qqState = "stateadfhasdhgi";
         return "redirect:https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=******&redirect_uri=******&state=******";
    }

（2）回调后的操作

/** * 第一步的回调地址, 即回调之后就重定向，请求 AccessToken * * @param code 授权码 * @param state * @return java.lang.String OpenId * @author java997.com */
        @RequestMapping(value = "/account/qq/callback", method = RequestMethod.GET)
        public String qqCallback(String code, String state) { 
    
            // Step2：通过 Authorization Code获取 AccessToken
            String accessTokenResult = HttpUtil.sendGet("https://graph.qq.com/oauth2.0/token", "grant_type=authorization_code&client_id=******&client_secret=******&code=" + code + "&redirect_uri=******");
    
            // 获取到的 access token 具有3个月有效期，用户再次登录时自动刷新
            System.out.println("==>Get AccessToken Response Result:" + accessTokenResult);
    
            /** * 以 & 为分割字符分割 result */
            String[] resultList = accessTokenResult.split("&");
            List<String> params = new ArrayList<>();
    
            // paramMap 是分割后得到的参数对, 比说 access_token=ad5f4as6gfads4as98fg
            for (String paramMap : resultList) { 
                // 再以 = 为分割字符分割, 并加到 params 中
                params.add(paramMap.split("=")[1]);
            }
    
            // 此时 params.get(0) 为 access_token 值; params.get(1) 为 expires_in 值; params.get(2) 为 refresh_token 值
            // Step3：使用 Access Token 来获取用户的 OpenID
            String openIdResult = HttpUtil.sendGet("https://graph.qq.com/oauth2.0/me", "access_token=" + params.get(0));
    
            System.out.println("==>Get OpenId Result:"+openIdResult);
    
            //截取到 openid 的值: 用 " 截取，第 7 个值是 openId
            String[] openId = openIdResult.split("\"");
            System.out.println("openId[7]:"+openId[7]);
    
            return openId[7];
        }

#### （六）工具类 ####

HttpUtil.java 源代码：

package com.xiaopengwei.account.util;
    
    
    import java.io.BufferedReader;
    import java.io.IOException;
    import java.io.InputStreamReader;
    import java.io.OutputStream;
    import java.net.URL;
    import java.net.URLConnection;
    import java.util.Map;
    
    import java.io.PrintWriter;
    import java.util.List;
    
    /** * <p> * Http 请求工具类 * * @author java997.com * @since 2019-05-25 */
    public class HttpUtil { 
    
        /** * 向指定 URL 发送 GET 方法的请求 * * @param url 发送请求的 URL * @param param 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。 * @return URL 所代表远程资源的响应结果 */
        public static String sendGet(String url, String param) { 
            String result = "";
            BufferedReader in = null;
            try { 
                String urlNameString = url + "?" + param;
                URL realUrl = new URL(urlNameString);
                // 打开和 URL 之间的连接
                URLConnection connection = realUrl.openConnection();
                // 设置通用的请求属性
                connection.setRequestProperty("accept", "*/*");
                connection.setRequestProperty("Content-Type", "application/json;charset=utf-8");
                connection.setRequestProperty("connection", "Keep-Alive");
                connection.setRequestProperty("user-agent",
                        "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
                // 建立实际的连接
                connection.connect();
                // 获取所有响应头字段
                Map<String, List<String>> map = connection.getHeaderFields();
                // 遍历所有的响应头字段
                for (String key : map.keySet()) { 
                    System.out.println(key + "--->" + map.get(key));
                }
                // 定义 BufferedReader 输入流来读取 URL 的响应
                in = new BufferedReader(new InputStreamReader(
                        connection.getInputStream()));
                String line;
                while ((line = in.readLine()) != null) { 
                    result += line;
                }
            } catch (Exception e) { 
                System.out.println("发送 GET 请求出现异常！" + e);
                //  logger.error("连接出错",e);
            }
    
            // 使用 finally 块来关闭输入流
            finally { 
                try { 
                    if (in != null) { 
                        in.close();
                    }
                } catch (Exception e2) { 
                    // logger.error("连接出错",e2);
                }
            }
            return result;
        }
    
        /** * 向指定 URL 发送 POST 方法的请求 * * @param url 发送请求的 URL * @param param 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。 * @return 所代表远程资源的响应结果 */
        public static String sendPost(String url, String param) { 
            PrintWriter out = null;
            BufferedReader in = null;
            String result = "";
            try { 
                URL realUrl = new URL(url);
                // 打开和URL之间的连接
                URLConnection conn = realUrl.openConnection();
                // 设置通用的请求属性
                conn.setRequestProperty("accept", "*/*");
                conn.setRequestProperty("Content-Type", "application/json;charset=utf-8");
                conn.setRequestProperty("connection", "Keep-Alive");
                conn.setRequestProperty("user-agent",
                        "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
                // 发送POST请求必须设置如下两行
                conn.setDoOutput(true);
                conn.setDoInput(true);
                // 获取URLConnection对象对应的输出流
                OutputStream outputStream = conn.getOutputStream();
                String aa = new String(param.getBytes("UTF8"),"UTF8");
                System.out.println("=========== "+aa);
                out = new PrintWriter(outputStream);
                // 发送请求参数
                out.print(aa);
                // flush输出流的缓冲
                out.flush();
                // 定义BufferedReader输入流来读取URL的响应
                in = new BufferedReader(
                        new InputStreamReader(conn.getInputStream()));
                String line;
                while ((line = in.readLine()) != null) { 
                    result += line;
                }
            } catch (Exception e) { 
                System.out.println("发送 POST 请求出现异常！"+e);
                //logger.error("连接出错",e);
            }
            //使用finally块来关闭输出流、输入流
            finally{ 
                try{ 
                    if(out!=null){ 
                        out.close();
                    }
                    if(in!=null){ 
                        in.close();
                    }
                }
                catch(IOException ex){ 
                    ex.printStackTrace();
                }
            }
            return result;
        }
    }

#### （七）测试 ####

后面还会不断更新  
![在这里插入图片描述][20190525111836967.png]

[http_localhost_8080]: http://localhost:8080/
[http_www.beianbeian.com]: http://www.beianbeian.com/
[https_connect.qq.com_manage.html]: https://connect.qq.com/manage.html#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20220128/e53c08d9e2ec41cdbb846a6e0966d956.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20220128/a2e3497f2c4e49278f7a9e5c3a8f4161.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: /images/20220128/2f6c073f1c67480aaf6064a3d6965009.png
[http_wiki.connect.qq.com]: http://wiki.connect.qq.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]: /images/20220128/e72e090d8d4e4deab7372a8de2119995.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]: /images/20220128/ea45760dc94f42e8a79ab0f7be789836.png
[https_graph.qq.com_oauth2.0_authorize]: https://graph.qq.com/oauth2.0/authorize
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9pY29kZS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]: /images/20220128/7d81da768ef045ca8f7a72377dd73ab9.png
[https_graph.qq.com_oauth2.0_token]: https://graph.qq.com/oauth2.0/token
[https_graph.qq.com_oauth2.0_me]: https://graph.qq.com/oauth2.0/me
[20190525111836967.png]: /images/20220128/0d628edf6c45412bad8257b9b0b82499.png