Okta Template App, Okta Plugin Template App 구성

🔐 Secure Web Authentication (SWA) 이해하기

1. SWA의 주요 개념 및 특징

2. SWA(Secure Web Authentication) Template

[Okta] SWA 앱 등록하기

Template App

Template Plugin App/Template App 3 Fields/Template 2 Page Plugin App/Template Frame Plugin App

Secure Web Authentication (SWA) 이해하기

1. SWA의 주요 개념 및 특징

•

SAML/OIDC 연동이 불가능한 오래된 그룹웨어, ERP, 인사 시스템 등에서도 SSO(Single Sign-On)와 유사한 사용자 경험을 제공합니다.

•

표준 인증 프로토콜(SAML 2.0, OIDC 등)을 지원하지 않는 애플리케이션에 대해 IdP(Okta 등)가 사용자의 계정 정보를 대신 입력해 주는 방식입니다.

•

쉽게 말해, 브라우저의 '비밀번호 저장' 기능을 기업 수준의 보안으로 고도화한 형태라고 볼 수 있습니다.

•

SAML 앱은 반드시 IdP를 거쳐야만 로그인이 가능하지만, SWA는 IdP를 통하지 않고 직접 로그인 페이지에서도 인증이 가능합니다.

•

사용자의 비밀번호는 옥타의 암호화된 저장소에 안전하게 보관되며 관리자조차 실제 비밀번호를 확인할 수 없어 내부자에 의한 정보 유출 위험을 방지합니다.

•

관리자나 사용자가 앱 할당 시 계정 정보를 한 번만 등록하면, 이후에는 별도의 자격 증명 입력 없이 클릭 한 번으로 접속이 가능합니다.

2. SWA(Secure Web Authentication) Template

템플릿 앱을 활용하면 운영 중인 시스템에 실시간으로 애플리케이션 연동을 구현할 수 있습니다.

App 이름	설명
Template App	해당 앱이 폼 포스트(Form POST) 방식의 인증을 지원하는 경우 사용할 수 있습니다.
Template Plugin App	앱 사이트 내에 사용자 계정, 비밀번호 필드 및 제출 버튼이 식별되는 경우 사용할 수 있습니다.
Template App 3 Fields	Template Plugin App과 유사하며 username, password 이외에도 회사ID 와 같이 하나의 필드를 더 입력해야하는 경우 사용할 수 있습니다.
Template 2 Page Plugin App	Template Plugin App과 유사하며 인증 흐름이 2개의 별개 페이지로 나뉜 경우 사용할 수 있습니다. Browser plugin을 통한 브라우저 플러그인을 통한 자동 로그인이 지원되지 않는 템플릿입니다.
Template Basic Auth App	basic Auth를 지원하는 경우 사용할 수 있습니다.
Template Frame Plugin App	iframes를 지원하는 경우 사용할 수 있습니다.

[Okta] SWA 앱 등록하기

In the Admin Console, go to ApplicationsApplications.

Click Browse App Catalog.

Search for Template.

Template App

지정된 URL로의 Form POST 인증을 지원하는 앱이라면 본 템플릿을 활용할 수 있습니다. 
사용자가 정의한 이름의 파라미터에 ID와 PW를 매핑하고, 필요한 경우 추가적인 고정 필드(Static Fields) 값을 포함하여 인증 정보를 처리합니다.

General Settings 페이지에서 입력해야하는 정보들은 아래와 같습니다.

	설명
URL	Enter the URL of the login form to which you're submitting the POST (not the URL where you view the form).
Username parameter and Password parameter fields
옵션 파라미터



Application Visibility	Specify whether to display the application icon to users.
Browser plugin auto-submit	Specify whether to log users in automatically when they land on the login page.

•

URL: Enter the URL of the login form to which you're submitting the POST (not the URL where you view the form).

•

Username parameter and Password parameter fields: Enter the parameter names that contain the username and password data.

•

Optional parameter fields: Enter extra static field data in the name/value pairs.

◦

From the Chrome browser, log in to the app you want to integrate with.

◦

Use Chrome developer tools to view the traffic that is being sent to the page.

◦

Open to the page with the target login form, and switch to the Network tab.

◦

Select the Preserve log checkbox.

◦

Clear out the existing traffic and perform your login.

◦

In the Headers tab, click the POST to the page to see all the data posted and the URL to which it's being sent.

•

Application Visibility: Specify whether to display the application icon to users.

•

Browser plugin auto-submit: Specify whether to log users in automatically when they land on the login page.

Template Plugin App/Template App 3 Fields/Template 2 Page Plugin App/Template Frame Plugin App

앱에 XSRF(교차 사이트 요청 위조) 방어 체계가 적용되어 있다면, 'Template Plugin App' 또는 'Template Plugin 3 Fields' 앱을 사용해야 합니다. 이를 확인하려면 페이지 검사를 통해 서버에서 생성된 XSRF 토큰이 있는지 확인하십시오. 또한, ASP 페이지에서 주로 생성되는 EVENTVALIDATION이나 FORMVALIDATION과 같은 필드가 있는지도 확인해야 합니다. 이러한 요소가 식별되는 경우, 반드시 플러그인 기반의 앱 템플릿이 필요합니다.

'Template Plugin App' 또는 'Template Frame Plugin App'을 설정할 때는 관련 필드에 대한 CSS 선택자(CSS Selector)를 입력이 필요하며, 브라우저 플러그인이 이 선택자를 기반으로 해당 필드를 식별하여 자동으로 인증 정보를 입력합니다.

General Settings 페이지에서 입력해야하는 정보들은 아래와 같습니다.


Application label
Login URL
Frame URL
Redirect URL
Regular Expression(옵션)
Username field
Password field
Login Button
Checkbox
Next Button
Extra Field Selector
Extra Field Value

•

Application label: Enter the label that you want to display under the app on the end users' home page.

•

Login URL: Enter the URL of the log-in form (the actual URL where you can view the form).

•

Frame URL: Enter the Frame URL (the URL that contains the frame)

•

Redirect URL: If going to the login page URL redirects to another page, then enter that URL here.

•

Regular Expression: (Optional) This allows you to create a regular expression that serves as an allow list. This is done to improve app security by restricting access to the URLs that match the pattern that you define. For example, if your log-in URL is https://example.com/login, and your change password URL is https://example.com/change_password, then you can create a regular expression that matches https://example.com/(login|change_password).

•

Username field: Enter the CSS selector for the username field.

•

Password field: Enter the CSS selector for the password field.

•

Login Button: Enter the CSS selector for the login button.

•

Checkbox: Enter the CSS selector for the checkbox (for example, the checkbox for the Remember me, Agree terms, and so forth).

•

Next Button: Enter the CSS selector for the next button that would redirect you to the next page.

•

Extra Field Selector: Enter the CSS selector for the extra field.

•

Extra Field Value: Enter the value for the extra field.