网页登录实现qq和微信扫码登录

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

1. 获取qq或微信开放平台的APPID和APPSECRET，创建应用，并获取授权域名。

2. 在后台创建接口，用于前端发送请求获取qq或微信登陆二维码。二维码生成后，将数据返回给前端。

3. 前端获取到二维码后，将其展示在页面上。

4. 用户使用qq或微信扫描二维码，授权登陆并获取登陆凭证code。

5. 将code发送到后端接口，后台使用code获取access_token和openid。

6. 使用openid判断用户是否已经在系统中注册，如果没有，则根据获取的用户信息创建新用户，并生成本地用户凭证token。

7. 将token存储在系统中，通过cookie或localStorage等方式返回给前端。

8. 前端在后续请求中发送token，后台验证token是否有效，并通过token获取用户信息。

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

后台实现：

1. 在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>

1. 创建控制器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;
    }

}

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

@Service
public class QQAuthService {
    private static final String QQ_AUTHORIZATION_URL = 
"https://graph.qq.com/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.com/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.com/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.com/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.com/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.com/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;
    }
}

1. 创建拦截器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;
    }
}

1. 在WebMvcConfigurer中添加TokenInterceptor拦截器：

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

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

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

@Service
public class UserService {

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

前端实现：

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

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

1. 创建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>

1. 在路由配置文件中添加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,
});

1. 创建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和微信扫码登录的示例