网站怎么接入qq互联（vue+springboot前后端）

准备工作

互联的方式有多种，包含了微信，qq,github,gitee等等。
平常自己设计一个网站都要设计一个登录注册的网页给用户去进行登录注册使用。我们可以使用更加加单的方式方便用户去登录注册。不要让用户去自己输入信息，可以通过认证授权这样的方式去让用户更加方便快捷的去登陆注册。

首先，你需要去一个网站。qq互联的官方网站。
qq互联
在这里插入图片描述
我个人进入界面是这个样式。因为我已经创建过应用了，并且已经审核通过了。

在这里插入图片描述
如果你没有创建过应用的话，你需要去创建应用。

在这里插入图片描述
在这里插入图片描述

注意下面的填写信息。你需要注意你的网站在这里已经上线了。并且可以访问到。不然审核不给通过。还有这个回调地址填什么，第一下填写的话，你可能不知道填写什么。其实很简单。就是你请求这个互联网站后，它还会给你返回一个url，这个url 格式如下。
https://www.daodaozi.xyz/oauth/login/qq?#access_token=…&expires_in=…
?前面的是你的回调地址，并且将来你请求qq互联后，返回回调会跳转到这里。?后面是携带的一些参数。其中这个access_token是最重要的。他是全局唯一的接口调用access_Token。Access Token 是一种用于访问资源 API 的认证模式，可以是 Opaque Access Token 或 JWT Access Token。后面请求后端获取用户信息需要用到。

在这里插入图片描述
还有网站图标一定要按照标准的来，你可以去网上随便找一种做这种图片的网站，是可以的。但是随便一张图片是通过不了的。主办单位就写自己买服务器的提供方，比如说阿里云这样的、备案地址也要写。

在这里插入图片描述
后面据没有什么需要注意的地方了。这里审核通过后，就可以写代码并进行调试了。

前后端代码

前端

在此之前你需要引入qq互联的一段sdk代码。是cdn的方式
在vue项目的index.html里面。
下面这个data-appid就是你成功创建应用后申请到的appid。
在这里插入图片描述
data-redirecturl就是上面说的回调地址。

    <script src="https://connect.qq.com/qc_jssdk.js" data-appid="" data-redirecturi=""></script>

vue前端这样写。首先用户点击你提供的qq登录的按钮，然后触发一个方法。

这个方法demo如下。btnId也是你的appid

qqLogin(){QC.Login.showPopup({btnId: '',redirectURI: ''})},

当用户点击这个按钮触发这个方法后会跳到一个qq登录页面。就是我们常见到的。这里用户可以去进行授权登录。通道url可以看到它是一个oauth2的方式。

在这里插入图片描述
vue再给他写一个回调页面。这是我写的一个回调后的页面。一个动画页面。

