OpenID Connect (OIDC)에서 리디렉트 URI 및 인가 코드 플로우 이해하기

리디렉트 URI란 무엇인가?#

리디렉트 URI는 응답 URL로도 알려져 있으며, OIDC 인증 과정에서 중요한 보안 구성 요소입니다. 사용자가 OIDC 제공자를 통해 성공적으로 로그인을 완료한 후 전송되는 URL을 지정합니다. 더욱 중요한 것은, 애플리케이션이 토큰을 얻기 위해 필요한 인가 코드를 받는 장소입니다.

자세한 내용은 Auth 위키 > 리디렉트 URI를 참조하세요.

인가 코드 플로우란 무엇인가?#

인가 코드 플로우(OAuth 2.0 RFC 6749, 섹션 4.1에서 정의됨)는 OIDC의 기본 인증 방법입니다. 이는 인가 코드를 액세스 토큰 및 선택적으로 리프레시 토큰으로 교환하는 과정을 포함합니다. 이 플로우는 서버 측 웹 애플리케이션과 같이 클라이언트 비밀을 안전하게 유지할 수 있는 애플리케이션에 적합합니다.

자세한 내용은 Auth 위키 > 인가 코드 플로우를 참조하세요.

리디렉트 URI가 인가 코드 플로우에서 어떻게 작동하나요?#

인가 코드 플로우에서 리디렉트 URI는 사용자가 성공적으로 인증된 후 OIDC 제공자가 인가 코드를 보낼 목적지입니다. 이는 OIDC 제공자와 사전에 등록되어 있어야 하며, 이를 통해 보안이 보장되고 승인되지 않은 리디렉션을 방지할 수 있습니다.

Logto Console에서 리디렉트 URI를 등록하는 방법입니다:

로그인을 시작할 때:

1. 인가 요청: 애플리케이션은 client_id, response_type, scope 및 redirect_uri와 같은 매개변수를 포함하여 사용자를 OIDC 제공자의 인가 엔드포인트로 안내합니다.
2. 사용자 인증: 사용자는 OIDC 제공자로 인증을 진행합니다.
3. 인가 코드 전달: 성공적으로 인증되면, OIDC 제공자는 쿼리 매개변수로 인가 코드를 포함한 특정 redirect_uri로 사용자를 리디렉션합니다.

OIDC 제공자는 사전 등록된 URI 목록과 redirect_uri를 대조하여 확인합니다. 불일치가 있으면 invalid_redirect_uri 오류가 반환되어 승인되지 않은 엔드포인트로의 토큰 수령을 방지합니다.

리디렉트 URI에 대한 모범 사례#

실제 사용 사례에서는 외부로부터의 직접 액세스를 허용하는 라우터 / 심층 링크와 연결된 전용 "콜백" 페이지를 선언하는 것이 일반적인 모범 사례입니다. 이 링크는 리디렉트 URI로 사용되어야 합니다.

단일 페이지 웹 애플리케이션이 https://my-app.com에서 실행 중인 경우, 보통 리디렉트 URI는 https://my-app.com/callback으로 선언됩니다.

또는 네이티브 모바일 앱인 경우, 리디렉트 URI는 보통 커스텀 스키마로 시작하며, 예를 들어 com.company://myapp/callback과 같습니다.

다른 모범 사례:

• 와일드카드를 피하세요: 리디렉트 URI에서 와일드카드 패턴을 사용하지 마세요. 불법 접근을 방지하기 위해 허가된 모든 URI를 명시적으로 나열하세요.
• 정확히 일치하도록 하세요: 리디렉트 URI가 OIDC 제공자에 등록된 것과 정확히 일치하는지 확인하세요. 심지어 슬래시 하나가 있더라도 일치하지 않아 문제가 발생할 수 있습니다.

로그인 콜백 처리하기#

귀하의 redirect_uri로 반환된 인가 코드를 처리하려면 다음 단계를 따르세요:

1. 인가 코드 추출하기: 리디렉트 URI의 쿼리 스트링에서 코드 매개변수를 가져옵니다.

2. 인가 코드를 토큰으로 교환하기: OIDC 제공자의 토큰 엔드포인트로 다음을 포함한 POST 요청을 작성하세요:

   • client_id: OIDC 제공자에서 애플리케이션에 대한 ID
   • code: 리디렉트 URI에서 받은 인가 코드
   • code_verifier: 클라이언트에서 생성된 임의의 문자열
   • redirect_uri: 인가 요청에 사용된 동일한 URI
   • grant_type: 인가 유형, 보통 authorization_code

JavaScript에서의 예제 토큰 교환 요청#

Logto SDK를 활용하여 코드 교환 프로세스를 간소화하기#

Logto SDK는 특정 프로그래밍 언어나 프레임워크로 작성된 개발 키트로, 예를 들어 Logto React SDK, Next.js SDK 및 Swift SDK가 있습니다. SDK를 사용하면 하나 또는 두 개의 함수 호출로 모든 것이 크게 간소화됩니다.

다음은 Logto 공식 React SDK를 사용한 React "콜백" 구성 요소 예제입니다:

SDK 통합 가이드는 Logto Docs > 빠른 시작에서 찾을 수 있습니다.

요약: OIDC에서 리디렉트 URI를 숙달하는 것이 중요한 이유#

인가 코드 플로우와 함께 OIDC의 리디렉트 URI를 이해하는 것은 인증 프로세스를 최적화하고 보안을 강화하는 데 중요합니다. 신뢰할 수 있는 리디렉트 URI를 등록하고 로그인 콜백을 효율적으로 처리함으로써 개발 노력을 단순화하면서 사용자의 경험을 매끄럽고 안전하게 보장할 수 있습니다.