用java写一个登录界面的完整代码_javaweb简单的用户登录界面

用java写一个登录界面的完整代码_javaweb简单的用户登录界面一、前言Vue实现QQ第三方登录授权需要获取到APP_ID和回调域地址,关于这2个的获取方式可以参考小编的另外一篇文章Java实现QQ第三方登录温馨小提示:本文基于springboot+vue前后端分离的架构实现三方登录授权主要实现逻辑:前端vue进行授权页面跳转,授权过来拿到后端需要的openID,accessToken参数,最后后端获取到授权用户信息进行业务处理完之后再返回给…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

一、前言

Vue 实现QQ第三方登录授权需要获取到 APP_ID回调域地址,关于这2个的获取方式可以参考小编的另外一篇文章 Java 实现QQ第三方登录

温馨小提示:

本文基于springboot+vue前后端分离的架构实现三方登录授权

主要实现逻辑:

前端vue进行授权页面跳转,授权过来拿到后端需要的openIDaccessToken参数,最后后端获取到授权用户信息进行业务处理完之后再返回给前端进行登录操作等等…

二、Vue 实现QQ第三方登录授权

1、在vue项目下的index.html中引入QQ 第三方登录所需JS SDK

<script type="text/javascript" 
			src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
            data-callback="true"
            data-appid="填写自己的APP_ID"
            data-redirecturi="回调地址url"
            charset="utf-8">
</script>

Jetbrains全家桶1年46,售后保障稳定

2、给三方授权按钮绑定事件 -> 跳转到授权页面

<template>
    <div @click="qqLoginClick('qq')">QQ第三方登录</div>
</template>
<script> export default { 
     name: 'QQLogin', methods: { 
     // QQ 第三方登录 qqLoginClick(value) { 
     // 直接弹出授权页面,授权过后跳转到回调页面进行登录处理 QC.Login.showPopup({ 
     appId:"填写自己的APP_ID", redirectURI:"回调地址url" //登录成功后会自动跳往该地址 }); } } } </script>

3、授权过后在回调页面调用QQ的js方法获取 openIdaccessToken

export default { 
   
    name: 'Login',
    data() { 
   
  	   return { 
   
  		  timer: null  // 定时器名称
  	   }
    }
    mounted() { 
   
       // 定时器
       this.timer = setInterval(this.qqLogin, 3000);
    },
    methods: { 
   
	    // QQ第三方登录
	    qqLogin(){ 
   
		    var that = this; // 先将vue这个对象保存在_self对象中
		    //检查是否登录
		    if (QC.Login.check()) { 
   
		        //该处的openId,accessToken就是后台需要的参数了,后台可以通过这些参数获取临时登录凭证,然后就是自己的逻辑了
		        QC.Login.getMe(function (openId, accessToken) { 
   
		            if (  openId != undefined ){ 
   
		                that.loading = true;
		                // 传参给后台进行登录验证
		                that.$store.dispatch('LoginByUsername', { 
   
		                    username: '',
		                    openId: openId,
		                    accessToken: accessToken
		                }).then(() => { 
   
		                    that.loading = false;
		                    that.$router.push({ 
    path: '/' })
		                }).catch(() => { 
   
		                    that.loading = false
		                })
		            }
		        });
		        console.log('已登录!')
		        // 清除定时器
		        clearInterval(this.timer);
		        this.timer = null;
		    } else { 
   
		        console.log('未登录!')
		    }
	    }
    }
}

4、Java后端通过Vue前端传过来的openIDaccessToken获取到授权用户信息,然后进行业务逻辑处理再返回给前端

Java后端所需QQ第三方登录授权依赖

<!-- QQ第三方登录所需 -->
<dependency>
    <groupId>net.gplatform</groupId>
    <artifactId>Sdk4J</artifactId>
    <version>2.0</version>
</dependency>
import com.qq.connect.api.qzone.UserInfo;
import com.qq.connect.javabeans.qzone.UserInfoBean;
/** * QQ 授权登录 * @param openID * @param accessToken * @return * @throws QQConnectException */
public UserQueryPara qqLogin( String openID, String accessToken ) throws QQConnectException { 
   
    // 通过OpenID获取QQ用户登录信息对象(Oppen_ID代表着QQ用户的唯一标识)
    UserInfo qzoneUserInfo = new UserInfo(accessToken, openID);
    // 获取用户信息对象(userInfoBean中包含了我们想要的一些信息,比如:nickename、Gender、头像)
    UserInfoBean userInfoBean = qzoneUserInfo.getUserInfo();
    // ...
    return null;
}

三、案例源码

码云地址GitHub地址

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/231339.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Springboot自定义注解,支持SPEL表达式

    Springboot自定义注解,支持SPEL表达式举例,自定义redis模糊删除注解1.自定义注解importjava.lang.annotation.ElementType;importjava.lang.annotation.Retention;importjava.lang.annotation.RetentionPolicy;importjava.lang.annotation.Target;@Target(E…

    2022年10月31日
  • 安卓 自定义分辨率_android图片适配不同分辨率

    安卓 自定义分辨率_android图片适配不同分辨率Bluestacks是一款非常好用的电脑上的安卓模拟器,用Bluestacks来玩手机游戏是不少朋友的选择,但是Bluestacks默认分辨率都非常大,比如小编的默认分辨率就达到了1280*720。运行Bluestacks后,不仅字和图标很小,打开游戏、软件都显得很模糊,但是安卓界面本身又很大,好多空白的地方。那么多大的分辨率才合适呢?Bluestacks分辨率修改方法1.Bluestacks的合…

  • 英语词根词缀记忆法总口诀_词根词缀记忆法的利弊

    英语词根词缀记忆法总口诀_词根词缀记忆法的利弊英语词根词缀记忆法(全集) 前言        英语单词的构词规律也是有规可寻的。单词是由词素构成的,词素派生出词义。单词的数量虽然浩瀚,但构成其的词素的数量却是有限的。如果掌握了词素,懂得基本的构词方法,就能容易地识记单词,突破记忆单词这一难关。词素又是由词根和词缀两部分组成的,而词缀又分为前缀和后缀。常用的252个词根和289个词缀,掌握了这些词素便可掌握绝大

  • css设置背景图片大小自适应_css设置整个页面背景图片

    css设置背景图片大小自适应_css设置整个页面背景图片background:pink;图片在背景图上面background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满

  • ArrayList扩容机制。

    ArrayList扩容机制。1)直接new一个ArrayList对象时(未指定初始容量大小)是一个空的数组,容量大小为零。publicArrayList(){//DEFAULTCAPACITY_EMPTY_ELEMENTDATA变量为一个空的数组privatestaticfinalObject[]DEFAULTCAPACITY_EMPTY…

  • 日期函数months_between的用法[通俗易懂]

    日期函数months_between的用法[通俗易懂]MONTHS_BETWEEN(date1,date2)用于计算date1和date2之间有几个月。如果date1在日历中比date2晚,那么MONTHS_BETWEEN()就返回一个正数。如果date1在日历中比date2早,那么MONTHS_BETWEEN()就返回一个负数。如果date1和date2日期一样,那么MONTHS_BET…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号