인증 코드 획득

NextJS 및 Google Firebase 으로 이 프로젝트를 만들고 있습니다. 따라하고 있다면 먼저 이 시작 안내서를 따르고 Spotify Application 을 만드십시오.

어쨌든 OAuth 란 무엇입니까

The OAuth 2.0 authorization framework enables a third-party application to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowing the third-party application to obtain access on its own behalf.

-Internet Engineering Task Force

먼저 OAuth 2.0 흐름의 기본 사항을 살펴보겠습니다. 이해하는 데 가장 오랜 시간이 걸렸기 때문입니다.
Grant Types라는 OAuth에 대한 다양한 접근 방식이 있습니다. 권한 부여 유형here.에 대해 자세히 알아볼 수 있습니다. 저는 사용자가 자신의 Spotify 계정에 한 번만 액세스 권한을 부여하면 되도록 Authorization Code를 선택했습니다.

고객에게 음료를 제공하려는 바텐더라고 생각하십시오. 바텐더가 서비스를 제공하기 전에 서비스를 제공할 수 있는 권한을 가질 수 있는 나이인지 확인해야 합니다. 관리 당국에서 후원자에게 발급한 ID를 확인하여 이를 수행합니다. 고객은 술을 마실 수 있는 나이임을 당국에 증명한 다음 바텐더에게 제시하여 서비스를 받아야 합니다. 우리의 사용자는 자신이 누구인지 Spotify에 증명해야 하며 Auth Code가 그 증거입니다. 그런 다음 그들은 우리 서버에 해당 증명을 제시하여 우리가 그들을 대신하여 API 호출을 할 수 있도록 합니다.

이해가 되지 않는다면 이 순서도가 이해가 될 것입니다.


보시다시피 모든 것은 사용자가 Spotify에 로그인한 후 받는 특수 문자열인 Auth Code 주위를 돌고 있습니다. 나중에 이를 사용하여Auth Code 사용자가 자신의 계정에 액세스할 수 있도록 허용했는지 Spotify에서 확인합니다.

따라서 이것을 얻기 위한 첫 번째 단계Auth Code는 사용자에게 로그인을 요청하는 것입니다. 로그인을 위해 사용자를 Spotify의 웹사이트로 리디렉션하는 특수 URL을 생성하여 이를 수행합니다.

URL 만들기

사용자에게 Spotify로 로그인하라는 메시지를 표시하면 그렇게 할 수 있도록 특정 URL로 사용자를 보내야 합니다. 저는 React로 이 프로젝트를 구축하고 있으므로 특별히 이 작업을 수행하는 구성 요소를 구축했습니다.

import * as React from "react";
import { useRouter } from "next/router";
import { v4 as uuidv4 } from "uuid";
import * as queryString from "query-string";

const SpotifyLoginButton = () => {
  const router = useRouter();

  const spotifyQueryParams = {
    response_type: "code",
    client_id: process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID,
    scope: "playlist-read-private playlist-modify-private user-read-email",
    redirect_uri: process.env.NEXT_PUBLIC_REDIRECT_URI,
    state: uuidv4(),
  };
  const spotifyOAuthRoute =
    "https://accounts.spotify.com/authorize?" +
    queryString.stringify(spotifyQueryParams);

  const handleClick = (e) => {
    e.preventDefault();
    router.push(spotifyOAuthRoute);
  };

  return <button onClick={handleClick}>Login with Spotify</button>;
};

export default SpotifyLoginButton;

spotifyQueryParams에 특히 주의하십시오. 이러한 값은 특수 URL을 생성하는 방법입니다. 자세히 알아볼 수 있지만here 각 값의 의미를 살펴보겠습니다.

response_type:는 인증 코드가 사용자에게 반환되기를 원함을 나타냅니다

.

client_id:는 우리 Spotify Application의 ID입니다. 이는 Spotify가 API

에 액세스하기 전에 서버를 등록하는 데 필요합니다.

scope:는 사용자가 부여해야 하는 특정 권한을 나타냅니다. read more

redirect_uri:는 Spotify가 인증 코드와 함께 사용자를 다시 보내는 URL입니다. 이 값은 Spotify 응용 프로그램의 설정에서 설정해야 합니다. 현재 개발을 위해 로컬 호스트를 사용하고 있습니다

.

state: 교차 사이트 요청 위조와 같은 공격을 방지하는 데 도움이 됩니다

.

이러한 값을 설정하면 사용자가 로그인할 준비가 된 것입니다! URL을 문자열화하기 위해 query-string을 사용하고 있습니다. URL은 https://accounts.spotify.com/authorize?로 시작합니다. 프로세스의 다음 부분은 Spotify 서버에서 발생하며 우리 사이트는 사용자의 사용자 이름이나 비밀번호를 볼 수 없습니다. 우리 사이트는 현재 Auth Code만 볼 수 있습니다.
useRouter()를 사용하여 사용자를 로그인 URL로 푸시했습니다. 사용자가 링크를 따라가는 것이 아니라 작업을 수행하고 있음을 알기를 원했기 때문에 Anchor 요소 대신 Button 및 함수를 사용했습니다. 다음으로 사용자는 다음과 같은 화면을 보게 됩니다.



사용자가 권한 부여에 동의하면 URL에 인증 코드와 함께 지정된 redirect_uri로 반환됩니다. 마지막으로 전설적인 인증 코드가 있습니다!

이제 우리는 그것으로 무엇을합니까? 다음 게시물에서는 auth code로 수행하는 작업과 프로젝트에서 수행하는 역할에 대해 자세히 설명하겠습니다.