스포티파이 for Developers 튜토리얼 번역 ( 4 )

암시적 승인 플로우

!!!암시적 승인 플로우에는 몇 가지 중요한 보안 취약점이 있으므로, 이 플로우 사용을 강력히 권장하지 않습니다. 클라이언트 시크릿을 안전하게 저장할 수 없는 경우에는 PKCE와 함께 사용되는 인증 코드 플로우를 대신 사용하세요.!!!

암시적 승인 플로우는 클라이언트 측에서 수행되며, 비밀 키를 포함하지 않습니다. 따라서 서버 측 코드가 필요하지 않습니다. 발급된 액세스 토큰은 단기간 동안만 유효하며, 만료 시 갱신할 수 있는 리프레시 토큰이 제공되지 않습니다.

다음 다이어그램은 암시적 승인 플로우가 어떻게 작동하는지 보여줍니다:

전제 조건

이 가이드는 다음을 전제로 합니다:

• 인증 가이드를 읽었습니다.
• 앱 가이드를 따라 앱을 생성했습니다.

소스 코드

GitHub의 web-api-examples 저장소에서 암시적 승인 플로우를 구현한 예제 앱을 찾을 수 있습니다.

사용자 권한 요청

우리 애플리케이션은 /authorize 엔드포인트로 다음 매개변수를 포함한 GET 요청을 작성해야 합니다:

쿼리 매개변수	필수 여부	값
client_id	필수	애플리케이션을 등록할 때 Spotify에서 제공한 클라이언트 ID
response_type	필수	token으로 설정
redirect_uri	필수	사용자가 권한을 부여하거나 거부한 후 리디렉션할 URI. 이 URI는 애플리케이션을 등록할 때 지정한 리디렉션 URI 허용 목록에 입력되어 있어야 합니다. 여기서 redirect_uri의 값은 애플리케이션을 등록할 때 입력한 값과 정확히 일치해야 합니다. 대소문자, 슬래시 포함 여부 등을 포함하여 정확히 일치해야 합니다.
state	선택 사항, 강력히 권장	요청과 응답을 연관시키는 데 유용합니다. redirect_uri가 예측될 수 있으므로, state 값을 사용하여 들어오는 연결이 인증 요청의 결과임을 확인할 수 있습니다. 이 state 변수에 무작위 문자열을 생성하거나 일부 클라이언트 상태(예: 쿠키)의 해시를 인코딩하여 응답을 검증함으로써 요청과 응답이 동일한 브라우저에서 시작되었음을 추가로 확인할 수 있습니다. 이는 크로스 사이트 요청 위조와 같은 공격에 대한 보호를 제공합니다. RFC-6749를 참조하세요.
scope	선택 사항	공백으로 구분된 스코프 목록
show_dialog	선택 사항	사용자가 이미 애플리케이션을 승인한 경우에도 앱 승인을 다시 요청할지 여부를 설정합니다. 기본값은 false로, 사용자가 애플리케이션을 이미 승인한 경우 자동으로 redirect_uri에 지정된 URI로 리디렉션될 수 있습니다. true로 설정하면 사용자가 자동으로 리디렉션되지 않으며 앱을 다시 승인해야 합니다.

요청은 일반적으로 브라우저에서 전송됩니다.

다음 JavaScript 샘플은 권한 요청을 작성합니다:

코드 예시: JavaScript

var client_id = 'CLIENT_ID';
var redirect_uri = 'http://localhost:8888/callback';

var state = generateRandomString(16);

localStorage.setItem(stateKey, state);
var scope = 'user-read-private user-read-email';

var url = 'https://accounts.spotify.com/authorize';
url += '?response_type=token';
url += '&client_id=' + encodeURIComponent(client_id);
url += '&scope=' + encodeURIComponent(scope);
url += '&redirect_uri=' + encodeURIComponent(redirect_uri);
url += '&state=' + encodeURIComponent(state);

요청이 처리되면, 사용자는 지정된 스코프 내에서 접근 권한을 승인하라는 인증 대화 상자를 보게 됩니다.

Spotify 계정 서비스는 접근이 요청된 스코프의 세부 정보를 표시합니다. 사용자가 로그인하지 않은 경우, Spotify 자격 증명을 사용하여 로그인하라는 메시지가 표시됩니다. 사용자가 로그인하면, 스코프에 정의된 리소스 또는 작업에 대한 접근을 승인하도록 요청받습니다.

마지막으로, 사용자는 지정된 redirect_uri로 다시 리디렉션됩니다. 사용자가 요청을 수락하거나 거부하면, Spotify OAuth 2.0 서버는 사용자를 redirect_uri로 다시 리디렉션합니다. 이 예에서 리디렉션 주소는 https://localhost:8888/callback입니다.

응답

사용자가 접근을 허용하면, 최종 URL에는 다음 데이터가 쿼리 문자열로 인코딩된 해시 프래그먼트가 포함됩니다.

쿼리 매개변수	값
access_token	예를 들어, Spotify Web API 서비스에 제공할 수 있는 액세스 토큰
token_type	값: "Bearer"
expires_in	액세스 토큰이 유효한 기간(초)
state	인증 URI에 제공된 state 매개변수의 값

예를 들어:

https://example.com/callback#access_token=NwAExz...BV3O2Tk&token_type=Bearer&expires_in=3600&state=123

사용자가 접근을 거부하면, 액세스 토큰이 포함되지 않으며 최종 URL에는 다음 매개변수가 포함된 쿼리 문자열이 포함됩니다:

쿼리 매개변수	값
error	인증 실패 이유, 예: "access_denied"
state	요청 시 제공한 state 매개변수의 값

예를 들어:

https://example.com/callback?error=access_denied&state=123

다음 단계는?

액세스 토큰을 사용하여 Spotify Web API에서 데이터를 가져오는 방법은 액세스 토큰 가이드를 참조하여 배우세요.

원문