<template><div class="boxLoading"></div>
</template>
<script>
import QC from 'QC';
export default{data(){return{};},created() {this.doPostForLogin()},methods:{doPostForLogin(){let this_  = this// 反正这里需要再定义一个变量保存目前这个指向，过了下面这个QC.Login.check this就变了if (QC.Login.check()) {// 该处的openId，accessToken就是后台需要的参数了，后台可以通过这些参数获取临时登录凭证，然后就是自己的逻辑了QC.Login.getMe(function (openId, accessToken) {let params  =  {openId: openId,accessToken: accessToken} this_.$http.post("你的后端地址", params).then(res => {//请求后端的处理返回响应。请求后端是为了授权获取用户登录信息，包括头像昵称等。if(res.code!=200){this_.$message({message: res.message,type: "error",});return}if (!this_.$common.isEmpty(res.data)) {// debuggerif(res.data.isBoss||res.data.isAdmin){// debuggerlocalStorage.setItem("adminToken", res.data.accessToken);// this.$router.push("/")this_.$store.commit("loadCurrentAdmin", res.data);}else{}this_.$store.commit("loadCurrentUser", res.data);localStorage.setItem("userToken", res.data.accessToken);this_.account = "";this_.password = "";}swal({title: '登录成功！',imageUrl : "https://pic1.zhimg.com/v2-0c908ca2b357aa4aba20fe354697abbc_r.jpg",animation: 'pop',timer: 2000,})setTimeout(function(){window.location.href  =  "/"},3000)}).catch((error) => {this_.$message({message: error.message,type: "error"});})})// 指定接口访问失败的接收函数，f为失败返回Response对象}},}
}</script>
<style scoped>
.boxLoading {  width: 50px;height: 50px;margin: auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;
}
.boxLoading:before {content: '';width: 50px;height: 5px;background: #fff;opacity: 0.7;position: absolute;top: 59px;left: 0;border-radius: 50%;animation: shadow .5s linear infinite;
}
.boxLoading:after {content: '';width: 50px;height: 50px;background: #e04960;animation: animate .5s linear infinite;position: absolute;top: 0;left: 0;border-radius: 3px;
}
@keyframes animate {17% {border-bottom-right-radius: 3px;}25% {transform: translateY(9px) rotate(22.5deg);}50% {transform: translateY(18px) scale(1, .9) rotate(45deg);border-bottom-right-radius: 40px;}75% {transform: translateY(9px) rotate(67.5deg);}100% {transform: translateY(0) rotate(90deg);}
}
@keyframes shadow {0%, 100% {transform: scale(1, 1);}50% {transform: scale(1.2, 1);}
}</style>

swal他是这个sweetalert消息提示组件。想用的话自己可以去了解下使用方式。

还有就是这个QC你需要注意一下。就是这里可能需要在vue里面配置一下。

在这里插入图片描述
前端差不多就这些。
来看后端代码

后端

后端请求demo

封装一个Vo实体类 用来接收前端实体参数

package com.Id.poetry.vo;import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;import javax.validation.constraints.NotBlank;@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
@ApiModel(description = "qq登录授权")
public class QQLoginVo {@NotBlank(message = "openId不能为空")@ApiModelProperty(name = "openId", value = "qq openId", required = true, dataType = "String")private String openId;@NotBlank(message = "accessToken不能为空")@ApiModelProperty(name = "accessToken", value = "qq accessToken", required = true, dataType = "String")private String accessToken;}

还有一个封装可以获取qq登录用户信息的实体类。

package com.Id.poetry.vo;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
public class QQUserInfoVo {private String openId;private String nickname;private String gender;private String province;private String city;private String figureurl;
}
package com.Id.poetry.controller;import cn.hutool.core.date.DateTime;
import com.Id.poetry.config.PoetryResult;
import com.Id.poetry.entity.User;
import com.Id.poetry.service.UserService;
import com.Id.poetry.utils.CommonConst;
import com.Id.poetry.utils.PoetryCache;
import com.Id.poetry.vo.QQLoginVo;
import com.Id.poetry.vo.QQUserInfoVo;
import com.Id.poetry.vo.UserVO;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.ResponseEntity;
import org.springframework.util.DigestUtils;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;import java.util.Date;
import java.util.Objects;
import java.util.UUID;@RestController
@Slf4j
public class AuthLoginController {@Autowiredprivate UserService userService;@Value("${qq.appId}")private String appId;@PostMapping("user/login/qq")public PoetryResult<?> authLoginQQ(@RequestBody QQLoginVo qqLoginVo) {System.out.println(qqLoginVo);String userInfoUrl = "https://graph.qq.com/user/get_user_info?access_token=" + qqLoginVo.getAccessToken() +"&oauth_consumer_key=" + appId +"&openid=" + qqLoginVo.getOpenId();
//        创建一个RestTemplate对象，用来请求地址RestTemplate restTemplate = new RestTemplate();//        这个userVo是我要保存到后端数据库所用的实体类（用户基本信息封装）UserVO userVO = new UserVO();LambdaQueryWrapper<User> userLambdaQueryWrapper = new LambdaQueryWrapper<>();
//加密用户openId，openid是qq登录的唯一标识String openIdSercret = DigestUtils.md5DigestAsHex(qqLoginVo.getOpenId().getBytes());User user = new User();userLambdaQueryWrapper.eq(User::getOpenId, openIdSercret);User one = userService.getOne(userLambdaQueryWrapper);Integer userId = null;String userToken = CommonConst.USER_ACCESS_TOKEN + UUID.randomUUID().toString().replaceAll("-", "");
//如果用户已经存在if (one != null) {userId = one.getId();if (!one.getUserStatus()) {return PoetryResult.fail("账号被冻结");}if (one.getUserType() == 0) {
//                说明bossString uuid = UUID.randomUUID().toString().replaceAll("-", "");String adminToken = CommonConst.ADMIN_ACCESS_TOKEN + uuid;PoetryCache.put(adminToken, one, CommonConst.TOKEN_EXPIRE);}
//            直接将数据库保存的用户信息取到封装返回就可以了userVO.setId(one.getId());userVO.setAvatar(one.getAvatar());userVO.setUsername(one.getUsername());userVO.setGender(one.getGender());userVO.setUserType(one.getUserType());if(one.getUserType()==0){userVO.setIsBoss(true);}else  if (one.getUserType()==1){userVO.setIsAdmin(true);}if(StringUtils.hasText(one.getIntroduction())){userVO.setIntroduction(one.getIntroduction());}PoetryCache.put(userToken, one, CommonConst.TOKEN_EXPIRE);} else {
//            没有存在过的话就去获取用户信息（restTemplate获取用户信息）ResponseEntity<String> userInfo = restTemplate.getForEntity(userInfoUrl, String.class);String body = userInfo.getBody();
//            这里这个QQUserInfo可封装我们从qq授权服务器获取用户信息的字段QQUserInfoVo qqUserInfoVo = JSON.parseObject(body, QQUserInfoVo.class);user.setUsername(qqUserInfoVo.getNickname());user.setOpenId(openIdSercret);user.setAvatar(qqUserInfoVo.getFigureurl());user.setCreateTime(new DateTime().toLocalDateTime());String gender = qqUserInfoVo.getGender();if (gender.equals("男")) {
//                我这样简单设置了，你可以去做个常量。user.setGender(1);} else {user.setGender(0);}
//                将信息保存到数据库userService.save(user);userId = user.getId();userVO.setAvatar(qqUserInfoVo.getFigureurl());userVO.setUsername(qqUserInfoVo.getNickname());if (qqUserInfoVo.getGender().equals("男")) {userVO.setGender(1);} else {userVO.setGender(0);}PoetryCache.put(userToken, user, CommonConst.TOKEN_EXPIRE);
//后面是我自己网站的一些逻辑操作。}PoetryCache.put(userToken, one, CommonConst.TOKEN_EXPIRE);PoetryCache.put(CommonConst.USER_TOKEN + user.getId(), userToken, CommonConst.TOKEN_EXPIRE);userVO.setId(userId);userVO.setAccessToken(userToken);//        需要给到前台数据，就是将用户的数据返回一些，比如头像这些，还有登录成功后的token
//        所以return PoetryResult.success(userVO);}}

这些里面是有一些我自己的逻辑代码的。自己可以根据需要参考。
没有很认真的封装。但是功能都可以。自己可以去优化实现。

这个逻辑是可以改的。比如说每次qq用户登录，你去获取他的数据保存也是可以的。我这里只获取了一次就永久保存。但是没有什么影响，因为openid是唯一的。

调试互联可能也是一个重要的点

调试互联

就是说你的网站必须是https形式的填写在互联应用上了，你如何本地调试呢？
就是说回调地址是https://www…这种形式，你如何把它弄到本地调试呢？
当然是通过去修改本地dns了。

在这里插入图片描述
C:\Windows\System32\drivers\etc 这里路径下面的host文件。加入这样类似的一段。让我们在线上网站域名映射到我们的本地ip地址。
在这里插入图片描述

还有一点，就是vue配置这里涉及内网穿透的这么一个知识点配置。

在这里插入图片描述

disableHostCheck: true //本地调试域名内网穿透
devServer.disableHostCheck 配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。 DevServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。 它通常用于搭配 --host 0.0.0.1 使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。反正你需要配置这个参数，否则将来回调的时候是回调不到的。
之前自己调试做的笔记。
在这里插入图片描述

给它保存了。
启动vue和后端。
比如我这个vue项目要现在所占的端口是81,我就这样请求。是没有问题的。
在这里插入图片描述

在这里插入图片描述

然后呢，请求qq登录。
在这里插入图片描述

在这里插入图片描述

给www.daodaozi.xyz后面加个80。并且要把https改为http这样才可以。给它改了。灵活的调试、

在这里插入图片描述
成功！
在这里插入图片描述
线上网站

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/467328.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java 三大并大特性-可见性介绍（结合代码、分析源码）

Java 三大并大特性-可见性介绍（结合代码、分析源码）

目录 ​编辑 一、可见性概念 1.1 概念 二、可见性问题由来 2.1 由来分析 三、可见性代码例子 3.1 代码 3.2 执行结果 四、Java 中保证可见性的手段 4.1 volatile 4.1.1 优化代码 4.1.2 测试结果 4.1.3 volatile原理分析 4.1.3.1 查看字节码 4.1.3.2 hotspot 层面…
阅读更多...
netstat命令

netstat命令

netstat 是一个计算机网络命令行工具&#xff0c;用于显示网络连接、路由表和网络接口等网络相关信息。netstat 命令可以在各种操作系统上使用&#xff0c;包括 Windows、Linux 和 macOS 等。 在使用 netstat 命令时&#xff0c;可以提供不同的选项来显示不同类型的网络信息。…
阅读更多...
(AtCoder Beginner Contest 334) --- F - Christmas Present 2 -- 题解

(AtCoder Beginner Contest 334) --- F - Christmas Present 2 -- 题解

F - Christmas Present 2 F - Christmas Present 2 题目大意&#xff1a; 思路解析&#xff1a; 因为他是顺序前往每个孩子的家&#xff0c;前往时必须要带一个礼物&#xff0c;并且最多只能带k个礼物&#xff0c;所以它每次前往最多k个孩子之后就要回到初始点重新出发。…
阅读更多...
哈工大计算机网络考试经验及资源分享

哈工大计算机网络考试经验及资源分享

如果你觉得资源对你有用&#xff0c;在收藏的同时不要忘记点个赞(●◡●)&#xff0c;你的支持&#xff0c;是我坚持创作的最佳动力。 哈工大计算机网络是一门重要的课程&#xff0c;对于学习计算机网络知识非常有帮助。在学习这门课程时&#xff0c;我选择了中科大zq老师的网…
阅读更多...
二叉树的垂直遍历

二叉树的垂直遍历

1.题目 这道题是2024-2-13的签到题&#xff0c;题目难度为困难。 考察的知识点是DFS算法和自定义排序。 题目链接&#xff1a;二叉树的垂直遍历 给你二叉树的根结点 root &#xff0c;请你设计算法计算二叉树的 垂序遍历 序列。 对位于 (row, col) 的每个结点而言&#xff…
阅读更多...
VTK 正交投影 透视投影

VTK 正交投影 透视投影

1.VTK默认透视投影&#xff08;近大远小&#xff09;&#xff1b; 1.调用vtkCamera的ParallelProjectionOn函数开启 2.通过vtkCamera的SetParallelScale缩放 3.通过vtkCamera的SetClippingRange设置前后裁剪平面 2.正交投影&#xff08;平行投影&#xff0c;远近一样&#xf…
阅读更多...
openGauss学习笔记-218 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-I/O

openGauss学习笔记-218 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-I/O

文章目录 openGauss学习笔记-218 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-I/O218.1 查看I/O状况218.2 性能参数分析 openGauss学习笔记-218 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-I/O 获取openGauss节点的CPU、内存、I/O和网络资源使用情况&#xf…
阅读更多...
LeetCode：83和82.删除排序链表中的重复元素I,II

LeetCode：83和82.删除排序链表中的重复元素I,II

这两题算是链表的基础题&#xff0c;就遍历删除没啥特点&#xff0c; 83甚至不需要考虑第一个结点的特殊情况&#xff0c;属实是名副其实的easy了 LeetCode&#xff1a;21.合并两个有序链表之第一次的特殊情况-CSDN博客 83. 删除排序链表中的重复元素 - 力扣&#xff08;Lee…
阅读更多...
第三百二十二回

第三百二十二回

文章目录 1. 概念介绍2. 使用方法2.1 基本用法2.2 缓冲原理 3. 示例代码4. 内容总结 我们在上一章回中介绍了"FadeInImage组件"相关的内容&#xff0c;本章回中将介绍CachedNetworkImage组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章…
阅读更多...
渗透测试练习题解析 3（CTF web）

渗透测试练习题解析 3（CTF web）

1、[网鼎杯 2020 朱雀组]phpweb 1 考点&#xff1a;反序列化漏洞利用 进入靶场&#xff0c;查看检查信息&#xff0c;发现存在两个参数 func 和 p 查看页面源代码 payload&#xff1a;funcfile_get_contents&pphp://filter/resourceindex.php 整理后&#xff0c;就是 PHP 代…
阅读更多...
HiveSQL——连续增长问题

HiveSQL——连续增长问题

注&#xff1a;参考文章&#xff1a; SQL连续增长问题--HQL面试题35_sql判断一个列是否连续增长-CSDN博客文章浏览阅读2.6k次&#xff0c;点赞6次&#xff0c;收藏30次。目录0 需求分析1 数据准备3 小结0 需求分析假设我们有一张订单表shop_order shop_id,order_id,order_time…
阅读更多...
基于Java (spring-boot)的职工管理系统

基于Java (spring-boot)的职工管理系统

一、项目介绍 基于Java (spring-boot)的职工管理系统功能&#xff1a;登录、老板、职员人事经理、职员、部门列表、职工列表、权限修改、查看所有管理、正在审核列表、添加考勤、添加职工、添加奖惩、合同列表、合同信息、等等等。 适用人群&#xff1a;适合小白、大学生、毕业…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023