okta signin widget
7.25.1
O widget de inscrição OKTA é um widget JavaScript que fornece uma experiência de login totalmente destaque e personalizável que pode ser usada para autenticar e registrar usuários em aplicativos web e móveis.
O widget é usado na página de assinatura padrão da Okta para iniciar uma sessão Okta SSO e definir o cookie de sessão OKTA no navegador da web. Ele também pode executar um fluxo OIDC para integrar facilmente seus aplicativos Web ou móvel na plataforma OKTA.
Uma página de assinatura personalizada de Okta pode ser configurada para usar o nome e a marca de domínio da sua organização.
O widget também pode ser incorporado diretamente nos aplicativos da Web ou móvel da sua organização para uma experiência perfeita para o usuário.
Consulte o Guia de Uso para obter mais informações sobre como começar a usar o widget de inscrição.
yarn linkO Okta Identity Engine (OIE) é um serviço de plataforma que permite que as empresas criem experiências de acesso mais flexíveis que são adaptadas às suas necessidades organizacionais. O widget de inscrição da OKTA suporta OIE em todos os cenários de uso.
Nota : Salvo indicação em contrário, este readme pressupõe que você esteja usando o mecanismo de identidade. Informações sobre o uso do widget com o mecanismo clássico podem ser encontradas neste documento
O widget de inscrição é independente e não requer outras estruturas em tempo de execução. No entanto, pode haver certos recursos que seu aplicativo precisa, como armazenamento de token, renovação ou validação, que o widget não fornece.
Esses SDKs são totalmente compatíveis com o widget de inscrição okta e fornecem utilitários para ajudar a integrar a autenticação OKTA de ponta a ponta em seu próprio aplicativo.
Os aplicativos de amostra completos demonstram o uso do widget de inscrição OKTA em cenários de Okta e incorporados.
Existem várias maneiras de usar o widget de inscrição okta:
Okta fornece uma página de inscrição padrão para sua organização, hospedada no URL OKTA da sua organização.
O OKTA suporta uma opção para criar um domínio personalizado com uma página de inscrição altamente personalizável.
Você pode incorporar o widget diretamente em seu aplicativo.
O Okta fornece uma página de login, disponível no URL da sua organização, que permite ao usuário concluir todo o fluxo de autorização, iniciar uma sessão SSO (Single Sign-On) e definir o cookie de sessão OKTA no navegador da web. Você pode personalizar esta página com uma imagem e logotipo em segundo plano. Por padrão, a login nesta página redireciona o usuário para o painel do usuário da OKTA.
A página de login padrão OKTA também pode autenticar um usuário em um aplicativo OIDC. Seu aplicativo pode redirecionar para uma página de login para executar o fluxo de autenticação, após o qual Okta redireciona o usuário de volta ao retorno de chamada do aplicativo. O Okta fornece SDKs em vários idiomas para ajudar a construir o URL de redirecionamento e lidar com o retorno de chamada de login como parte do fluxo hospedado.
O Okta fornece vários aplicativos de amostra completos que demonstram como usar o fluxo hospedado da OKTA.
O Okta também fornece uma página de login hospedada que pode ser personalizada para que esteja disponível em um domínio personalizado, que seja um subdomínio do domínio de nível superior da sua empresa. Embora a página seja hospedada pela Okta, você pode personalizar o modelo desta página de muitas maneiras poderosas.
No que diz respeito ao seu aplicativo, o widget personalizado se comporta da mesma forma que o widget padrão OKTA e você pode usar o mesmo fluxo hospedado.
Nota: Haverá um objeto de configuração na página que contém todos os valores necessários e recursos ativados. Você provavelmente não precisará modificar esse objeto. Se você achar que precisa modificar essa configuração, tome cuidado para não substituir ou remover os valores necessários.
Para uma experiência completamente perfeita que permita o mais alto nível de personalização, você pode incorporar o widget de inscrição diretamente no seu aplicativo. Isso permite o uso total da configuração e da API do widget.
Usando um widget incorporado, os aplicativos da Web do lado do cliente podem evitar o redirecionamento de ida e volta do fluxo hospedado em muitos casos. Veja Showsignin.
Os aplicativos da Web do lado do servidor receberão o servidor OAuth Tokens, para que eles devam lidar com um retorno de chamada de redirecionamento . Esses aplicativos devem usar o SHOPSIGNINAndRedirect.
Você pode incorporar o widget de inscrição no seu aplicativo, incluindo uma tag de script que puxa o widget do Okta CDN ou agrupando o módulo NPM no seu aplicativo.
Carregar nossos ativos diretamente do CDN é uma boa escolha se você quiser uma maneira fácil de começar com o widget, já não possui um processo de construção existente que aproveite o NPM ou o fio para dependências externas ou qualquer outro motivo em que você não Não quero agrupar o widget de inscrição no seu aplicativo.
O pacote padrão ( okta-sign-in.min.js ) inclui suporte para o mecanismo clássico e o mecanismo de identidade. Ele também inclui um poli -preenchimento para garantir a compatibilidade com navegadores mais antigos, como o IE11. Se o seu aplicativo não precisar suportar o IE11, você poderá incluir o pacote de no-polyfill para diminuir o tempo de carregamento para os usuários iniciantes. O pacote polyfill independente pode ser incluído condicionalmente nas páginas para adicionar suporte para navegadores mais antigos somente quando necessário.
Se sua organização atualizou para o mecanismo de identidade, o pacote oie menor pode ser usado.
| Pacote | Nome do arquivo | Aprox. Tamanho | Motor clássico | Engine de identidade | Polyfil | Notas |
|---|---|---|---|---|---|---|
| padrão | okta-sign-in.min.js | 1,7 MB | ✅ | ✅ | ✅ | Pacote padrão que inclui tudo |
| Não-poli-filo | okta-sign-in.no-polyfill.min.js | 1,7 MB | ✅ | ✅ | Pacote padrão sem poli -fil | |
| oie | okta-sign-in.oie.min.js | 1,3 MB | ✅ | Pacote menor para organizações habilitadas para OIE | ||
| clássico | okta-sign-in.classic.min.js | 1,1 MB | ✅ | Pacote menor apenas para motor clássico | ||
| Polyfil | okta-sign-in.polyfill.min.js | 108kb | ✅ | Pacote de poli -preenchimento independente. Pode ser usado junto com um pacote de widgets que não inclui o poli -fil. |
Para incorporar o widget de inscrição via CDN, inclua links para os arquivos JS e CSS em seu 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: Os URLs do CDN contêm um número de versão. Esse número deve ser o mesmo para o arquivo JavaScript e CSS e corresponder a uma versão na página de lançamentos. Recomendamos o uso da versão mais recente do widget.
Ao usar um dos pacotes sem o poli -preenchimento incluído, você pode carregar condicionalmente o pacote de poli -preenchimento independente. O polifilar deve ser carregado antes do pacote de widgets:
<!-- 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 nosso módulo NPM é uma boa escolha se:
Para instalar @okta/okta-signin-widget:
# Run this command in your project root folder
# yarn
yarn add @okta/okta-signin-widget
# npm
npm install @okta/okta-signin-widget --save Isso instala a versão mais recente do widget de inscrição no diretório node_modules do seu projeto.
Nota: Se você estiver usando o TypeScript, precisará ativar as importações sintéticas em seu tsconfig.json .
{
...
"compilerOptions" : {
"allowSyntheticDefaultImports" : true ,
...
}
} Os projetos angulares (datilografados) requerem uma configuração Simliar, também em seu tsconfig.json
{
...
"angularCompilerOptions" : {
"allowSyntheticDefaultImports" : true ,
...
}
} Os arquivos e ativos de origem do widget são instalados em node_modules/@okta/okta-signin-widget/dist , e têm essa estrutura de diretório:
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/Depois de instalar:
Copie os ativos para uma pasta que será distribuída ao seu site hospedado ao público. As pastas que você precisará copiar são css , font , img , js e labels .
Em vez de copiar o diretório js e incluí-lo em sua página como um global, você pode exigir o widget de inscrição em sua compilação se estiver usando o WebPack, o BrowSerify ou outro sistema de agrupamento de módulos que entenda o formato node_modules .
// Load the Sign-In Widget module
var OktaSignIn = require ( '@okta/okta-signin-widget' ) ;
// Use OktaSignIn
var signIn = new OktaSignIn ( /* configOptions */ ) ;Os mapas de origem são fornecidos como um arquivo .MAP externo. Se você estiver usando o WebPack, eles podem ser carregados usando o plug-in Origem-map-carregador.
Se você deseja incluir estilos de widgets em pacote usando o carregador de estilo ou mini-css-extract-plugin, use a seguinte importação:
import '@okta/okta-signin-widget/css/okta-sign-in.min.css' ; NOTA: Se você usar o BrowSerify para agrupar seu aplicativo, precisará usar a opção --noparse :
browserify main.js
--noparse= $PWD /node_modules/@okta/okta-signin-widget/dist/js-okta-sign-in.entry.js
--outfile=bundle.jsCertifique -se de incluir polyfills ES6 com o seu empurrador se precisar suportar o IE11. O widget fornece todos os poli -preenchimentos necessários através de uma exportação:
const polyfill = require('@okta/okta-signin-widget/polyfill');
ou
import polyfill from '@okta/okta-signin-widget/polyfill';
Esses exemplos simples devem ajudá-lo a começar o uso do widget de inscrição. Para soluções completas de ponta a ponta, consulte nossos aplicativos de amostra.
Um aplicativo de página única (SPA) é executada completamente no navegador. Aplicativos de spa autenticam usando fluxos do lado do cliente e armazenam tokens OAuth no armazenamento baseado em navegador.
Nota: Consulte Configuração para obter mais informações sobre esses valores de configuração
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
} ) ; Um aplicativo da Web é executado principalmente no servidor. O widget, que executa o lado do cliente, será incorporado em uma página HTML que inclui um bloco de script que configura e renderiza o widget. Os tokens OAuth serão recebidos no lado do servidor no retorno de chamada de redirecionamento de login do aplicativo.
Nota: Consulte Configuração para obter mais informações sobre esses valores de configuração
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
} ) ; Além do fluxo de autenticação padrão, o widget suporta vários fluxos predefinidos, o que permite fornecer páginas HTML de fins únicas para várias casos de uso comuns.
Por padrão, o widget de inscrição OKTA prosseguirá com um fluxo de corrente ou iniciará um novo fluxo de autenticação. A opção flow permite o bootstrapping do widget em uma visualização específica, como registro, desbloquear ou redefinir senha. Fluxos suportados:
NOTA: Um fluxo específico só pode funcionar se o administrador tiver configurado a organização para permitir as operações necessárias (exemplo: se a inscrição no perfil (inscrição do usuário) no console administrador não estiver ativada, inicializando o widget com
flow: 'signup'Will Will Will Will Will Will Will Will Will Will Will Will Will Will resultar em um erro)
// 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'
} ) ; Um retorno de chamada de redirecionamento ocorre quando seu aplicativo é recarregado no navegador como parte de um fluxo. Durante um retorno de chamada de redirecionamento, o aplicativo é carregado em um caminho de URL específico que você definiu na configuração do aplicativo OKTA. A maioria dos retornos de chamada só pode ser tratada uma vez e produzirá um erro se houver uma tentativa de lidar com isso duas vezes. Normalmente, o aplicativo se redirecionará para um caminho de URL bem conhecido ou anteriormente salvo após a lógica de retorno de chamada ter sido tratada para evitar erros na página recarregada.
NOTA: A maioria dos aplicativos deve estar preparada para lidar com um ou mais retornos de chamada redirecionados. Dependendo de como a política de assinatura do aplicativo é configurada, alguns aplicativos de spa podem receber tokens sem nenhum redirecionamento. No entanto, a lógica precisará ser adicionada se a política incluir a assinatura de um provedor social / IDP ou permitir autenticação ou recuperação de contas usando a verificação de email.
O retorno de chamada do OAuth é a última etapa do fluxo do código de interação. Em autenticação bem -sucedida, o navegador é redirecionado para Okta com informações para iniciar uma nova sessão. Os servidores de Okta processam as informações e depois redirecionam de volta para redirectUri do seu aplicativo. Se for bem -sucedido, um código de interação está presente na URL como o parâmetro de consulta interaction_code . Se sem sucesso, existe um error e os parâmetros de consulta error_description no URL. Seja bem -sucedido ou não, o parâmetro state , que foi originalmente passado para o widget pelo seu aplicativo, também será devolvido no redirecionamento. Isso pode ser usado por aplicativos da Web do lado do servidor para corresponder ao retorno de chamada com a sessão correta do usuário.
Todos os aplicativos da Web lidarão com um retorno de chamada do OAuth . Para aplicativos de spa, em muitos casos, a política de assinatura não exigirá um redirecionamento e esses aplicativos podem receber tokens diretamente da ShowIgnin. No entanto, se a política de assinatura exigir redirecionamento por qualquer motivo (como integração com um provedor social / provedor de IDP), os aplicativos de spa precisarão lidar com um retorno de chamada do OAuth. Por esse motivo, recomendamos que todos os aplicativos de spa estejam preparados para lidar com um retorno de chamada do OAuth .
Nota: O widget não lida diretamente com um retorno de chamada do OAuth. Os aplicativos da Web do lado do servidor podem usar um de nossos SDKs para ajudar no manuseio do retorno de chamada. Os aplicativos de spa podem usar o SDK OKTA-AUTH-JS, que está incluído no widget de inscrição como a propriedade
authClient.
Um aplicativo de spa pode lidar com o lado do cliente de retorno de chamada OAuth usando o authClient integrado:
// https://myapp.mycompany.com/login/callback?interaction_code=ABC&state=XYZ
if ( signIn . authClient . isLoginRedirect ( ) ) {
await signIn . authClient . handleLoginRedirect ( ) ;
} Depois de fazer login com um IDP de terceiros, o usuário é redirecionado de volta para o redirectUri do aplicativo. Se não for necessária uma entrada adicional do usuário, este será um retorno de chamada do OAuth contendo um parâmetro interaction_code . Se for necessária uma entrada adicional, o retorno de chamada conterá um parâmetro error com o valor interaction_required . Nesse caso, o widget de inscrição deve ser carregado novamente para que o fluxo possa continuar.
Os aplicativos da Web do lado do servidor e do SPA devem procurar o parâmetro de consulta error e, se o valor for interaction_required , eles deverão renderizar o widget novamente usando a mesma configuração que a primeira renderização. O parâmetro state também será transmitido no retorno de chamada que pode ser usado para corresponder à solicitação com a sessão de aplicativos do usuário. O widget continuará automaticamente com a transação.
Seu aplicativo precisará implementar um e-mail verificar retorno de chamada se a sua política de assinatura usar o link/OTP de magia em email. Depois que o usuário clica no link em um email, ele é redirecionado de volta para o email verify callback URI . Os parâmetros de consulta passados para o aplicativo incluem state e otp . Como no retorno de chamada social/IDP, o widget deve ser renderizado novamente usando a mesma configuração. Além disso, o otp deve ser passado para o construtor do widget.
Nota: Consulte Configuração para obter mais informações sobre esses valores de configuração
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}}'
}
) ; Cria uma nova instância do widget de inscrição com as opções fornecidas.
Para aplicações usando um widget de Okta, hospedado, haverá um objeto de configuração na página que contém todos os valores necessários. Você provavelmente não precisará modificar esse objeto.
Para aplicações usando um widget incorporado, você precisará fornecer uma configuração OIDC:
Nota: Consulte Configuração para obter mais informações sobre esses valores de configuração
var signIn = new OktaSignIn (
{
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}
) ;Renderiza o widget para o DOM. No sucesso, a promessa resolve. Sobre o erro, a promessa rejeita. Se a política de assinatura exigir um redirecionamento para Okta ou outro provedor de identidade (IDP), o navegador redirecionará e a promessa não resolverá. As respostas e erros são os mesmos do renderizador.
Nota : Esta é a maneira recomendada de renderizar o widget para aplicativos de spa. Em vez disso, os aplicativos da Web do lado do servidor devem usar o método ShowIn eRredirect.
showSignIn aceita as mesmas opções que o construtor de widgets. As opções passadas para o método substituirão as opções do construtor.
Nota: Consulte Configuração para obter mais informações sobre esses valores de configuração
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 ) ;
} ) ; Renderiza o widget para o DOM. Em autenticação bem -sucedida, o navegador será redirecionado para Okta com informações para iniciar uma nova sessão. Os servidores da Okta processarão as informações e depois redirecionarão de volta para redirectUri do seu aplicativo. Se for bem -sucedido, um código de interação existirá no URL como o parâmetro de consulta interaction_code . Se sem sucesso, haverá parâmetros de consulta error e error_description no URL. Seja bem -sucedido ou não, o parâmetro state que foi passado para o widget também será devolvido no redirecionamento. Isso pode ser usado pelo seu aplicativo da Web do lado do servidor para corresponder ao retorno de chamada com a sessão correta do usuário.
showSignInAndRedirect aceita as mesmas opções que o construtor de widgets. As opções passadas para o método substituirão as opções do construtor.
Nota: Consulte Configuração para obter mais informações sobre esses valores de configuração
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
} ) ;Esconda o widget, mas mantenha o widget no DOM.
signIn . hide ( ) ;Mostre o widget se oculto.
signIn . show ( ) ;Remova completamente o widget do DOM.
signIn . remove ( ) ;Inscreva -se em um evento publicado pelo widget.
event - evento para se inscrevercallback - Função para chamar quando o evento for acionado // Handle a 'ready' event using an onReady callback
signIn . on ( 'ready' , onReady ) ;Cancelar a inscrição em eventos de widget. Se nenhum retorno de chamada for fornecido, caça a todos os ouvintes do evento.
event - evento opcional para cancelar a inscriçãocallback - retorno de chamada opcional que foi usado para se inscrever no 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 ) ;Fornece acesso ao objeto [@OKTA/OKTA-AUTH-JS] [] usado pelo widget de inscrição. Todos os métodos estão documentados na referência da API.
O authClient é configurado usando valores passados para o widget, como clientId , issuer , redirectUri , state e scopes . As opções que não são suportadas diretamente pelo widget podem ser transmitidas para authjs usando o objeto authParams .
O authClient também pode ser criado e configurado fora do widget e transmitido para o widget como a opção authClient . Se uma opção authClient for aprovada, authParams será ignorado.
Nota: Consulte Configuração para obter mais informações sobre esses valores de configuração
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 Se nenhuma opção authClient estiver definida, uma instância será criada usando as opções passadas para o widget e authParams :
NOTA : Ao usar a opção de configuração
authClient, instale e use a mesma versão de@okta/okta-auth-jscomo a usada pelo widget instalado. Esta versão pode ser encontrada no arquivopackage.jsondo 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'Adiciona uma função de gancho assíncrona que será executada antes que uma exibição seja renderizada.
Nota: Consulte Configuração para obter mais informações sobre esses valores de configuração
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 função é suportada apenas ao usar o mecanismo de identidade OKTA
Adiciona uma função de gancho assíncrona que será executada após a renderização de uma exibição.
Nota: Consulte Configuração para obter mais informações sobre esses valores de configuração
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.
} ) ; Se você estiver usando a página de assinatura padrão de Okta, toda a configuração será tratada através da seção Customization da interface do usuário do administrador.
Se você estiver usando a página de assinatura personalizada de Okta, um objeto de configuração estará incluído na página que contém todos os valores necessários. Você provavelmente não precisará modificar esse objeto, mas pode usar esse objeto como ponto de partida e adicionar personalizações adicionais.
Para widgets incorporados, você deve definir o issuer , clientId e redirectUri . Por padrão, o widget será executado no mecanismo de identidade usando o fluxo do código de interação. O widget também pode ser executado contra o mecanismo clássico, definindo a opção UseclassicEngine como true . (Consulte este documento para obter mais detalhes sobre a execução no mecanismo clássico.
Todos os widgets incorporados devem definir estas opções básicas: issuer , clientId e redirectUri .
NOTA : Os widgets hospedados em OKTA não devem definir esses valores.
O URL do servidor de autorização que emitirá tokens OAuth para o seu aplicativo.
Nota :
https://{yourOktaDomain}pode ser qualquer organização da OKTA. Consulte nosso Guia do desenvolvedor para obter ajuda para encontrar seu domínio OKTA.
Configuração básica usando o servidor de autorização personalizado "padrão":
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}Um servidor de autorização personalizado diferente pode ser especificado:
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/custom' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} Alguns aplicativos, como aqueles que exigem acesso à API do usuário da OKTA, desejam usar o Okta Organization Authorization Server como emissor. Nesse caso, o issuer deve corresponder ao seu domínio OKTA:
var config = {
issuer : 'https://{yourOktaDomain}' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}NOTA : O Okta Organization Authorization Server destina -se apenas ao acesso à API do usuário da OKTA e não suporta todos os recursos do servidor de autorização personalizado padrão, como escopos personalizados nos tokens de acesso. Geralmente, é recomendável usar um servidor de autorização personalizado para garantir o acesso aos recursos da sua organização.
NOTA : Esse valor de configuração pode ser encontrado na interface do usuário do Okta Admin. Veja nosso Guia do desenvolvedor para obter ajuda para encontrar o cliente do seu aplicativo
ID do cliente do aplicativo.
Nota : Este valor de configuração pode ser encontrado na interface do usuário do Okta Admin, nas "configurações gerais" do aplicativo
O URI para usar para o retorno de chamada do OAuth.
Padrões para false . Por padrão, o widget usará o fluxo do código de interação no mecanismo de identidade. Definir a opção useClassicEngine como true fará com que o widget seja executado contra o mecanismo clássico. (Consulte este documento para obter mais detalhes sobre como configurar um widget em execução no mecanismo clássico).
Nota : Esta opção, juntamente com o suporte ao mecanismo clássico, será removida em uma versão futura do widget. Todos os clientes são incentivados a migrar do mecanismo clássico para o mecanismo de identidade. Visite a migração para o OIE para obter mais detalhes sobre a migração para o mecanismo de identidade.
O desafio do código PKCE. Os aplicativos de spa não precisarão dessa opção, pois o widget gerenciará toda a transação. Os aplicativos da Web devem gerar seu próprio desafio de código e segredo de código. O desafio do código é passado para o widget e o segredo do código é mantido no lado do servidor para obter tokens no retorno de chamada de login de redirecionamento.
Nota : Confira nossos aplicativos de amostra para obter exemplos completos de trabalho de fluxo de código de interação usando PKCE
Um valor fornecido pelo aplicativo que será retornado como um parâmetro de consulta durante o retorno de chamada de login de redirecionamento ou e-mail para verificar o retorno de chamada. Se nenhum valor for definido, um valor aleatório será criado. Ao lidar com um email, verifique o retorno de chamada, o valor do state do parâmetro de consulta deve ser transmitido para o widget como uma opção de configuração (junto com o OTP). Isso garantirá que o widget possa carregar e retomar a transação atual.
Ao lidar com um email, verifique o retorno de chamada, o valor do otp do parâmetro de consulta deve ser transmitido para o widget como uma opção de configuração (junto com o estado). Isso garantirá que o widget possa carregar e retomar a transação atual.
Padrões para ['openid', 'email'] . Especifique quais informações disponibilizar no id_token ou access_token retornado. Para o OIDC, você deve incluir openid como um dos escopos. Para uma lista de escopos disponíveis, consulte escopos e reivindicações.
Pedido de exibição para provedores de identidade externa em relação ao formulário de login OKTA. Padrões para SECONDARY .
PRIMARY botões IDP externos acima do formulário de login OKTASECONDARY - Exiba os botões IDP externos abaixo do formulário de login OKTACaminho local ou URL para uma imagem de logotipo exibida na parte superior do widget de assinatura
// Hosted on the same origin
logo: '/img/logo.png'
// Can also be a full url
logo: 'https://acme.com/img/logo.png' Texto para o atributo alt da imagem do logotipo, o texto do logotipo só será exibido quando a imagem do logotipo não estiver disponível
// Text to describe the logo
logoText: 'logo text' O nome da marca ou empresa que é exibido em mensagens renderizadas pelo widget de inscrição (por exemplo, "Redefina seu { brandName } senha"). Se nenhum brandName for fornecido, uma mensagem genérica será renderizada (por exemplo, "redefina sua senha"). Você pode personalizar ainda o texto exibido com configurações de linguagem e texto.
brandName: 'Spaghetti Inc.' Essas opções permitem personalizar a aparência do widget de inscrição.
Se você deseja ainda mais personalização, pode modificar os arquivos de origem SASS e criar o widget.
Define a cor da marca como a cor de fundo do botão CTA primário. As cores devem estar em formato hexadecimal, como #008000 .
colors: {
brand : '#008000'
}cs - tchecoda - dinamarquêsde - alemãoel - gregoen - inglêses - espanholfi - finlandêsfr - Francêshu - húngaroid - Indonésioit - italianoja - japonêsko - coreanoms - Malásianb - norueguêsnl-NL - holandêspl - Polonêspt-BR - Português (Brasil)ro - romenoru - russosv - suecoth - tailandêstr - turcouk - Ucranianozh-CN - Chinês (PRC)zh-TW - Chinês (Taiwan)O suporte a idiomas adicionais pode ser adicionado à opção ASTITS.LUDANDS.
Defina o idioma do widget. Se nenhum idioma for especificado, o widget escolherá um idioma com base nas preferências do navegador do usuário, se for suportado, ou os padrões para 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 ] ;
} Defina o código do país padrão do widget. Se não for fornecido defaultCountryCode , os padrões de US . Ele define o código de chamada do país para o número de telefone de acordo com o widget.
Substitua o texto no widget. A lista completa de propriedades pode ser encontrada nos arquivos Login.Properties and Country.Properties.
// The i18n object maps language codes to a hash of property keys ->
// property values.
i18n: {
// Overriding English properties
'en' : {
'primaryauth.title' : 'Sign in to Acme' ,
'primaryauth.username.placeholder' : 'Your Acme Username'
} ,
// Overriding Japanese properties
'ja' : {
'primaryauth.title' : 'ACMEにサインイン' ,
'primaryauth.username.placeholder' : 'ACMEのユーザー名'
}
}
// If you want to override any properties in the country.properties file,
// you will need to prefix the name with "country.":
i18n: {
'en' : {
// login.properties keys do not have a special prefix
'primaryAuth.title' : 'Sign in to Acme' ,
// country.properties keys are prefixed with 'country.'
'country.AF' : 'Afghanistan, edited' ,
'country.AL' : 'Albania, edited'
}
}Substitua o URL base O widget extrai seus arquivos de idioma. O widget é embalado apenas com texto em inglês por padrão e carrega outros idiomas sob demanda do OKTA CDN. Se você deseja servir os arquivos de idiomas de seus próprios servidores, atualize esta configuração.
// 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: Os arquivos JSON podem ser acessados na pasta
dist/labels/json, publicada no módulo NPM.
Especifique a lista de idiomas suportados que são hospedados e acessíveis no caminho {assets.baseUrl}/labels/json/ . Esta opção substitui a lista padrão de idiomas suportados. Se um idioma não suportado for solicitado (usando explicitamente a opção de idioma ou automaticamente por detecção do navegador), o idioma padrão ( en ) será usado.
Você pode usar esta função para reescrever o caminho do ativo e o nome do arquivo. Use esta função se você hospedar os arquivos de ativos em seu próprio host e planeje alterar o caminho ou o nome do arquivo dos ativos. Isso é útil, por exemplo, se você deseja cachebust os arquivos.
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 ) ;
}
}Defina a seguinte opção Config para substituir o URL de volta para entrar no link. Se não for fornecida, o widget navegará para a autenticação primária.
backToSignInLink: 'https://www.backtosignin.com'Nota: Para compatibilidade com versões anteriores do widget,
signOutLinké aceito como um alias parabackToSignInLink
Você pode adicionar um link de registro à página de autenticação primária, definindo as seguintes opções de configuração.
Função que é chamada quando o link de registro é clicado.
// 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' ;
}
} Defina as seguintes opções de configuração para substituir os URLs de ajuda na página de autenticação 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'
}
]
} Link personalizado href para o link "Ajuda"
Link personalizado HREF para o link "Esquecido senha"
Link personalizado HREF para o link "Desbloqueio da conta". Para que este link true exibido, features.selfServiceUnlock .
Matriz de objetos de link personalizados {text, href, target} que serão adicionados após o link "Ajuda". O target do link é opcional.
Defina as seguintes opções de configuração para personalizar o 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' ,
}
} , Defina as seguintes opções de configuração para personalizar reCAPTCHA Script URI:
// An example that uses recaptcha.net
recaptcha : {
scriptSource : 'https://recaptcha.net/recaptcha/api.js'
} ,Os retornos de chamada assíncronos podem ser invocados antes ou depois que uma visão específica for renderizada. Os ganchos podem ser usados para adicionar lógica personalizada, como instrumentação, log ou entrada adicional do usuário. A execução normal é bloqueada enquanto a função do gancho está executando e será retomada após a promessa retornada da função do gancho resolver. Os ganchos podem ser adicionados via configuração, como mostrado abaixo ou em tempo de execução usando os métodos antes ou depois. A lista completa de visualizações pode ser encontrada no 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 o nome de usuário antes de enviar solicitações com o nome de usuário para Okta. Isso é útil quando você tem um mapeamento interno entre o que o usuário entra e seu nome de usuário da 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' ;
}Funções de retorno de chamada podem ser fornecidas, que serão chamadas em momentos específicos no processo 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 ) ;
}
} , Retorno de chamada usado para alterar o esquema JSON que volta da 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 ) ;
} Retorno de chamada usado principalmente para modificar os parâmetros de solicitação enviados para a 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 ) ;
} Retorno de chamada usado para obter principalmente controle e modificar a API de envio do Pós -Registro de Comportamento à 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 ) ;
} Você pode adicionar botões personalizados abaixo do formulário de login na página de autenticação primária, definindo as seguintes opções de configuração. Se você quiser alterar o texto do divisor, use a opção de configuração 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' ;
}
} ] String que é definida como o texto do botão (defina apenas um do title ou i18nKey )
Chave de tradução personalizada para o texto do botão especificado na opção de configuração i18n (defina apenas um do title ou i18nKey )
Classe opcional que pode ser adicionada ao botão
Função que é chamada quando o botão é clicado
Ativar ou desativar a funcionalidade do widget com as seguintes opções.
features: {
showPasswordToggleOnSignInPage : true ,
hideSignOutLinkInMFA : false ,
rememberMe : true
} Padrões para true . Mostra o ícone do olho para alternar a visibilidade do usuário inserido senha na página de login okta. A senha está oculta por padrão, mesmo quando esse sinalizador está ativado. As senhas são visíveis por 30 segundos e depois ocultas automaticamente.
Padrões para true . Mostra o identificador do usuário em qualquer visualização com o contexto do usuário.
Padrões para false . Esconde o link "de volta para entrar" para a inscrição do autenticador e os fluxos de desafio.
Padrões para true . Preenche o campo de identificador com o nome de usuário usado anteriormente.
Padrões para true . Concentra automaticamente o primeiro campo de entrada de qualquer formulário quando exibido.
Padrões para false . Define o atributo de preenchimento automático nos campos de entrada para off .
O widget injeta blocos de script/estilo embutidos em tempo de execução para fins de personalização, mas esses blocos podem violar as regras do CSP que definidas na página da web hospedada.
cspNonce permite definir o valor do NONCE do cabeçalho Content-Security-Policy para os blocos injetados; portanto, o script/estilo desses blocos ainda pode ser executável.
NOTA: A Diretiva Nonce foi adicionada ao CSP Level2, você ainda pode ver erros de CSP no console do navegador se for usado em navegadores não suportados.
Eventos publicados pelo widget. Inscreva -se nesses eventos usando em.
Acionado quando o widget estiver pronto para aceitar a entrada do usuário pela primeira vez. Retorna um objeto context que contém as seguintes propriedades:
signIn . on ( 'ready' , function ( context ) {
// The Widget is ready for user input
} ) ; O widget lidará com a maioria dos tipos de erros - por exemplo, se o usuário inserir uma senha inválida ou houver problemas autenticando. Para capturar um erro de mudança de estado de autenticação depois de ser tratado e renderizado pelo widget, ouça o evento afterError . Você também pode capturar erros de OAuth e registro. Para outros tipos de erro, ele é incentivado a lidar com eles usando o manipulador de erros renderEl .
Retorna objetos context e error que contêm as seguintes propriedades:
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
} ) ; Triggered when the widget transitions to a new page and animations have finished. Returns a context object containing the following properties:
// 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!
| Comando | Descrição |
|---|---|
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.
