SpringBoot+Vue实现第三方百度登录(一)

已于 2024-04-09 14:00:44 修改
阅读量1.2k 收藏 1
点赞数 1
分类专栏： 第三方登录 SpringBoot 文章标签： java spring boot vue.js
于 2023-03-23 17:07:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyh722/article/details/129734875
版权

1. 百度登录介绍(测试网站：地址）

百度登录包括身份认证、用户关系以及内容传播。允许用户使用百度帐号登录访问第三方网站，分享内容，同步信息。它有如下特点：

　　1. 直接用百度账号登录你的应用或网站。

　　2. 获得高质量百度活跃用户。

　　3. 更便捷的分享到百度，提高网站信息传播力。

1.1 授权机制

　　百度开放接口的调用，如发登录、获取用户基本信息、获取热门百度内容等，都是需要获取用户身份认证的。

　　目前百度开放平台用户身份鉴权主要采用的是OAuth2.0。另外，为了方便开发者开发、测试自己的应用，我们还提供了开发者自身授权的身份鉴权方式，但开发者自身授权仅适用于应用所属的开发者自己调用接口。

　　如果百度用户访问第三方应用网页，则第三方应用可以通过网页授权机制，来获取百度用户基本信息，进而实现自身业务功能。

接口文档

　　开发者可以先浏览OAuth2.0的接口文档，熟悉OAuth2.0的接口及参数的含义，然后我们根据应用场景各自说明如何使用OAuth2.0。

获取途径授权流程介绍有效期
新获取Authorization Code又称Web Server Flow，适用于所有有Server端配合的应用。有效期一个月的Access Token+有效期十年的Refresh Token。
Implicit Grant又称User-Agent Flow，适用于所有无Server端配合的应用（桌面客户端需要内嵌浏览器）。有效期一个月的Access Token。
Client Credentials即采用应用公钥、密钥获取Access Token，适用于任何带server类型应用。 通过此授权方式获取Access Token仅可访问平台授权类的接口。有效期一个月的Access Token+有效期十年的Refresh Token。
Device适用于一些输入受限的设备上（如只有数码液晶显示屏的打印机、电视机等）。有效期一个月的Access Token+有效期十年的Refresh Token。
刷新Refresh TokenAccess Token刷新方式，适用于所有有Server端配合的应用 。十年刷新期限。


注意事项

　　请求用户授权时百度提供了一个在 OAuth2.0 协议中没有提到的参数：display。它是用来标识不同形式的客户端所对应的不同展现形式的授权页面，其值定义如下

page：全屏形式的授权页面(默认)，适用于web应用。

popup：弹框形式的授权页面，适用于桌面软件应用和web应用。

dialog：浮层形式的授权页面，只能用于站内web应用。

mobile：Iphone/Android等智能移动终端上用的授权页面，适用于Iphone/Android等智能移动终端上的应用。

tv：电视等超大显示屏使用的授权页面。

pad：IPad/Android等智能平板电脑使用的授权页面。

2. 成为开发者(官方文档) 

     开发者通过以下几个步骤，即可接入微博开放平台： 访问百度开发者中心官网 → 使用百度帐号登录官网 → 注册百度开发者 → 创建/管理应用 → 通过审核并获取接口权限。

2.1 注册开发者

1. 如果您已是百度用户，请您访问百度开发者中心并使用百度账号直接登录。

2. 如果您还不是百度用户，请您访问百度Passport，填写注册邮箱和密码并激活成为百度用户。

3. 访问百度开发者中心使用百度账号登录。

2.2 登录后，注册开发者 http://developer.baidu.com/user/reg#app/project 即可进入注册开发者页面，请填写相关信息进行注册。

（如直接开发者信息页，说明您已经注册过开发者，您可以跳过此步骤直接 查看第四步）。下图所示的是个人开发者注册页面：

2.3 按要求提交资料后，审核人员会进行审核，通过审核后需要进行身份验证，上传身份证信息，提交后等待审核即可。

3 网站应用及移动应用接入申请

    应用接入前，首先需进行申请，获得对应的API Key（client_id）和Secret Key（client_secret），以保证后续流程中可正确对网站与用户进行验证与授权。

3.1 创建应用

1. 注册开发者后，可以进行创建、管理应用 管理控制台 - 百度开放云平台 

2. 选择创建应用, 选择需要创建的应用类型，我们以网站应用为例, 点击“创建”按钮即可，按要求完善信息：

3. 创建工程成功后，页面跳转到工程基本信息页，即可查看应用的API Key(AK)和Secret Key (SK)。

3.2 网站信息完善

1. 点击应用右侧的“安全设置”，在高级信息中编辑授权回调页，这里与后面代码里的回调地址要一致

3.3 官网代码SDK下载(SDK示例代码下载) 

3.4 到此准备工作结束，网站开发流程(在下篇介绍)

3.5 每个人做的项目需求不同，可能会出现不同的问题，文章仅供参考

3.6 SpringBoot+Vue实现第三方百度登录(二)

3.7 其他第三方登录方式：第三方登录汇总

4. 源码购买

4.1 简洁版源码（淘宝店铺：爱创客网络）

只包含登录，第三方登录，跳转首页（没有菜单！），技术框架：SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等

4.2 完整版本源码（淘宝店铺：爱创客网络）

测试地址(测试地址是完整版源码的)：www.youyoushop.work

包含登录，注册，第三方登录，完整的系统管理模块，系统工具模块，系统监控模块，系统日志模块，个人中心等，技术框架：SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等

helloliyh
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【第三方互联】15、百度（baidu）授权第三方登录
Asurplus
04-09 20万+
今天继续学习：百度（baidu）授权第三方登录 一、准备工作 1、登录 百度开发者中心 官网地址：https://developer.baidu.com/ 注册账号，登录官网 2、注册成为“百度开发者” 在页面底部找到“应用管理”，当然，我们还需要申请成为“百度开发者”，填写信息 点击提交后， 3、创建应用 填入应用的名称 我们点击“安全设置”，填写应用高级信息 4、...
Vue中第三方登录
小白在线学前端的博客
09-26 1444
如何设置QQ登录 步骤： 有一个网站，且已备案。网站需要有QQ登录的逻辑（登录页面，回跳页面）。 然后再QQ互联上进行身份验证，审核通过 然后在QQ互联上创建应用，应用需要域名，备案号，回调地址。审核通过。 得到：应用ID 应用key 回调地址。 才能完成QQ登录。（以上四个步骤，工作后大概率由后台或运维完成） 注意：id和uri都不能修改，否则无效。 如果在本地的时候使用QQ互联 由于域名是需要备案的所以我们写一个已经被过案的域名www.corho.com和localhost不一致无法回调.
基于SpringBoot+Vue前后端分离的人脸识别视频会议系统源码+数据库.zip
12-06
基于SpringBoot+Vue前后端分离的人脸识别视频会议系统源码+数据库.zip基于SpringBoot + Vue+uni-app开发的前后端分离人脸识别视频会议系统，采用SpringSecurity采用RBAC模型实现动态鉴权，Retinaface+ Facenet实现人脸识别，支持会议系统的基本功能，人脸签到，签到活体检测，视频会议，好友聊天，地图坐标签到等。 技术描述 使用Retinaface+ Facenet实现人脸识别检测与人脸匹配用来实现人脸识别功能,并使用MiniFASNetV1SE模型实现活体检测。 使用SpringSecurity作为安全框架，采用RBAC模型，实现动态分配权限和菜单。 使用Redis进行实现会议签到功能并接入百度地图SDK做位置签到,并将热点数据进行缓存,保证系统响应效率。 使用索引+异步来提高后台统计接口的查询效率,接入Rabbitmq做延时队列与异步解耦,提高系统响应度。 使用百度Ai平台进行对用户提交的会议信息的审核与发布,接入第三方anyRTC实现视频会议。 后台使用vue+Element进行数据展示并接入Echarts进行系统数据统计
vue3实现Google Apple 三方登录（纯手写无调库版）
最新发布
KATOU__MEGUMI的博客
05-01 1024
前几天我接到了海外平台三方登录的需求，搜索博客后发现大部分都是直接调库，于是参考现有文章从头到尾自己手写了一遍实现了全流程。因网上有太多OAuth配置教程所以在此不在赘述，本文仅详细说明了源码部分。
vue项目中第三方Google登录
xxc_yc的博客
10-20 3435
vue 第三方google登录
SpringBoot+Vue实现第三方百度登录(二)
liyh722的博客
03-31 2210
SpringBoot+Vue实现第三方百度登录(二)
vue实现第三方登录——qq
热门推荐
^_^
07-30 1万+
目录 一、介绍 如何申请QQ登录 解决点击登录后打开一个新窗口 二、vue项目中使用 （1）引入使用 （2）自动生成的代码转换a链接跳转 （3）将测试地址映射到本地 三、登陆后的三条路线 第一条路线 第二条路线 第三条路线 一、介绍 整体流程 在登录页面，QQ登录图片处，赋予其打开QQ登录页面功能。 回跳的页面得到QQ给的唯一标识openId，根据openId去后台查询是否已经绑定过账户。 如果绑定过，完成登录。 没有绑定过...
php 百度第三方登录,PHP：通过MVC，实现第三方登录（百度）
weixin_42227109的博客
04-04 298
这里，仓鼠将手把手记录下来实现第三方登录的流程，这里以百度为例百度开发者中心-官方网址：传送门。所有第三方接口都不支持本地调试，只有真实的项目和服务器才有可能申请成功。所以申请的资料全部都要填写真实的项目信息。1、先注册一个百度开发者账号。2、然后进入应用管理中心，新建一个工程。 3、然后再设置工程相关的配置参数。 到这里，百度的第三方登录接口已经算是申请成功得了。下面我们就来学习如何运用P...
第三方登录（百度账号登录）
Wy_Vae的博客
07-28 8361
实现百度第三方登录(Android Studio) 对于第一次开发第三方登录的开发者而言，学习百度账号的第三方登录相对来说没有实现qq,微信那么繁琐，更适合初学者学习。 说明：实现百度第三方登录与实现qq的流程是一样的，只不过qq的申请为开发者认证比较麻烦。百度可直接申请为开发者。 具体流程： 通过实现三次握手来实现第三方登录； 1.登录到百度开发者中心。 2.注册百度账号
SpringBoot+Vue实现第三方微博登录(二)
liyh722的博客
03-17 1339
SpringBoot+Vue实现第三方微博登录(二)
SpringBoot 3 SpringBoot+VUE案例
u012474395的博客
02-20 1595
3 SpringBoot+VUE案例开发 经过对SpringBoot及VUE的学习，我们已经对他们的开发流程有了一定的了解，我们将这两个框架进行整合，并实现一个简单的前后的开发案例“HelloWorld”。这个案例我们主要实现：（1）系统的登陆、退出；（2）用户的查询、新增、修改、删除。系统架构如下图所示： 从架构图中可以看到前端UI采用VUE框架开发， vue框架整合了mock、validat...
springboot + xterm.js + vue + websocket实现终端功能
12-08
1、前端框架：Vue + element-ui 2、后端框架：...4、其他第三方工具或者插件： Jsch：用于远程连接ECS服务器。 Websocket：与前端进行实时交互。 xterm：渲染web版本的terminal终端显示器。 可参考博客地址： ...
基于SpringBoot+Vue前后端分离的物流管理系统
09-13
可能使用自定义算法或者第三方API（如描述中提到的百度地图API）来获取地理信息，然后结合业务规则进行费用估算。 - 物流跟踪：系统可能提供了物流跟踪功能，通过订单号查询包裹的实时位置和运输状态，提升客户体验...
tomcat部署springboot+vue.doc
04-22
此外，关于跨域问题，如果你的SpringBoot后端需要调用第三方API（如百度地图API），你可能遇到CORS（Cross-Origin Resource Sharing）限制。解决这个问题，可以在SpringBoot应用中添加CORS配置。例如，在SpringBoot...
基于Springboot+Vue3的人脸识别登录小demo
05-29
本系统基于调用百度API实现的一个人脸识别登录系统，前后分离本系统基于调用百度API实现的一个人脸识别登录系统，前后分离本系统基于调用百度API实现的一个人脸识别登录系统，前后分离本系统基于调用百度API实现的一...
Vue.js 2.0：打造最强OAuth2.0第三方登录组件，安全又便捷！
chen520的博客
10-06 1350
OAuth（开放授权）是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如照片，视频，联系人列表），而无需将用户名和密码提供给第三方应用。5.客户端以GET的方式访问Github提供的地址，在参数中加入或在head中加入accesstoken。用户点击登录按钮跳转至Github提供的授权界面，并提供参数：客户端ID（稍后会介绍到），回调页面等。存入cookie，页面回调至登录之前保存的地址。客户端以POST的方式访问GIthub提供的地址，提供参数code等。
Vue实现Google第三方登录
bright的博客
06-28 3582
一、开发者平台配置 1、进入开发者平台，首先前往Google API 控制台选择或者创建一个项目 谷歌开发者平台 一堆眼花缭乱的API让你无从选择，但是你只要记住这次进来的目的是：社交API 2.使用这个API之前还需要做一件事，那就是申请一个OAuth 2.0 客户端 ID 3按照要求填写你项目的类型、名称以及来源url 注：创建完成之后，页面也有一个弹窗将你申请的客户端ID已经密钥展示出来，没错这个就是一个生成的过程。 4、安装vue-google-signin-button npm insta
springboot+vue整合JustAuth实现第三方登录
justleavel的博客
01-21 1725
springboot+vue+JustAuth 前后端分离实现第三方登录
Vue.js中Facebook第三方登录api实现[亲测可用]
lllomh的博客
12-02 4533
上一篇说了 Line 的第三方登录的实现,这篇记录下Facebook的实现 大致相同,又有不同! demo 地址 狠狠的戳这里https://download.csdn.net/download/lllomh/11430695 一:开发者平台配置 进入开发者https://developers.facebook.com/ 创建应用(我这里已经有了) 动态操作演示: 这里...
springboot+vue代码实现第三方qq登录
05-24
要实现第三方qq登录，可以使用QQ互联提供的开放平台接口。具体的步骤如下： 1. 注册成为QQ互联开发者，并创建应用。在创建应用时，需要填写应用的基本信息，并获得AppID和AppKey。 2. 在Spring Boot后端项目中，使用Spring Security实现OAuth2认证。在pom.xml文件中添加以下依赖： ```xml <dependency> <groupId>org.springframework.security</groupId> <artifactId>spring-security-oauth2-client</artifactId> <version>5.3.4.RELEASE</version> </dependency> ``` 3. 在前端Vue项目中，使用Vue CLI创建项目，并安装vue-cli-plugin-qrcode实现生成二维码。在Terminal中运行以下命令： ``` vue create qq-login-demo cd qq-login-demo vue add qrcode ``` 4. 在Spring Boot后端项目中，实现OAuth2的配置。在application.yml文件中添加以下配置： ```yaml spring: security: oauth2: client: registration: qq: clientId: <your app id> clientSecret: <your app key> redirectUriTemplate: "{baseUrl}/login/oauth2/code/{registrationId}" authorizationUri: https://graph.qq.com/oauth2.0/authorize tokenUri: https://graph.qq.com/oauth2.0/token userInfoUri: https://graph.qq.com/user/get_user_info scope: - get_user_info provider: qq: authorizationUri: https://graph.qq.com/oauth2.0/authorize tokenUri: https://graph.qq.com/oauth2.0/token userInfoUri: https://graph.qq.com/user/get_user_info?oauth_consumer_key={clientId}&openid={oauthId} userNameAttribute: nickname ``` 5. 在前端Vue项目中，实现二维码生成。在App.vue文件中添加以下代码： ```vue <template> <div id="app"> <div v-if="!isLogin"> <qrcode :value="qrCodeUrl"></qrcode> </div> <div v-else> <p>{{ userInfo.nickname }}</p> <img :src="userInfo.figureurl_qq_1" alt="头像"> </div> </div> </template> <script> import QRCode from 'qrcode' export default { name: 'App', data() { return { isLogin: false, qrCodeUrl: '' } }, mounted() { this.generateQRCode() }, methods: { async generateQRCode() { const response = await this.$http.get('/qq-login/qr-code') if (response.status === 200) { this.qrCodeUrl = response.data this.isLogin = false } }, async checkLoginStatus() { const response = await this.$http.get('/qq-login/check-login-status') if (response.status === 200) { this.userInfo = response.data this.isLogin = true } } } } </script> ``` 6. 在Spring Boot后端项目中，实现二维码生成和登录状态检查。在QqLoginController.java文件中添加以下代码： ```java @RestController @RequestMapping("/qq-login") public class QqLoginController { private final OAuth2AuthorizedClientService authorizedClientService; private final RestTemplate restTemplate; @Autowired public QqLoginController(OAuth2AuthorizedClientService authorizedClientService, RestTemplate restTemplate) { this.authorizedClientService = authorizedClientService; this.restTemplate = restTemplate; } @GetMapping("/qr-code") public String generateQRCode() { String qrCodeUrl = "https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=<your app id>&redirect_uri=http://localhost:8080/login&state=<random state>"; try { qrCodeUrl = QRCode.from(qrCodeUrl).to(ImageType.PNG).withSize(250, 250).stream().collect(Collectors.toBase64String); } catch (WriterException | IOException e) { e.printStackTrace(); } return "data:image/png;base64," + qrCodeUrl; } @GetMapping("/check-login-status") public Map<String, Object> checkLoginStatus() { OAuth2AuthenticationToken authenticationToken = (OAuth2AuthenticationToken) SecurityContextHolder.getContext().getAuthentication(); OAuth2AuthorizedClient authorizedClient = authorizedClientService.loadAuthorizedClient(authenticationToken.getAuthorizedClientRegistrationId(), authenticationToken.getName()); String accessToken = authorizedClient.getAccessToken().getTokenValue(); String openId = restTemplate.getForObject("https://graph.qq.com/oauth2.0/me?access_token=" + accessToken, String.class); openId = StringUtils.substringBetween(openId, "\"openid\":\"", "\"}"); Map<String, Object> userInfo = restTemplate.getForObject("https://graph.qq.com/user/get_user_info?access_token=" + accessToken + "&oauth_consumer_key=<your app id>&openid=" + openId, Map.class); return userInfo; } } ``` 7. 在前端Vue项目中，实现登录状态检查。在App.vue文件中添加以下代码： ```vue <script> export default { name: 'App', data() { return { isLogin: false, qrCodeUrl: '' } }, mounted() { this.generateQRCode() this.checkLoginStatus() setInterval(() => { this.checkLoginStatus() }, 3000) }, methods: { async checkLoginStatus() { const response = await this.$http.get('/qq-login/check-login-status') if (response.status === 200) { this.userInfo = response.data this.isLogin = true } } } } </script> ``` 至此，我们就成功地实现了Spring Boot+Vue代码实现第三方QQ登录的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值