블로그 | NGINX

OpenID Connect 및 NGINX Plus를 사용하여 기존 애플리케이션에 사용자 인증

NGINX-F5-수평-검정-유형-RGB의 일부
리엄 크릴리 썸네일
리암 크릴리
2016년 9월 7일 게시

JWT 지원을 사용하여 기존 애플리케이션에 SSO 제공

[ 편집자 - 이 게시물에서는 인증을 위한 암묵적 흐름을 지원하는 OpenID Connect 공급자와 함께 NGINX Plus를 사용하는 방법을 설명합니다. 정보는 기술적으로 정확하지만 일부 작업(예: 사용 중 크론 참조 구현이 업데이트되었기 때문에 공개 키를 가져오는 작업은 더 이상 필요하지 않습니다. 현재 구현 내용은 GitHub 저장소 에서 확인하세요.

NGINX Plus R15 이상에서는 OpenID Connect 인증 코드 흐름 에서 NGINX Plus를 신뢰 당사자로 사용할 수도 있습니다.]

OAuth 2.0은 웹사이트와 애플리케이션 인증의 유연성과 사용자 경험을 혁신하는 데 큰 역할을 했습니다. 하지만 이름과 달리 OAuth 2.0 사양은 최종 사용자 신원 확인에 대해서는 거의 언급하지 않으며 SSO(Single Sign-On)에 대해서는 전혀 언급하지 않습니다. 여기서 OpenID Connect가 등장합니다. 이는 본질적으로 OAuth 2.0 액세스 토큰에서 ID 정보를 전달하는 누락된 부분입니다.

OpenID Connect ID 토큰은 JSON 웹 토큰(JWT) 사양을 준수합니다. JWT(발음은 "조트") 토큰은 간결하고 전달하기 쉬우며, 신원 정보를 기술하기 위한 공통 핵심 스키마를 제공합니다. 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 구성은 매우 간단합니다.

서버 { listen 80;
root /var/www/public_html;

location /private/ {
auth_jwt "Google 계정" 토큰=$cookie_auth_token;
auth_jwt_key_file /etc/nginx/google_certs.jwk;
}
}

위치 블록은 /private/ 으로 시작하는 URL에 대한 모든 요청이 인증되어야 함을 지정합니다. auth_jwt 지시문은 반환될 인증 영역을 정의합니다.401 ) 인증이 실패하면 NGINX Plus가 요청의 어느 부분에서 JWT를 찾을 수 있는지 알려줍니다. 이 경우에는 auth_token 이라는 쿠키에서 토큰을 찾을 것으로 예상합니다. 기본적으로 NGINX Plus는 클라이언트가 AJAX 애플리케이션과 API 클라이언트 에서 일반적인 방식인 Authorization 헤더를 사용하여 Bearer 토큰 으로 JWT를 제시할 것으로 예상하지만, 이 예에서처럼 다른 HTTP 헤더, 쿼리 문자열 인수 또는 쿠키에서 JWT를 얻을 수도 있습니다.

auth_jwt_key_file 지시어는 NGINX에 JWT의 서명 요소를 검증하는 방법을 알려줍니다. 서명 검증은 JWT가 Google에서 발급되었으며 그 이후 수정되지 않았음을 보장합니다. Google은 공개 키를 공개 하고 정기적으로 업데이트합니다. 최신 키 세트를 유지하려면 이 샘플 crontab 항목처럼 cron(8)을 사용하여 매시간 키 세트를 가져옵니다.

0 * * * * wget https://www.googleapis.com/oauth2/v3/certs -O /etc/nginx/google_certs.jwk

HTML 기반 로그인 페이지

이 예제를 간단하고 직관적으로 유지하기 위해 전체 애플리케이션을 구축하지 않습니다. 대신 다음의 기본 HTML을 사용하여 로그인 페이지를 만들겠습니다. HTML 파일은 /var/www/public_html/index.html 이라고 합니다(이는 NGINX Plus 구성에서 정의한 루트 경로와 일치합니다).

<html>
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>NGINX OpenID Connect 데모</title>
<script src="https://apis.google.com/js/platform.js" 비동기 지연></script>
<meta name="google-signin-scope" content="profile email">
    <메타 이름="google-signin-client_id" 
콘텐츠="클라이언트 ID.apps.googleusercontent.com">
<스크립트 src="/js.cookie.js"></script>
</head>
<body>
<h2>NGINX OpenID Connect 데모</h2>
<hr/>
<h3>Google 계정으로 로그인한 다음 <a href="/private/">비공개 영역</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').innerHTML = '<a href="#" onclick="signOut();"><img src="' + profile.getImageUrl() + '" width=32 height=32>로그아웃</a>';
};
signOut() 함수 {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(함수() {
쿠키.remove('auth_token');
document.getElementById('google_signout').innerHTML = '';
});
}
</script>
<td><div id="google_signout"></div></td>
</tr></table>
<hr/>
</body>
</html>

블록에서 두 가지 주요 종속성을 강조했습니다.

  • <메타 이름="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 토큰을 추출하고 웹사이트로 전송할 쿠키를 생성할 수 있는 쿠키 파서가 필요합니다. Cookies.set 라인은 이 태그에 포함된 JavaScript Cookie 라이브러리를 사용하여 이를 달성합니다.

이러한 것들이 준비되면, 이제 Google 로그인 메커니즘을 갖춘 공개 홈페이지와 NGINX Plus로 보호되는 개인 영역이 있게 됩니다. 우리는 개인 공간에 대한 콘텐츠를 생성하지 않았음을 유의하십시오.404 우리가 이에 접근하려고 하면 오류가 발생할 것으로 예상됩니다.

추가 읽기

