SpringBoot+Vue实现第三方微博登录(二)
1. 准备工作(官方文档:地址)
本步骤的作用:
接入微博登录前,网站需首先进行申请,获得对应的appid与appkey,以保证后续流程中可正确对网站与用户进行验证与授权。
1.1 保存appid和appkey
appid:应用的唯一标识。在OAuth2.0认证过程中,appid的值即为oauth_consumer_key的值。
appkey:appid对应的密钥,访问用户资源时用来验证应用的合法性。在OAuth2.0认证过程中,appkey的值即为oauth_consumer_secret的值。
2. 放置“微博登录”按钮
本步骤的作用:
在网站页面上放置“微博登录”按钮,并为按钮添加前台代码,实现点击按钮即弹出微博登录对话框 。
2.1 请求用户授权Token,Oauth2/authorize,返回微博登录地址
请求地址:
https://api.weibo.com/oauth2/authorize
请求方法:
GET/POST
请求参数:
必选 | 类型及范围 | 说明 | |
---|---|---|---|
client_id | true | string | 申请应用时分配的AppKey。 |
redirect_uri | true | string | 授权回调地址,站外应用需与设置的回调地址一致,站内应用需填写canvas page的地址。 |
scope | false | string | 申请scope权限所需参数,可一次申请多个scope权限,用逗号分隔。使用文档 |
state | false | string | 用于保持请求和回调的状态,在回调时,会在Query Parameter中回传该参数。开发者可以用这个参数验证请求有效性,也可以记录用户请求授权页前的位置。这个参数可用于防止跨站请求伪造(CSRF)攻击 |
display | false | string | 授权页面的终端类型,取值见下面的说明。 |
forcelogin | false | boolean | 是否强制用户重新登录,true:是,false:否。默认false。 |
language | false | string | 授权页语言,缺省为中文简体版,en为英文版。英文版测试中,开发者任何意见可反馈至 @微博API |
返回数据:
返回值字段 | 字段类型 | 字段说明 |
---|---|---|
code | string | 用于第二步调用oauth2/access_token接口,获取授权后的access token。 |
state | string | 如果传递参数,会回传该参数。 |
返回示例:
// 请求地址
https://api.weibo.com/oauth2/authorize?client_id=123050457758183&redirect_uri=http://www.example.com/response&response_type=code// 同意授权后会重定向
http://www.example.com/response&code=CODE
2.2 下载“微博登录”按钮图片,并将按钮放置在页面合适的位置
可以到阿里矢量图库下载更多图标:阿里巴巴矢量图标库 。
2.3 把“微博登录”按钮添加前台代码
2.3.1 效果演示
2.3.2 前端代码(Vue)
为了实现上述效果,应该为“微博登录”按钮图片添加如下前台代码:
<div style="line-height: 22px;margin:0 0 8px 0;color: #9b9b9b;"><span style="vertical-align:middle">第三方登录:</span><img :src="qqIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="QQ"><img :src="baiduIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="百度"><img :src="weiboIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="微博"><img :src="zhifubaoIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="支付宝"><img :src="giteeIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="Gitee"><img :src="githubIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="GitHub">
</div>
2.3.3 后端代码(Java)
1. 微博登录配置文件信息:
# 微博登录配置
weibo.appID = 266666664(替换成你的)
weibo.appKEY = 666666666613a0b31579(替换成你的)
weibo.redirectURI = https://www.youyoushop.work/weiBoCallback(替换成你的)
weibo.authorizeURL = https://api.weibo.com/oauth2/authorize
weibo.accessToken = https://api.weibo.com/oauth2/access_token
weibo.userJson = https://api.weibo.com/2/users/show.json
weibo.revokeoauth = https://api.weibo.com/oauth2/revokeoauth2
2. 读取配置文件信息常量类:
package com.modules.security.constants;import lombok.Data;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;/*** 微博登陆常量配置类*/@Data
@Configuration
@PropertySource("classpath:thirdparty/config.properties") // 指定配置文件的路径,属性文件需放在根目录的resources文件夹下面,才能被读取出来
public class WeiBoConstants {@Value("${weibo.appID}")private String appID;@Value("${weibo.appKEY}")private String appKEY;@Value("${weibo.redirectURI}")private String redirectURI;@Value("${weibo.authorizeURL}")private String authorizeURL;@Value("${weibo.accessToken}")private String accessToken;@Value("${weibo.userJson}")private String userJson;@Value("${weibo.revokeoauth}")private String revokeoauth;}
3. Conteoller(获取微博登录的url)
/**
* 获得跳转到微博登录页的url,前台直接a连接访问
*
* @return
* @throws Exception
*/
@LogAnnotation("获得跳转到微博登录页的url")
@ApiOperation("获得跳转到微博登录页的url")
@AnonymousAccess
@GetMapping("/getWeiBoCode")
public ResponseEntity<Object> getWeiBoCode() throws Exception {// 授权地址 ,进行Encode转码String authorizeURL = weiBoConstants.getAuthorizeURL();// 回调地址 ,回调地址要进行Encode转码String redirectUri = weiBoConstants.getRedirectURI();//用于第三方应用防止CSRF攻击String uuid = UUID.randomUUID().toString().replaceAll("-", "");// 保存到RedisredisUtils.set(WEIBOSTATE + "-" + uuid, uuid, expiration, TimeUnit.MINUTES);// 拼接urlStringBuilder url = new StringBuilder();url.append(authorizeURL);url.append("?client_id=" + weiBoConstants.getAppID());url.append("&response_type=code");// 转码url.append("&redirect_uri=" + URLEncodeUtil.getURLEncoderString(redirectUri));url.append("&state=" + uuid);return ResponseEntity.ok(url);
}
3. 获取授权过的Access Token
本步骤的作用:
通过用户验证登录和授权,获取Access Token,为下一步获取用户的uid做准备。
同时,Access Token是应用在调用OpenAPI访问和修改用户数据时必须传入的参数。
3.1 简介
即server-side模式,是OAuth2.0认证的一种模式,又称Web Server Flow。
适用于需要从web server访问的应用,例如Web网站。
3.2 获取Authorization Code(同2.1)
请求地址:
https://api.weibo.com/oauth2/authorize
请求方法:
GET/POST
请求参数:
必选 | 类型及范围 | 说明 | |
---|---|---|---|
client_id | true | string | 申请应用时分配的AppKey。 |
redirect_uri | true | string | 授权回调地址,站外应用需与设置的回调地址一致,站内应用需填写canvas page的地址。 |
scope | false | string | 申请scope权限所需参数,可一次申请多个scope权限,用逗号分隔。使用文档 |
state | false | string | 用于保持请求和回调的状态,在回调时,会在Query Parameter中回传该参数。开发者可以用这个参数验证请求有效性,也可以记录用户请求授权页前的位置。这个参数可用于防止跨站请求伪造(CSRF)攻击 |
display | false | string | 授权页面的终端类型,取值见下面的说明。 |
forcelogin | false | boolean | 是否强制用户重新登录,true:是,false:否。默认false。 |
language | false | string | 授权页语言,缺省为中文简体版,en为英文版。英文版测试中,开发者任何意见可反馈至 @微博API |
返回说明:
1. 如果用户成功登录并授权,则会跳转到指定的回调地址,并在redirect_uri地址后带上Authorization Code和原始的state值。如:
https://api.weibo.com/oauth2/authorize?code=1E83738E79B0CEBF13FC7C3B094D9B3C&state=cca3c15c527649409cccd889ad2963fe
2. 如果用户在登录授权过程中取消登录流程,对于PC网站,登录页面直接关闭。
3.3 通过Authorization Code获取Access Token
请求地址:
https://api.weibo.com/oauth2/access_token
请求方法:
POST
请求参数:
必选 | 类型及范围 | 说明 | |
---|---|---|---|
client_id | true | string | 申请应用时分配的AppKey。 |
client_secret | true | string | 申请应用时分配的AppSecret。 |
grant_type | true | string | 请求的类型,填写authorization_code |
code | ture | string | 调用authorize获得的code值。 |
rediect_url | ture | string | 回调地址,需需与注册应用里的回调地址一致。 |
返回说明:
返回值字段 | 字段类型 | 字段说明 |
---|---|---|
access_token | string | 用户授权的唯一票据,用于调用微博的开放接口,同时也是第三方应用验证微博用户登录的唯一票据,第三方应用应该用该票据和自己应用内的用户建立唯一影射关系,来识别登录状态,不能使用本返回值里的UID字段来做登录识别。 |
expires_in | string | access_token的生命周期,单位是秒数。 |
remind_in | string | access_token的生命周期(该参数即将废弃,开发者请使用expires_in)。 |
uid | string | 授权用户的UID,本字段只是为了方便开发者,减少一次user/show接口调用而返回的,第三方应用不能用此字段作为用户登录状态的识别,只有access_token才是用户授权的唯一票据。 |
{"access_token":"1236666666TDB","remind_in":"157679999","expires_in":157679999,"uid":"123123123","isRealName":"true"
}
4. OpenAPI获取用户信息调用说明
本步骤的作用:
获取到Access Token和uid后,可通过调用OpenAPI来获取或修改用户个人信息。
请求地址:
https://api.weibo.com/2/users/show.json
请求方法:
GET
请求参数:
必选 | 类型及范围 | 说明 | |
---|---|---|---|
access_token | true | string | 采用OAuth授权方式为必填参数,OAuth授权后获得。 |
uid | true | int64 | 需要查询的用户ID。 |
返回说明:
private String idstr; // 字符串型的用户UID
private String screen_name; // 用户昵称
private String name; // 友好显示名称
private String province; // 用户所在省级ID
private String city; // 用户所在城市ID
private String location; // 用户所在地
private String description; // 用户个人描述
private String url; // 用户博客地址
private String profile_image_url; // 用户头像地址(中图),50×50像素
private String profile_url; // 用户的微博统一URL地址
private String domain; // 用户的个性化域名
private String weihao; // 用户的微号
private String gender; // 性别,m:男、f:女、n:未知
private String followers_count; // 粉丝数
private String friends_count; // 关注数
private String statuses_count; // 微博数
private String favourites_count; // 收藏数
private String created_at; // 用户创建(注册)时间
private String following; // 暂未支持
private String allow_all_act_msg; // 是否允许所有人给我发私信,true:是,false:否
private String geo_enabled; // 是否允许标识用户的地理位置,true:是,false:否
private String verified; // 是否是微博认证用户,即加V用户,true:是,false:否
private String verified_type; // 是否是微博认证用户,即加V用户,true:是,false:否
private String remark; // 用户备注信息,只有在查询用户关系时才返回此字段
private String allow_all_comment; // 是否允许所有人对我的微博进行评论,true:是,false:否
private String avatar_large; // 用户头像地址(大图),180×180像素
private String avatar_hd; // 用户头像地址(高清),高清头像原图
private String verified_reason; // 认证原因
private String follow_me; // 该用户是否关注当前登录用户,true:是,false:否
private String online_status; // 用户的在线状态,0:不在线、1:在线
private String bi_followers_count; // 用户的互粉数
private String lang; // 用户当前的语言版本,zh-cn:简体中文,zh-tw:繁体中文,en:英语
5. 解除微博授权功能
本步骤的作用:
授权回收接口,帮助开发者主动取消用户的授权。(微博授权登录成功后,下次会自动登录跳过授权,所以微博授权退出时清除授权,下次继续授权登录)
请求地址:
https://api.weibo.com/oauth2/revokeoauth2
请求方法:
GET/POST
请求参数:
必选 | 类型及范围 | 说明 | |
---|---|---|---|
access_token | true | string | 采用OAuth授权方式为必填参数,OAuth授权后获得。 |
使用场景说明
1. 应用下线时,清空所有用户的授权
2. 应用新上线了功能,需要取得用户scope权限,可以回收后重新引导用户授权
3. 开发者调试应用,需要反复调试授权功能
4. 应用内实现类似登出微博帐号的功能
6. 测试网站(地址),需要的小伙伴可以测试
6.1 OAuth2.0错误响应中的错误码定义如下表所示:
错误码(error) | 错误编号(error_code) | 错误描述(error_description) |
---|---|---|
redirect_uri_mismatch | 21322 | 重定向地址不匹配 |
invalid_request | 21323 | 请求不合法 |
invalid_client | 21324 | client_id或client_secret参数无效 |
invalid_grant | 21325 | 提供的Access Grant是无效的、过期的或已撤销的 |
unauthorized_client | 21326 | 客户端没有权限 |
expired_token | 21327 | token过期 |
unsupported_grant_type | 21328 | 不支持的 GrantType |
unsupported_response_type | 21329 | 不支持的 ResponseType |
access_denied | 21330 | 用户或授权服务器拒绝授予数据访问权限 |
temporarily_unavailable | 21331 | 服务暂时无法访问 |
appkey permission denied | 21337 | 应用权限不足 |
6.2 每个人做的项目需求不同,可能会出现不同的问题,文章仅供参考
6.3 SpringBoot+Vue实现第三方微博登录(一)
6.4 其他第三方登录方式:https://www.cnblogs.com/liyhbk/category/2089783.html
7. 源码购买
7.1 简洁版(淘宝源码)
包含登录,第三方登录,跳转首页,SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等
7.2 多功能版本(淘宝源码)
包含登录,注册,第三方登录,完整的系统管理模块,系统工具模块,系统监控模块,个人中心等,SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等
SpringBoot+Vue实现第三方微博登录(二)相关推荐
- SpringBoot+Vue实现第三方微博登录(一)
1. 微博登录介绍(测试网站:地址) 微博登录包括身份认证.用户关系以及内容传播.允许用户使用微博帐号登录访问第三方网站,分享内容,同步信息.它有如下特点: 1. 直接用微博账号登录你的应用或网站. ...
- SpringBoot+Vue实现第三方QQ登录(二)
1. 准备工作_OAuth2.0(官网地址:开发流程) 本步骤的作用: 接入QQ登录前,网站需首先进行申请,获得对应的appid与appkey,以保证后续流程中可正确对网站与用户进行验证与授权. 1. ...
- SpringBoot+Vue实现第三方百度登录(二)
1. 准备工作 本步骤的作用: 接入百度登录前,网站需首先进行申请,获得对应的appid与appkey,以保证后续流程中可正确对网站与用户进行验证与授权. 1.1 保存appid和appkey app ...
- SpringBoot+Vue实现第三方QQ登录(一)
1. QQ登录介绍(测试网站:地址) QQ互联开放平台为第三方网站提供了丰富的API(官网地址: QQ互联官网首页).第三方网站接入QQ互联开放平台后,即可通过调用平台提供的API实现用户使用QQ帐号 ...
- 网站接入第三方微博登录—PHP
跟着官网的步骤完成基础配置:网站接入 - 微博API 引导登录前,需要在微博开放平台设置好回调地址 登录流程: 1.引导用户到如下地址:https://api.weibo.com/oauth2/aut ...
- SpringBoot+Vue项目中实现登录验证码校验
SpringBoot+Vue项目中实现登录验证码校验 在各大项目中,为保证数据的安全性,通常在登录页面加入验证码校验,以防止爬虫带来的数据泄露危机.本文将介绍在前后端分离的项目中,怎样实现图形验证码校 ...
- web app 第三方登录-微博登录(二)
在上一篇文章中,我们讲了android与js间如何交互,说白了就是在H5页面上的登录按钮如何触发android中的处理流程. 本篇文章主要讲的是当你点击登录按钮之后发生的事. 首先,在js中触发了交互 ...
- vue 实现第三方QQ登录
在登陆界面赋予可qq登录的功能 第一步 自己要有一个已备案的,本身具有登录功能的网站.网站需要有QQ登录的逻辑(登录页面,回跳页面). 在QQ互联上进行身份认证,审核通过. 在QQ互联上创建应用,填入 ...
- springboot网站应用使用第三方qq登录
使用第三方qq登录需要在QQ互联官网https://connect.qq.com/中申请成功才可以使用. 1.登录成功后进入个人设置中心设置个人信息 2.选择公司或个人接入,这里我选择个人接入 3. ...
最新文章
- 【深度学习】caffe 中的一些参数介绍
- 6.神操作(把master上的三个安装包scp给slave)—Hadoop完全分布式搭建完成
- matlab点云配准(总结性)
- c语言程序设计复习提纲,C语言程序设计复习提纲
- crammd5 php,使用CRAMMD5的SMTP身份验证
- java加载机制_详解Java类加载机制
- 突发,Spring框架发现重大漏洞!
- 飞鸽传书2007绿色版下载
- Photoshop教程五:图层混合模式
- IT大学生成长周报 | 第 4 期
- in comment after two dashes (--) next character must be not - (position: START_TAG seen ...
- BigDecimal的8种round舍入模式
- sendgrid html text,在Node.js中的SendGrid的“发件人”字段中添加名称
- Oracle 11gR2 dataguard搭建说明 --- duplicate方式
- python大学生信息管理系统_基于Python的高等学校社团信息管理系统
- 初级SHELL脚本(如何书写一个CentOS7的更改单网卡IP的shell脚本)
- win10手机系统 Android,Win10 Mobile内置完整安卓系统
- 百度百科创建词条后审核不通过怎么办?
- 前端保留两位有效数字_js保留两位小数方法总结
- golang 设置 http response 响应头与坑
热门文章
- 在Centos 8 上 部署 .Net Core 应用程序
- 服务器维护入门基础知识,网络维护的一些基础知识
- dnf正在连接服务器 黑屏,DNF卡登陆卡黑屏怎么办 更新跨区后各BUG问题解决方法分享...
- 十年码农讲解Linux型内核,操作系统 --- 虚拟文件系统
- 搜索卫士保驾护航,开源轮子不裸奔
- 【高等数学】简单版上篇
- 短语、直接短语、句柄的区别
- 如何用计算机模拟物理现象,浅谈计算机模拟物理实验教学
- “智慧监狱” 来了,你准备好了吗?
- Verycd网站就要关闭了