sign-in

Okta Sign-in

서버 사이드 웹앱에 Okta 로그인을 붙여 보아요. 가장 쉽고 안전한 방법은 Okta가 호스팅하는 Sign-In Widget을 활용하는 거예요. 사용자가 로그인하려 하면 앱은 Okta가 만든 로그인 페이지로 브라우저를 리다이렉트하고, 성공적으로 로그인하면 Okta가 다시 사용자를 앱으로 돌려보내요. 이 흐름을 Okta의 리다이렉트(redirect) 인증 배포 모델이라고 불러요. SPA나 모바일 앱이라면 각각 전용 가이드를 참고하는 게 좋아요.

출처: 문서

본문

학습 목표 (Learning outcomes)

• Okta가 호스팅하는 로그인 페이지로의 단순한 리다이렉트를 구현해요.
• 서버 사이드 웹앱을 Okta를 쓰도록 설정해요.
• 사용자가 로그인/로그아웃할 수 있는지 테스트해요.
• 앱의 어떤 부분이 인증을 요구하고 어떤 부분이 그렇지 않은지 정의해요.

시작하려면 Okta Integrator Free Plan org가 필요해요.

개요 (Overview)

서버 사이드 웹앱에 사용자 로그인 흐름을 추가하는 가장 쉽고 안전한 방법은 Okta가 호스팅하는 Sign-In Widget을 사용하는 거예요. 사용자가 로그인을 시도하면 앱이 Okta 웹페이지에 호스팅된 위젯으로 리다이렉트하고, 사용자가 성공적으로 로그인한 뒤 Okta가 앱으로 다시 리다이렉트해 주는 구조예요. 이 방식을 리다이렉트 인증 배포 모델이라고 해요.

참고: SPA에서 리다이렉트 모델을 쓰려면 SPA 리다이렉트 로그인 가이드, 모바일 앱에서는 모바일 앱 리다이렉트 로그인 가이드를 참고하세요.

이 퀵스타트에서는 다음을 진행해요.

1. Admin Console에서 **앱 통합(app integration)**을 만들어요.
2. Okta를 쓰도록 새 웹앱을 만들고 설정해요.
3. 사용자가 로그인/로그아웃할 수 있는지 테스트해요.
4. 사이트 특정 영역에 서로 다른 수준의 접근을 설정해요.

팁: 이 튜토리얼을 따라가려면 Okta org 도메인이 필요해요. integrator-123456.okta.com처럼 생겼어요. 가이드에서 {yourOktaDomain}을 보면 내 Okta 도메인으로 바꿔 넣으시면 돼요.

Admin Console에서 앱 통합 만들기

**앱 통합(app integration)**은 Okta org에서 내 앱을 나타내는 존재예요. 앱이 Okta 서비스와 어떻게 연결되는지 설정하는 데 써요.

1. 내 org의 Admin Console을 열어요.
   • 관리 계정으로 Okta org에 로그인해요.
   • 페이지 오른쪽 위의 Admin을 클릭해요.
2. Applications and Resources > Applications로 가서 현재 앱 통합 목록을 확인해요.
3. Create App Integration을 클릭해요.
4. Sign-in method로 OIDC - OpenID Connect를 선택해요.
5. Application type으로 Web Application을 선택하고 Next를 클릭해요.

참고: 앱 종류를 잘못 고르면 로그인/로그아웃 흐름이 깨질 수 있으니 주의하세요.

6. App integration name을 입력해요. 예: My first web application.
7. 로컬 개발용 콜백 URL을 입력해요.
   • Sign-in redirect URIs에 값 입력.
   • Logout redirect URIs에 값 입력.

참고: 여기서 제안하는 값들은 샘플 앱에서 쓰는 값이에요.

8. Controlled access에서 Allow everyone in your organization to access를 선택해요.
9. Save를 클릭해 앱 통합을 만들어요.

Client ID와 Client Secret 기록하기

웹앱 설정에 쓸 두 값을 기록해 두어요. 둘 다 방금 만든 앱 통합의 설정 창에 있어요.

