网页登录实现qq和微信扫码登录|电子爱好者

admin管理员组
文章数量:1552445

实现网页登录实现qq和微信扫码登录可以分为以下步骤：

获取qq或微信开放平台的APPID和APPSECRET，创建应用，并获取授权域名。
在后台创建接口，用于前端发送请求获取qq或微信登陆二维码。二维码生成后，将数据返回给前端。
前端获取到二维码后，将其展示在页面上。
用户使用qq或微信扫描二维码，授权登陆并获取登陆凭证code。
将code发送到后端接口，后台使用code获取access_token和openid。
使用openid判断用户是否已经在系统中注册，如果没有，则根据获取的用户信息创建新用户，并生成本地用户凭证token。
将token存储在系统中，通过cookie或localStorage等方式返回给前端。
前端在后续请求中发送token，后台验证token是否有效，并通过token获取用户信息。

以下是基于springboot和vue的示例：

后台实现：

在pom.xml文件中添加spring-boot-starter-web和spring-boot-starter-thymeleaf依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
   </dependency>
</dependencies>

创建控制器QQController和WechatController，分别用于处理qq和微信登陆请求：

@RestController
@RequestMapping("/qq")
public class QQController {

    @Autowired
    private QQAuthService qqAuthService;

    @RequestMapping("/login")
    public String qqLogin() {
        String state = UUID.randomUUID().toString().replaceAll("-", "");
        String url = qqAuthService.getAuthorizationUrl(state);
        return url;
    }

}

@RestController
@RequestMapping("/wechat")
public class WechatController {

    @Autowired
    private WechatAuthService wechatAuthService;

    @RequestMapping("/login")
    public String wechatLogin() {
        String state = UUID.randomUUID().toString().replaceAll("-", "");
        String url = wechatAuthService.getAuthorizationUrl(state);
        return url;
    }

}

创建QQAuthService和WechatAuthService，用于获取授权链接和access_token：

@Service
public class QQAuthService {
    private static final String QQ_AUTHORIZATION_URL = 
"https://graph.qq/oauth2.0/authorize?response_type=code
&client_id=%s&redirect_uri=%s&state=%s";
    private static final String QQ_ACCESS_TOKEN_URL = 
"https://graph.qq/oauth2.0/token?grant_type=authorization_code
&client_id=%s&client_secret=%s&code=%s&redirect_uri=%s";
    private static final String QQ_OPENID_URL = 
"https://graph.qq/oauth2.0/me?access_token=%s";

    private String appId = "your_appid";
    private String appSecret = "your_appsecret";
    private String redirectUri = "your_redirect_uri";

    public String getAuthorizationUrl(String state) {
        String url = String.format(QQ_AUTHORIZATION_URL, appId, redirectUri, state);
        return url;
    }

    public String getAccessToken(String code) {
        String url = String.format(QQ_ACCESS_TOKEN_URL, appId, 
        appSecret, code, redirectUri);
        String response = HttpUtil.get(url);
        String accessToken = StringUtil.getParamFromUrl(response, "access_token");
        return accessToken;
    }

    public String getOpenId(String accessToken) {
        String url = String.format(QQ_OPENID_URL, accessToken);
        String response = HttpUtil.get(url);
        String openid = StringUtil.getParamFromUrl(response, "openid");
        return openid;
    }

}

@Service
public class WechatAuthService {
    private static final String WECHAT_AUTHORIZATION_URL =
    "https://open.weixin.qq/connect/qrconnect?
    appid=%s&redirect_uri=%s&response_type=code&scope=snsapi_login&state=%s#
    wechat_redirect";
    private static final String WECHAT_ACCESS_TOKEN_URL =
    "https://api.weixin.qq/sns/oauth2/access_token?appid=%s&
    secret=%s&code=%s&grant_type=authorization_code";
    private static final String WECHAT_USERINFO_URL =
    "https://api.weixin.qq/sns/userinfo?access_token=%s&
    openid=%s";

    private String appId = "your_appid";
    private String appSecret = "your_appsecret";
    private String redirectUri = "your_redirect_uri";

    public String getAuthorizationUrl(String state) {
        String url = String.format(WECHAT_AUTHORIZATION_URL, appId, 
        redirectUri, state);
        return url;
    }

