okta signin widget
7.25.1
El widget de inicio de sesión de OKTA es un widget de JavaScript que proporciona una experiencia de inicio de sesión totalmente destacada y personalizable que puede usarse para autenticar y registrar usuarios en aplicaciones web y móviles.
El widget se usa en la página de firma predeterminada de OKTA para iniciar una sesión OKTA SSO y establecer la cookie de sesión OKTA en el navegador web. También puede realizar un flujo OIDC para integrar fácilmente sus aplicaciones web o móviles en la plataforma OKTA.
Se puede configurar una página de firma alojada de OKTA personalizada para usar el nombre de dominio y la marca de su organización.
El widget también se puede integrar directamente en las aplicaciones web o móviles de su organización para una experiencia de usuario perfecta.
Consulte la Guía de uso para obtener más información sobre cómo comenzar a usar el widget de inicio de sesión.
yarn linkOkta Identity Engine (OIE) es un servicio de plataforma que permite a las empresas construir experiencias de acceso más flexibles que se adapten a sus necesidades organizativas. El widget de inicio de sesión de OKTA admite OIE en todos los escenarios de uso.
Nota : A menos que se indique lo contrario, este ReadMe supone que está utilizando Identity Engine. La información sobre el uso del widget con el motor clásico se puede encontrar en este documento
El widget de inicio de sesión es autónomo y no requiere otros marcos en tiempo de ejecución. Sin embargo, puede haber ciertas características de su aplicación, como el almacenamiento de tokens, la renovación o la validación, que el widget no proporciona.
Estos SDK son totalmente compatibles con el widget de inicio de sesión OKTA y proporcionan utilidades para ayudar a integrar la autenticación OKTA de extremo a extremo en su propia aplicación.
Las aplicaciones de muestra completas demuestran el uso del widget de inicio de sesión OKTA en escenarios integrados y integrados.
Hay varias formas de usar el widget de inicio de sesión de Okta:
OKTA proporciona una página de inicio de sesión predeterminada para su organización, alojada en la URL OKTA de su organización.
OKTA admite una opción para crear un dominio personalizado con una página de inicio de sesión alojada de OKTA altamente personalizable.
Puede incrustar el widget directamente en su aplicación.
OKTA proporciona una página de inicio de sesión, disponible en la URL de su organización, que permite al usuario completar todo el flujo de autorización, iniciar una sesión SSO (inicio de sesión único) y establecer la cookie de sesión de OKTA en el navegador web. Puede personalizar esta página con una imagen de fondo y logotipo. De manera predeterminada, iniciar sesión en esta página redirige al usuario al tablero de usuarios de OKTA.
La página de inicio de sesión alojada de OKTA predeterminada también puede autenticar a un usuario en una aplicación OIDC. Su aplicación puede redirigir a una página de inicio de sesión para realizar el flujo de autenticación, después de lo cual OKTA redirige al usuario a la devolución de llamada de la aplicación. OKTA proporciona SDK en muchos idiomas para ayudar a construir la URL de redirección y manejar la devolución de llamada de inicio de sesión como parte del flujo alojado.
OKTA proporciona varias aplicaciones de muestra completas que demuestran cómo usar el flujo alojado OKTA.
OKTA también proporciona una página de inicio de sesión alojada que se puede personalizar para que esté disponible bajo un dominio personalizado que es un subdominio del dominio de nivel superior de su empresa. Aunque la página está alojada por Okta, puede personalizar la plantilla de esta página de muchas maneras poderosas.
En lo que respecta a su aplicación, el widget personalizado se comporta de la misma manera que el widget predeterminado alojado en OKTA y puede usar el mismo flujo alojado.
Nota: Habrá un objeto de configuración en la página que contiene todos los valores requeridos y características habilitadas. Lo más probable es que no necesite modificar este objeto. Si encuentra que debe modificar esta configuración, tenga cuidado de no sobrescribir o eliminar los valores requeridos.
Para una experiencia completamente perfecta que permita el más alto nivel de personalización, puede incrustar el widget de inicio de sesión directamente en su aplicación. Esto permite el uso completo de la configuración y la API del widget.
Usando un widget integrado, la web del lado del cliente y las aplicaciones nativas pueden evitar la redirección de ida y vuelta del flujo alojado en muchos casos. Ver Shosignin.
Las aplicaciones web del lado del servidor recibirán el lado del servidor de tokens OAuth, por lo que deben manejar una devolución de llamada de redirección . Estas aplicaciones deben usar ShowsigninandRedirect.
Puede incrustar el widget de inicio de sesión en su aplicación incluyendo una etiqueta de script que extrae el widget del OKTA CDN o agrupa el módulo NPM en su aplicación.
Cargar nuestros activos directamente desde el CDN es una buena opción si desea una manera fácil de comenzar con el widget, ya no tiene un proceso de compilación existente que aproveche NPM o hilo para dependencias externas, o cualquier otra razón en la que no se ponga ' Desean agrupar el widget de inicio de sesión en su aplicación.
El paquete estándar ( okta-sign-in.min.js ) incluye soporte tanto para el motor clásico como para el motor de identidad. También incluye un polyfill para garantizar la compatibilidad con navegadores más antiguos como IE11. Si su aplicación no necesita admitir IE11, puede incluir el paquete no-polyfill para disminuir el tiempo de carga para los usuarios por primera vez. El paquete polyfill independiente se puede incluir condicionalmente en las páginas para agregar soporte para navegadores más antiguos cuando sea necesario.
Si su organización se ha actualizado al motor de identidad, se puede usar el paquete oie más pequeño.
| Manojo | Nombre del archivo | Aprox. Tamaño | Motor clásico | Motor de identidad | Poliemolos | Notas |
|---|---|---|---|---|---|---|
| estándar | okta-sign-in.min.js | 1.7 MB | ✅ | ✅ | ✅ | Paquete estándar que incluye todo |
| no-polyfill | okta-sign-in.no-polyfill.min.js | 1.7 MB | ✅ | ✅ | Paquete estándar sin polyfill | |
| oie | okta-sign-in.oie.min.js | 1.3 MB | ✅ | Paquete más pequeño para organizaciones habilitadas para OIE | ||
| clásico | okta-sign-in.classic.min.js | 1.1 MB | ✅ | Paquete más pequeño solo para motor clásico | ||
| poliemolos | okta-sign-in.polyfill.min.js | 108kb | ✅ | Paquete de polyfill independiente. Se puede usar junto con un paquete de widget que no incluye el polyfill. |
Para incrustar el widget de inicio de sesión a través de CDN, incluya enlaces a los archivos JS y CSS en su 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 " />Nota: Las URL CDN contienen un número de versión. Este número debe ser el mismo tanto para el archivo JavaScript como para el archivo CSS y coincidir con una versión en la página Lanzamientos. Recomendamos usar la última versión de widget.
Cuando use uno de los paquetes sin el polyfill incluido, es posible que desee cargar condicionalmente el paquete de polyfill independiente. El polyfill debe cargarse antes del paquete de widget:
<!-- 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 " />Usar nuestro módulo NPM es una buena opción si:
Para instalar @okta/okta-sign-widget:
# Run this command in your project root folder
# yarn
yarn add @okta/okta-signin-widget
# npm
npm install @okta/okta-signin-widget --save Esto instala la última versión del widget de inicio de sesión en el directorio node_modules de su proyecto.
Nota: Si está utilizando TypeScript, deberá habilitar las importaciones sintéticas en su tsconfig.json .
{
...
"compilerOptions" : {
"allowSyntheticDefaultImports" : true ,
...
}
} Los proyectos Angulares (TypeScript) requieren una configuración Simliar, también en su tsconfig.json
{
...
"angularCompilerOptions" : {
"allowSyntheticDefaultImports" : true ,
...
}
} Los archivos de origen de widget y los activos se instalan en node_modules/@okta/okta-signin-widget/dist , y tienen esta estructura de directorio:
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/Después de instalar:
Copie los activos a una carpeta que se distribuirá a su sitio alojado públicamente. Las carpetas que necesitará copiar son css , font , img , js y labels .
En lugar de copiar el directorio js e incluirlo en su página como global, puede requerir el widget de inicio de sesión en su compilación si está utilizando Webpack, Browserify u otro sistema de agrupación de módulos que comprenda el formato node_modules .
// Load the Sign-In Widget module
var OktaSignIn = require ( '@okta/okta-signin-widget' ) ;
// Use OktaSignIn
var signIn = new OktaSignIn ( /* configOptions */ ) ;Los mapas de origen se proporcionan como un archivo .map externo. Si está utilizando Webpack, se pueden cargar utilizando el complemento Source-Map-Loader.
Si desea incluir estilos de widgets en paquete utilizando Style-Loader o Mini-CSS-Extract-Plugin, use la siguiente importación:
import '@okta/okta-signin-widget/css/okta-sign-in.min.css' ; Nota: Si usa Browserify para agrupar su aplicación, deberá usar la opción --noparse :
browserify main.js
--noparse= $PWD /node_modules/@okta/okta-signin-widget/dist/js-okta-sign-in.entry.js
--outfile=bundle.jsAsegúrese de incluir Polyfills ES6 con su Bundler si necesita admitir IE11. El widget proporciona todos los polyfills necesarios a través de una exportación:
const polyfill = require('@okta/okta-signin-widget/polyfill');
o
import polyfill from '@okta/okta-signin-widget/polyfill';
Estos simples ejemplos deberían ayudarlo a comenzar a usar el widget de inicio de sesión. Para obtener soluciones completas de extremo a extremo, consulte nuestras aplicaciones de muestra.
Una aplicación de una sola página (SPA) se ejecuta completamente en el navegador. Las aplicaciones de spa se autentican utilizando flujos del lado del cliente y almacenan tokens OAuth en el almacenamiento basado en el navegador.
Nota: Consulte la configuración para obtener más información sobre estos valores de configuración
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
} ) ; Una aplicación web se ejecuta principalmente en el servidor. El widget, que ejecuta el lado del cliente, se incrustará en una página HTML que incluye un bloque de script que configura y representa el widget. Los tokens OAuth se recibirán en el lado del servidor en la devolución de llamada de redirección de inicio de sesión de la aplicación.
Nota: Consulte la configuración para obtener más información sobre estos valores de configuración
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
} ) ; Además del flujo de autenticación predeterminado, el widget admite varios flujos predefinidos, que le permiten proporcionar páginas HTML de uso único para varios casos de uso comunes.
Por defecto, el widget de inicio de sesión de OKTA continuará con un flujo de corriente o iniciará un nuevo flujo de autenticación. La opción flow permite arrancar el widget en una vista específica, como registrar, desbloquear o restablecer la contraseña. Flujos compatibles:
Nota: Un flujo en particular solo puede funcionar si el administrador ha configurado la organización para permitir las operaciones requeridas (ejemplo: si la inscripción de perfil (registro del usuario) en la consola de administrador no está habilitada, el arranque del widget con
flow: 'signup'resultar en un error)
// 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'
} ) ; Se produce una devolución de llamada de redirección cuando su aplicación se vuelve a cargar en el navegador como parte de un flujo. Durante una devolución de llamada de redirección, la aplicación se carga en una ruta de URL específica que ha definido en la configuración de su aplicación OKTA. La mayoría de las devoluciones de llamada solo se pueden manejar una vez y producirán un error si hay un intento de manejarlo dos veces. Por lo general, la aplicación se redirigirá a una ruta de URL bien conocida o previamente guardada después de que se haya manejado la lógica de devolución de llamada para evitar errores en la recarga de la página.
NOTA: La mayoría de las aplicaciones deben estar preparadas para manejar una o más devoluciones de llamada de redirección. Dependiendo de cómo esté configurada la política de inicio de sesión de la aplicación, algunas aplicaciones de spa pueden recibir tokens sin ninguna redirección. Sin embargo, la lógica deberá agregarse si la política incluye firmar con un proveedor social / IDP o permite la autenticación o la recuperación de la cuenta utilizando la verificación por correo electrónico.
La devolución de llamada OAuth es el último paso del flujo del código de interacción. En la autenticación exitosa, el navegador se redirige a OKTA con información para comenzar una nueva sesión. Los servidores de OKTA procesan la información y luego redirigen redirectUri de su aplicación. Si tiene éxito, un código de interacción está presente en la URL como el parámetro de consulta interaction_code . Si no tiene éxito, hay un error y un error de parámetros de consulta de error_description en la URL. Ya sea exitoso o no, el parámetro state , que originalmente fue pasado al widget por su aplicación, también se devolverá en la redirección. Esto puede ser utilizado por aplicaciones web del lado del servidor para que coincidan con la devolución de llamada con la sesión de usuario correcta.
Todas las aplicaciones web manejarán una devolución de llamada OAuth . Para las aplicaciones de spa, en muchos casos, la política de inicio de sesión no requerirá una redirección y estas aplicaciones pueden recibir tokens directamente de Shosignin. Sin embargo, si la política de inicio de sesión requiere redirección por cualquier motivo (como la integración con un proveedor social / IDP), las aplicaciones de spa deberán manejar una devolución de llamada OAuth. Por esta razón, recomendamos que todas las aplicaciones de SPA estén preparadas para manejar una devolución de llamada OAuth .
Nota: El widget no maneja una devolución de llamada OAuth directamente. Las aplicaciones web del lado del servidor pueden usar uno de nuestros SDK para ayudar a manejar la devolución de llamada. Las aplicaciones SPA pueden usar el SDK OKTA-AUTH-JS, que se incluye con el widget de inicio de sesión como propiedad
authClient.
Una aplicación SPA puede manejar la devolución de llamada OAuth del lado del cliente utilizando el authClient incorporado:
// https://myapp.mycompany.com/login/callback?interaction_code=ABC&state=XYZ
if ( signIn . authClient . isLoginRedirect ( ) ) {
await signIn . authClient . handleLoginRedirect ( ) ;
} Después de iniciar sesión con un IDP de terceros, el usuario es redirigido a redirectUri de la aplicación. Si no se necesita más información del usuario, esta será una devolución de llamada OAuth que contenga un parámetro interaction_code . Si se requiere una entrada adicional, la devolución de llamada contendrá un parámetro error con el valor interaction_required . En este caso, el widget de inicio de sesión debe cargarse nuevamente para que el flujo pueda continuar.
Las aplicaciones web y SPA del lado del servidor deben buscar el parámetro de consulta error y, si el valor es interaction_required , deben volver a renderizar el widget utilizando la misma configuración que el primer render. El parámetro state también se aprobará en la devolución de llamada que se puede utilizar para que coincida con la solicitud con la sesión de aplicación del usuario. El widget procederá automáticamente con la transacción.
Su solicitud deberá implementar una devolución de llamada de verificación de correo electrónico si su política de inicio de sesión utiliza un correo electrónico de correo electrónico/OTP. Después de que el usuario haga clic en el enlace en un correo electrónico, se redirige al email verify callback URI de la aplicación. Los parámetros de consulta pasados a la aplicación incluyen state y otp . Al igual que con la devolución de llamada Social/IDP, el widget debe volverse a ser nuevamente utilizando la misma configuración. Además, el otp debe pasar al constructor del widget.
Nota: Consulte la configuración para obtener más información sobre estos valores de configuración
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}}'
}
) ; Crea una nueva instancia del widget de inicio de sesión con las opciones proporcionadas.
Para aplicaciones que usan un widget personalizado alojado en OKTA, habrá un objeto de configuración en la página que contiene todos los valores requeridos. Lo más probable es que no necesite modificar este objeto.
Para aplicaciones que usan un widget integrado, deberá proporcionar una configuración OIDC:
Nota: Consulte la configuración para obtener más información sobre estos valores de configuración
var signIn = new OktaSignIn (
{
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}
) ;Representa el widget al DOM. Sobre el éxito, la promesa se resuelve. Por error, la promesa rechaza. Si la política de inicio de sesión requiere una redirección a OKTA u otro proveedor de identidad (IDP), el navegador redirigirá y la promesa no se resolverá. Las respuestas y los errores son las mismas que las de Renderel.
Nota : Esta es la forma recomendada de representar el widget para aplicaciones de spa. Las aplicaciones web del lado del servidor deben usar el método ShoSigninandredirect en su lugar.
showSignIn acepta las mismas opciones que el constructor de widgets. Las opciones pasadas al método anularán las opciones del constructor.
Nota: Consulte la configuración para obtener más información sobre estos valores de configuración
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 ) ;
} ) ; Representa el widget al DOM. En la autenticación exitosa, el navegador será redirigido a OKTA con información para comenzar una nueva sesión. Los servidores de Okta procesarán la información y luego redirigirán a redirectUri de su aplicación. Si tiene éxito, existirá un código de interacción en la URL como el parámetro de consulta interaction_code . Si no tiene éxito, habrá parámetros de consulta error y error_description en la URL. Ya sea exitoso o no, el parámetro state que se pasó al widget también se devolverá en redirección. La aplicación web del lado del servidor puede usar esto para que coincida con la devolución de llamada con la sesión de usuario correcta.
showSignInAndRedirect acepta las mismas opciones que el constructor de widgets. Las opciones pasadas al método anularán las opciones del constructor.
Nota: Consulte la configuración para obtener más información sobre estos valores de configuración
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
} ) ;Esconde el widget, pero mantenga el widget en el DOM.
signIn . hide ( ) ;Muestre el widget si está oculto.
signIn . show ( ) ;Retire el widget del DOM por completo.
signIn . remove ( ) ;Suscríbase a un evento publicado por el widget.
event - Evento para suscribirse acallback : función para llamar cuando se active el evento // Handle a 'ready' event using an onReady callback
signIn . on ( 'ready' , onReady ) ;Describe de Widget Events. Si no se proporciona una devolución de llamada, cancele a todos los oyentes del evento.
event - Evento opcional para darse de baja decallback : devolución de llamada opcional que se utilizó para suscribirse al evento // 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 ) ;Proporciona acceso al objeto subyacente [@okta/okta-auth-js] [] utilizado por el widget de inicio de sesión. Todos los métodos se documentan en la referencia de API.
El authClient se configura utilizando valores pasados al widget, como clientId , issuer , redirectUri , state y scopes . Las opciones que no son compatibles directamente por el widget se pueden pasar a Authjs utilizando el objeto authParams .
El authClient también se puede crear y configurar fuera del widget y pasar al widget como opción authClient . Si se pasa una opción authClient , authParams serán ignorados.
Nota: Consulte la configuración para obtener más información sobre estos valores de configuración
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 Si no se establece una opción authClient , se creará una instancia utilizando las opciones pasadas al widget y authParams :
Nota : Cuando use la opción de configuración
authClient, asegúrese de instalar y usar la misma versión de@okta/okta-auth-jsque la utilizada por el widget instalado. Esta versión se puede encontrar en el archivopackage.jsondel widget instalado.
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'Agrega una función de gancho asíncrono que se ejecutará antes de que se represente una vista.
Nota: Consulte la configuración para obtener más información sobre estos valores de configuración
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.
} ) ;NOTA : Esta función solo se admite cuando se usa el motor de identidad okta
Agrega una función de gancho asíncrono que se ejecutará después de que se represente una vista.
Nota: Consulte la configuración para obtener más información sobre estos valores de configuración
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.
} ) ; Si está utilizando la página de firma alojada de OKTA predeterminada, toda la configuración se maneja a través de la sección Customization de la interfaz de usuario de administración.
Si está utilizando la página Signin de firma alojada de OKTA personalizada, se incluye un objeto de configuración en la página que contiene todos los valores necesarios. Probablemente no necesite modificar este objeto, pero puede usar este objeto como punto de partida y agregar personalizaciones adicionales.
Para los widgets integrados, debe establecer el issuer , clientId y redirectUri . Por defecto, el widget se ejecutará en el motor de identidad utilizando el flujo del código de interacción. El widget también puede correr contra el motor clásico estableciendo la opción UseECLassicEngine en true . (Consulte este documento para obtener más detalles sobre Running in Classic Engine.
Todos los widgets integrados deben establecer estas opciones básicas: issuer , clientId y redirectUri .
Nota : Los widgets alojados en OKTA no deben establecer estos valores.
La URL del servidor de autorización que emitirá tokens OAuth a su aplicación.
Nota :
https://{yourOktaDomain}puede ser cualquier organización OKTA. Consulte nuestra Guía de desarrolladores para obtener ayuda para encontrar su dominio OKTA.
Configuración básica utilizando el servidor de autorización personalizado "predeterminado":
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}Se puede especificar un servidor de autorización personalizado diferente:
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/custom' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} Algunas aplicaciones, como las que requieren acceso a la API de usuario de OKTA, querrán utilizar el servidor de autorización de la organización OKTA como emisor. En este caso, el issuer debe coincidir con su dominio OKTA:
var config = {
issuer : 'https://{yourOktaDomain}' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}Nota : El servidor de autorización de la organización OKTA solo está destinado a acceder a la API de usuario de OKTA y no admite todas las características del servidor de autorización personalizado estándar, como los ámbitos personalizados en los tokens de acceso. Generalmente se recomienda utilizar un servidor de autorización personalizado para asegurar el acceso a los recursos de su organización.
Nota : Este valor de configuración se puede encontrar en la interfaz de usuario de administrador OKTA. Consulte nuestra Guía de desarrolladores para obtener ayuda para encontrar el cliente de su aplicación.
ID de cliente de la aplicación.
Nota : Este valor de configuración se puede encontrar en la interfaz de usuario de administrador de OKTA en la "Configuración general" de la aplicación
El URI para usar para la devolución de llamada OAuth.
El valor predeterminado es false . Por defecto, el widget utilizará el flujo del código de interacción en el motor de identidad. Establecer la opción useClassicEngine en true hará que el widget se ejecute contra el motor clásico. (Consulte este documento para obtener más detalles sobre la configuración de un widget que se ejecuta en un motor clásico).
Nota : Esta opción, junto con el soporte para el motor clásico, se eliminará en una versión futura de widget. Se alienta a todos los clientes a migrar del motor clásico al motor de identidad. Visite la migración a OIE para obtener más detalles sobre la migración al motor de identidad.
El desafío del código PKCE. Las aplicaciones SPA no necesitarán esta opción ya que el widget administrará toda la transacción. Las aplicaciones web deben generar su propio desafío de código y secreto de código. El desafío del código se pasa al widget, y el secreto del código se mantiene en el lado del servidor para obtener tokens en la devolución de llamada de inicio de sesión de redirección.
Nota : Consulte nuestras aplicaciones de muestra para ver ejemplos completos de flujo de código de interacción utilizando PKCE
Un valor proporcionado por la aplicación que se devolverá como un parámetro de consulta durante la devolución de llamada de inicio de sesión de redirección o la devolución de llamada Verifique por correo electrónico. Si no se establece ningún valor, se creará un valor aleatorio. Al manejar una devolución de llamada de verificación de correo electrónico, el valor del state del parámetro de consulta debe pasar al widget como una opción de configuración (junto con OTP). Esto asegurará que el widget pueda cargar y reanudar la transacción actual.
Al manejar una devolución de llamada Verifique por correo electrónico, el valor de otp del parámetro de consulta debe pasar al widget como una opción de configuración (junto con el estado). Esto asegurará que el widget pueda cargar y reanudar la transacción actual.
El valor predeterminado es ['openid', 'email'] . Especifique qué información poner a disposición en el id_token o access_token devuelto. Para OIDC, debe incluir openid como uno de los ámbitos. Para obtener una lista de ámbitos disponibles, consulte los ámbitos y los reclamos.
Mostrar orden para proveedores de identidad externa en relación con el formulario de inicio de sesión OKTA. El valor predeterminado es SECONDARY .
PRIMARY - Muestra botones IDP externos por encima del formulario de inicio de sesión OKTASECONDARY - Muestra botones IDP externos debajo del formulario de inicio de sesión de OKTARuta local o URL a una imagen del logotipo que se muestra en la parte superior del widget de inicio de sesión
// Hosted on the same origin
logo: '/img/logo.png'
// Can also be a full url
logo: 'https://acme.com/img/logo.png' Texto para el atributo alt de la imagen del logotipo, el texto del logotipo solo se mostrará cuando la imagen del logotipo no esté disponible
// Text to describe the logo
logoText: 'logo text' El nombre de marca o empresa que se muestra en mensajes transmitidos por el widget de inicio de sesión (por ejemplo, "restablecer su contraseña { brandName }"). Si no se proporciona brandName , se emite un mensaje genérico (por ejemplo, "restablecer su contraseña"). Puede personalizar aún más el texto que se muestra con la configuración del idioma y el texto.
brandName: 'Spaghetti Inc.' Estas opciones le permiten personalizar la apariencia del widget de inicio de sesión.
Si desea aún más personalización, puede modificar los archivos de origen SASS y construir el widget.
Establece el color de la marca como el color de fondo del botón CTA primario. Los colores deben estar en formato hexadecimal, como #008000 .
colors: {
brand : '#008000'
}cs - Checoda - danésde - alemánel - griegoen - ingléses - españolfi - finlandésfr - francéshu - Húngaroid - Indonesioit - italianoja - japonésko - coreanoms - Malasianb - Noruegonl-NL - holandéspl - esmaltept-BR - Portugués (Brasil)ro - rumanoru - rusosv - suecoth - tailandéstr - turcouk - ucranianozh-CN - Chino (PRC)zh-TW - Chino (Taiwán)Se puede agregar soporte para idiomas adicionales con la opción de activos.
Establezca el lenguaje del widget. Si no se especifica ningún idioma, el widget elegirá un idioma basado en las preferencias del navegador del usuario si es compatible o predeterminado a 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 ] ;
} Establezca el código de campo predeterminado del widget. Si no se proporciona ningún defaultCountryCode , el valor predeterminado a US . Establece el código de llamada del país para el número de teléfono en consecuencia en el widget.
Anular el texto en el widget. La lista completa de propiedades se puede encontrar en los archivos Login.Properties y 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'
}
}Anule la URL base del widget extrae sus archivos de idioma. El widget solo está empaquetado con texto en inglés de forma predeterminada y carga otros idiomas a pedido del OKTA CDN. Si desea servir los archivos de idioma de sus propios servidores, actualice esta configuración.
// 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'
}NOTA: Se puede acceder a los archivos JSON desde la carpeta
dist/labels/jsonque se publica en el módulo NPM.
Especifique la lista de idiomas compatibles que están alojados y accesibles en la ruta {assets.baseUrl}/labels/json/ . Esta opción reemplaza la lista predeterminada de idiomas compatibles. Si se solicita un lenguaje no compatible (explícitamente utilizando la opción de idioma o automáticamente mediante detección del navegador), se utilizará el idioma predeterminado ( en ).
Puede usar esta función para reescribir la ruta de los activos y el nombre de archivo. Use esta función si aloja los archivos de activos en su propio host y planea cambiar la ruta o el nombre de archivo de los activos. Esto es útil, por ejemplo, si desea almacenar en caché de los archivos.
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 ) ;
}
}Establezca la siguiente opción de configuración para anular el retroceso para iniciar sesión URL de enlace. Si no se proporciona, el widget navegará a la autenticación primaria.
backToSignInLink: 'https://www.backtosignin.com'Nota: Para la compatibilidad con versiones de widget anteriores,
signOutLinkse acepta como alias parabackToSignInLink
Puede agregar un enlace de registro a la página de autenticación principal configurando las siguientes opciones de configuración.
Función que se llama cuando se hace clic en el enlace de registro.
// 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' ;
}
} Establezca las siguientes opciones de configuración para anular las URL del enlace de ayuda en la página de autenticación principal.
// 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'
}
]
} Enlace personalizado href para el enlace "ayuda"
Enlace personalizado HREF para el enlace "Olvidé la contraseña"
Enlace personalizado HREF para el enlace "Desbloqueo de la cuenta". Para este enlace a la pantalla, features.selfServiceUnlock debe estar configurado en true , y la función de desbloqueo de autoservicio debe habilitarse en la configuración de su administrador.
Matriz de objetos de enlace personalizados {text, href, target} que se agregará después del enlace "Ayuda". El target del enlace es opcional.
Establezca las siguientes opciones de configuración para personalizar el script 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' ,
}
} , Establezca las siguientes opciones de configuración para personalizar el URI de script reCAPTCHA :
// An example that uses recaptcha.net
recaptcha : {
scriptSource : 'https://recaptcha.net/recaptcha/api.js'
} ,Las devoluciones de llamada asincrónicas se pueden invocar antes o después de que se represente una vista específica. Los ganchos se pueden usar para agregar lógica personalizada como instrumentación, registro o entrada adicional del usuario. La ejecución normal se bloquea mientras la función de gancho se ejecuta y se reanudará después de que la promesa devuelta desde la función de gancho se resuelve. Los ganchos se pueden agregar a través de la configuración, como se muestra a continuación, o en tiempo de ejecución utilizando los métodos de antes o después. La lista completa de vistas se puede encontrar en 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
} ) ;Transforma el nombre de usuario antes de enviar solicitudes con el nombre de usuario a Okta. Esto es útil cuando tiene una asignación interna entre lo que ingresa el usuario y su nombre de usuario 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' ;
}Se pueden proporcionar funciones de devolución de llamada que se llamarán en momentos específicos en el proceso de registro.
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 ) ;
}
} , La devolución de llamada solía cambiar el esquema JSON que regresa de la API OKTA.
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 ) ;
} La devolución de llamada utilizada principalmente para modificar los parámetros de solicitud enviados a la API OKTA.
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 ) ;
} La devolución de llamada utilizada para obtener principalmente el control y modificar el comportamiento posterior a la presentación a la API de registro.
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 ) ;
} Puede agregar botones personalizados debajo del formulario de inicio de sesión en la página de autenticación primaria configurando las siguientes opciones de configuración. Si desea cambiar el texto del divisor, use la opción de configuración 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' ;
}
} ] Cadena que se establece como el texto del botón (configure solo uno de title o i18nKey )
Clave de traducción personalizada para el texto del botón especificado en la opción de configuración i18n (establecer solo uno de title o i18nKey )
Clase opcional que se puede agregar al botón
Función que se llama cuando se hace clic en el botón
Habilitar o deshabilitar la funcionalidad de widget con las siguientes opciones.
features: {
showPasswordToggleOnSignInPage : true ,
hideSignOutLinkInMFA : false ,
rememberMe : true
} El valor predeterminado es true . Muestra el icono de los ojos para alternar la visibilidad de la contraseña ingresada por el usuario en la página de inicio de sesión OKTA. La contraseña está oculta de forma predeterminada, incluso cuando este indicador está habilitado. Las contraseñas son visibles durante 30 segundos y luego se ocultan automáticamente.
El valor predeterminado es true . Muestra el identificador del usuario en cualquier vista con el contexto del usuario.
El valor predeterminado es false . Oculta el enlace "Volver a iniciar sesión" para la inscripción de autenticador y los flujos de desafío.
El valor predeterminado es true . Pre-repleto el campo Identificador con el nombre de usuario utilizado anteriormente.
El valor predeterminado es true . Se enfoca automáticamente el primer campo de entrada de cualquier formulario cuando se muestra.
El valor predeterminado es false . Establece el atributo de autocompletar en los campos de entrada a off .
El widget inyecta bloques de script/estilo en línea seguros en tiempo de ejecución para fines de personalización, pero esos bloques pueden violar las reglas CSP que se establecen en la página web alojada.
cspNonce permite establecer el valor Nonce desde el encabezado Content-Security-Policy a los bloques inyectados, por lo que el script/estilo de esos bloques aún puede ser ejecutable.
Nota: La Directiva Nonce se agregó a CSP Level2, aún puede ver los errores de CSP en la consola del navegador si se usa en navegadores no compatibles.
Eventos publicados por el widget. Suscríbase a estos eventos usando ON.
Activado cuando el widget está listo para aceptar la entrada del usuario por primera vez. Devuelve un objeto context que contiene las siguientes propiedades:
signIn . on ( 'ready' , function ( context ) {
// The Widget is ready for user input
} ) ; El widget manejará la mayoría de los tipos de errores, por ejemplo, si el usuario ingresa una contraseña inválida o si hay problemas de autenticación. Para capturar un error de cambio de estado de autenticación después de que el widget lo maneje y renderice, escuche el evento afterError . También puede capturar los errores de registro de OAUTH. Para otros tipos de error, se alienta a manejarlos utilizando el controlador de errores renderEl .
Devuelve objetos context y error que contienen las siguientes propiedades:
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
} ) ; Activado cuando el widget hace transiciones a una nueva página y animaciones ha terminado. Devuelve un objeto context que contiene las siguientes propiedades:
// 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!
| Dominio | Descripción |
|---|---|
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.
