如何将Spring Boot与Spotify OAuth 2身份验证集成

时间:2019-05-24 21:09:45

标签: spring-boot spotify spring-security-oauth2 spring-oauth2

我是弹簧靴和弹簧安全方面的新手。所以我从一些教程开始。现在,我想在示例应用程序中将oauth身份验证与spotify集成在一起。

我已经根据spring.io的spring boot oauth 2教程进行了定向。将说明我如何将oauth与Facebook和github集成。我自定义了application.yml以发现配置,但是没有用。

application.yml

security:
  oauth2:
    client:
      clientId: <my-client-id>
      clientSecret: <my-secret>
      accessTokenUri: https://accounts.spotify.com/api/token
      userAuthorizationUri: https://accounts.spotify.com/authorize
      tokenName: oauth_token
      authenticationScheme: query
      clientAuthenticationScheme: form
      scope: user-read-private, user-read-email
    resource:
      userInfoUri: https://api.spotify.com/v1/me

SpotifyOAuthApplication.java

package sh.stern.SpotifyOAuth;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.security.oauth2.client.EnableOAuth2Sso;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.web.csrf.CookieCsrfTokenRepository;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.security.Principal;

@SpringBootApplication
@EnableOAuth2Sso
@RestController
public class SpotifyOAuthApplication extends WebSecurityConfigurerAdapter {

    public static void main(String[] args) {
        SpringApplication.run(SpotifyOAuthApplication.class, args);
    }

    @RequestMapping("/user")
    public Principal user(Principal principal) {
        return principal;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .antMatcher("/**")
                .authorizeRequests()
                .antMatchers("/", "/login**", "/webjars/**", "/error**")
                .permitAll()
                .anyRequest()
                .authenticated()
                .and().logout().logoutSuccessUrl("/").permitAll()
                .and().csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
    }
}

/resources/static/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Demo</title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width"/>
    <base href="/"/>
    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Demo</h1>
<div class="container">
    <div class="container unauthenticated">
        With Spotify: <a href="/login">click here</a>
    </div>
    <div class="container authenticated" style="display:none">
        Logged in as: <span id="user"></span>
        <div>
            <button onClick="logout()" class="btn btn-primary">Logout</button>
        </div>
    </div>
    <script type="text/javascript">
      $.get("/user", function(data) {
        $("#user").html(data.userAuthentication.details.name);
        $(".unauthenticated").hide()
        $(".authenticated").show()
      });

      var logout = function() {
        $.post("/logout", function() {
          $("#user").html('');
          $(".unauthenticated").show();
          $(".authenticated").hide();
        });
        return true;
      }

      $.ajaxSetup({
        beforeSend : function(xhr, settings) {
          if (settings.type == 'POST' || settings.type == 'PUT'
            || settings.type == 'DELETE') {
            if (!(/^http:.*/.test(settings.url) || /^https:.*/
              .test(settings.url))) {
              // Only send the token to relative URLs i.e. locally.
              xhr.setRequestHeader("X-XSRF-TOKEN",
                Cookies.get('XSRF-TOKEN'));
            }
          }
        }
      });
    </script>
    <script type="text/javascript" src="/webjars/js-cookie/js.cookie.js"></script>
</div>
</body>
</html>

build.gradle

plugins {
    id 'org.springframework.boot' version '2.1.5.RELEASE'
    id 'java'
}

apply plugin: 'io.spring.dependency-management'

group = 'sh.stern'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    testImplementation 'org.springframework.security:spring-security-test'

    compile group: 'org.springframework.security.oauth.boot', name: 'spring-security-oauth2-autoconfigure', version: '2.1.5.RELEASE'
    compile group: 'org.webjars', name: 'jquery', version: '3.4.1'
    compile group: 'org.webjars', name: 'js-cookie', version: '2.1.0'
    compile group: 'org.webjars', name: 'bootstrap', version: '4.3.1'
    compile group: 'org.webjars', name: 'webjars-locator-core', version: '0.37'
}

如果我启动我的应用程序并在localhost:8080上打开Web应用程序,则会重定向到Spotify。我登录到我的Spotify帐户,并重定向到我的应用程序,但是在重定向后,我得到以下错误:

2019-05-24 23:00:17.564  WARN 55176 --- [io-8080-exec-10] o.s.b.a.s.o.r.UserInfoTokenServices      : Could not fetch user details: class org.springframework.web.client.HttpClientErrorException$Unauthorized, 401 Unauthorized

我是否配置了application.yml?

1 个答案:

答案 0 :(得分:0)

我可以找到问题,application.yml配置错误。看来tokenName是错误的。我删除了此属性,现在可以使用了。

配置现在看起来像这样:

security:
  oauth2:
    client:
      clientId: <my-client-id>
      clientSecret: <my-client-secret>
      accessTokenUri: https://accounts.spotify.com/api/token
      userAuthorizationUri: https://accounts.spotify.com/authorize
      authenticationScheme: query
      clientAuthenticationScheme: form
      scope: user-read-private, user-read-email
    resource:
      userInfoUri: https://api.spotify.com/v1/me