    public String getAccessToken(String code) {
        String url = String.format(WECHAT_ACCESS_TOKEN_URL, appId, appSecret, code);
        String response = HttpUtil.get(url);
        String accessToken = StringUtil.getParamFromUrl(response, "access_token");
        return accessToken;
    }

    public JSONObject getUserInfo(String accessToken, String openid) {
        String url = String.format(WECHAT_USERINFO_URL, accessToken, openid);
        String response = HttpUtil.get(url);
        JSONObject jsonObject = JSON.parseObject(response);
        return jsonObject;
    }
}

创建拦截器TokenInterceptor，用于拦截请求并验证token：

public class TokenInterceptor implements HandlerInterceptor {
    @Autowired
    private UserService userService;

    @Override
    public boolean preHandle(HttpServletRequest request, 
    HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("token");
        if (StringUtil.isNullOrEmpty(token)) {
            throw new Exception("token不能为空");
        }

        UserDTO userDTO = userService.getUserByToken(token);
        if (userDTO == null) {
            throw new Exception("token无效");
        }

        request.setAttribute("user", userDTO);
        return true;
    }
}

在WebMvcConfigurer中添加TokenInterceptor拦截器：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Autowired
    private TokenInterceptor tokenInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(tokenInterceptor);
    }
}

创建UserService，用于根据token获取用户信息：

@Service
public class UserService {

    public UserDTO getUserByToken(String token) {
        // 根据token获取用户信息
        return new UserDTO();
    }
}

前端实现：

在index.html页面中添加登陆按钮并绑定点击事件：

<button class="btn btn-primary" @click="qqLogin">QQ登陆</button>
<button class="btn btn-primary" @click="wechatLogin">微信登陆</button>

创建vue组件Login.vue，用于处理登陆流程：

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h3>QQ登陆</h3>
                <img :src="qqQrcode" alt="">
            </div>
            <div class="col-md-6">
                <h3>微信登陆</h3>
                <img :src="wechatQrcode" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "Login",
        data() {
            return {
                qqQrcode: "",
                wechatQrcode: "",
                intervalId: 0,
            };
        },
        created() {
            this.getQQQrCode();
            this.getWechatQrCode();
        },
        methods: {
            getQQQrCode() {
                axios.get("/qq/login").then((response) => {
                    this.qqQrcode = response.data;
                });
            },
            getWechatQrCode() {
                axios.get("/wechat/login").then((response) => {
                    this.wechatQrcode = response.data;
                });
            },
        },
    };
</script>

<style scoped>
    img {
        width: 200px;
        height: 200px;
    }
</style>

在路由配置文件中添加Login组件对应的路由：

import Login from "../views/Login.vue";

