Node에서 OAuth 2.0을 구현하는 방법js와 Spotify는 인증 코드 흐름을 사용합니다.

무엇이 위탁 권한 수여입니까?

우선, 위탁 권한 수여는 귀하가 특정한 임무를 수행하는 것을 대표하는 권한을 부여하는 것을 가리킨다.
대리 주차 열쇠를 고려해 보세요. 대리 주차 종업원에게 대리 주차 열쇠를 건네주십시오. 대리 주차와 당신의 차를 되찾는 것을 대표합니다.대리주차 열쇠는 보통 운전자의 문을 열고 시동을 걸지만 트렁크나 잡동사니 상자를 열 수 없다.
사용자 리소스(다른 응용 프로그램에서)에 대한 작업(읽기와 쓰기)을 수행하기 위해 API 요청을 보내는 것과 같은 작업을 수행하는 응용 프로그램은 사용자를 대표하여 그룹 작업을 수행할 수 있도록 권한을 부여받아야 합니다.
OAuth는 모든 관련자가 이러한 과정을 조율할 수 있도록 위탁 프레임워크이다.

노드의 OAuth 2.0회사 명

노드를 설정합니다.서버에서 선택한 프레임워크를 사용하여 실행할 수 있습니다.
Spotify를 예로 삼아 노드의 OAuth 2.0 인증 코드 흐름을 보여 드리겠습니다.js.
최종 신청을 볼 수 있습니다here

1단계: 클라이언트 등록 및 구성

이 규범에 따라 클라이언트는 자원 소유자(최종 사용자)가 권한을 위임받아 보호된 자원 요청을 보내는 응용 프로그램이다.응용 프로그램을 등록하려면 인증 서버에 필요한 정보를 제공해야 합니다.서비스 공급업체에 따라 다릅니다.Spotify를 사용하면 일부 정보는 응용 프로그램 이름, 설명, 사이트, URL 리디렉션을 포함합니다.
애플리케이션을 등록하면 클라이언트 ID와 클라이언트 암호가 제공됩니다.클라이언트 ID 및 클라이언트 암호를 에 저장합니다.환경 파일.

Client_id="your client_id" 
Client_secret="your client secret"

클라이언트 ID는 라이센스 서버에 클라이언트를 검증하는 데 사용되는 고유 식별자입니다.
응용 프로그램에서js는 클라이언트의 세부 사항을 봉인하는 대상을 만듭니다. (client\u id와client\u secret)dotenv 모듈을 사용하여 환경 변수를 불러옵니다.모듈을 설치하려면 npm installdotenv를 실행하십시오.

require('dotenv').config()

const client = {
    client_id: process.env.Client_id,
    client_secret: process.env.Client_secret,
    redirect_uri: "http://localhost:3000/callback"
}

redirect_uri는 리소스 소유자가 클라이언트 권한을 부여하거나 거부한 후 권한 부여 서버에서 사용자 에이전트를 클라이언트로 되돌리는 노드 URL입니다. (이전에는 클라이언트 등록에 사용되었습니다.)

2단계: 승인 요청 보내기

시작 프로세스에 대한 링크를 포함하고 사용자에게 어떤 서비스에 접근할지 알려야 합니다.예를 들어, Spotify 활동을 봅니다.이것은 클라이언트를 권한 수여 서버의 권한 수여 노드에 보내는 것을 통해 이루어진 것이다.authorization guide에서 권한 부여 노드를 찾을 수 있습니다.

다음에 권한 수여 서버의 상세한 정보를 설정합니다.클라이언트의 세부 정보와 같이 세부 정보를 대상에 포함합니다.

const authProvider = {
    authEndpoint: 'https://accounts.spotify.com/authorize',
    tokenEndpoint:  'https://accounts.spotify.com/api/token'
}

이 규범에 따라 권한 수여 단점은 자원 소유자와 상호작용하고 권한 수여를 받는 데 사용된다.영패 단점은 클라이언트가 권한을 부여하거나 영패를 갱신함으로써 방문 영패를 얻는다.
사용자를 권한 부여 노드로 보내려면 권한 부여 노드 URL과 여러 개의 직렬로 연결된 URL 조회 매개 변수가 필요합니다.
클라이언트 ID
클라이언트 등록 후 획득한 클라이언트 id.
응답 유형
코드는 되돌아오는 응답 형식을 표시합니다.
리디렉션 URL
사용자가 클라이언트 권한을 부여 또는 거부한 후 로 리디렉션할 URI입니다.클라이언트의config 대상에 포함합니다.
범위
이것은 클라이언트가 자원 서버에 접근하고자 하는 정보를 가리킨다.
상태
크로스 사이트 요청 위조(CSRF) 공격을 방지하기 위한 임의의 추측할 수 없는 문자열입니다.
모든 검색을 사용하여 URL을 구축하려면 URL 라이브러리를 구축할 수 있습니다.URL을 구성하는 라이브러리입니다.설치하려면 npm installbuild url--save를 실행하십시오.