• Client ID: General 탭의 Client Credentials 섹션에 있어요.
• Client Secret: General 탭의 Client Credentials 섹션에 있어요.

가이드에서 {clientId}와 {clientSecret}을 보면 각각 내 client ID와 client secret으로 바꿔 넣으시면 돼요.

Okta를 쓰도록 웹앱 만들고 설정하기

앱 통합과 설정값을 준비했다면 다음 단계를 진행해요.

• 웹앱 만들기
• 필요한 패키지 추가하기
• Okta를 쓰도록 앱 설정하기
• 로그인/로그아웃 페이지와 로직 추가하기

Okta를 쓰도록 앱 설정하기

앞서 기록한 client ID와 client secret 값을 앱 통합에서 사용자 정의 authorization server에 액세스 정책(access policy)이 있는지 확인한 뒤, 이 값들과 Okta 도메인을 앱의 환경설정에 추가해요.

참고: 기본 사용자 정의 authorization server에 액세스 정책이 있는지 확인하고, 없으면 추가하세요. 액세스 정책 만들기를 참고해요.

로그인/로그아웃 페이지와 로직 추가하기

사용자는 다음 중 하나로 로그인 과정을 시작할 수 있어요.

• 로그인 링크나 버튼 클릭
• 프로필 페이지 같은 보호된 페이지에 접근 시도

두 경우 모두 앱이 브라우저를 Okta가 호스팅하는 로그인 페이지로 리다이렉트해요. 사용자가 로그인하면 Okta가 앞서 입력한 로그인 리다이렉트 URI로 브라우저를 보내요. 마찬가지로 로그아웃하면 Okta는 로그아웃 리다이렉트 URI로 브라우저를 보내요. 이 로그인/로그아웃 리다이렉트 URI를 **콜백 라우트(callback route)**라고 불러요. 사용자에게는 콜백 라우트가 보이지 않고, 최종 목적지도 아니에요. 하지만 앱은 이 라우트를 반드시 구현해야 해요.

사용자 정보 가져오기 (클레임과 ID 토큰)

사용자가 로그인하면 Okta가 사용자 프로필 정보 일부를 앱에 돌려줘요. Okta가 돌려주는 기본 프로필 항목(이를 **클레임(claims)**이라 불러요)에는 사용자의 이메일 주소, 이름, 선호 사용자 이름이 포함돼요. 이 정보는 로그인 리다이렉트 URL로의 리다이렉트 과정에서 ID 토큰에 담겨 전송돼요.

참고: 앱이 요청한 스코프에 따라 보이는 클레임이 달라질 수 있어요.

로그인/로그아웃 테스트하기

이제 사이트에는 Okta로 사용자를 로그인하고, 로그인했음을 증명하며, 로그아웃할 수 있는 콘텐츠가 충분히 갖춰졌어요. 서버를 시작하고 사용자를 로그인시켜 테스트해 보세요.

사이트 특정 영역에 다른 접근 수준 설정하기

앱은 사이트 전체 또는 특정 라우트에만 인증을 요구할 수 있어요. 인증이 필요 없는 라우트는 로그인 없이 접근할 수 있고, 이를 **익명 접근(anonymous access)**이라고 해요.

• 전부 인증 요구하기: 사내 인트라넷처럼 모든 라우트에 인증이 필요한 앱이 있어요.
• 특정 라우트에만 인증 요구하기: 인증된 사용자만 접근할 수 있는 보호 영역이 있는 웹사이트가 있어요.
• 익명 접근 허용하기: 일부 콘텐츠는 익명으로 탐색하게 하되, 결제/체크아웃 같은 동작은 로그인을 요구하는 웹사이트가 있어요. 예를 들어 이커머스 사이트가 사용자가 익명으로 상품을 둘러보고 장바구니에 담게 하다가, 결제할 때는 로그인을 요구하는 경우예요.

더 알아보기 (Learn more)

• 공식 문서