Spotify OAuth2.0 기능 구현

용씨·2023년 2월 11일
0

Nota 프로젝트

목록 보기
4/7

용어 설명

  • 유저(Resource Owner)
    • Spotify 계정을 갖고 있는 사람
  • 클라이언트(Client)
    • 리소스에 접근하려는 애플리케이션
    • 유저의 정보를 Spotify에게 요청하고, 유저에게 서비스를 제공합니다.
    • 프로젝트에서는 Spring Boot 서버에 해당합니다.
  • 인증 서버(Authorization Server)
    • 스포티파이 인증 서버로, 유저의 정보를 보관하고 있습니다.
    • 유저로부터 인증을 받아 Client에게 유저의 정보를 제공합니다.
    • 인증 및 인가를 수행하는 서버로 리소스에 대한 액세스 토큰을 발행합니다.
    • https://accounts.spotify.com
  • 리소스 서버(Resource Server)
    • 리소스를 호스팅하는 서버로 액세스 토큰의 유효 여부를 확인하고 해당 리소스에 대한 접근을 허용합니다.
    • https://api.spotify.com
  • 인증 코드(Authorization Code)
    • 사용자가 로그인에 성공하고 나서 받는 코드이며 이후 액세스 토큰을 발행할 때 필요합니다.
  • 클라이언트 ID(Client ID), 클라이언트 보안 비밀번호(Client Secret Password)
    • 등록된 클라이언트에게 발급하는 정보로 인증하는 데 사용됩니다.
  • 권한 범위(Scope)
    • 리소스 접근 범위를 의미합니다.
  • 리다이렉트 URI(Redirect URI)
    • 인증 서버가 인증 후 응답을 보낼 클라이언트 URI에 해당합니다.

과정

Spotify Authorization Guide를 참고해주세요.
https://developer.spotify.com/documentation/general/guides/authorization/code-flow/

[Front] 1. Request User Authorization(인가 요청)

Request 필수 항목

  • client_id: Spotify App에서 발급한 Client ID (참고)
  • response_type: Code
  • redirect_uri: Spotify App에서 등록한 redirect_uri와 동일해야 함

프론트에서 Spotify쪽으로 인가 요청을 보냅니다. 요청이 처리되면, 스포티파이 로그인 화면이 보일 것입니다. 사용자가 로그인 하면, 지정된 redirect_uri로 다시 리디렉션됩니다.

Response

  • code: Access Token을 발행하기 위한 인가 코드
  • state

[Front] 2. BackEnd로 인가 코드 전달

code를 parsing해서 백엔드로 보낸다.

https://my-domain.com/callback?code=NApCCg..BkWtQ&state=34fFs29kd09

프론트 쪽은 잘 몰라서 이곳 블로그를 참고해 주세요.

[Back] 3. Access Token 요청

프론트에서 받은 코드를 사용해서 Spotify 서버로 Access Token을 요청합니다.

Request 필수 항목

Request Body Paramter

  • grant_type: authorization_code
  • code: 프론트에서 받은 code
  • redirect_uri

Header Parameter

  • Authorization: Authorization: Basic <base64 encoded client_id:client_secret>
    • 클라이언트 Id는 Base64로 인코딩해야 한다.
  • Content-Type: application/x-www-form-urlencoded

액세스 토큰을 사용하여 Spotify Web API에 요청할 수 있습니다. 요청 안에 Authorization 헤더를 포함해야 합니다.

  • Authorization: Bearer <Access Token>

Response

  • access_token
  • token_type: 항상 Bearer
  • scope
  • expires_in
  • refresh_token
    • code의 유효기간이 만료되면, /api/token 요청 시 refresh token을 사용한다. 그러면 새 access_token과 새 refresh_token이 발급된다.

[Back] 4. Refreshed Access Token 요청

Request

Request Body Parameter

  • grant_type: refresh_token
  • refresh_token

Header Parameter

  • Authorization: Authorization: Basic <base64 encoded client_id:client_secret>
  • Content-Type: application/x-www-form-urlencoded

https://galid1.tistory.com/106
https://tech.kakao.com/2023/01/19/social-login/
https://www.baeldung.com/spring-security-5-oauth2-login
https://velog.io/@kimujin99/Spring-React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-JWT-0


정리

최종 목표
: Spotify 계정으로 로그인, 로그인 유지는 JWT 토큰 검증으로 판단, Spotify의 access token은 저장 후 추천 서비스 요청 헤더에 부착한다.

  • 회원가입 서비스는 x, Spotify 계정으로만 로그인가능하게 만들어야합니다.
  • Spotify로부터 받은 access token은 Spotify Api 호출에 사용합니다.
  • Spotify 계정을 갖고 있는 유저는 이미 검증된 것이므로 JWT 토큰을 발급합니다.
  • 즉 회원가입 과정이 생략됩니다. 로그인은 Spotify Auth 기능을 이용합니다.
  • 토큰의 목적이 중요합니다.

앞으로 만들어야 할 로직

  • user-service
    • 회원테이블 만들기
    • Spotify 계정 조회를 통해 email를 가져와서 회원 테이블에 등록시키기
    • 클라이언트에게 JWT 토큰 발급하기
  • apigateway-service
    • access_token 저장하기
    • recommend-service로 가는 API에 access_token 부착하기
    • JWT 토큰 유효 검증하기

계속 생각해 볼 것

  • 기술적 어려움이 뭐가 있을까?
  • 난이도 높은 API 개발
  • 도전적인 것, 실수한 것, 극복한 것 기록하자
profile
아침형 인간이 목표

0개의 댓글