const buildUrl = require('build-url');
const authorizeUrl = buildUrl(authProvider.authEndpoint, {
    queryParams: {
        client_id: client.client_id,
        redirect_uri: client.redirect_uri,
        state,
        response_type: "code",
        scope: "user-top-read"
    }
});

우선, 우리는 권한 수여 단점을buildUrl 함수의 첫 번째 매개 변수로 전달하고, 그 다음에 검색 매개 변수를 따라갈 것이다.queryParams 객체는 상태와 범위를 제외하고 해석됩니다.Spotify 가이드의 "사용자 톱 읽기"범위는 사용자의 톱 아티스트와 곡에 접근할 수 있는 권한을 제공합니다.

그러면 상태 조회 매개 변수는 무엇입니까?

specification;

The client MUST implement CSRF protection for its redirection URI. .........The binding value used for CSRF protection MUST contain a non-guessable value

추측할 수 없는 값을 어떻게 생성하는지에 대한 규범이 없다.우리는 노드를 사용할 수 있다.jscrypto 모듈은 상태로 사용할 무작위 문자열을 생성합니다.

const crypto = require('crypto');
let state 
crypto.randomBytes(20, (err, buf) => {
  if (err) throw err;
  state = buf.toString('hex')
});

상태 파라미터는 응답 리셋에서 되돌아오기 때문에 클라이언트의 파라미터와 비교해야 하기 때문에 어디에 저장해야 합니다.세션에strorage를 저장할 수 있습니다.세션 저장소를 사용하기 위해서는express 세션 중간부품이 필요합니다.설치하려면 명령 npm install express session을 실행하십시오.

const session = require('express-session');
app.use(session({
    name: 'SESSION_ID',
    secret: process.env.secret, //signs the cookie
    resave: false,
    saveUninitialized: false,
  }))

요청을 권한 부여 단점으로 보냅니다.

app.get('/authorize', (req, res) => {
    req.session.state = state
    res.redirect(authorizeUrl);
})

사용자는 authorize 링크를 누르면 이 과정을 시작합니다. 그들은 서비스 공급자의 권한 수여 노드로 다시 지정됩니다. 그곳에서 그들은 먼저 자신에 대해 신분 검증을 한 다음에 그들에게 범위를 표시합니다.고객은 접근할 수 있는 정보와 접근 권한을 부여하는 것에 동의할 수 있습니까?사용자가 동의하든 말든 재지정 URL을 사용하여 클라이언트로 다시 지정합니다.

3단계: 액세스 토큰으로 인증 코드 교환

사용자가 클라이언트에게 액세스 권한을 부여하면 URL에 코드 및 상태 조회 매개 변수가 포함됩니다.클라이언트 액세스를 거부하면 URL에 오류 매개 변수를 포함하고 권한 부여가 실패한 이유, 즉 액세스 거부를 설명합니다.

클라이언트가 상태 매개 변수를 추출하여 세션 상태와 비교합니다. 일치하지 않으면 클라이언트가 계속 처리하지 않습니다.

if(req.query.state !== req.session.state) {
        res.render('error', {error: 'State doesn\'t match'})
    }

일치하면 클라이언트는 코드를 추출하고 권한 수여 서버 영패 단점에 대한post 요청을 통해 접근 영패로 교환합니다.

const code = req.query.code;
 const response = await axios({
                method: 'post',
                url: authProvider.tokenEndpoint,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': 'Basic ' + stringToBase64(client.client_id, client.client_secret)
                },
                data: querystring.stringify({
                    code,
                    grant_type: "authorization_code",
                    redirect_uri: client.redirect_uri
                })
            })
            console.log(response.data)
            access_token = response.data.access_token

우리는 httpbasic를 사용하여 클라이언트에 대해 신분 검증을 한다.client\u id는 사용자 이름으로,client\u secret는 Base64에서 인코딩된 암호로 사용됩니다.

4단계: 사용자 리소스 액세스

이 때, 당신은access_영패를 가지고 있습니다.그런 다음 액세스 토큰을 사용하여 리소스 서버 API 노드를 사용하여 사용자의 리소스에 액세스할 수 있습니다.

const fetch_lists = async () => {
        const axiosInstance = axios.create ({
            baseURL : 'https://api.spotify.com/v1/me/top/',
            headers: {
                'Authorization': 'Bearer ' + access_token
                }
          })
        try{
            const [response1, response2] = await Promise.all([
                axiosInstance.get('tracks'),
                axiosInstance.get('artists'),
            ])
            console.log(response1)
        } catch (error) {
                        console.log(error.response.data.message)
        }   
    }
    fetch_lists()

결론

이것이 바로 OAuth 2.0의 요점입니다. Github에서 원본 코드를 볼 수 있습니다.
너는 나의 blog 에서 원본 게시물을 볼 수 있다.

관련 자원

OAuth 2.0 RFC 6749

User Authentication with OAuth 2.0