okta signin widget
7.25.1
OKTA 로그인 위젯은 웹 및 모바일 애플리케이션에서 사용자를 인증하고 등록하는 데 사용할 수있는 완벽하고 사용자 정의 가능한 로그인 경험을 제공하는 JavaScript 위젯입니다.
위젯은 Okta의 기본 서명 페이지에서 Okta SSO 세션을 시작하고 웹 브라우저에서 Okta 세션 쿠키를 설정하는 데 사용됩니다. 또한 OIDC 흐름을 수행하여 웹 또는 모바일 애플리케이션을 OKTA 플랫폼에 쉽게 통합 할 수 있습니다.
사용자 정의 OKTA 호스팅 서명 페이지는 조직의 도메인 이름 및 브랜딩을 사용하도록 구성 할 수 있습니다.
위젯은 원활한 사용자 경험을 위해 조직의 웹 또는 모바일 애플리케이션에 직접 포함시킬 수도 있습니다.
로그인 위젯을 사용하여 시작하는 방법에 대한 자세한 내용은 사용 안내서를 참조하십시오.
yarn link 사용한 로컬 개발 워크 플로OITE (Okta Identity Engine)는 기업이 조직의 요구에 맞는보다 유연한 액세스 경험을 구축 할 수있는 플랫폼 서비스입니다. OKTA 로그인 위젯은 모든 사용 시나리오에서 OIE를 지원합니다.
참고 : 달리 명시되지 않는 한,이 readme은 Identity Engine을 사용한다고 가정합니다. 클래식 엔진과 함께 위젯 사용에 대한 정보는이 문서에서 찾을 수 있습니다.
로그인 위젯은 독립적이며 런타임에 다른 프레임 워크가 필요하지 않습니다. 그러나 위젯이 제공하지 않는 토큰 저장, 갱신 또는 검증과 같은 앱 요구 사항이있을 수 있습니다.
이 SDK는 OKTA 로그인 위젯과 완전히 호환되며 OKTA 인증 엔드 투 엔드를 자신의 애플리케이션에 통합하는 데 도움이되는 유틸리티를 제공합니다.
완전한 샘플 응용 프로그램은 OKTA 호스트 및 임베디드 시나리오에서 OKTA 로그인 위젯의 사용을 보여줍니다.
Okta 로그인 위젯을 사용하는 몇 가지 방법이 있습니다.
OKTA는 조직의 OKTA URL에서 호스팅 된 조직의 기본 사인온 페이지를 제공합니다.
OKTA는 고도로 사용자 정의 할 수있는 OKTA 호스트 로그인 페이지로 사용자 정의 도메인을 작성하는 옵션을 지원합니다.
위젯을 응용 프로그램에 직접 포함시킬 수 있습니다.
OKTA는 조직의 URL에서 사용할 수있는 로그인 페이지를 제공하여 사용자가 전체 인증 흐름을 완료하고 SSO (싱글 사인온) 세션을 시작하고 웹 브라우저에서 Okta 세션 쿠키를 설정할 수 있습니다. 배경 이미지와 로고 로이 페이지를 사용자 정의 할 수 있습니다. 기본적 으로이 페이지에 로그인하면 사용자를 OKTA 사용자 대시 보드로 리디렉션합니다.
기본 OKTA 호스트 로그인 페이지는 OIDC 응용 프로그램에서 사용자를 인증 할 수도 있습니다. 앱은 로그인 페이지로 리디렉션하여 인증 흐름을 수행 할 수 있으며, 그 후 Okta는 사용자를 앱 콜백으로 다시 리디렉션합니다. Okta는 많은 언어로 SDK를 제공하여 리디렉션 URL을 구성하고 호스팅 된 흐름의 일부로 로그인 콜백을 처리하는 데 도움이됩니다.
OKTA는 OKTA 호스팅 흐름을 사용하는 방법을 보여주는 몇 가지 완전한 샘플 응용 프로그램을 제공합니다.
Okta는 또한 회사의 최상위 도메인의 하위 도메인 인 사용자 정의 도메인에서 사용할 수 있도록 사용자 정의 할 수있는 호스팅 된 로그인 페이지를 제공합니다. 페이지는 Okta에서 호스팅되지만이 페이지의 템플릿을 여러 가지 강력한 방식으로 사용자 정의 할 수 있습니다.
앱에 관한 한, 사용자 정의 된 위젯은 기본 OKTA 호스트 위젯과 동일하게 작동하며 동일한 호스팅 흐름을 사용할 수 있습니다.
참고 : 필요한 모든 값과 활성화 된 기능을 포함하는 페이지에 구성 객체가 있습니다. 이 객체를 수정할 필요가 없을 것입니다. 이 구성을 수정해야한다면 필요한 값을 덮어 쓰거나 제거하지 않도록주의하십시오.
가장 높은 수준의 사용자 정의를 허용하는 완벽한 경험을 얻으려면 가입 위젯을 응용 프로그램에 직접 포함시킬 수 있습니다. 이를 통해 위젯의 구성 및 API를 최대한 활용할 수 있습니다.
임베디드 위젯을 사용하여 클라이언트 측 웹 및 기본 앱을 사용하면 많은 경우 호스팅 된 흐름의 왕복 리디렉션을 피할 수 있습니다. ShowSignin을 참조하십시오.
서버 측 웹 애플리케이션은 OAUTH TOKENS SERVER-SIDE를 받으므로 리디렉션 콜백을 처리해야합니다 . 이 앱은 showSignInandredirect를 사용해야합니다.
Okta CDN에서 위젯을 가져 오는 스크립트 태그를 포함하여 앱에 로그인 위젯을 포함 시키거나 NPM 모듈을 앱에 묶을 수 있습니다.
위젯으로 쉽게 시작할 수있는 방법을 원한다면 CDN에서 직접 자산을로드하는 것이 좋습니다. 아직 외부 의존성을 위해 NPM 또는 원사를 활용하는 기존 빌드 프로세스 또는 기존의 기존 빌드 프로세스가 없습니다. T 로그인 위젯을 애플리케이션에 묶어야합니다.
표준 번들 ( okta-sign-in.min.js )에는 클래식 엔진과 Identity Engine을 모두 지원합니다. 또한 IE11과 같은 구형 브라우저와의 호환성을 보장하기위한 폴리 필드가 포함되어 있습니다. 응용 프로그램이 IE11을 지원할 필요가 없으면 처음 사용자의로드 시간을 줄이기 위해 no-polyfill 번들을 포함 할 수 있습니다. 독립형 polyfill 번들은 페이지에 조건부로 포함되어 필요할 때만 구형 브라우저에 대한 지원을 추가 할 수 있습니다.
조직이 Identity Engine으로 업그레이드 한 경우 더 작은 oie 번들을 사용할 수 있습니다.
| 묶음 | 파일 이름 | 대략 크기 | 클래식 엔진 | 아이덴티티 엔진 | 폴리 필 | 메모 |
|---|---|---|---|---|---|---|
| 기준 | Okta-sign-in.min.js | 1.7 MB | ✅ | ✅ | ✅ | 모든 것을 포함하는 표준 번들 |
| 폴리얼 없음 | Okta-sign-in.no-polyfill.min.js | 1.7 MB | ✅ | ✅ | 폴리 필드가없는 표준 번들 | |
| 오이 | Okta-sign-in.oie.min.js | 1.3MB | ✅ | OIE 활성화 된 조직의 작은 번들 | ||
| 권위 있는 | Okta-sign-in.classic.min.js | 1.1MB | ✅ | 클래식 엔진만을위한 더 작은 번들 | ||
| 폴리 필 | Okta-sign-in.polyfill.min.js | 108KB | ✅ | 독립형 폴리 필 다발. 폴리 필드가 포함되지 않은 위젯 번들과 함께 사용할 수 있습니다. |
CDN을 통해 로그인 위젯을 포함 시키려면 HTML에 JS 및 CSS 파일에 대한 링크를 포함시킵니다.
<!-- Latest CDN production Javascript and CSS -->
< script src =" https://global.oktacdn.com/okta-signin-widget/7.25.1/js/okta-sign-in.min.js " type =" text/javascript " integrity =" sha384-8QHSy1n8imbyR7imair5z4njOEYiZZk5gqBOJYbbUN3W6HQwW3PZ9lYQiybespeW " crossorigin =" anonymous " > </ script >
< link href =" https://global.oktacdn.com/okta-signin-widget/7.25.1/css/okta-sign-in.min.css " type =" text/css " rel =" stylesheet " integrity =" sha384-63aTBe2wMqzMRsDHNmlF/FreSWmf3p08BhUDoPlzVf3d+stbkfWtqmdyJ4He5m3m " crossorigin =" anonymous " />참고 : CDN URL에는 버전 번호가 포함되어 있습니다. 이 번호는 JavaScript와 CSS 파일 모두에 대해 동일해야하며 릴리스 페이지의 버전과 일치해야합니다. 최신 위젯 버전을 사용하는 것이 좋습니다.
폴리 필드가 포함되지 않은 번들 중 하나를 사용하는 경우, 독립형 폴리 필 다번을 조건부로로드 할 수 있습니다. 폴리 필드는 위젯 번들 전에로드해야합니다.
<!-- Polyfill for older browsers -->
< script src =" https://global.oktacdn.com/okta-signin-widget/7.25.1/js/okta-sign-in.polyfill.min.js " type =" text/javascript " integrity =" sha384-QzQIGwIndxyBdHRQOwgjmQJLod6LRMchZyYg7RUq8FUECvPvreqauQhkU2FF9EGD " crossorigin =" anonymous " > </ script >
<!-- Widget bundle for Okta Identity Engine -->
< script src =" https://global.oktacdn.com/okta-signin-widget/7.25.1/js/okta-sign-in.oie.min.js " type =" text/javascript " integrity =" sha384-T4d68QBaFQ/b3kDy8qubuXDALwWgBRfP0JsfZsYRzZNlIXflVE2svwIHrPaivLyd " crossorigin =" anonymous " > </ script >
<!-- CSS for widget -->
< link href =" https://global.oktacdn.com/okta-signin-widget/7.25.1/css/okta-sign-in.min.css " type =" text/css " rel =" stylesheet " integrity =" sha384-63aTBe2wMqzMRsDHNmlF/FreSWmf3p08BhUDoPlzVf3d+stbkfWtqmdyJ4He5m3m " crossorigin =" anonymous " />NPM 모듈 사용은 다음과 같은 경우 좋은 선택입니다.
@okta/okta-signin-widget을 설치하려면 :
# Run this command in your project root folder
# yarn
yarn add @okta/okta-signin-widget
# npm
npm install @okta/okta-signin-widget --save 여기에는 최신 버전의 로그인 위젯이 프로젝트의 node_modules 디렉토리에 설치됩니다.
참고 : TypeScript를 사용하는 경우 tsconfig.json 에서 합성 수입을 활성화해야합니다.
{
...
"compilerOptions" : {
"allowSyntheticDefaultImports" : true ,
...
}
} Angular (Typescript) 프로젝트에는 tsconfig.json 에도 Simliar 구성이 필요합니다.
{
...
"angularCompilerOptions" : {
"allowSyntheticDefaultImports" : true ,
...
}
} 위젯 소스 파일 및 자산은 node_modules/@okta/okta-signin-widget/dist 에 설치 되며이 디렉토리 구조가 있습니다.
node_modules/@okta/okta-signin-widget/dist/
├── css/
│ │ # Main CSS file for widget styles
│ └── okta-sign-in.min.css
│
│ # Base font and image files that are used in rendering the widget
├── font/
│
├── img/
│
├── js/
│ │ # CDN JS file that exports the OktaSignIn object in UMD format. This is
│ │ # packaged with everything needed to run the widget, including 3rd party
│ │ # vendor files and polyfills.
│ ├── okta-sign-in.min.js
| |
│ │ # CDN JS file bundled without polyfills.
│ ├── okta-sign-in.no-polyfill.min.js
│ │
│ │ # Development version of okta-sign-in.min.js. Equipped with helpful
│ │ # console warning messages for common configuration errors.
│ └── okta-sign-in.js
│
│ # Localized strings that are used to display all text and labels in the
│ # widget. Three output formats are included - json and properties
├── labels/
│
│ # Sass files that are used to generate the widget css. If you are already
│ # using Sass in your project, you can include these helper files to make
│ # generating your custom theme easier
└── sass/설치 후 :
자산을 공개적으로 호스팅 된 사이트에 배포 할 폴더에 자산을 복사하십시오. 복사해야 할 폴더는 css , font , img , js 및 labels 입니다.
js 디렉토리를 복사하고 페이지에 글로벌로 포함하는 대신 WebPack, Browserify 또는 node_modules 형식을 이해하는 다른 모듈 번링 시스템을 사용하는 경우 빌드에 로그인 위젯이 필요할 수 있습니다.
// Load the Sign-In Widget module
var OktaSignIn = require ( '@okta/okta-signin-widget' ) ;
// Use OktaSignIn
var signIn = new OktaSignIn ( /* configOptions */ ) ;소스 맵은 외부 .map 파일로 제공됩니다. WebPack을 사용하는 경우 소스 -Map-Loader 플러그인을 사용하여로드 할 수 있습니다.
Style-Loader 또는 Mini-CSS-Extract-Plugin을 사용하여 번들에 위젯 스타일을 포함하려면 다음 가져 오기를 사용하십시오.
import '@okta/okta-signin-widget/css/okta-sign-in.min.css' ; 참고 : Browserify를 사용하여 앱을 묶는 경우 --noparse 옵션을 사용해야합니다.
browserify main.js
--noparse= $PWD /node_modules/@okta/okta-signin-widget/dist/js-okta-sign-in.entry.js
--outfile=bundle.jsIE11을 지원 해야하는 경우 Bundler에 ES6 Polyfills를 포함시켜야합니다. 위젯은 수출을 통해 필요한 모든 폴리 플릴을 제공합니다.
const polyfill = require('@okta/okta-signin-widget/polyfill');
또는
import polyfill from '@okta/okta-signin-widget/polyfill';
이 간단한 예제는 로그인 위젯 사용을 시작하는 데 도움이됩니다. 완전한 엔드 투 엔드 솔루션을 보려면 샘플 응용 프로그램을 확인하십시오.
단일 페이지 응용 프로그램 (SPA)은 브라우저에서 완전히 실행됩니다. 스파 애플리케이션은 클라이언트 측 흐름을 사용하여 인증하고 브라우저 기반 스토리지에 Oauth 토큰을 저장합니다.
참고 : 이러한 구성 값에 대한 자세한 내용은 구성을 참조하십시오.
var signIn = new OktaSignIn (
{
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}
) ;
signIn . showSignIn ( {
// Assumes there is an empty element on the page with an id of 'osw-container'
el : '#osw-container'
} ) . then ( function ( res ) {
// Most flows will not require any redirection. In these cases, tokens will be returned directly.
// res.tokens is an object
oktaSignIn . authClient . handleLoginRedirect ( res . tokens ) ;
} ) . catch ( function ( error ) {
// This function is invoked with errors the widget cannot recover from:
// Known errors: CONFIG_ERROR, UNSUPPORTED_BROWSER_ERROR
} ) ; 웹 응용 프로그램은 주로 서버에서 실행됩니다. 클라이언트 측을 실행하는 위젯은 위젯을 구성하고 렌더링하는 스크립트 블록이 포함 된 HTML 페이지에 포함됩니다. OAUTH 토큰은 응용 프로그램의 로그인 리디렉션 콜백에서 서버 측에서 수신됩니다.
참고 : 이러한 구성 값에 대한 자세한 내용은 구성을 참조하십시오.
var signIn = new OktaSignIn (
{
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
state : '{{state passed from backend}}' , // state can be any string, it will be passed on redirect callback
codeChallenge : '{{PKCE code challenge from backend}}' , // PKCE is required for interaction code flow
}
) ;
// When the authorization flow is complete there will be a redirect to Okta.
// Okta's servers will process the information and then redirect back to your application's `redirectUri`
// If successful, an authorization code will exist in the URL as the "code" query parameter
// If unsuccesful, there will be an "error" query parameter in the URL
signIn . showSignInAndRedirect ( {
// Assumes there is an empty element on the page with an id of 'osw-container'
el : '#osw-container'
} ) . catch ( function ( error ) {
// This function is invoked with errors the widget cannot recover from:
// Known errors: CONFIG_ERROR, UNSUPPORTED_BROWSER_ERROR
} ) ; 기본 인증 흐름 외에도 위젯은 몇 가지 사전 정의 된 흐름을 지원하므로 여러 공통 사용 사례에 대한 단일 목적 HTML 페이지를 제공 할 수 있습니다.
기본적으로 OKTA 로그인 위젯은 전류 흐름을 진행하거나 새로운 인증 흐름을 시작합니다. flow 옵션을 사용하면 위젯을 등록, 잠금 해제 또는 비밀번호와 같은 특정보기로 부트 스트랩 할 수 있습니다. 지원 흐름 :
참고 : 특정 흐름은 관리자가 ORG를 구성 한 경우에만 작동 할 수 있습니다. 필요한 작업 (예 : 관리자 콘솔의 프로파일 등록 (사용자 가입)이 활성화되지 않은 경우
flow: 'signup'사용하여 위젯을 부트 스트랩합니다. 결과 오류가 발생)
// login.html
new OktaSignIn ( {
flow : 'login'
} ) ;
// signup.html
new OktaSignIn ( {
flow : 'signup'
} ) ;
// reset_password.html
new OktaSignIn ( {
flow : 'resetPassword'
} ) ;
// unlock_account.html
new OktaSignIn ( {
flow : 'unlockAccount'
} ) ; 콜백 리디렉션 콜백은 흐름의 일부로 브라우저에 앱이 다시로드 될 때 발생합니다. 리디렉션 콜백 중에 앱은 OKTA 앱 구성에서 정의한 특정 URL 경로에로드됩니다. 대부분의 콜백은 한 번만 처리 할 수 있으며 두 번 처리하려는 시도가 있으면 오류가 발생합니다. 일반적으로 콜백 로직이 페이지 재 장전 오류를 피하기 위해 처리 된 후 앱은 잘 알려진 또는 이전에 저장된 URL 경로로 리디렉션됩니다.
참고 : 대부분의 앱은 하나 이상의 리디렉션 콜백을 처리 할 수 있도록 준비해야합니다. 앱 사인온 정책이 구성되는 방식에 따라 일부 스파 애플리케이션은 리디렉션없이 토큰을 수신 할 수 있습니다. 그러나 정책에 소셜 / IDP 제공 업체와 로그인하는 것이 포함되거나 이메일 확인을 사용하여 인증 또는 계정 복구를 허용하는 경우 논리를 추가해야합니다.
OAUTH 콜백은 상호 작용 코드 흐름의 마지막 단계입니다. 성공적인 인증시 브라우저는 새로운 세션을 시작하기위한 정보로 OKTA로 리디렉션됩니다. Okta의 서버는 정보를 처리 한 다음 응용 프로그램의 redirectUri 로 다시 리디렉션합니다. 성공하면 상호 작용 코드가 URL에 interaction_code 쿼리 매개 변수로 존재합니다. 실패하면 URL에 error 및 error_description 쿼리 매개 변수가 있습니다. 성공 여부에 관계없이 원래 응용 프로그램에 의해 위젯으로 전달 된 state 매개 변수도 리디렉션에서 반환됩니다. 이는 서버 측 웹 애플리케이션에서 올바른 사용자 세션과 콜백을 일치시키기 위해 사용할 수 있습니다.
모든 웹 응용 프로그램은 OAUTH 콜백을 처리합니다 . SPA 응용 프로그램의 경우 많은 경우 사인 온 정책에는 리디렉션이 필요하지 않으며 이러한 응용 프로그램은 ShowSignin으로부터 직접 토큰을받을 수 있습니다. 그러나 사인온 정책에 어떤 이유로 든 리디렉션이 필요한 경우 (예 : 소셜 / IDP 제공 업체와의 통합) SPA 앱은 OAuth 콜백을 처리해야합니다. 이러한 이유로 우리는 모든 스파 앱을 Oauth 콜백을 처리 할 준비를해야합니다 .
참고 : 위젯은 Oauth 콜백을 직접 처리하지 않습니다. 서버 측 웹 애플리케이션은 SDK 중 하나를 사용하여 콜백 처리에 도움이 될 수 있습니다. SPA 응용 프로그램은 Okta-Auth-JS SDK를 사용할 수 있으며,이 위젯에는
authClient속성으로 포함되어 있습니다.
SPA 응용 프로그램은 내장 authClient 사용하여 OAuth 콜백 클라이언트 측을 처리 할 수 있습니다.
// https://myapp.mycompany.com/login/callback?interaction_code=ABC&state=XYZ
if ( signIn . authClient . isLoginRedirect ( ) ) {
await signIn . authClient . handleLoginRedirect ( ) ;
} 타사 IDP로 로그인 한 후 사용자는 응용 프로그램의 redirectUri 로 다시 방향을 바꿉니다. 사용자에게 더 이상 입력이 필요하지 않으면 interaction_code 매개 변수가 포함 된 OAUTH 콜백이됩니다. 추가 입력이 필요한 경우 콜백에는 값 interaction_required 가있는 error 매개 변수가 포함됩니다. 이 경우 흐름이 계속 될 수 있도록 로그인 위젯을 다시로드해야합니다.
서버 측 웹 및 스파 애플리케이션은 모두 error 쿼리 매개 변수를 찾아야하며 값이 interaction_required 인 경우 첫 번째 렌더링과 동일한 구성을 사용하여 위젯을 다시 렌더링해야합니다. state 매개 변수는 콜백에 전달되어 사용자의 애플리케이션 세션과 요청을 일치시키는 데 사용할 수 있습니다. 위젯은 트랜잭션을 자동으로 진행합니다.
귀하의 사인온 정책에 이메일 Magic Link/OTP를 사용하는 경우 응용 프로그램은 이메일 확인 콜백을 구현해야합니다. 사용자가 이메일로 링크를 클릭 한 후 응용 프로그램의 email verify callback URI 로 다시 리디렉션됩니다. 응용 프로그램에 전달 된 쿼리 매개 변수에는 state 및 otp 포함됩니다. 소셜/IDP 콜백과 마찬가지로 위젯은 동일한 구성을 사용하여 다시 렌더링해야합니다. 또한 otp 는 위젯의 생성자로 전달되어야합니다.
참고 : 이러한 구성 값에 대한 자세한 내용은 구성을 참조하십시오.
var signIn = new OktaSignIn (
{
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
state : '{{state from URL}}' ,
otp : '{{otp from URL}}'
}
) ; 제공된 옵션으로 사인온 위젯의 새 인스턴스를 만듭니다.
사용자 정의 된 Okta 호스트 위젯을 사용하는 응용 프로그램의 경우 필요한 모든 값이 포함 된 페이지에 구성 객체가 있습니다. 이 객체를 수정할 필요가 없을 것입니다.
임베디드 위젯을 사용하는 응용 프로그램의 경우 OIDC 구성을 제공해야합니다.
참고 : 이러한 구성 값에 대한 자세한 내용은 구성을 참조하십시오.
var signIn = new OktaSignIn (
{
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}
) ;위젯을 DOM으로 렌더링합니다. 성공시 약속은 해결됩니다. 오류가 발생하면 약속이 거부됩니다. 사인온 정책에 OKTA 또는 다른 ID (Identity Provider)로 리디렉션이 필요한 경우 브라우저가 리디렉션되며 약속은 해결되지 않습니다. 응답 및 오류는 Renderel과 동일합니다.
참고 : 이것은 스파 애플리케이션의 위젯을 렌더링하는 권장 방법입니다. 서버 측 웹 앱은 대신 showSignInandrect 메소드를 사용해야합니다.
showSignIn 위젯 생성자와 동일한 옵션을 수락합니다. 메소드로 전달 된 옵션은 생성자의 옵션을 무시합니다.
참고 : 이러한 구성 값에 대한 자세한 내용은 구성을 참조하십시오.
var signIn = new OktaSignIn ( {
issuer : 'https://{yourOktaDomain}/oauth2/default'
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} ) ;
oktaSignIn . showSignIn ( {
// Assumes there is an empty element on the page with an id of ‘osw-container’
el : ‘ # osw - container’ ,
} ) . then ( response => {
oktaSignIn . authClient . handleLoginRedirect ( res . tokens ) ;
} ) . catch ( function ( error ) {
// This function is invoked with errors the widget cannot recover from:
// Known errors: CONFIG_ERROR, UNSUPPORTED_BROWSER_ERROR
console . log ( 'login error' , error ) ;
} ) ; 위젯을 DOM으로 렌더링합니다. 성공적인 인증에 따라 브라우저는 새로운 세션을 시작하기위한 정보로 OKTA로 리디렉션됩니다. Okta의 서버는 정보를 처리 한 다음 응용 프로그램의 redirectUri 로 다시 리디렉션됩니다. 성공하면 상호 작용 코드가 URL에 interaction_code 쿼리 매개 변수로 존재합니다. 실패하면 URL에 error 및 error_description 쿼리 매개 변수가 있습니다. 성공 여부에 관계없이 위젯으로 전달 된 state 매개 변수도 리디렉션에서 반환됩니다. 서버 측 웹 애플리케이션에서 콜백을 올바른 사용자 세션과 일치시키기 위해 사용할 수 있습니다.
showSignInAndRedirect 위젯 생성자와 동일한 옵션을 수락합니다. 메소드로 전달 된 옵션은 생성자의 옵션을 무시합니다.
참고 : 이러한 구성 값에 대한 자세한 내용은 구성을 참조하십시오.
var signIn = new OktaSignIn ( {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
state : '{{state passed from backend}}' , // state can be any string, it will be passed on redirect callback
codeChallenge : '{{PKCE code challenge from backend}}' , // PKCE is required for interaction code flow
} ) ;
signIn . showSignInAndRedirect ( {
// Assumes there is an empty element on the page with an id of 'osw-container'
el : '#osw-container'
} ) . catch ( function ( error ) {
// This function is invoked with errors the widget cannot recover from:
// Known errors: CONFIG_ERROR, UNSUPPORTED_BROWSER_ERROR
} ) ;위젯을 숨기고 위젯을 DOM에 보관하십시오.
signIn . hide ( ) ;숨겨져있는 경우 위젯을 표시하십시오.
signIn . show ( ) ;DOM에서 위젯을 완전히 제거하십시오.
signIn . remove ( ) ;위젯이 게시 한 이벤트를 구독하십시오.
event - 구독 할 이벤트callback - 이벤트가 트리거 될 때 호출 할 기능 // Handle a 'ready' event using an onReady callback
signIn . on ( 'ready' , onReady ) ;위젯 이벤트를 구독 취소하십시오. 콜백이 제공되지 않으면 이벤트에서 모든 청취자를 수신 해제하십시오.
event - 구독을 취소 할 선택적 이벤트callback - 이벤트 구독에 사용 된 선택적 콜백 // Unsubscribe all listeners from all events
signIn . off ( ) ;
// Unsubscribe all listeners that have been registered to the 'ready' event
signIn . off ( 'ready' ) ;
// Unsubscribe the onReady listener from the 'ready' event
signIn . off ( 'ready' , onReady ) ;로그인 위젯에서 사용하는 기본 [@okta/okta-auth-js] [] 객체에 대한 액세스를 제공합니다. 모든 방법은 API 참조에 문서화되어 있습니다.
authClient clientId , issuer , redirectUri , state 및 scopes 와 같은 위젯으로 전달 된 값을 사용하여 구성됩니다. 위젯에서 직접 지원하지 않는 옵션은 authParams 객체를 사용하여 Authjs에 전달할 수 있습니다.
authClient 위젯 외부에서 생성 및 구성 할 수 있으며 authClient 옵션으로 위젯으로 전달할 수도 있습니다. authClient 옵션이 전달되면 authParams 무시됩니다.
참고 : 이러한 구성 값에 대한 자세한 내용은 구성을 참조하십시오.
var authClient = new OktaAuth ( {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{yourClientId}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} ) ;
var config = {
baseUrl : 'https://{yourOktaDomain}' ,
authClient : authClient ,
} ;
var signIn = new OktaSignIn ( config ) ;
// signIn.authClient === authClient authClient 옵션이 설정되지 않으면 위젯 및 authParams 에 전달 된 옵션을 사용하여 인스턴스가 생성됩니다.
참고 :
authClient구성 옵션을 사용할 때 설치된 위젯에서 사용하는 것과 동일한 버전 의@okta/okta-auth-js설치하고 사용하십시오. 이 버전은 설치된 위젯의package.json파일에서 찾을 수 있습니다.
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{yourClientId}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
authParams : {
ignoreSignature : true
}
} ;
var signIn = new OktaSignIn ( config ) ;
// signIn.authClient.options.clientId === '{yourClientId}'
// signIn.authClient.options.ignoreSignature === true'보기가 렌더링되기 전에 실행되는 비동기 후크 함수를 추가합니다.
참고 : 이러한 구성 값에 대한 자세한 내용은 구성을 참조하십시오.
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{yourClientId}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} ;
var signIn = new OktaSignIn ( config ) ;
signIn . before ( 'success-redirect' , async ( ) => {
// custom logic can go here. when the function resolves, execution will continue.
} ) ;참고 :이 기능은 Okta Identity Engine을 사용할 때만 지원됩니다.
뷰가 렌더링 된 후 실행되는 비동기 후크 함수를 추가합니다.
참고 : 이러한 구성 값에 대한 자세한 내용은 구성을 참조하십시오.
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{yourClientId}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} ;
var signIn = new OktaSignIn ( config ) ;
signIn . after ( 'identify' , async ( ) => {
// custom logic can go here. when the function resolves, execution will continue.
} ) ; 기본 OKTA 호스팅 서명 페이지를 사용하는 경우 모든 구성은 admin UI의 Customization 섹션을 통해 처리됩니다.
사용자 정의 OKTA 호스팅 서명 페이지를 사용하는 경우 필요한 모든 값이 포함 된 페이지에 구성 객체가 포함되어 있습니다. 이 객체를 수정할 필요는 없지만이 개체를 시작점으로 사용하고 추가 사용자 정의를 추가 할 수 있습니다.
내장 위젯의 경우 issuer , clientId 및 redirectUri 설정해야합니다. 기본적으로 위젯은 상호 작용 코드 흐름을 사용하여 Identity Engine에서 실행됩니다. 위젯은 USEclassicEngine 옵션을 true 로 설정하여 클래식 엔진에 대해 실행할 수 있습니다. (클래식 엔진에서의 실행에 대한 자세한 내용은이 문서를 참조하십시오.
모든 임베디드 위젯은 이러한 기본 옵션 ( issuer , clientId 및 redirectUri 을 설정해야합니다.
참고 : OKTA 호스팅 위젯은 이러한 값을 설정해서는 안됩니다.
Authization Server의 URL은 응용 프로그램에 OAUTH 토큰을 발행합니다.
참고 :
https://{yourOktaDomain}모든 OKTA 조직이 될 수 있습니다. OKTA 도메인 찾기에 도움이되는 개발자 안내서를 참조하십시오.
"기본"사용자 정의 인증 서버를 사용한 기본 구성 :
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}다른 사용자 정의 인증 서버를 지정할 수 있습니다.
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/custom' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} OKTA 사용자 API에 액세스 해야하는 응용 프로그램과 같은 일부 응용 프로그램은 OKTA 조직 인증 서버를 발행자로 사용하려고합니다. 이 경우 issuer 는 OKTA 도메인과 일치해야합니다.
var config = {
issuer : 'https://{yourOktaDomain}' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}참고 : OKTA 조직 인증 서버는 OKTA 사용자 API에만 액세스하기위한 것이며 액세스 토큰의 사용자 정의 스코프와 같은 표준 사용자 정의 인증 서버의 모든 기능을 지원하지 않습니다. 일반적으로 사용자 정의 인증 서버를 사용하여 조직의 리소스에 대한 액세스를 보장하는 것이 좋습니다.
참고 :이 구성 값은 Okta Admin UI에서 찾을 수 있습니다. 응용 프로그램의 ClientId 찾기에 도움이되는 개발자 안내서를 참조하십시오.
응용 프로그램의 클라이언트 ID.
참고 :이 구성 값은 응용 프로그램의 "일반 설정"의 Okta Admin UI에서 찾을 수 있습니다.
Oauth 콜백에 사용할 URI.
기본값으로 false . 기본적으로 위젯은 Identity Engine의 상호 작용 코드 흐름을 사용합니다. useClassicEngine 옵션을 true 로 설정하면 위젯이 대신 클래식 엔진에 대해 실행됩니다. (클래식 엔진에서 실행되는 위젯 구성에 대한 자세한 내용은이 문서를 참조하십시오).
참고 :이 옵션은 클래식 엔진을 지원하는 것과 함께 향후 위젯 버전에서 제거됩니다. 모든 고객은 클래식 엔진에서 Identity Engine으로 마이그레이션하는 것이 좋습니다. ID 엔진으로의 마이그레이션에 대한 자세한 내용은 OIE로 마이그레이션을 방문하십시오.
PKCE 코드 도전. 위젯이 전체 트랜잭션을 관리하므로 스파 애플리케이션에는이 옵션이 필요하지 않습니다. 웹 응용 프로그램은 자체 코드 과제와 코드 비밀을 생성해야합니다. 코드 챌린지는 위젯으로 전달되며 코드 비밀은 서버 측에서 고정되어 리디렉션 로그인 콜백에서 토큰을 얻습니다.
참고 : PKCE를 사용한 상호 작용 코드 흐름의 완전한 작업 예는 샘플 응용 프로그램을 확인하십시오.
리디렉션 로그인 콜백 또는 이메일 확인 콜백에서 쿼리 매개 변수로 반환되는 응용 프로그램 제공 값. 값이 설정되지 않으면 임의 값이 생성됩니다. 이메일을 처리 할 때 콜백을 확인하면 쿼리 매개 변수의 state 값을 구성 옵션 (OTP와 함께)으로 위젯으로 전달해야합니다. 이를 통해 위젯이 현재 트랜잭션을로드하고 재개 할 수 있습니다.
이메일을 처리 할 때 콜백을 확인하면 쿼리 매개 변수의 otp 값이 구성 옵션 (상태와 함께)으로 위젯으로 전달되어야합니다. 이를 통해 위젯이 현재 트랜잭션을로드하고 재개 할 수 있습니다.
기본값 ['openid', 'email'] 에 대한 기본값. 반환 된 id_token 또는 access_token 에서 사용할 수있는 정보를 지정하십시오. OIDC의 경우 openid 스코프 중 하나로 포함시켜야합니다. 사용 가능한 범위 목록은 스코어 및 클레임을 참조하십시오.
OKTA 로그인 양식에 대한 외부 신분 공급자에 대한 표시 순서. 기본값은 SECONDARY .
PRIMARY - OKTA 로그인 양식 위에 외부 IDP 버튼 표시SECONDARY - OKTA 로그인 양식 아래에 외부 IDP 버튼 표시로그인 위젯 상단에 표시되는 로고 이미지로 로컬 경로 또는 URL
// Hosted on the same origin
logo: '/img/logo.png'
// Can also be a full url
logo: 'https://acme.com/img/logo.png' 로고 이미지의 alt 속성에 대한 텍스트, 로고 텍스트는 로고 이미지를 사용할 수없는 경우에만 나타납니다.
// Text to describe the logo
logoText: 'logo text' 로그인 위젯으로 렌더링 된 메시지에 표시되는 브랜드 또는 회사 이름 (예 : "{ brandName } password"). brandName 이 제공되지 않으면 일반 메시지가 대신 렌더링됩니다 (예 : "비밀번호 재설정"). 언어 및 텍스트 설정으로 표시된 텍스트를 추가로 사용자 정의 할 수 있습니다.
brandName: 'Spaghetti Inc.' 이 옵션을 사용하면 로그인 위젯의 모양을 사용자 정의 할 수 있습니다.
더 많은 사용자 정의를 원한다면 SASS 소스 파일을 수정하고 위젯을 빌드 할 수 있습니다.
브랜드 색상을 기본 CTA 버튼의 배경색으로 설정합니다. 색상은 #008000 과 같이 16 진 형식이어야합니다.
colors: {
brand : '#008000'
}cs 체코da -Danishde 독일어el - 그리스en 영어es 스페인어fi 핀란드fr 프랑스어hu - 헝가리어id 인도네시아it - 이탈리아어ja 일본ko - 한국어ms 말레이시아nb 노르웨이어nl-NL 네덜란드어pl 광택pt-BR 포르투갈어 (브라질)ro 루마니아어ru 러시아어sv 스웨덴어th -Thaitr 터키uk - 우크라이나zh-CN 중국어 (PRC)zh-TW 중국어 (대만)추가 언어 지원은 자산과 함께 추가 할 수 있습니다.
위젯의 언어를 설정하십시오. 언어가 지정되지 않은 경우 위젯은 지원되는 경우 사용자의 브라우저 기본 설정을 기반으로 언어를 선택하거나 en 을 선택합니다.
// You can simply pass the languageCode as a string:
language: 'ja'
// Or, if you need to determine it dynamically, you can pass a
// callback function:
language: ( supportedLanguages , userLanguages ) => {
// supportedLanguages is an array of languageCodes, i.e.:
// ['cs', 'da', ...]
//
// userLanguages is an array of languageCodes that come from the user's
// browser preferences
return supportedLanguages [ 0 ] ;
} 위젯의 기본 국가 코드를 설정하십시오. defaultCountryCode 제공되지 않으면 기본값이 US 에 있습니다. 그에 따라 위젯에서 전화 번호에 대한 국가 호출 코드를 설정합니다.
위젯에서 텍스트를 대체하십시오. 전체 속성 목록은 로그인 .properties 및 country.properties 파일에서 찾을 수 있습니다.
// The i18n object maps language codes to a hash of property keys ->
// property values.
i18n: {
// Overriding English properties
'en' : {
'primaryauth.title' : 'Sign in to Acme' ,
'primaryauth.username.placeholder' : 'Your Acme Username'
} ,
// Overriding Japanese properties
'ja' : {
'primaryauth.title' : 'ACMEにサインイン' ,
'primaryauth.username.placeholder' : 'ACMEのユーザー名'
}
}
// If you want to override any properties in the country.properties file,
// you will need to prefix the name with "country.":
i18n: {
'en' : {
// login.properties keys do not have a special prefix
'primaryAuth.title' : 'Sign in to Acme' ,
// country.properties keys are prefixed with 'country.'
'country.AF' : 'Afghanistan, edited' ,
'country.AL' : 'Albania, edited'
}
}위젯이 언어 파일을 가져 오는 기본 URL을 무시하십시오. 위젯은 기본적으로 영어 텍스트로만 포장되어 있으며 Okta CDN의 요구에 따라 다른 언어를로드합니다. 자신의 서버에서 언어 파일을 제공하려면이 설정을 업데이트하십시오.
// Loading the assets from a path on the current domain
assets: {
baseUrl : '/path/to/dist'
} ,
// Full urls work as well
assets : {
baseUrl : 'https://acme.com/assets/dist'
}참고 : JSON 파일은 NPM 모듈에 게시 된
dist/labels/json폴더에서 액세스 할 수 있습니다.
경로 {assets.baseUrl}/labels/json/ 경로에서 호스팅 및 액세스 할 수있는 지원 언어 목록을 지정하십시오. 이 옵션은 지원되는 언어의 기본 목록을 대체합니다. 지원되지 않는 언어가 요청되면 (언어 옵션을 사용하여 명시 적으로 또는 브라우저 감지에 따라 자동으로) 기본 언어 ( en )가 사용됩니다.
이 기능을 사용하여 자산 경로와 파일 이름을 다시 작성할 수 있습니다. 자체 호스트에서 자산 파일을 호스팅하고 자산의 경로 또는 파일 이름을 변경하려면이 기능을 사용하십시오. 예를 들어 파일을 캐시 버스트하려는 경우 유용합니다.
assets: {
// Note: baseUrl is still needed to set the base path
baseUrl : '/path/to/dist' ,
rewrite : ( assetPath ) => {
// assetPath is relative to baseUrl
// Example assetPath to load login for 'ja': "/labels/json/login_ja.json"
return someCacheBust ( assetPath ) ;
}
}다음 구성 옵션을 설정하여 링크 URL 로그인으로 되돌릴 수 있습니다. 제공되지 않으면 위젯이 기본 인증으로 이동합니다.
backToSignInLink: 'https://www.backtosignin.com'참고 : 이전 위젯 버전과의 호환성을 위해
signOutLinkbackToSignInLink의 별칭으로 허용됩니다.
다음 구성 옵션을 설정하여 기본 인증 페이지에 등록 링크를 추가 할 수 있습니다.
등록 링크를 클릭 할 때 호출되는 함수.
// An example that adds a registration link underneath the login form on the primary auth page
registration: {
click : ( ) => {
window . location . href = 'https://acme.com/sign-up' ;
}
} 기본 인증 페이지에서 도움말 링크 URL을 무시하려면 다음 구성 옵션을 설정하십시오.
// An example that overrides all help links, and sets two custom links
helpLinks: {
help : 'https://acme.com/help' ,
forgotPassword : 'https://acme.com/forgot-password' ,
unlock : 'https://acme.com/unlock-account' ,
custom : [
{
text : 'What is Okta?' ,
href : 'https://acme.com/what-is-okta'
} ,
{
text : 'Acme Portal' ,
href : 'https://acme.com' ,
target : '_blank'
}
]
} "도움말"링크에 대한 사용자 정의 링크 HREF
"비밀번호 잊어 버린"링크에 대한 사용자 정의 링크 href
"잠금 해제 계정"링크의 사용자 정의 링크 HREF. 이 링크에 대한 링크를 위해서는 features.selfServiceUnlock true 로 설정해야하며 관리자 설정에서 셀프 서비스 잠금 해제 기능을 활성화해야합니다.
"도움말"링크 후에 추가 될 사용자 정의 링크 개체 {text, href, target} 배열. 링크의 target 선택 사항입니다.
hCaptcha 스크립트 URI를 사용자 정의하기 위해 다음 구성 옵션을 설정하십시오.
// An example that uses cn1 host
hcaptcha : {
scriptSource : 'https://cn1.hcaptcha.com/1/api.js' ,
scriptParams : {
apihost : 'https://cn1.hcaptcha.com' ,
endpoint : 'https://cn1.hcaptcha.com' ,
assethost : 'https://assets-cn1.hcaptcha.com' ,
imghost : 'https://imgs-cn1.hcaptcha.com' ,
reportapi : 'https://reportapi-cn1.hcaptcha.com' ,
}
} , reCAPTCHA 스크립트 URI를 사용자 정의하기 위해 다음 구성 옵션을 설정하십시오.
// An example that uses recaptcha.net
recaptcha : {
scriptSource : 'https://recaptcha.net/recaptcha/api.js'
} ,비동기 콜백은 특정 뷰가 렌더링되기 전후에 호출 될 수 있습니다. 후크는 계측, 로깅 또는 추가 사용자 입력과 같은 사용자 정의 로직을 추가하는 데 사용될 수 있습니다. 후크 함수가 실행되는 동안 일반 실행이 차단되고 후크 함수에서 반환 된 약속이 해결 된 후에 재개됩니다. 후크는 아래와 같이 구성 또는 전후 방법을 사용하여 런타임에 구성을 통해 추가 할 수 있습니다. 뷰의 전체 목록은 RemediationConstants.js에서 찾을 수 있습니다.
// Hooks can be set in config
hooks: {
'identify' : {
after : [
async function afterIdentify ( ) {
// custom logic goes here
}
]
} ,
'success-redirect' : {
before : [
async function beforeSuccessRedirect ( ) {
// custom logic goes here
}
]
}
}
// Hooks can also be added at runtime
signIn . before ( 'success-redirect' , async ( ) => {
// custom logic goes here
} ) ;
signIn . after ( 'identify' , async ( ) => {
// custom logic goes here
} ) ;사용자 이름으로 요청을 OKTA로 보내기 전에 사용자 이름을 변환합니다. 이는 사용자가 입력 한 내용과 OKTA 사용자 이름간에 내부 매핑이있을 때 유용합니다.
// The callback function is passed two arguments:
// 1) username: The name entered by the user
// 2) operation: The type of operation the user is trying to perform:
// - PRIMARY_AUTH
// - FORGOT_PASSWORD
// - UNLOCK_ACCOUNT
transformUsername: ( username , operation ) => {
// This example will append the '@acme.com' domain if the user has
// not entered it
return username . includes ( '@acme.com' )
? username
: username + '@acme.com' ;
}등록 프로세스의 특정 순간에 호출되는 콜백 기능을 제공 할 수 있습니다.
registration : {
parseSchema : ( schema , onSuccess , onFailure ) => {
// handle parseSchema callback
onSuccess ( schema ) ;
} ,
preSubmit : ( postData , onSuccess , onFailure ) => {
// handle preSubmit callback
onSuccess ( postData ) ;
} ,
postSubmit : ( response , onSuccess , onFailure ) => {
// handle postsubmit callback
onSuccess ( response ) ;
}
} , 콜백은 OKTA API에서 돌아 오는 JSON 스키마를 변경하는 데 사용됩니다.
parseSchema: ( schema , onSuccess ) => {
// This example will add an additional field to the registration form.
schema . push (
{
'name' : 'userProfile.address' ,
'type' : 'text' ,
'placeholder' : 'Enter your street address' ,
'maxLength' : 255 ,
'label-top' : true ,
'label' : 'Street Address' ,
'required' : true ,
}
) ;
onSuccess ( schema ) ;
} 콜백은 주로 OKTA API로 전송 된 요청 매개 변수를 수정하는 데 사용되었습니다.
preSubmit: ( postData , onSuccess ) => {
// This example will append the domain name to the email address if the user forgets to add it during registration.
if ( ! postData . userProfile . email . includes ( '@acme.com' ) ) {
postData . userProfile . email += '@acme.com' ;
}
}
onSuccess ( postData ) ;
} 콜백은 주로 제어를 받고 등록 API에 제출 후 동작을 수정하는 데 사용됩니다.
postSubmit: ( response , onSuccess ) => {
// This example will log the API request body to the browser console before completing registration.
console . log ( response ) ;
onSuccess ( response ) ;
} preSubmit: ( postData , onSuccess , onFailure ) => {
// A generic form level error is shown if no error object is provided
onFailure ( ) ;
} preSubmit: ( postData , onSuccess , onFailure ) => {
const error = {
"errorSummary" : "Custom form level error"
} ;
onFailure ( error ) ;
} preSubmit: ( postData , onSuccess , onFailure ) => {
const error = {
"errorSummary" : "API Error" ,
"errorCauses" : [
{
"errorSummary" : "Custom field level error" ,
"property" : "userProfile.email" ,
}
]
} ;
onFailure ( error ) ;
} 다음 구성 옵션을 설정하여 기본 인증 페이지의 로그인 양식 아래에 사용자 정의 버튼을 추가 할 수 있습니다. 분배기 텍스트를 변경하려면 i18n 구성 옵션을 사용하십시오.
// An example that adds a custom button below the login form on the Sign in form
customButtons: [ {
title : 'Click Me' ,
className : 'btn-customAuth' ,
click : ( ) => {
// clicking on the button navigates to another page
window . location . href = 'https://www.example.com' ;
}
} ]
// An example that adds a custom button with a localized title below the Sign in form
i18n: {
en : {
'customButton.title' : 'Custom Button Title' ,
} ,
} ,
customButtons : [ {
i18nKey : 'customButton.title' ,
className : 'btn-customAuth' ,
click : ( ) => {
// clicking on the button navigates to another page
window . location . href = 'https://www.example.com' ;
}
} ] 버튼 텍스트로 설정된 문자열 ( title 또는 i18nKey 중 하나만 설정)
i18n config 옵션에 지정된 버튼 텍스트에 대한 사용자 정의 번역 키 ( title 또는 i18nKey 중 하나만 설정)
버튼에 추가 할 수있는 선택적 클래스
버튼을 클릭 할 때 호출되는 함수
다음 옵션으로 위젯 기능을 활성화 또는 비활성화하십시오.
features: {
showPasswordToggleOnSignInPage : true ,
hideSignOutLinkInMFA : false ,
rememberMe : true
} 기본값은 true 으로. Okta 로그인 페이지에서 사용자가 입력 한 비밀번호의 가시성을 전환하기 위해 Eye Icon을 표시합니다. 이 플래그가 활성화 된 경우에도 비밀번호는 기본적으로 숨겨져 있습니다. 비밀번호는 30 초 동안 표시된 다음 자동으로 숨겨져 있습니다.
기본값은 true 으로. 사용자 컨텍스트의 모든보기에서 사용자의 식별자를 표시합니다.
기본값으로 false . 인증 자 등록 및 챌린지 흐름을위한 "Back to Sign in"링크를 숨 깁니다.
기본값은 true 으로. 이전에 사용한 사용자 이름으로 식별자 필드를 미리 빌리십시오.
기본값은 true 으로. 표시 될 때 모든 양식의 첫 번째 입력 필드에 자동으로 초점을 맞 춥니 다.
기본값으로 false . 입력 필드에서 자동 완성 속성을 off 로 설정합니다.
위젯은 사용자 정의 목적으로 런타임에 인라인 스크립트/스타일 블록을 보안하지만 해당 블록은 호스팅 된 웹 페이지에서 설정된 CSP 규칙을 위반할 수 있습니다.
cspNonce Content-Security-Policy 헤더에서 주입 된 블록까지 Nonce 값을 설정할 수 있으므로 해당 블록의 스크립트/스타일은 여전히 실행 가능합니다.
참고 : Nonce Directive는 CSP Level2에 추가되었으며 지원되지 않는 브라우저에 사용 된 경우 브라우저 콘솔에 CSP 오류가 여전히 표시 될 수 있습니다.
위젯이 게시 한 이벤트. ON을 사용하여 이러한 이벤트를 구독하십시오.
위젯이 처음으로 사용자 입력을 수락 할 준비가되었을 때 트리거되었습니다. 다음 속성을 포함하는 context 객체를 반환합니다.
signIn . on ( 'ready' , function ( context ) {
// The Widget is ready for user input
} ) ; 위젯은 대부분의 유형의 오류를 처리합니다 (예 : 사용자가 유효하지 않은 암호를 입력하거나 인증하는 문제가있는 경우. 위젯이 처리하고 렌더링 한 후 인증 상태 변경 오류를 캡처하려면 afterError 이벤트를 듣습니다. OAUTH 및 등록 오류를 캡처 할 수도 있습니다. 다른 오류 유형의 경우 renderEl 오류 처리기를 사용하여 처리하는 것이 좋습니다.
다음 속성을 포함하는 context 및 error 개체를 반환합니다.
context :error : signIn . on ( 'afterError' , function ( context , error ) {
console . log ( context . controller ) ;
// reset-password
console . log ( error . name ) ;
// AuthApiError
console . log ( error . message ) ;
// The password does not meet the complexity requirements
// of the current password policy.
console . log ( error . statusCode ) ;
// 403
} ) ; 위젯이 새 페이지로 전환되고 애니메이션이 완료되었을 때 트리거되었습니다. 다음 속성을 포함하는 context 객체를 반환합니다.
// Overriding the "Back to sign in" click action on the Forgot Password page
signIn . on ( 'afterRender' , function ( context ) {
if ( context . controller !== 'forgot-password' ) {
return ;
}
var backLink = document . getElementsByClassName ( 'js-back' ) [ 0 ] ;
backLink . addEventListener ( 'click' , function ( e ) {
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
// Custom link behavior
} ) ;
} ) ; 우리는 원사를 노드 패키지 관리자로 사용합니다. To install Yarn, check out their install documentation.
Clone this repo and navigate to the new okta-signin-widget folder.
git clone https://github.com/okta/okta-signin-widget.git
cd okta-signin-widgetInstall our Node dependencies.
yarn install Create a .widgetrc.js file in the okta-signin-widget directory with your desired configuration:
module . exports = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
logoText : 'Windico' ,
features : {
rememberMe : true ,
} ,
}Build the widget, start a local connect server that hosts it, and launch a browser window with the widget running.
yarn start or start local connect server in watch mode, changes in src/ and assets/sass/ folders will trigger browser auto reload.
yarn start --watchFinally, enable CORS support for our new server by following these instructions. You can now authenticate to Okta using your very own, customizable widget!
| 명령 | 설명 |
|---|---|
yarn start | Build the widget, start the server, and open a browser window with the widget loaded |
yarn start --watch | Build the widget, start the server, and open a browser window with the widget loaded and watch on widget js and sass changes |
yarn build:dev | Build an unminified version of the widget |
yarn build:release | Build a minified, uglified version of the widget ( okta-sign-in.min.js ) and a non-minified development version of the widget ( okta-sign-in.js ). |
yarn test -t jest | Run unit tests using Jest |
yarn test -t jest --suiteHelp | Display optional test suite options |
yarn test -t testcafe <browser> | Run testcafe tests on selected browser (example: yarn test -t testcafe chrome ) |
yarn lint | Run eslint and scss linting tests |
yarn link When developing locally, you may want to test local changes to the widget in another project, which is also local. To use yarn link locally, follow these steps:
In okta-signin-widget directory:
yarn build:release
cd dist
yarn link
yarn build:webpack-dev --output-path ./dist/js --output-filename okta-sign-in.entry.js --watchThis will watch for changes in signin widget source code and automatically rebuild to the dist directory.
In your other local project directory:
yarn link @okta/okta-signin-widget
켈 This tool requires access to Okta's internal registry via the VPN.
A pseudo-localized language is a test language created to identify issues with the internationalization process. Generated from login.properties English resources, the pseudo-loc properties file can be used to test UI's for English leaks and CSS layout issues caused due to localization.
To generate pseudo-loc, run the following command:
# Navigate into the pseudo-loc package
[okta-signin-widget]$ cd packages/@okta/pseudo-loc/
# Install all required dependencies and generate login_ok_PL.properties
# NOTE: This requires VPN access
[pseudo-loc]$ yarn install
[pseudo-loc]$ yarn pseudo-loc Finally, update the .widgetrc.js file to use the ok_PL language, and start the widget playground.
module . exports = {
// ...other widget config
// ...
language : 'ok-PL' ,
...
} Need to know if the Sign-In Widget supports your browser requirements? Please see Platforms, Browser, and OS Support.
We're happy to accept contributions and PRs! Please see the contribution guide to understand how to structure a contribution.
