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

1 准备工作

本步骤的作用：

　　接入百度登录前，网站需首先进行申请，获得对应的appid与appkey，以保证后续流程中可正确对网站与用户进行验证与授权。

1.1 保存appid和appkey

　　appid：应用的唯一标识。在OAuth2.0认证过程中，appid的值即为oauth_consumer_key的值。

　　appkey：appid对应的密钥，访问用户资源时用来验证应用的合法性。在OAuth2.0认证过程中，appkey的值即为oauth_consumer_secret的值。

1.2 官方开发文档

百度API文档说明

百度API文档说明

2 放置“百度登录”按钮

本步骤的作用：

　　在网站页面上放置“百度登录”按钮，并为按钮添加前台代码，实现点击按钮即弹出百度登录对话框 。

2.1 下载“百度登录”按钮图片，并将按钮放置在页面合适的位置

　　可以到阿里矢量图库下载更多图标：阿里巴巴矢量图标库 。

2.2 为“百度登录”按钮添加前台代码

2.2.1 效果演示

2.2.2 前端代码(Vue)

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

  第三方登录:
  
  
  
  
  
  

// 百度登录
handleBaiDuLogin() {
  this.dialogVisible = true;
  this.pictureType = 'BaiDuLogin'
},

2.2.3 后端代码(Java)

　　百度登录配置文件信息：

# 百度登录配置

baidu.appID = 6666666（替换成你的）
baidu.appKEY = 666666666666666666（替换成你的）
baidu.redirectURI = https://www.youyoushop.work/baiDuCallback（替换成你的）
baidu.authorizeURL = https://openapi.baidu.com/oauth/2.0/authorize
baidu.accessToken = https://openapi.baidu.com/oauth/2.0/token
baidu.loggedInUser = https://openapi.baidu.com/rest/2.0/passport/users/getLoggedInUser
baidu.userInfo = https://openapi.baidu.com/rest/2.0/passport/users/getInfo
baidu.userFriends = https://openapi.baidu.com/rest/2.0/friends/getFriends
baidu.expireSession = https://openapi.baidu.com/rest/2.0/passport/auth/expireSession
baidu.revokeAuthorization = https://openapi.baidu.com/rest/2.0/passport/auth/revokeAuthorization
baidu.image = http://tb.himg.baidu.com/sys/portraitn/item/
baidu.largeImage = http://tb.himg.baidu.com/sys/portrait/item/

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

package com.liyh.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;

/**
 * 百度登陆常量配置类
 * @author Liyh
 * @date 2020/12/22
 */

@Data
@Configuration
@PropertySource("classpath:thirdparty/config.properties")  // 指定配置文件的路径，属性文件需放在根目录的resources文件夹下面，才能被读取出来
public class BaiDuConstants {

   @Value("${baidu.appID}")
   private String appID;

   @Value("${baidu.appKEY}")
   private String appKEY;

   @Value("${baidu.redirectURI}")
   private String redirectURI;

   @Value("${baidu.authorizeURL}")
   private String authorizeURL;

   @Value("${baidu.accessToken}")
   private String accessToken;

   @Value("${baidu.loggedInUser}")
   private String loggedInUser;

   @Value("${baidu.userInfo}")
   private String userInfo;

   @Value("${baidu.userFriends}")
   private String userFriends;

   @Value("${baidu.expireSession}")
   private String expireSession;

   @Value("${baidu.revokeAuthorization}")
   private String revokeAuthorization;

   @Value("${baidu.image}")
   private String image;

   @Value("${baidu.largeImage}")
   private String largeImage;

}

　　Conteoller（获取微博登录的url）

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