JWT 지원을 사용하여 기존 애플리케이션에 SSO 제공
NGINX Plus R15 이상 에서는 OpenID Connect 인증 코드 흐름 에서 NGINX Plus를 신뢰 당사자로 사용할 수도 있습니다 .]
OAuth 2.0은 웹사이트와 애플리케이션에 대한 인증의 유연성과 사용자 경험을 크게 변화시켰습니다.
하지만 이름과 달리 OAuth 2.0 사양은 최종 사용자 신원 확인에 대해서는
거의 언급하지 않고 SSO(Single Sign-On)에 대해서는 전혀 언급하지 않습니다. 바로 여기서 OpenID Connect가 등장합니다.
이는 본질적으로 OAuth 2.0 액세스 토큰에서 신원 정보를 전달하는 누락된 부분입니다.
OpenID Connect ID 토큰은 JSON 웹 토큰(JWT) 사양을 준수합니다.
JWT(발음은 "조트") 토큰은 작고 전달하기 쉬우며 ID 정보를 설명하기 위한 공통 핵심 스키마를 제공합니다.
JWT의 장점은 API 클라이언트 인증에서 엔터프라이즈 애플리케이션에 대한 SSO 제공에
이르기까지 거의 모든 ID 사용 사례에 적용할 수 있다는 것입니다.
사실, Google Apps를 사용하는 많은 조직은 Google을 ID 공급자로 활용하여 엔터프라이즈 애플리케이션에 SSO를 제공할 수 있습니다 .
즉, OpenID Connect와 JWT를 사용한다고 해서 기존 웹 애플리케이션에 대한 인증이나 SSO 제공에 사용할 수 있는 것은 아닙니다.
NGINX Plus R10 이상에는 기본 JWT 지원이 포함되어 있어
NGINX Plus에서 토큰을 검증하고 인증된 사용자의 ID로 업스트림 요청을 데코레이팅하여 애플리케이션에서 쉽게 사용할 수 있습니다.
이 블로그 게시물에서는 NGINX Plus에서 기본 JWT 지원을 사용하여 애플리케이션 자체에 필요한 변경 없이
기존 애플리케이션에 대한 SSO를 활성화하는 방법을 보여줍니다.
Google을 ID 공급자로 사용하고 간단한 웹사이트를 사용하여 애플리케이션을 나타냅니다. 종단 간 흐름은 다음과 같습니다.
NGINX Plus는 Google 기반 SSO를 위해 OAuth 2.0 및 OpenID Connect를 사용하여 사용자 ID를 검증합니다.
웹 애플리케이션에 OpenID Connect 활성화
우리의 예제에는 NGINX Plus 구성과 HTML 로그인 페이지라는 두 가지 구성 요소가 있습니다.
NGINX Plus 구성
JWT를 검증하기 위한 NGINX Plus 구성은 매우 간단합니다.
server { listen 80; root /var/www/public_html; location /private/ { auth_jwt "Google account" token=$cookie_auth_token; auth_jwt_key_file /etc/nginx/google_certs.jwk; } }
블록 은 /private/location 로 시작하는 URL에 대한 모든 요청이 인증되어야 함을 지정합니다.
이 지시문은 인증이 실패할 경우 반환되는 인증 영역( 와 함께 )과 요청에서 NGINX Plus가 JWT를 찾을 수 있는 위치를 정의합니다.
이 경우 auth_token 이라는 쿠키에서 토큰을 찾을 것으로 예상합니다 .
기본적으로 NGINX Plus는 클라이언트가 헤더 를 사용하여
AJAX 애플리케이션 및 API 클라이언트에서 일반적인 Bearer Token 으로 JWT를 제시할 것으로 예상 하지만
이 예에서와 같이 다른 HTTP 헤더, 쿼리 문자열 인수 또는 쿠키에서 JWT를 얻을 수도 있습니다. auth_jwt401Authorization
이 auth_jwt_key_file지시문은 NGINX에 JWT의 서명 요소를 검증하는 방법을 알려줍니다.
서명 검증은 JWT가 Google에서 발급되었고 그 이후로 수정되지 않았음을 보장합니다.
Google은 공개 키를 게시 하고 정기적으로 새로 고칩니다.
최신 키 세트를 유지하려면 cron(8)이 샘플 항목과 같이 를 사용하여 매시간 가져옵니다 crontab.
0 * * * * wget https://www.googleapis.com/oauth2/v3/certs -O /etc/nginx/google_certs.jwk
HTML 기반 로그인 페이지
이 예제를 간단하고 직관적으로 유지하기 위해 전체 애플리케이션을 빌드하지 않습니다.
대신 다음 기본 HTML을 사용하여 로그인 페이지를 만듭니다.
HTML 파일은 /var/www/public_html/index.html 이라고 합니다 (이것은 rootNGINX Plus 구성에서 정의한 경로와 일치합니다).
<html> <head> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <title>NGINX OpenID Connect demo</title> <script src="https://apis.google.com/js/platform.js" async defer></script> <meta name="google-signin-scope" content="profile email"> <meta name="google-signin-client_id" content="client-ID.apps.googleusercontent.com"> <script src="/js.cookie.js"></script>
</head> <body> <h2>NGINX OpenID Connect demo</h2> <hr/> <h3>Login with a Google account then visit the <a href="/private/">private area</a>.</h3> <table><tr><td> <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div></td> <script> function onSignIn(googleUser) { var profile = googleUser.getBasicProfile(); Cookies.set('auth_token', googleUser.getAuthResponse().id_token); document.getElementById('google_signout') = '<a href="#" src="' + profile.getImageUrl() + '" width=32 height=32>Sign out</a>'; }; function signOut() { var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut().then(function () { Cookies.remove('auth_token'); document.getElementById('google_signout') = ''; }); } </script> <td><div id="google_signout"></div></td> </tr></table> <hr/> </body> </html>
우리는 <head>블록에서 두 가지 주요 종속성을 강조했습니다.
- <meta name="google‑signin‑client_id">태그 - Google의 OAuth 2.0 JavaScript API를 사용하여 OAuth 2.0 최종 사용자 동의 및 인증 프로세스를 수행합니다. 이를 통해 로그인 버튼이 생기고 로그인 여부를 감지할 수 있습니다. Google에서 웹사이트를 인증하려면 OAuth 2.0 클라이언트 ID를 생성하여 content이 태그에 속성으로 제공하여 플레이스홀더를 대체해야 client-ID합니다. 새 OAuth 2.0 클라이언트 ID를 만드는 방법에 대한 지침은 이 문서 하단의 부록을 참조하세요.
- <script src="/js.cookie.js">태그 - OAuth 2.0 액세스 토큰에서 ID 토큰을 추출하고 웹사이트로 보낼 쿠키를 생성할 수 있는 쿠키 파서가 필요합니다. 이 줄은 이 태그에 포함된 JavaScript CookieCookies.set 라이브러리를 사용하여 이를 달성합니다 .
이러한 조각들이 제자리에 있으면 이제 Google 로그인 메커니즘이 있는 공개 홈페이지와 NGINX Plus로 보호되는 개인 영역이 있습니다.
개인 영역에 대한 콘텐츠를 만들지 않았으므로 404액세스하려고 하면 오류가 예상됩니다.
추가 읽기
고급 JWT 기능에 대한 자세한 내용은 JWT 및 NGINX Plus를 사용하여 API 클라이언트 인증을 참조하세요.
JWT에서 얻은 사용자 ID 정보로 인증된 요청을 프록시하고,
JWT 클레임을 기록하고, 여러 ID 공급자를 지원하는 방법을 설명합니다.
NGINX Plus의 기본 JWT 지원을 알아보려면 오늘 무료 30일 체험판을 시작하거나 저희에게 문의하세요 .
https://console.developers.google.com/apis/dashboard 에서 Google API 대시보드에 액세스하세요 .
열리는 페이지는 Google API 사용 기록에 따라 달라집니다.
계정을 만들고, 이용 약관에 동의하고, 이 지침에 표시되지 않은 다른 단계를 수행해야 할 수도 있습니다.
다음 스크린샷은 대시보드의 왼쪽 상단 모서리를 보여줍니다.
Google API 로고 오른쪽에 있는 단어를 클릭합니다
(이전에 프로젝트를 만든 경우 Project 라는 단어 대신 이름이 나타날 수 있음 ). Create project를 선택합니다 .
새 프로젝트를 만듭니다.
여기서 새 프로젝트는 NGINX OpenID 라고 합니다.
Create 버튼 을 클릭한 후 프로젝트가 생성되었다는 알림이 나타나기까지 몇 초가 걸릴 수 있습니다.
프로젝트에 Google+ API를 활성화하세요. OAuth 2.0 인증 및 ID 서비스를 제공합니다.
(API 관리자 대시보드가 창의 주요 부분에 아직 나타나지 않으면 화면 왼쪽의 탐색 영역에서 대시보드를 클릭합니다.)
Google+ API를 활성화하기 위한 첫 번째 단계는 API 활성화 버튼을 클릭하는 것입니다.
Google+ API ( 소셜 API 섹션)를 클릭합니다 .
활성화 버튼을 클릭하세요 .
프로젝트에 대한 자격 증명을 만들려면 화면 왼쪽 탐색 영역에서 자격 증명을 클릭한 다음, 자격 증명 만들기 버튼을 클릭하세요.
드롭다운 메뉴에서 OAuth 클라이언트 ID를 선택합니다 .
웹 애플리케이션 라디오 버튼을 선택합니다.
Authorized JavaScript origins 필드에서 NGINX Plus가 설치된 호스트의 URL과 웹 애플리케이션에
OpenID Connect 활성화listen 의 지시문 에 매개변수로 지정한 포트 번호를 지정합니다 (예: mydomain.example.com:80 ).
이 예에서는 localhost를 사용하지만 입력은 실제 NGINX Plus 인스턴스의 호스트 이름과 포트여야 합니다.
만들기 버튼을 클릭합니다 (만들기 과정이 시작되려면 두 번 이상 클릭해야 할 수도 있음).
OAuth 클라이언트 창이 팝업되어 클라이언트 ID와 클라이언트 비밀번호를 보고합니다.
클라이언트 ID를 앱의 태그 content속성 에 복사합니다( 위에 표시된 강조된 플레이스홀더를 대체).
클라이언트 비밀번호는 필요하지 않습니다.<meta name="google-signin-client_id">client-ID
메인 Credentials 화면에서 OAuth consent screen 을 클릭합니다 .
이메일 주소와 제품 이름을 입력합니다(다른 모든 필드는 선택 사항입니다).
위 내용과 같이 NGINX Plus를 활용하여 Demo 가 필요하시면 하단의 전문가에게 상담받기 버튼을 클릭해주세요
전문가에게 상담받기
JWT 지원을 사용하여 기존 애플리케이션에 SSO 제공
NGINX Plus R15 이상 에서는 OpenID Connect 인증 코드 흐름 에서 NGINX Plus를 신뢰 당사자로 사용할 수도 있습니다 .]
OAuth 2.0은 웹사이트와 애플리케이션에 대한 인증의 유연성과 사용자 경험을 크게 변화시켰습니다.
하지만 이름과 달리 OAuth 2.0 사양은 최종 사용자 신원 확인에 대해서는
거의 언급하지 않고 SSO(Single Sign-On)에 대해서는 전혀 언급하지 않습니다. 바로 여기서 OpenID Connect가 등장합니다.
이는 본질적으로 OAuth 2.0 액세스 토큰에서 신원 정보를 전달하는 누락된 부분입니다.
OpenID Connect ID 토큰은 JSON 웹 토큰(JWT) 사양을 준수합니다.
JWT(발음은 "조트") 토큰은 작고 전달하기 쉬우며 ID 정보를 설명하기 위한 공통 핵심 스키마를 제공합니다.
JWT의 장점은 API 클라이언트 인증에서 엔터프라이즈 애플리케이션에 대한 SSO 제공에
이르기까지 거의 모든 ID 사용 사례에 적용할 수 있다는 것입니다.
사실, Google Apps를 사용하는 많은 조직은 Google을 ID 공급자로 활용하여 엔터프라이즈 애플리케이션에 SSO를 제공할 수 있습니다 .
즉, OpenID Connect와 JWT를 사용한다고 해서 기존 웹 애플리케이션에 대한 인증이나 SSO 제공에 사용할 수 있는 것은 아닙니다.
NGINX Plus R10 이상에는 기본 JWT 지원이 포함되어 있어
NGINX Plus에서 토큰을 검증하고 인증된 사용자의 ID로 업스트림 요청을 데코레이팅하여 애플리케이션에서 쉽게 사용할 수 있습니다.
이 블로그 게시물에서는 NGINX Plus에서 기본 JWT 지원을 사용하여 애플리케이션 자체에 필요한 변경 없이
기존 애플리케이션에 대한 SSO를 활성화하는 방법을 보여줍니다.
Google을 ID 공급자로 사용하고 간단한 웹사이트를 사용하여 애플리케이션을 나타냅니다. 종단 간 흐름은 다음과 같습니다.
웹 애플리케이션에 OpenID Connect 활성화
우리의 예제에는 NGINX Plus 구성과 HTML 로그인 페이지라는 두 가지 구성 요소가 있습니다.
NGINX Plus 구성
JWT를 검증하기 위한 NGINX Plus 구성은 매우 간단합니다.
블록 은 /private/location 로 시작하는 URL에 대한 모든 요청이 인증되어야 함을 지정합니다.
이 지시문은 인증이 실패할 경우 반환되는 인증 영역( 와 함께 )과 요청에서 NGINX Plus가 JWT를 찾을 수 있는 위치를 정의합니다.
이 경우 auth_token 이라는 쿠키에서 토큰을 찾을 것으로 예상합니다 .
기본적으로 NGINX Plus는 클라이언트가 헤더 를 사용하여
AJAX 애플리케이션 및 API 클라이언트에서 일반적인 Bearer Token 으로 JWT를 제시할 것으로 예상 하지만
이 예에서와 같이 다른 HTTP 헤더, 쿼리 문자열 인수 또는 쿠키에서 JWT를 얻을 수도 있습니다. auth_jwt401Authorization
이 auth_jwt_key_file지시문은 NGINX에 JWT의 서명 요소를 검증하는 방법을 알려줍니다.
서명 검증은 JWT가 Google에서 발급되었고 그 이후로 수정되지 않았음을 보장합니다.
Google은 공개 키를 게시 하고 정기적으로 새로 고칩니다.
최신 키 세트를 유지하려면 cron(8)이 샘플 항목과 같이 를 사용하여 매시간 가져옵니다 crontab.
HTML 기반 로그인 페이지
이 예제를 간단하고 직관적으로 유지하기 위해 전체 애플리케이션을 빌드하지 않습니다.
대신 다음 기본 HTML을 사용하여 로그인 페이지를 만듭니다.
HTML 파일은 /var/www/public_html/index.html 이라고 합니다 (이것은 rootNGINX Plus 구성에서 정의한 경로와 일치합니다).
우리는 <head>블록에서 두 가지 주요 종속성을 강조했습니다.
이러한 조각들이 제자리에 있으면 이제 Google 로그인 메커니즘이 있는 공개 홈페이지와 NGINX Plus로 보호되는 개인 영역이 있습니다.
개인 영역에 대한 콘텐츠를 만들지 않았으므로 404액세스하려고 하면 오류가 예상됩니다.
추가 읽기
고급 JWT 기능에 대한 자세한 내용은 JWT 및 NGINX Plus를 사용하여 API 클라이언트 인증을 참조하세요.
JWT에서 얻은 사용자 ID 정보로 인증된 요청을 프록시하고,
JWT 클레임을 기록하고, 여러 ID 공급자를 지원하는 방법을 설명합니다.
NGINX Plus의 기본 JWT 지원을 알아보려면 오늘 무료 30일 체험판을 시작하거나 저희에게 문의하세요 .
https://console.developers.google.com/apis/dashboard 에서 Google API 대시보드에 액세스하세요 .
열리는 페이지는 Google API 사용 기록에 따라 달라집니다.
계정을 만들고, 이용 약관에 동의하고, 이 지침에 표시되지 않은 다른 단계를 수행해야 할 수도 있습니다.
다음 스크린샷은 대시보드의 왼쪽 상단 모서리를 보여줍니다.
Google API 로고 오른쪽에 있는 단어를 클릭합니다
(이전에 프로젝트를 만든 경우 Project 라는 단어 대신 이름이 나타날 수 있음 ). Create project를 선택합니다 .
새 프로젝트를 만듭니다.
여기서 새 프로젝트는 NGINX OpenID 라고 합니다.
Create 버튼 을 클릭한 후 프로젝트가 생성되었다는 알림이 나타나기까지 몇 초가 걸릴 수 있습니다.
프로젝트에 Google+ API를 활성화하세요. OAuth 2.0 인증 및 ID 서비스를 제공합니다.
(API 관리자 대시보드가 창의 주요 부분에 아직 나타나지 않으면 화면 왼쪽의 탐색 영역에서 대시보드를 클릭합니다.)
Google+ API를 활성화하기 위한 첫 번째 단계는 API 활성화 버튼을 클릭하는 것입니다.
Google+ API ( 소셜 API 섹션)를 클릭합니다 .
활성화 버튼을 클릭하세요 .
프로젝트에 대한 자격 증명을 만들려면 화면 왼쪽 탐색 영역에서 자격 증명을 클릭한 다음, 자격 증명 만들기 버튼을 클릭하세요.
드롭다운 메뉴에서 OAuth 클라이언트 ID를 선택합니다 .
웹 애플리케이션 라디오 버튼을 선택합니다.
Authorized JavaScript origins 필드에서 NGINX Plus가 설치된 호스트의 URL과 웹 애플리케이션에
OpenID Connect 활성화listen 의 지시문 에 매개변수로 지정한 포트 번호를 지정합니다 (예: mydomain.example.com:80 ).
이 예에서는 localhost를 사용하지만 입력은 실제 NGINX Plus 인스턴스의 호스트 이름과 포트여야 합니다.
만들기 버튼을 클릭합니다 (만들기 과정이 시작되려면 두 번 이상 클릭해야 할 수도 있음).
OAuth 클라이언트 창이 팝업되어 클라이언트 ID와 클라이언트 비밀번호를 보고합니다.
클라이언트 ID를 앱의 태그 content속성 에 복사합니다( 위에 표시된 강조된 플레이스홀더를 대체).
클라이언트 비밀번호는 필요하지 않습니다.<meta name="google-signin-client_id">client-ID
메인 Credentials 화면에서 OAuth consent screen 을 클릭합니다 .
이메일 주소와 제품 이름을 입력합니다(다른 모든 필드는 선택 사항입니다).
위 내용과 같이 NGINX Plus를 활용하여 Demo 가 필요하시면 하단의 전문가에게 상담받기 버튼을 클릭해주세요
전문가에게 상담받기