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

请求地址：

　　PC网站：https://api.weibo.com/oauth2/authorize

请求方法：

　　GET/POST

请求参数：

返回数据：

返回示例：

　　// 请求地址
　　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)

　　为了实现上述效果，应该为“微博登录”按钮图片添加如下前台代码：

        第三方登录:
        
        
        
        

// 微博登录
// https://api.weibo.com/oauth2/authorize?client_id=203394&response_type=code&redirect_uri=https%3A%2F%2Fwww.lovezmy.link%2FweiBoCallback&state=439b3e51799553ab
handleWeiBoLogin() {
  getWeiBoCode().then(res => {
    window.location.href = res;
  })
},

2.3.2 后端代码(Java)

　　微博登录配置文件信息：

# 微博登录配置
weibo.appID = 266666664（替换成你的）
weibo.appKEY = 666666666613a0b31579（替换成你的）
weibo.redirectURI = https://www.lovezmy.link/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

　　读取配置文件信息常量类：

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;

}

　　Conteoller（获取微博登录的url）

　　 /**
     * 获得跳转到微博登录页的url,前台直接a连接访问
     *
     * @return
     * @throws Exception
     */
    @LogAnnotation("获得跳转到微博登录页的url")
    @ApiOperation("获得跳转到微博登录页的url")
    @AnonymousAccess
    @GetMapping("/getWeiBoCode")
    public ResponseEntity