okta signin widget
7.25.1
OKTAサインインウィジェットは、Webおよびモバイルアプリケーションでユーザーを認証および登録するために使用できる完全に機能し、カスタマイズ可能なログインエクスペリエンスを提供するJavaScriptウィジェットです。
ウィジェットは、OKTAのデフォルトのSigninページで使用され、OKTA SSOセッションを開始し、OKTAセッションCookieをWebブラウザーに設定します。また、OIDCフローを実行して、WebまたはモバイルアプリケーションをOKTAプラットフォームに簡単に統合することもできます。
カスタムOKTAホストのSigninページは、組織のドメイン名とブランディングを使用するように構成できます。
ウィジェットは、シームレスなユーザーエクスペリエンスのために、組織のWebまたはモバイルアプリケーションに直接埋め込むこともできます。
サインインウィジェットの使用方法の詳細については、使用法ガイドを参照してください。
yarn linkを使用したローカル開発ワークフローOKTA Identity Engine（OIE）は、企業が組織のニーズに合わせたより柔軟なアクセスエクスペリエンスを構築できるようにするプラットフォームサービスです。 OKTAサインインウィジェットは、すべての使用シナリオでOIEをサポートしています。
注：特に明記しない限り、このREADMEは、IDエンジンを使用していると想定しています。クラシックエンジンでウィジェットを使用することに関する情報は、このドキュメントにあります
サインインウィジェットは自己完結型であり、実行時に他のフレームワークを必要としません。ただし、ウィジェットが提供していないトークンストレージ、更新、検証など、アプリのニーズが必要になる特定の機能がある場合があります。
これらのSDKは、OKTAサインインウィジェットと完全に互換性があり、ユーティリティを提供して、OKTA認証のエンドツーエンドを独自のアプリケーションに統合するのに役立ちます。
完全なサンプルアプリケーションは、OKTAホストと組み込みシナリオの両方でOKTAサインインウィジェットの使用を示しています。
OKTAサインインウィジェットを使用する方法はいくつかあります。
OKTAは、組織のOKTA URLでホストされている組織にデフォルトのサインインページを提供します。
OKTAは、高度にカスタマイズ可能なOKTAホストのサインインページを備えたカスタムドメインを作成するオプションをサポートしています。
ウィジェットをアプリケーションに直接埋め込むことができます。
OKTAは、組織のURLで利用可能なサインインページを提供します。これにより、ユーザーは承認フロー全体を完了し、SSO（シングルサインオン）セッションを開始し、OKTAセッションCookieをWebブラウザーに設定できます。このページを背景画像とロゴでカスタマイズできます。デフォルトでは、このページにサインインすると、ユーザーをOKTAユーザーダッシュボードにリダイレクトします。
デフォルトのOKTAホストのサインインページは、OIDCアプリケーションでユーザーを認証することもできます。アプリはサインインページにリダイレクトして認証フローを実行できます。その後、OKTAはユーザーをアプリのコールバックにリダイレクトします。 OKTAは、リダイレクトURLを構築し、ホストフローの一部としてログインコールバックを処理するために、多くの言語でSDKを提供します。
OKTAは、OKTAホストフローの使用方法を示すいくつかの完全なサンプルアプリケーションを提供します。
OKTAは、会社のトップレベルドメインのサブドメインであるカスタムドメインで使用できるようにカスタマイズできるホストされたサインインページも提供します。ページはOKTAがホストしていますが、このページのテンプレートを多くの強力な方法でカスタマイズできます。
アプリに関する限り、カスタマイズされたウィジェットはデフォルトのOKTAホストウィジェットと同じように動作し、同じホストフローを使用できます。
注：すべての必要な値と有効な機能を含む構成オブジェクトがページにあります。このオブジェクトを変更する必要はないでしょう。この構成を変更する必要があることがわかった場合は、必要な値を上書きまたは削除しないように注意してください。
最高レベルのカスタマイズを可能にする完全にシームレスなエクスペリエンスのために、サインインウィジェットをアプリケーションに直接埋め込むことができます。これにより、ウィジェットの構成とAPIを完全に使用できます。
組み込みウィジェットを使用して、クライアント側のWebおよびネイティブアプリは、多くの場合、ホストフローの往復リダイレクトを回避できます。 Shosigninを参照してください。
サーバー側のWebアプリケーションはOAUTHトークンサーバーサイドを受信するため、リダイレクトコールバックを処理する必要があります。これらのアプリは、showigninandredirectを使用する必要があります。
OKTA CDNからウィジェットを引くスクリプトタグを含めるか、NPMモジュールをアプリにバンドリングすることにより、アプリにサインインウィジェットを埋め込むことができます。
CDNから直接資産をロードすることは、ウィジェットを簡単に開始する方法が必要な場合に適切な選択です。外部依存関係や他の理由でNPMまたはYARNを活用する既存のビルドプロセスはまだありません。サインインウィジェットをアプリケーションにバンドルしたい。
標準のバンドル（ okta-sign-in.min.js ）には、クラシックエンジンとIDエンジンの両方のサポートが含まれています。また、IE11などの古いブラウザとの互換性を確保するためのポリフィルも含まれています。アプリケーションがIE11をサポートする必要がない場合は、初めてのユーザーの読み込み時間を短縮するために、代わりにno-polyfillバンドルを含めることができます。スタンドアロンのポリpolyfillバンドルは、必要な場合にのみ、古いブラウザのサポートを追加するためにページに条件付きで含めることができます。
組織がIDエンジンにアップグレードした場合、より小さなoieバンドルを使用できます。
| バンドル | ファイル名 | 約サイズ | クラシックエンジン | アイデンティティエンジン | ポリフィル | メモ |
|---|---|---|---|---|---|---|
| 標準 | okta-sign-in.min.js | 1.7 MB | ✅ | ✅ | ✅ | すべてを含む標準バンドル |
| ポリフィルなし | okta-sign-in.no-polyfill.min.js | 1.7 MB | ✅ | ✅ | ポリフィルなしの標準バンドル | |
| oie | okta-signin.oie.min.js | 1.3 MB | ✅ | OIE対応の組織用の小さなバンドル | ||
| クラシック | okta-sign-in.classic.min.js | 1.1 MB | ✅ | クラシックエンジンのみの小さなバンドル | ||
| ポリフィル | 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ファイルの両方で同じである必要があり、リリースページのバージョンを一致させる必要があります。最新のウィジェットバージョンを使用することをお勧めします。
ポリフィルを含むバンドルの1つを使用する場合、スタンドアロンのポリフィルバンドルを条件付きでロードすることができます。ポリフィルは、ウィジェットバンドルの前にロードする必要があります。
<!-- 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 */ ) ;ソースマップは、外部。マップファイルとして提供されます。 Webpackを使用している場合、これらはソースマップローダープラグインを使用してロードできます。
スタイルローダーまたは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をサポートする必要がある場合は、バンドラーにES6ポリフィルを含めることを確認してください。ウィジェットは、エクスポートを通じて必要なすべてのポリフィルを提供します。
const polyfill = require('@okta/okta-signin-widget/polyfill');
または
import polyfill from '@okta/okta-signin-widget/polyfill';
これらの簡単な例は、サインインウィジェットの使用を開始するのに役立つはずです。完全なエンドツーエンドソリューションについては、サンプルアプリケーションをご覧ください。
シングルページアプリケーション（SPA）は、ブラウザで完全に実行されます。 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
} ) ; Webアプリケーションは、主にサーバーで実行されます。クライアント側を実行するウィジェットは、ウィジェットを構成およびレンダリングするスクリプトブロックを含む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オプションにより、ウィジェットをレジスタ、ロック解除、またはリセットなどの特定のビューにブートストラップすることができます。サポートされているフロー：
注：特定のフローは、管理者が必要な操作を許可するように組織を構成した場合にのみ機能します（例：管理コンソールのプロファイル登録（ユーザーサインアップ）が有効になっていない場合、ウィジェットを
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パスにロードされます。ほとんどのコールバックは1回しか処理できず、2回処理しようとする場合はエラーが発生します。通常、アプリは、ページリロードのエラーを回避するためにコールバックロジックが処理された後、よく知られている、または以前に保存されたURLパスにリダイレクトされます。
注：ほとんどのアプリは、1つ以上のリダイレクトコールバックを処理するために準備する必要があります。アプリのサインオンポリシーの構成方法によっては、一部のSPAアプリケーションがリダイレクトなしでトークンを受信できる場合があります。ただし、ポリシーにソーシャル / IDPプロバイダーにサインインするか、電子メール検証を使用して認証またはアカウントの回復を許可する場合は、ロジックを追加する必要があります。
OAuthコールバックは、インタラクションコードフローの最後のステップです。認証が成功すると、ブラウザは情報を使用してOKTAにリダイレクトされ、新しいセッションを開始します。 OKTAのサーバーは情報を処理し、アプリケーションのredirectUriにリダイレクトします。成功した場合、 interaction_codeクエリパラメーターとしてURLに相互作用コードが存在します。失敗した場合、URLにerrorとerror_descriptionクエリパラメーターがあります。成功したかどうかにかかわらず、元々アプリケーションによってウィジェットに渡されたstateパラメーターもリダイレクトで返されます。これは、サーバー側のWebアプリケーションで使用して、コールバックを正しいユーザーセッションと一致させることができます。
すべてのWebアプリケーションは、OAUTHコールバックを処理します。 SPAアプリケーションの場合、多くの場合、サインオンポリシーはリダイレクトを必要とせず、これらのアプリケーションはShosigninから直接トークンを受信できます。ただし、サインオンポリシーが何らかの理由でリダイレクトを必要とする場合（ソーシャル / IDPプロバイダーとの統合など）、SPAアプリはOAUTHコールバックを処理する必要があります。このため、すべてのSPAアプリをOAUTHコールバックを処理するために準備することをお勧めします。
注：ウィジェットは、OAuthコールバックを直接処理しません。サーバー側のWebアプリケーションは、SDKの1つを使用して、コールバックの処理を支援できます。 SPAアプリケーションは、Signinウィジェットに
authClientプロパティとして含まれているOKTA-Auth-JS SDKを使用できます。
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コールバックになります。さらに入力が必要な場合、コールバックには、value interaction_requiredのerrorパラメーターが含まれます。この場合、サインインウィジェットは、フローが継続できるように再びロードする必要があります。
サーバー側のWebアプリケーションとSPAアプリケーションの両方がerrorクエリパラメーターを探す必要があり、値がinteraction_requiredの場合、最初のレンダリングと同じ構成を使用してウィジェットを再度レンダリングする必要があります。 stateパラメーターは、リクエストをユーザーのアプリケーションセッションと一致させるために使用できるコールバックにも渡されます。ウィジェットは自動的にトランザクションを進めます。
サインオンポリシーが電子メールマジックリンク/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プロバイダー（IDP）へのリダイレクトが必要な場合、ブラウザはリダイレクトされ、約束は解決しません。応答とエラーは、Renderelの応答と同じです。
注：これは、スパアプリケーション用のウィジェットをレンダリングする推奨方法です。サーバー側のWebアプリは、代わりにshowigninandRedirectメソッドを使用する必要があります。
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にリダイレクトします。成功した場合、 interaction_codeクエリパラメーターとしてURLにインタラクションコードが存在します。失敗した場合、URLにerrorとerror_descriptionクエリパラメーターがあります。成功したかどうかにかかわらず、ウィジェットに渡されたstateパラメーターもリダイレクトで返されます。これは、サーバー側のWebアプリケーションで、コールバックを正しいユーザーセッションと一致させるために使用できます。
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 、Widgetの外側で作成および構成し、 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 IDエンジンを使用する場合にのみサポートされます
ビューがレンダリングされた後に実行される非同期フック関数を追加します。
注：これらの構成値の詳細については、構成を参照してください
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-HOSTED SIGNINページを使用している場合、すべての構成は管理UIのCustomizationセクションを介して処理されます。
カスタムOkta-Hosted Signinページを使用している場合、必要なすべての値を含む構成オブジェクトがページに含まれています。おそらくこのオブジェクトを変更する必要はありませんが、このオブジェクトを出発点として使用して、追加のカスタマイズを追加することができます。
埋め込まれたウィジェットの場合、 issuer 、 clientId 、およびredirectUri設定する必要があります。デフォルトでは、ウィジェットはインタラクションコードフローを使用してIDエンジンで実行されます。ウィジェットは、USECLASSICINGINEオプションをtrueに設定することにより、クラシックエンジンに対して実行することもできます。 （クラシックエンジンでのランニングの詳細については、このドキュメントを参照してください。
すべての組み込みウィジェットは、 issuer 、 clientId 、およびredirectUriのこれらの基本オプションを設定する必要があります。
注：Okta-Hostedウィジェットは、これらの値を設定しないでください。
OAUTHトークンをアプリケーションに発行する承認サーバーのURL。
注：
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管理UIにあります。アプリケーションのclientIDを見つけるためのサポートについては、開発者ガイドをご覧ください
アプリケーションのクライアントID。
注：この構成値は、アプリケーションの「一般的な設定」の下のOKTA管理UIにあります
OAuthコールバックに使用するURI。
デフォルトはfalseになります。デフォルトでは、ウィジェットはIDエンジンのインタラクションコードフローを使用します。 useClassicEngineオプションをtrueに設定すると、ウィジェットが代わりにクラシックエンジンに対して実行されます。 （クラシックエンジンで実行されているウィジェットの構成の詳細については、このドキュメントを参照してください）。
注：このオプションは、クラシックエンジンのサポートとともに、将来のウィジェットバージョンで削除されます。すべての顧客は、クラシックエンジンからIDエンジンに移行することをお勧めします。アイデンティティエンジンへの移行の詳細については、OIEへの移行をご覧ください。
PKCEコードチャレンジ。ウィジェットはトランザクション全体を管理するため、SPAアプリケーションはこのオプションを必要としません。 Webアプリケーションは、独自のコードチャレンジとコードシークレットを生成する必要があります。コードチャレンジはウィジェットに渡され、コードシークレットはサーバー側に保持され、リダイレクトログインコールバックでトークンを取得します。
注：PKCEを使用したインタラクションコードフローの完全な動作例については、サンプルアプリケーションをご覧ください
リダイレクトログインコールバックまたは電子メールの検証中にクエリパラメーターとして返されるアプリケーションが提供する値。値が設定されていない場合、ランダム値が作成されます。電子メールを処理するとき、コールバックを検証する場合、クエリパラメーターからのstateの値を構成オプションとして（OTPとともに）ウィジェットに渡す必要があります。これにより、ウィジェットが現在のトランザクションを読み込んで再開できるようになります。
電子メールを検証する場合、クエリパラメーターからのotpの値を構成オプションとして（状態とともに）ウィジェットに渡す必要があります。これにより、ウィジェットが現在のトランザクションを読み込んで再開できるようになります。
デフォルトは['openid', 'email']になります。返されたid_tokenまたはaccess_tokenで利用可能にする情報を指定します。 OIDCの場合、Scopesの1つとしてopenid含める必要があります。利用可能なスコープのリストについては、スコープとクレームを参照してください。
OKTAログインフォームに比べて外部IDプロバイダーの注文を表示します。デフォルトは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 }パスワードをリセット」）。 brandNameが提供されていない場合、代わりに一般的なメッセージがレンダリングされます（たとえば、「パスワードのリセット」）。言語とテキスト設定で表示されるテキストをさらにカスタマイズできます。
brandName: 'Spaghetti Inc.' これらのオプションを使用すると、サインインウィジェットの外観をカスタマイズできます。
さらに多くのカスタマイズが必要な場合は、SASSソースファイルを変更してウィジェットを構築できます。
ブランドの色をプライマリCTAボタンの背景色として設定します。 #008000のように、色は16進形式でなければなりません。
colors: {
brand : '#008000'
}cs -Czechdaデンマーク語deドイツ語el - ギリシャ語en英語esスペイン語fiフィンランド語frフランス語hu - ハンガリーidインドネシア語it - イタリア語ja日本語ko韓国語msマレーシアnbノルウェー語nl-NLオランダ語plポリッシュpt-BRポルトガル語（ブラジル）roルーマニア語ruロシア語svスウェーデン語thタイtrトルコ語uk - ウクライナ人zh-CN中国語（PRC）zh-TW中国語（台湾）追加の言語のサポートは、Assets.Languagesオプションで追加できます。
ウィジェットの言語を設定します。言語が指定されていない場合、ウィジェットは、サポートされている場合、または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になります。これは、ウィジェットでそれに応じて電話番号のコードを呼び出す国を設定します。
ウィジェットのテキストをオーバーライドします。プロパティの完全なリストは、login.properties and 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のエイリアスとして受け入れられます
次の設定オプションを設定することにより、プライマリAuthページに登録リンクを追加できます。
登録リンクがクリックされたときに呼び出される関数。
// 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' ;
}
} 次の構成オプションを設定して、プライマリAUTHページのヘルプリンク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 ) ;
}次の構成オプションを設定することにより、プライマリAuthページのログインフォームの下にカスタムボタンを追加できます。仕切りテキストを変更する場合は、 i18n configオプションを使用します。
// 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の1つまたはi18nKeyのみを設定）
i18n configオプションで指定されたボタンテキストのカスタム変換キー（ titleの1つまたはi18nKeyのみを設定）
ボタンに追加できるオプションのクラス
ボタンがクリックされたときに呼び出される関数
次のオプションを使用して、ウィジェット機能を有効または無効にします。
features: {
showPasswordToggleOnSignInPage : true ,
hideSignOutLinkInMFA : false ,
rememberMe : true
} デフォルトはtrueです。アイコンを表示して、ユーザーの可視性を切り替えて、OKTAサインインページにパスワードを入力します。このフラグが有効になっている場合でも、パスワードはデフォルトで非表示になります。パスワードは30秒間表示され、自動的に非表示になります。
デフォルトはtrueです。ユーザーのコンテキストを使用して、任意のビューでユーザーの識別子を表示します。
デフォルトはfalseになります。 Authenticatorの登録とチャレンジフローのための「サインインする」リンクを隠します。
デフォルトはtrueです。識別子フィールドを以前に使用したユーザー名で事前に充填します。
デフォルトはtrueです。表示されたときに、任意のフォームの最初の入力フィールドに自動的に焦点を合わせます。
デフォルトはfalseになります。入力フィールドのオートコンプリート属性をoffに設定します。
ウィジェットは、カスタマイズの目的で実行時に安全なインラインスクリプト/スタイルブロックを挿入しますが、これらのブロックはホストされたWebページに設定されたCSPルールに違反する場合があります。
cspNonce Content-Security-Policyヘッダーから注入されたブロックにnonce値を設定できます。そのため、これらのブロックからのスクリプト/スタイルは実行可能です。
注： nonceディレクティブはCSPレベル2に追加されましたが、サポートされていないブラウザーで使用されている場合、ブラウザコンソールに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
} ) ;
} ) ; We use Yarn as our node package manager. 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.