고급 JWT 기능에 대한 자세한 내용은 JWT 및 NGINX Plus를 사용하여 API 클라이언트 인증을 참조하세요. JWT에서 얻은 사용자 신원 정보로 인증된 요청을 프록시하는 방법, JWT 클레임을 기록하는 방법, 여러 신원 공급자를 지원하는 방법을 설명합니다.

NGINX Plus의 기본 JWT 지원을 알아보려면 오늘 무료 30일 체험판을 시작하거나 저희에게 문의하세요 .

부록 – Google OAuth 2.0 클라이언트 ID 생성

[ 편집자 - 저희는 출판 당시 Google API GUI를 정확하게 표현하기 위해 최선을 다했지만 GUI는 매우 동적이며 메뉴 옵션과 위치가 변경될 수 있습니다. 이 지침을 참고로 사용하고 필요에 따라 현재 GUI에 맞게 조정하세요.]

  1. https://console.developers.google.com/apis/dashboard 에서 Google API 대시보드에 액세스하세요.

    열리는 페이지는 Google API 사용 기록에 따라 달라집니다. 계정을 생성하고, 이용 약관에 동의하고, 이 지침에 표시되지 않은 다른 단계를 수행해야 할 수도 있습니다.

    다음 스크린샷은 대시보드의 왼쪽 상단 모서리를 보여줍니다. Google API 로고 오른쪽에 있는 단어를 클릭합니다(이전에 프로젝트를 만든 적이 있는 경우 프로젝트라는 단어 대신 해당 프로젝트 이름이 나타날 수 있음). 프로젝트 만들기를 선택합니다.

    Google OAuth 2.0 클라이언트 ID를 생성할 때 API 관리자 대시보드의 왼쪽 상단에 있는 Google API 로고 옆에 있는 드롭다운 메뉴에서 '프로젝트 만들기'를 선택합니다.

     

  2. 새로운 프로젝트를 만듭니다. 여기서 우리의 새로운 프로젝트는 NGINX OpenID 라고 불립니다. Create 버튼을 클릭한 후 프로젝트가 생성되었다는 알림이 나타나기까지 몇 초가 걸릴 수 있습니다.

    Google OAuth 2.0 클라이언트 ID를 생성할 때 새 프로젝트의 이름을 지정하세요.

     

  3. 프로젝트에 Google+ API를 활성화하세요. OAuth 2.0 인증 및 ID 서비스를 제공합니다.

    (API 관리자 대시보드가 창의 주요 부분에 아직 나타나지 않으면 화면 왼쪽의 탐색 영역에서 대시보드를 클릭합니다.)

    Google+ API를 활성화하기 위한 첫 번째 단계는 API 활성화 버튼을 클릭하는 것입니다.

    Google OAuth 2.0 클라이언트 ID를 생성할 때 API 관리자 대시보드 화면에서 API 사용 버튼을 클릭합니다.

     

  4. Google+ API ( 소셜 API 섹션)를 클릭합니다.

     

  5. 활성화 버튼을 클릭하세요.

     

  6. 프로젝트에 대한 자격 증명을 만들려면 화면 왼쪽 탐색 영역에서 자격 증명을 클릭한 다음, 자격 증명 만들기 버튼을 클릭하세요.

    드롭다운 메뉴에서 OAuth 클라이언트 ID를 선택합니다.

    Google OAuth 2.0 클라이언트 ID를 생성할 때, 생성할 자격 증명 유형으로 'OAuth 클라이언트 ID'를 선택하세요.

     

  7. 웹 애플리케이션 라디오 버튼을 선택합니다. 인증된 JavaScript 원본 필드에서 NGINX Plus가 설치된 호스트의 URL과 웹 애플리케이션에 대한 OpenID Connect 활성화 에서 listen 지시문의 매개변수로 지정한 포트 번호를 지정합니다(예: mydomain.example.com:80 ). 이 예제에서는 localhost를 사용하지만, 입력하는 내용은 실제 NGINX Plus 인스턴스의 호스트 이름과 포트여야 합니다.

    만들기 버튼을 클릭합니다(만들기 과정이 시작되려면 두 번 이상 클릭해야 할 수도 있음).

     

  8. OAuth 클라이언트 창이 나타나 클라이언트 ID와 클라이언트 비밀번호를 보고합니다. 클라이언트 ID를 복사하세요 콘텐츠 의 속성 <메타 이름="google-signin-client_id"> 앱의 태그(강조 표시된 부분을 대체) 클라이언트 ID 위에 표시된 자리 표시자). 클라이언트 비밀번호는 필요하지 않습니다.

    Google OAuth 2.0 클라이언트 ID를 성공적으로 생성하면 클라이언트 비밀번호와 함께 'OAuth 클라이언트' 창에 나타납니다.

     

  9. 기본 자격 증명 화면에서 OAuth 동의 화면을 클릭합니다. 이메일 주소와 제품명을 입력하세요(다른 필드는 선택 사항입니다).

     

자격 증명을 사용하는 샘플 애플리케이션을 만드는 방법에 대한 섹션으로 돌아가기

NGINX Plus의 기본 JWT 지원을 알아보려면 오늘 무료 30일 체험판을 시작하거나 저희에게 문의하세요 .

F5 NGINX에 대한 더 많은 블로그 게시물 읽기 ›

"이 블로그 게시물에는 더 이상 사용할 수 없거나 더 이상 지원되지 않는 제품이 참조될 수 있습니다. 사용 가능한 F5 NGINX 제품과 솔루션에 대한 최신 정보를 보려면 NGINX 제품군을 살펴보세요. NGINX는 이제 F5의 일부가 되었습니다. 이전의 모든 NGINX.com 링크는 F5.com의 유사한 NGINX 콘텐츠로 리디렉션됩니다."