const routes = [
  {
    path: "/login",
    name: "Login",
    component: Login,
  },
  // other routes
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

创建main.js文件，并在其中引入相关依赖：

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import axios from "axios";

Vue.config.productionTip = false;

Vue.use(VueRouter);

Vue.prototype.$axios = axios;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

以上就是基于springboot和vue实现网页登录实现qq和微信扫码登录的示例

本文标签：网页 qq 微信扫码

版权声明：本文标题：网页登录实现qq和微信扫码登录内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：https://m.elefans.com/dianzi/1727288137a1106895.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

更多相关文章

xp系统

PHP在线图像处理程序：基于Photoshop的网页版图片处理源码

2天前

PHP在线PS修图网页版源码：实现照片图片处理的便捷工具众所周知，许多朋友都喜欢使用PS进行图像编辑。然而，PS需要下载软件并对电脑配置要求较高。今天我们为大家带来一款基

PS网页设计教程XIX——在Photoshop中创建一个优雅的作品集的网页布局

2天前

作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。本系列的教程来源

找到了！2个在线版本的网页版 PS ！

2天前

官方出了一个在线网页版的 PS，但是仅限加拿大地区使用。不过还有两个在线版本的网页版 PS ：Photopea 和即时设计，都是可以在线使用的设计工具，功能上能完成大多数 PS 的常用能力。所以我们就一起来看看这两个在线版本的免费使用网页版

iPhone如何恢复qq好友？轻松3招，好友失而复得

1天前

qq好友就像生活中的朋友一样，对我们来说有着不可替代的意义。但有时也会有意外发生，我们可能会在苹果手机上失去一些重要的qq好友联系。不过别担心，小编为你找到了3个简单而有效的

安卓手机浏览器如何查看网页源码？

1天前

推荐方法：使用Chrome浏览器手机版第一步：在应用商店下载Chrome浏览器手机版第二步：在需要查看源码的网页前加上view-source: 如&#xff1a

微信跳出浏览器代码微信遮罩-实现微信中跳转手机浏览器打开HTML网页

1天前

相信做前端的朋友一定都遇到这种情况的、当你在微信中打开你的APP下载链接是没有反应的或者跳出一个‘QQ浏览器安全下载’、主要原因是因为微信为了做流量拦截、让用户下载自家的QQ浏览器、应用宝。这种情况的出现是非常的影响用户体验&#xf

uniapp - 详细手机端h5网页调用手机摄像头进行二维码识别扫描，在uniapp的H5移动端微信网页平台中，在浏览器中调用手机扫码功能详细教程，识别二维码并获取扫描结果（完整示例源码，一键复制即用

1天前

效果图正常情况下，使用uniapp扫码API是不行的，因为不支持h5端。在uniapp h5移动端网页项目中，实现了浏览器中调用手机摄像头扫码功能，uniapp手机网页H5扫描二维码功能实现，uni-app h5端调用摄像头扫码，提

安卓Android微信附件下载跳转至QQ浏览器后无法显示（二次跳转）的问题

1天前

vue 项目里遇到了在微信里下载附件（非apk）的问题如 txtpdfExceldocdocx 等先分析区分ios和安卓苹果ios ios 系统无法下载会直接打开pdf

2024年Java最全仿天猫商城html网页源码(1)，Java进阶推荐

1天前

2021年Java中高级面试必备知识点总结在这个部分总结了2019年到目前为止Java常见面试问题，取其面试核心编写成这份文档笔记，从中分析面试官的心理，摸清面试官的“套

仿天猫商城html网页源码(1)，2024年最新java面试技术难点

1天前

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7 深知大多数程序员，想要提升技能，往往是自己摸索成长&a

明明连上了WIFI，有WIFI图标，能够登录微信，却无法访问任何网页，如何解决？？（不能访问网页）（不能上网）

1天前

问题： 电脑有WIFI图标，能连上WIFI和热点，并且WIFI和热点都是可用的，可以登录微信或者QQ，却不能上网&#xf

Google chrome (谷歌浏览器)万能复制插件解除网页复制限制

1天前

前言背景在我们收集资料的时候，经常需要对网页上的文本进行复制粘贴。但是，以某文库为例，许多平台上的文本都是不允许直接复制的。好不容易找到一篇有用的文档&#xff0

网页快捷键

22小时前

一、网页快捷键 1.Ctrlu显示当前网页的HTML源代码 2.Ctrld将当前网页保存为书签 3.CtrlShiftd将所有打开的标签页以书签的形式保存在新文件夹中 4.空格键或PgDn向下滚动网页，一次一个

360保存html,360极速浏览器怎么保存网页为图片？

21小时前

有的时候我们看到一个重要的网页，可能是企业产品介绍页，或者是某个项目介绍页，某个百科说明等等，想要把整个网页都保存下来，怎么操作呢

树莓派安装qq最新版本 kali安装qq最新版本

2小时前

前几天我一个linux老用户看到摆烂摆了4年多的qq for linux竟然更新了，必须给我树莓派炫一个不多说，开搞首先，要安装的就是依赖：sudo apt install libgtk2.0-0 代码块也上一个 sudo

ubuntu下载QQ和微信全网最新

2小时前

ubuntu下载QQ和微信文章目录 ubuntu下载QQ和微信前言一、输入法的设置键盘设置二、下载QQ1搜索QQ点击linux下载QQ下载包移动到主文件夹 ctrl Alt t 打开终端输入三.下载微信前言我已经将ubuntu

QQ授权登录提示需要安装最新版本

2小时前

友盟或者QQ互联提供的demo工程是低于xcode6.0创建的，默认工程的info.plist里有Bundle display name和Bundle name两个key。而xcode6.0之后创建的工程的info.

手机网页弹窗关不掉_弹窗广告关不掉？这5种方法永久关闭电脑弹窗广告！

2小时前

②找到程序下的【卸载程序】，就会出现电脑上基本上安装的软件，找出无用的卸载即可。 02internet 选项设置 windows系统就自带有弹窗限制功能。我们只需要打开系统自带的internet选