okta signin widget
7.25.1
Виджет okta in-in-это виджет JavaScript, который предоставляет полностью изготовленный и настраиваемый опыт входа в систему, который можно использовать для аутентификации и регистрации пользователей в веб-приложениях и мобильных приложениях.
Виджет используется на странице Signin по умолчанию Okta, чтобы запустить сеанс Okta SSO и установить cookie okta session в веб -браузере. Он также может выполнить поток OIDC, чтобы легко интегрировать ваши веб -или мобильные приложения в платформу Okta.
Пользовательская страница Signin с Okta может быть настроена на использование доменного имени вашей организации и брендинга.
Виджет также может быть встроен непосредственно в веб -приложения вашей организации или мобильные приложения для бесшовного пользовательского опыта.
См. Руководство по использованию для получения дополнительной информации о том, как начать работу, используя виджет входа.
yarn linkДвигатель Okta Identity Engine (OIE) - это услуга платформы, которая позволяет предприятиям создавать более гибкий опыт доступа, адаптированный к их организационным потребностям. Виджет «Зарегистрирован в Окте» поддерживает OIE во всех сценариях использования.
ПРИМЕЧАНИЕ . Если не указано иное, этот Readme предполагает, что вы используете идентификационный двигатель. Информацию об использовании виджет с классическим двигателем можно найти в этом документе
Виджет входа в систему является автономным и не требует других структур во время выполнения. Тем не менее, могут быть определенные функции, такие как потребности в вашем приложении, такие как хранение токенов, обновление или проверка, которые виджет не предоставляет.
Эти SDK полностью совместимы с виджетом «Окта» и предоставляют утилиты, чтобы помочь интегрировать сквозную аутентификацию Okta в собственном приложении.
Полные образцы приложений демонстрируют использование виджета «Окта» в сценариях Окта, так и в сценариях.
Есть несколько способов использовать виджет «Окта»:
Okta предоставляет страницу входа по умолчанию для вашей организации, размещенной в URL вашей организации Okta.
Окта поддерживает опцию создания пользовательского домена с очень настраиваемой страницей входа в Окта.
Вы можете встроить виджет непосредственно в ваше приложение.
Okta предоставляет страницу входа, доступную на URL вашей организации, которая позволяет пользователю заполнить весь поток авторизации, запустить сеанс SSO (единый вход) и устанавливать cookie Cookie Okta в веб-браузере. Вы можете настроить эту страницу с помощью фонового изображения и логотипа. По умолчанию входите на эту страницу перенаправляет пользователя на пользовательскую панель Okta.
По умолчанию страница входа в Okta, также может аутентифицировать пользователя в приложении OIDC. Ваше приложение может перенаправить на страницу входа для выполнения потока аутентификации, после чего Okta перенаправляет пользователя обратно на обратный вызов приложения. Okta предоставляет SDK во многих языках, чтобы помочь построить URL -адрес перенаправления и обработать обратный вызов входа в систему как часть хостинного потока.
Okta предоставляет несколько полных образцов приложений, которые демонстрируют, как использовать поток, размещенный Okta.
Okta также предоставляет страницу входа в систему, которая может быть настроена так, чтобы она была доступна под пользовательским доменом, которая является поддоменом домена верхнего уровня вашей компании. Хотя страница размещена Октой, вы можете настроить шаблон этой страницы многими мощными способами.
Что касается вашего приложения, индивидуальный виджет ведет себя так же, как и виджет по умолчанию по умолчанию, и вы можете использовать один и тот же размещенный поток.
Примечание. На странице будет объект конфигурации, который содержит все необходимые значения и включенные функции. Скорее всего, вам не нужно будет изменять этот объект. Если вы обнаружите, что вам нужно изменить эту конфигурацию, следите за тем, чтобы не перезаписать и не удалять какие -либо необходимые значения.
Для совершенно бесшовного опыта, который обеспечивает самый высокий уровень настройки, вы можете встроить виджет входа непосредственно в ваше приложение. Это позволяет полностью использовать конфигурацию виджета и API.
Используя встроенный виджет, клиентская веб-сайт и нативные приложения могут во многих случаях избежать перенаправления разворота размещенного потока. Смотрите ShoneGinin.
Веб-приложения на стороне сервера получат сервер OAuth Tokens, поэтому они должны обрабатывать обратный вызов . Эти приложения должны использовать ShowingInandredirect.
Вы можете внедрить виджет входа в приложение, включив тег сценария, который вытягивает виджет из CDN Opta или объединяя модуль NPM в ваше приложение.
Загрузка наших активов непосредственно с CDN - хороший выбор, если вы хотите простой способ начать работу с виджетом, у вас уже нет существующего процесса сборки, который использует NPM или пряжу для внешних зависимостей или любой другой причины, где вы надеваете ' Не хочу объединить виджет входа в ваше приложение.
Стандартный пакет ( okta-sign-in.min.js ) включает в себя поддержку как классического двигателя, так и для идентификационного двигателя. Он также включает в себя многофил, чтобы обеспечить совместимость со старыми браузерами, такими как IE11. Если вашему приложению не нужно поддерживать IE11, вы можете вместо этого включить пакет no-polyfill чтобы уменьшить время загрузки для начинающих пользователей. Автономный polyfill пакет может быть условно включен на страницы, чтобы добавить поддержку для более старых браузеров только при необходимости.
Если ваша организация обновлена до идентификационного двигателя, может использоваться меньший пакет oie .
| Пучок | Имя файла | Примерно Размер | Классический двигатель | Идентификационный двигатель | Полифилл | Примечания |
|---|---|---|---|---|---|---|
| стандартный | Окта-Сигн. Мин.js | 1,7 МБ | ✅ | ✅ | ✅ | Стандартный пакет, который включает в себя все |
| безполифил | Okta-sign-in.no-polyfill.min.js | 1,7 МБ | ✅ | ✅ | Стандартный пакет без многофиль | |
| ой | Okta-sign-in.oie.min.js | 1,3 МБ | ✅ | Меньший пакет для OIE включенных орг | ||
| Классик | Okta-sign-in.classic.min.js | 1,1 МБ | ✅ | Меньший пакет только для классического двигателя | ||
| полифилл | Okta-sign-in.polyfill.min.js | 108 КБ | ✅ | Автономный полифилл. Можно использовать вместе с пучком виджетов, который не включает полифилл. |
Чтобы встроить виджет входа через CDN, включите ссылки на файлы JS и CSS в свой HTML:
<!-- 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 " />Примечание. URL -адреса CDN содержат номер версии. Этот номер должен быть одинаковым как для 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 - хороший выбор, если:
Для установки @ktata/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) требуют конфигурации Simliar, также в вашем tsconfig.json
{
...
"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, их можно загрузить, используя плагин с нагрузкой-исходной картой.
Если вы хотите включить стили виджетов в пакет, используя стиль-загрузчик или mini-css-extract-plugin, используйте следующий импорт:
import '@okta/okta-signin-widget/css/okta-sign-in.min.css' ; ПРИМЕЧАНИЕ. Если вы используете браузерофинги для объединения вашего приложения, вам нужно использовать опцию --noparse :
browserify main.js
--noparse= $PWD /node_modules/@okta/okta-signin-widget/dist/js-okta-sign-in.entry.js
--outfile=bundle.jsУбедитесь, что вы включите полифиллы ES6 в свой бордлера, если вам нужно поддержать IE11. Виджет обеспечивает все необходимые полифиллы через экспорт:
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
} ) ; Веб -приложение работает в основном на сервере. Виджет, который выполняет клиентскую сторону, будет встроен в 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-страницы для нескольких общих случаев использования.
По умолчанию виджет «Окта» вступит в силу либо с текущим потоком, либо запустит новый поток аутентификации. Параметр 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'
} ) ; Вызов перенаправления происходит, когда ваше приложение перезагружается в браузере как часть потока. Во время обратного вызова перенаправления приложение загружается в определенном пути URL, который вы определили в конфигурации приложения Othta. Большинство обратных вызовов можно обрабатывать только один раз и произвести ошибку, если есть попытка обработать ее дважды. Как правило, приложение перенаправляет себя на хорошо известный или ранее сохраненный путь URL -адреса после того, как логика обратного вызова была обработана, чтобы избежать ошибок при перезагрузке страницы.
Примечание. Большинство приложений должны быть готовы обрабатывать один или несколько обратных вызовов. В зависимости от того, как настроена политика входа приложения, некоторые приложения SPA могут получать токены без какого-либо перенаправления. Тем не менее, логика должна быть добавлена, если политика включает в себя подпись с поставщиком социального / IDP или позволяет аутентификацию или восстановление учетной записи, используя проверку электронной почты.
ООУТ -обратный вызов является последним этапом потока кода взаимодействия. При успешной аутентификации браузер перенаправляется на Окту с информацией, чтобы начать новую сессию. Серверы Окты обрабатывают информацию, а затем перенаправляют обратно в redirectUri вашего приложения. В случае успеха код взаимодействия присутствует в URL в качестве параметра запроса interaction_code . Если в случае неудачи, в URL есть параметры запроса error и error_description . Будь то успешным или нет, параметр state , который изначально был передан в виджет вашим заявлением, также будет возвращен при перенаправлении. Это может использоваться веб-приложениями на стороне сервера, чтобы соответствовать обратному обращению с правильным сеансом пользователя.
Все веб -приложения будут обрабатывать обратный вызов OAuth . Для SPA-приложений во многих случаях политика входа не потребует перенаправления, и эти приложения могут получать токены непосредственно от ShowGinin. Однако, если политика входа требует перенаправления по любой причине (например, интеграция с социальным / IDP-поставщиком) SPA приложения для озаконности должны будут обрабатывать обратный вызов OAuth. По этой причине мы рекомендуем, чтобы все спа -приложения были готовы к обратном вызове OAuth .
ПРИМЕЧАНИЕ. Виджет не обрабатывает обратный вызов OAuth напрямую. Веб-приложения на стороне сервера могут использовать один из наших SDK, чтобы помочь в обращении с обратным вызовом. Приложения SPA могут использовать SDK Outh-JS, которая включена в виджет «Вход» в качестве свойства
authClient.
Приложение SPA может обрабатывать клиентскую сторону OAuth Callback, используя встроенный authClient :
// https://myapp.mycompany.com/login/callback?interaction_code=ABC&state=XYZ
if ( signIn . authClient . isLoginRedirect ( ) ) {
await signIn . authClient . handleLoginRedirect ( ) ;
} После входа в систему с сторонним IDP пользователь перенаправляется обратно на redirectUri приложения. Если у пользователя дальнейшего ввода не требуется, то это будет обратный вызов OAuth, содержащий параметр interaction_code . Если требуется дальнейший ввод, то обратный вызов будет содержать параметр error с value interaction_required . В этом случае виджет входа должен быть снова загружен, чтобы поток мог продолжаться.
Как серверные веб-приложения, так и SPA приложения должны искать параметр запроса error , и, если значение interaction_required , они должны снова отображать виджет, используя ту же конфигурацию, что и первое рендеринг. Параметр state также будет передаваться в обратном вызове, который можно использовать для соответствия запросу с сеансом приложения пользователя. Виджет автоматически будет продолжаться с транзакцией.
Ваше приложение необходимо будет реализовать обратный вызов электронной почты, если в вашей политике входа используется Magic Link Email Magic/OTP. После того, как пользователь нажимает на ссылку в электронном письме, он перенаправляется обратно на email verify callback URI приложения. Параметры запроса, передаваемые в приложение, включают state и otp . Как и при обратном вызове Social/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. При успехе обещание разрешается. При ошибке обещание отвергает. Если политика входа требует перенаправления на Окту или другого поставщика личности (IDP), браузер будет перенаправить, и обещание не будет решено. Ответы и ошибки такие же, как и для renderel.
Примечание . Это рекомендуемый способ отображать виджет для спа -приложений. Веб-приложения на стороне сервера должны использовать метод ShowGinInandRideRect вместо этого.
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. При успешной аутентификации браузер будет перенаправлен на Окту с информацией, чтобы начать новую сессию. Серверы Окты обрабатывают информацию, а затем перенаправят обратно в redirectUri вашего приложения. В случае успеха в URL -URL будет существовать код взаимодействия в качестве параметра запроса interaction_code . В случае неудачи, в URL -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/outh-js] [] [], используемый виджетом входа. Все методы задокументированы в ссылке API.
authClient настроен с использованием значений, передаваемых в виджет, такие как clientId , issuer , redirectUri , state и scopes . Параметры, которые не поддерживаются непосредственно виджетом, могут быть переданы Authjs с использованием объекта authParams .
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 не установлен, экземпляр будет создан с использованием параметров, передаваемых Widget и 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
Добавляет асинхронную функцию крюка, которая будет выполняться после отображения представления.
Примечание. См. Конфигурацию для получения дополнительной информации об этих значениях конфигурации
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.
} ) ; Если вы используете страницу Signin с Okta по умолчанию, вся конфигурация обрабатывается через раздел Customization интерфейса администратора.
Если вы используете пользовательскую страницу Signin с Okta, введенную на страницу, включен на страницу объект конфигурации, которая содержит все необходимые значения. Вероятно, вам не нужно будет изменять этот объект, но вы можете использовать этот объект в качестве отправной точки и добавить дополнительные настройки.
Для встроенных виджетов вы должны установить issuer , clientId и redirectUri . По умолчанию виджет будет работать на идентификационном двигателе, используя поток кода взаимодействия. Виджет также может работать против классического двигателя, установив опцию useclassicengine на true . (Смотрите этот документ для более подробной информации о запуске в классическом двигателе.
Все встроенные виджеты должны устанавливать эти основные параметры: issuer , clientId и redirectUri .
Примечание . Виджеты, проведенные в Окте, не должны устанавливать эти значения.
URL -адрес сервера авторизации, который выпустит токены OAuth в вашем приложении.
ПРИМЕЧАНИЕ :
https://{yourOktaDomain}может быть любой организацией Окта. Посмотрите на наше руководство по разработке, чтобы получить помощь в поиске домена Окта.
Базовая конфигурация с использованием пользовательского сервера авторизации «по умолчанию»:
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}}' ,
} Некоторые приложения, такие как те, которые требуют доступа к API пользователя Okta, захотят использовать сервер авторизации организации Organization в качестве эмитента. В этом случае issuer должен соответствовать вашему домену Окта:
var config = {
issuer : 'https://{yourOktaDomain}' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}ПРИМЕЧАНИЕ . Сервер авторизации организации Organize Organization предназначен только для доступа к API пользователя Okta и не поддерживает все функции стандартного пользовательского сервера авторизации, таких как пользовательские области на токенах доступа. Обычно рекомендуется использовать пользовательский сервер авторизации для обеспечения доступа к ресурсам вашей организации.
Примечание . Это значение конфигурации можно найти в пользовательском интерфейсе admin Admin. См. Наше руководство по разработчике, чтобы получить помощь в поиске клиента вашего приложения.
Идентификатор клиента приложения.
Примечание . Это значение конфигурации можно найти в пользовательском интерфейсе admin Admin в соответствии с «Общими настройками» приложения
URI для использования для обратного вызова OAuth.
По умолчанию false . По умолчанию виджет будет использовать поток кода взаимодействия на идентификационном двигателе. Установка опции useClassicEngine на true приведет к тому, что виджет будет работать против классического двигателя. (См. Этот документ для более подробной информации о настройке виджета, работающего в классическом двигателе).
Примечание . Этот вариант, наряду с поддержкой классического двигателя, будет удалена в будущей версии виджета. Всем клиентам рекомендуется мигрировать с классического двигателя в двигатель Identity. Посетите миграцию в OIE для получения более подробной информации о миграции в двигатель Identity.
Задача кода PKCE. Приложения SPA не понадобятся этот вариант, поскольку виджет будет управлять всей транзакцией. Веб -приложения должны генерировать свою собственную проблему с кодом и секрет кода. Задача кода передается в виджет, и секрет кода хранится на стороне сервера для получения токенов при обратном вызове входа в перенаправление.
ПРИМЕЧАНИЕ . Ознакомьтесь с нашими образцами приложений для полных рабочих примеров потока кода взаимодействия с помощью PKCE
Предоставленное приложением значение, которое будет возвращено в качестве параметра запроса во время вызовов в логике перенаправления или проверки электронной почты. Если значение не установлено, то будет создано случайное значение. При обработке электронного письма проверяет обратный вызов, значение state из параметра запроса должно передаваться в виджет в качестве параметра конфигурации (вместе с OTP). Это гарантирует, что виджет может загружать и возобновить текущую транзакцию.
При обработке электронного письма проверяют обратный вызов, значение otp из параметра запроса должно быть передано в виджет в качестве опции конфигурации (вместе с состоянием). Это гарантирует, что виджет может загружать и возобновить текущую транзакцию.
По умолчанию ['openid', 'email'] . Укажите, какую информацию предоставить в возвращенном id_token или access_token . Для OIDC вы должны включить openid в качестве одной из областей. Список доступных областей, см. Прицелы и претензии.
Порядок отображения для внешних поставщиков идентификаций по сравнению с формой входа в Окта. По умолчанию SECONDARY .
PRIMARY - отображать внешние кнопки IDP над формой входа в OktaSECONDARY - отображать внешние кнопки IDP под формой входа в OktaЛокальный путь или 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 .
colors: {
brand : '#008000'
}cs - чешскийda - датский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 - Китайский (КНР)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 и 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, из которого виджет вытаскивает свои языковые файлы. Виджет по умолчанию упакован только с текстом английского языка и загружает другие языки по требованию от 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 можно получить доступ из папки
dist/labels/json, которая опубликована в модуле NPM.
Укажите список поддерживаемых языков, которые размещены и доступны в соответствии с Path {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'ПРИМЕЧАНИЕ. Для совместимости с предыдущими версиями виджетов
signOutLinkпринимается как псевдоним дляbackToSignInLink
Вы можете добавить ссылку на регистрацию на основную страницу 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' ;
}
} Установите следующие параметры конфигурации, чтобы переопределить 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 . SelfServiceUnlock должен быть установлен на true , а функция разблокировки самообслуживания должна быть включена в настройках вашего администратора.
Массив пользовательских объектов ссылки {text, href, target} , которые будут добавлены после ссылки «справка». target ссылки является необязательной.
Установите следующие параметры конфигурации для настройки URI сценария hCaptcha :
// 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'
} ,Асинхронные обратные вызовы могут быть вызваны до или после того, как определенное представление. Крюки могут использоваться для добавления пользовательской логики, такой как инструментария, ведение журнала или дополнительный пользовательский ввод. Нормальное выполнение заблокировано, когда функция крюка выполняется и возобновится после того, как обещание возвращается из функции крюка. Крюки могут быть добавлены через конфигурацию, как показано ниже, или во время выполнения, используя методы до или после. Полный список просмотров можно найти в исправленииконстантах.
// 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
} ) ;Преобразует имя пользователя перед отправкой запросов с именем пользователя в Окту. Это полезно, когда у вас есть внутреннее отображение между тем, что входит пользователь и их имя пользователя Окта.
// 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 ) ;
}
} , Обратный вызов использовался для изменения схемы JSON, которая возвращается из API Окта.
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 ) ;
} Обратный вызов используется в основном для изменения параметров запроса, отправленных в API Opta.
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 (установите только один из title или i18nKey )
Дополнительный класс, который можно добавить в кнопку
Функция, которая вызывается, когда кнопка нажимается
Включить или отключить функциональность виджетов со следующими параметрами.
features: {
showPasswordToggleOnSignInPage : true ,
hideSignOutLinkInMFA : false ,
rememberMe : true
} По умолчанию к true . Показывает значок глаз, чтобы переключить видимость введенного пароля пользователя на странице входа в Okta. Пароль скрыт по умолчанию, даже когда этот флаг включен. Пароли видны в течение 30 секунд, а затем автоматически скрыты.
По умолчанию к true . Показывает идентификатор пользователя в любом представлении с пользовательским контекстом.
По умолчанию false . Укрывает ссылку «Back to Wrin in» для Authenticator Relllmant and Challenge.
По умолчанию к true . Предварительно считывает поле идентификатора с ранее использованным именем пользователя.
По умолчанию к true . Автоматически фокусирует первое поле ввода любой формы при отображении.
По умолчанию false . Устанавливает атрибут автозаполнения на полях ввода на off .
Виджет вводит безопасные встроенные сценарии/блоки стиля в среде выполнения для целей настройки, но эти блоки могут нарушать правила CSP, установленные на хостированной веб -странице.
cspNonce позволяет установить значение не SCE из заголовка Content-Security-Policy в инъекционные блоки, поэтому сценарий/стиль из этих блоков все еще может быть исполняемым.
ПРИМЕЧАНИЕ. Несоответствующая директива была добавлена в CSP Level2, вы все равно можете увидеть ошибки CSP в консоли браузера, если она используется в неподдерживаемых браузерах.
События, опубликованные виджетом. Подпишитесь на эти события, используя на.
Запускается, когда виджет готов принять пользовательский ввод в первый раз. Возвращает 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
} ) ;
} ) ; Мы используем пряжу в качестве менеджера пакетов узлов. Чтобы установить пряжу, ознакомьтесь с их установленной документацией.
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.
