SpringBoot+Vue实现第三方微博登录(二)

12 篇文章 0 订阅
11 篇文章 0 订阅

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_idtruestring申请应用时分配的AppKey。
redirect_uritruestring授权回调地址,站外应用需与设置的回调地址一致,站内应用需填写canvas page的地址。
scopefalsestring申请scope权限所需参数,可一次申请多个scope权限,用逗号分隔。使用文档
statefalsestring用于保持请求和回调的状态,在回调时,会在Query Parameter中回传该参数。开发者可以用这个参数验证请求有效性,也可以记录用户请求授权页前的位置。这个参数可用于防止跨站请求伪造(CSRF)攻击
displayfalsestring授权页面的终端类型,取值见下面的说明。
forceloginfalseboolean是否强制用户重新登录,true:是,false:否。默认false。
languagefalsestring授权页语言,缺省为中文简体版,en为英文版。英文版测试中,开发者任何意见可反馈至 @微博API

返回数据:

返回值字段字段类型字段说明
codestring用于第二步调用oauth2/access_token接口,获取授权后的access token。
statestring如果传递参数,会回传该参数。

返回示例:

// 请求地址
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("-", "");
    // 保存到Redis
    redisUtils.set(WEIBOSTATE + "-" + uuid, uuid, expiration, TimeUnit.MINUTES);

    // 拼接url
    StringBuilder 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_idtruestring申请应用时分配的AppKey。
redirect_uritruestring授权回调地址,站外应用需与设置的回调地址一致,站内应用需填写canvas page的地址。
scopefalsestring申请scope权限所需参数,可一次申请多个scope权限,用逗号分隔。使用文档
statefalsestring用于保持请求和回调的状态,在回调时,会在Query Parameter中回传该参数。开发者可以用这个参数验证请求有效性,也可以记录用户请求授权页前的位置。这个参数可用于防止跨站请求伪造(CSRF)攻击
displayfalsestring授权页面的终端类型,取值见下面的说明。
forceloginfalseboolean是否强制用户重新登录,true:是,false:否。默认false。
languagefalsestring授权页语言,缺省为中文简体版,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_idtruestring申请应用时分配的AppKey。
client_secrettruestring申请应用时分配的AppSecret。
grant_typetruestring请求的类型,填写authorization_code
codeturestring调用authorize获得的code值。
rediect_urlturestring回调地址,需需与注册应用里的回调地址一致。

返回说明

返回值字段字段类型字段说明
access_tokenstring用户授权的唯一票据,用于调用微博的开放接口,同时也是第三方应用验证微博用户登录的唯一票据,第三方应用应该用该票据和自己应用内的用户建立唯一影射关系,来识别登录状态,不能使用本返回值里的UID字段来做登录识别。
expires_instringaccess_token的生命周期,单位是秒数。
remind_instringaccess_token的生命周期(该参数即将废弃,开发者请使用expires_in)。
uidstring授权用户的UID,本字段只是为了方便开发者,减少一次user/show接口调用而返回的,第三方应用不能用此字段作为用户登录状态的识别,只有access_token才是用户授权的唯一票据。
{
  "access_token":"123123123123",
   "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_tokentruestring采用OAuth授权方式为必填参数,OAuth授权后获得。
uidtrueint64需要查询的用户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_tokentruestring采用OAuth授权方式为必填参数,OAuth授权后获得。

使用场景说明

1. 应用下线时,清空所有用户的授权

2. 应用新上线了功能,需要取得用户scope权限,可以回收后重新引导用户授权

3. 开发者调试应用,需要反复调试授权功能

4. 应用内实现类似登出微博帐号的功能

6. 测试网站(地址),需要的小伙伴可以测试

6.1 OAuth2.0错误响应中的错误码定义如下表所示:

错误码(error)错误编号(error_code)错误描述(error_description)
redirect_uri_mismatch21322重定向地址不匹配
invalid_request21323请求不合法
invalid_client21324client_id或client_secret参数无效
invalid_grant21325提供的Access Grant是无效的、过期的或已撤销的
unauthorized_client21326客户端没有权限
expired_token21327token过期
unsupported_grant_type21328不支持的 GrantType
unsupported_response_type21329不支持的 ResponseType
access_denied21330用户或授权服务器拒绝授予数据访问权限
temporarily_unavailable21331服务暂时无法访问
appkey permission denied21337应用权限不足

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

6.3 SpringBoot+Vue实现第三方微博登录(一)

6.4 其他第三方登录方式:第三方登录汇总

7. 源码购买

7.1 简洁版源码(淘宝店铺:爱创客网络)

只包含登录,第三方登录,跳转首页(没有菜单!),技术框架:SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等

7.2 完整版本源码(淘宝店铺:爱创客网络)

测试地址(测试地址是完整版的):www.youyoushop.work

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值