okta signin widget
7.25.1
Widget masuk OKTA adalah widget JavaScript yang menyediakan pengalaman login yang sepenuhnya ditampilkan dan dapat disesuaikan yang dapat digunakan untuk mengotentikasi dan mendaftarkan pengguna di aplikasi web dan seluler.
Widget digunakan pada halaman SignIn Default Okta untuk memulai sesi OKTA SSO dan mengatur cookie sesi OKTA di browser web. Ini juga dapat melakukan aliran OIDC untuk dengan mudah mengintegrasikan aplikasi web atau seluler Anda ke dalam platform OKTA.
Halaman SignIn yang diselenggarakan OKTA khusus dapat dikonfigurasi untuk menggunakan nama domain dan branding organisasi Anda.
Widget juga dapat disematkan langsung ke dalam aplikasi web atau seluler organisasi Anda untuk pengalaman pengguna yang mulus.
Lihat Panduan Penggunaan untuk informasi lebih lanjut tentang cara memulai menggunakan widget masuk.
yarn linkOKTA Identity Engine (OIE) adalah layanan platform yang memungkinkan perusahaan untuk membangun pengalaman akses yang lebih fleksibel yang disesuaikan dengan kebutuhan organisasi mereka. Widget masuk OKTA mendukung OIE di semua skenario penggunaan.
Catatan : Kecuali dinyatakan lain, readme ini mengasumsikan Anda menggunakan mesin identitas. Informasi tentang penggunaan widget dengan mesin klasik dapat ditemukan dalam dokumen ini
Widget masuk mandiri dan tidak memerlukan kerangka kerja lain saat runtime. Namun, mungkin ada fitur tertentu kebutuhan aplikasi Anda seperti penyimpanan token, pembaruan, atau validasi, yang tidak disediakan widget.
SDK ini sepenuhnya kompatibel dengan widget masuk OKTA dan memberikan utilitas untuk membantu mengintegrasikan otentikasi OKTA ujung ke ujung dalam aplikasi Anda sendiri.
Aplikasi sampel lengkap menunjukkan penggunaan widget masuk OKTA dalam skenario OKTA-host dan tertanam.
Ada beberapa cara untuk menggunakan widget masuk OKTA:
OKTA menyediakan halaman masuk default untuk organisasi Anda, di-host di URL OKTA organisasi Anda.
OKTA mendukung opsi untuk membuat domain khusus dengan halaman masuk OKTA yang sangat disesuaikan.
Anda dapat menyematkan widget langsung ke aplikasi Anda.
OKTA menyediakan halaman masuk, tersedia di URL organisasi Anda, yang memungkinkan pengguna untuk menyelesaikan seluruh aliran otorisasi, memulai sesi SSO (Sign-On), dan mengatur cookie sesi Okta di browser web. Anda dapat menyesuaikan halaman ini dengan gambar dan logo latar belakang. Secara default, masuk pada halaman ini mengarahkan pengguna ke dasbor pengguna OKTA.
Halaman masuk default OKTA-hosting juga dapat mengotentikasi pengguna dalam aplikasi OIDC. Aplikasi Anda dapat mengarahkan kembali ke halaman masuk untuk melakukan aliran otentikasi, setelah itu Okta mengarahkan kembali pengguna kembali ke panggilan balik aplikasi. OKTA menyediakan SDK dalam banyak bahasa untuk membantu membangun URL pengalihan dan menangani panggilan balik login sebagai bagian dari aliran yang di -host.
OKTA menyediakan beberapa aplikasi sampel lengkap yang menunjukkan cara menggunakan aliran yang di -host OKTA.
Okta juga menyediakan halaman masuk yang di-host yang dapat disesuaikan sehingga tersedia di bawah domain khusus yang merupakan subdomain dari domain tingkat atas perusahaan Anda. Meskipun halaman ini di -host oleh Okta, Anda dapat menyesuaikan template halaman ini dengan banyak cara yang kuat.
Sejauh menyangkut aplikasi Anda, widget yang disesuaikan berperilaku sama dengan widget OKTA-host default dan Anda dapat menggunakan aliran host yang sama.
Catatan: Akan ada objek konfigurasi pada halaman yang berisi semua nilai yang diperlukan dan fitur yang diaktifkan. Anda kemungkinan besar tidak perlu memodifikasi objek ini. Jika Anda menemukan bahwa Anda perlu memodifikasi konfigurasi ini, berhati -hatilah agar tidak menimpa atau menghapus nilai yang diperlukan.
Untuk pengalaman yang benar-benar mulus yang memungkinkan tingkat kustomisasi tertinggi, Anda dapat menanamkan widget masuk langsung ke aplikasi Anda. Ini memungkinkan penggunaan penuh konfigurasi dan API widget.
Menggunakan widget tertanam, web sisi klien dan aplikasi asli dapat menghindari pengalihan perjalanan bundar dari aliran yang di-host dalam banyak kasus. Lihat Showsignin.
Aplikasi web sisi server akan menerima sisi server OAuth Tokens, sehingga mereka harus menangani panggilan balik pengalihan . Aplikasi ini harus menggunakan showigninAndredirect.
Anda dapat menyematkan widget masuk di aplikasi Anda dengan memasukkan tag skrip yang menarik widget dari OKTA CDN atau menggabungkan modul NPM ke dalam aplikasi Anda.
Memuat aset kami langsung dari CDN adalah pilihan yang baik jika Anda ingin cara mudah untuk memulai dengan widget, belum memiliki proses pembuatan yang ada yang memanfaatkan NPM atau benang untuk dependensi eksternal, atau alasan lain di mana Anda tidak melakukannya T ingin menggabungkan widget masuk ke dalam aplikasi Anda.
Bundel standar ( okta-sign-in.min.js ) mencakup dukungan untuk mesin klasik dan mesin identitas. Ini juga termasuk polyfill untuk memastikan kompatibilitas dengan browser yang lebih tua seperti IE11. Jika aplikasi Anda tidak perlu mendukung IE11, Anda dapat menyertakan bundel no-polyfill sebagai gantinya untuk mengurangi waktu pemuatan untuk pengguna pertama kali. Bundel polyfill mandiri dapat dimasukkan secara kondisional pada halaman untuk menambahkan dukungan untuk browser yang lebih lama hanya jika diperlukan.
Jika organisasi Anda telah ditingkatkan ke mesin identitas, bundel oie yang lebih kecil dapat digunakan.
| Bundel | Nama file | Kira -kira. Ukuran | Mesin klasik | Mesin identitas | Polyfill | Catatan |
|---|---|---|---|---|---|---|
| standar | Okta-Sign-in.min.js | 1,7 MB | ✅ | ✅ | ✅ | Bundel standar yang mencakup segalanya |
| No-Polyfill | Okta-Sign-in.no-Polyfill.min.js | 1,7 MB | ✅ | ✅ | Bundel standar tanpa Polyfill | |
| oie | Okta-Sign-in.oie.min.js | 1.3 MB | ✅ | Bundel yang lebih kecil untuk org yang diaktifkan OIE | ||
| klasik | Okta-sign-in.classic.min.js | 1.1 MB | ✅ | Bundel yang lebih kecil hanya untuk mesin klasik | ||
| Polyfill | Okta-Sign-in.polyfill.min.js | 108kb | ✅ | Bundel Polyfill mandiri. Dapat digunakan bersama dengan bundel widget yang tidak termasuk polyfill. |
Untuk menyematkan widget masuk melalui CDN, sertakan tautan ke file JS dan CSS di HTML Anda:
<!-- 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 " />Catatan: URL CDN berisi nomor versi. Nomor ini harus sama untuk file JavaScript dan CSS dan mencocokkan versi pada halaman rilis. Kami merekomendasikan menggunakan versi widget terbaru.
Saat menggunakan salah satu bundel tanpa termasuk Polyfill, Anda mungkin ingin memuat bundel Polyfill mandiri secara kondisional. Polyfill harus dimuat sebelum bundel 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 " />Menggunakan modul NPM kami adalah pilihan yang baik jika:
Untuk menginstal @okta/okta-sinyal-widget:
# Run this command in your project root folder
# yarn
yarn add @okta/okta-signin-widget
# npm
npm install @okta/okta-signin-widget --save Ini menginstal versi terbaru dari widget masuk ke direktori node_modules proyek Anda.
Catatan: Jika Anda menggunakan TypeScript, Anda harus mengaktifkan impor sintetis di tsconfig.json Anda.
{
...
"compilerOptions" : {
"allowSyntheticDefaultImports" : true ,
...
}
} Proyek Angular (TypeScript) memerlukan konfigurasi serampangan, juga di tsconfig.json Anda
{
...
"angularCompilerOptions" : {
"allowSyntheticDefaultImports" : true ,
...
}
} File dan aset sumber widget diinstal ke node_modules/@okta/okta-signin-widget/dist , dan memiliki struktur direktori ini:
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/Setelah menginstal:
Salin aset ke folder yang akan didistribusikan ke situs yang Anda hosting secara publik. Folder yang perlu Anda salin adalah css , font , img , js dan labels .
Alih-alih menyalin direktori js dan memasukkannya di halaman Anda sebagai global, Anda dapat memerlukan widget masuk dalam build Anda jika Anda menggunakan webpack, browserify, atau sistem bundling modul lain yang memahami format node_modules .
// Load the Sign-In Widget module
var OktaSignIn = require ( '@okta/okta-signin-widget' ) ;
// Use OktaSignIn
var signIn = new OktaSignIn ( /* configOptions */ ) ;Peta sumber disediakan sebagai file .map eksternal. Jika Anda menggunakan Webpack, ini dapat dimuat menggunakan plugin Source-Map-Loader.
Jika Anda ingin memasukkan gaya widget dalam bundel menggunakan style-loader atau mini-CSS-ekstrak-plugin, gunakan impor berikut:
import '@okta/okta-signin-widget/css/okta-sign-in.min.css' ; Catatan: Jika Anda menggunakan Browserify untuk menggabungkan aplikasi Anda, Anda harus menggunakan opsi --noparse :
browserify main.js
--noparse= $PWD /node_modules/@okta/okta-signin-widget/dist/js-okta-sign-in.entry.js
--outfile=bundle.jsPastikan Anda menyertakan polyfill ES6 dengan bundler Anda jika Anda perlu mendukung IE11. Widget menyediakan semua polyfill yang dibutuhkan melalui ekspor:
const polyfill = require('@okta/okta-signin-widget/polyfill');
atau
import polyfill from '@okta/okta-signin-widget/polyfill';
Contoh-contoh sederhana ini akan membantu Anda memulai dengan menggunakan widget masuk. Untuk solusi ujung ke ujung lengkap, lihat aplikasi sampel kami.
Aplikasi satu halaman (SPA) berjalan sepenuhnya di browser. Aplikasi SPA mengautentikasi menggunakan aliran sisi klien dan menyimpan token oauth di penyimpanan berbasis browser.
Catatan: Lihat Konfigurasi untuk informasi lebih lanjut tentang nilai konfigurasi ini
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
} ) ; Aplikasi Web berjalan terutama di server. Widget, yang mengeksekusi sisi klien, akan tertanam ke dalam halaman HTML yang menyertakan blok skrip yang mengkonfigurasi dan membuat widget. OAuth Tokens akan diterima di sisi server pada panggilan balik pengalihan login aplikasi.
Catatan: Lihat Konfigurasi untuk informasi lebih lanjut tentang nilai konfigurasi ini
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
} ) ; Selain aliran otentikasi default, widget mendukung beberapa aliran yang telah ditentukan, yang memungkinkan Anda untuk menyediakan halaman HTML tujuan tunggal untuk beberapa kasus penggunaan umum.
Secara default, widget masuk OKTA akan melanjutkan dengan aliran saat ini atau memulai aliran otentikasi baru. Opsi flow memungkinkan bootstrap widget ke dalam tampilan tertentu seperti register, buka kunci, atau reset kata sandi. Aliran yang Didukung:
Catatan: Aliran tertentu hanya dapat berfungsi jika admin telah mengonfigurasi org untuk memungkinkan operasi yang diperlukan (Contoh: Jika pendaftaran profil (pendaftaran pengguna) di konsol admin tidak diaktifkan, bootstrap widget dengan
flow: 'signup'akan menghasilkan kesalahan)
// 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'
} ) ; Panggilan balik pengalihan terjadi ketika aplikasi Anda dimuat ulang di browser sebagai bagian dari aliran. Selama panggilan balik pengalihan, aplikasi dimuat pada jalur URL tertentu yang telah Anda tentukan dalam konfigurasi aplikasi OKTA Anda. Sebagian besar panggilan balik hanya dapat ditangani sekali dan akan menghasilkan kesalahan jika ada upaya untuk menanganinya dua kali. Biasanya, aplikasi ini akan mengarahkan diri ke jalur URL yang terkenal atau sebelumnya disimpan setelah logika panggilan balik telah ditangani untuk menghindari kesalahan pada muat ulang halaman.
Catatan: Sebagian besar aplikasi harus disiapkan untuk menangani satu atau lebih panggilan balik pengalihan. Bergantung pada bagaimana kebijakan masuk aplikasi dikonfigurasi, beberapa aplikasi SPA mungkin dapat menerima token tanpa pengalihan. Namun, logika perlu ditambahkan jika kebijakan tersebut mencakup masuk dengan penyedia sosial / IDP atau memungkinkan otentikasi atau pemulihan akun menggunakan verifikasi email.
Callback OAuth adalah langkah terakhir dari aliran kode interaksi. Pada otentikasi yang berhasil, browser diarahkan ke OKTA dengan informasi untuk memulai sesi baru. Server Okta memproses informasi dan kemudian mengalihkan kembali ke redirectUri aplikasi Anda. Jika berhasil, kode interaksi ada dalam URL sebagai parameter kueri interaction_code . Jika tidak berhasil, ada parameter kueri error dan error_description di URL. Apakah berhasil atau tidak, parameter state , yang awalnya diteruskan ke widget oleh aplikasi Anda, juga akan dikembalikan pada pengalihan. Ini dapat digunakan oleh aplikasi web sisi server agar sesuai dengan panggilan balik dengan sesi pengguna yang benar.
Semua aplikasi web akan menangani panggilan balik oAuth . Untuk aplikasi SPA, dalam banyak kasus kebijakan masuk tidak akan memerlukan pengalihan dan aplikasi ini dapat menerima token langsung dari showignin. Namun, jika kebijakan masuk memerlukan pengalihan karena alasan apa pun (seperti integrasi dengan penyedia sosial / penyedia IDP) aplikasi SPA perlu menangani panggilan balik oAuth. Untuk alasan ini, kami merekomendasikan bahwa semua aplikasi spa harus siap untuk menangani panggilan balik oAuth .
Catatan: Widget tidak menangani panggilan balik oAuth secara langsung. Aplikasi web sisi server dapat menggunakan salah satu SDK kami untuk membantu menangani panggilan balik. Aplikasi SPA dapat menggunakan OKTA-Auth-JS SDK, yang disertakan dengan widget masuk sebagai properti
authClient.
Aplikasi SPA dapat menangani sisi klien Callback OAuth menggunakan authClient bawaan:
// https://myapp.mycompany.com/login/callback?interaction_code=ABC&state=XYZ
if ( signIn . authClient . isLoginRedirect ( ) ) {
await signIn . authClient . handleLoginRedirect ( ) ;
} Setelah masuk dengan IDP pihak ke -3, pengguna diarahkan kembali ke redirectUri aplikasi. Jika tidak diperlukan input lebih lanjut dari pengguna, maka ini akan menjadi panggilan balik oAuth yang berisi parameter interaction_code . Jika diperlukan input lebih lanjut, maka panggilan balik akan berisi parameter error dengan nilai interaction_required . Dalam hal ini, widget masuk harus dimuat lagi sehingga aliran dapat berlanjut.
Baik aplikasi web dan spa sisi server harus mencari parameter kueri error dan, jika nilainya interaction_required , mereka harus membuat widget lagi menggunakan konfigurasi yang sama dengan render pertama. Parameter state juga akan diteruskan pada panggilan balik yang dapat digunakan untuk mencocokkan permintaan dengan sesi aplikasi pengguna. Widget akan secara otomatis dilanjutkan dengan transaksi.
Aplikasi Anda perlu mengimplementasikan email verifikasi panggilan balik jika kebijakan masuk Anda menggunakan tautan ajaib email/OTP. Setelah pengguna mengklik tautan dalam email, mereka dialihkan kembali ke email verify callback URI . Parameter kueri yang diteruskan ke aplikasi termasuk state dan otp . Seperti halnya callback sosial/IDP, widget harus diterjemahkan kembali menggunakan konfigurasi yang sama. Selain itu, otp harus diteruskan ke konstruktor widget.
Catatan: Lihat Konfigurasi untuk informasi lebih lanjut tentang nilai konfigurasi ini
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}}'
}
) ; Membuat instance baru dari widget masuk dengan opsi yang disediakan.
Untuk aplikasi menggunakan widget yang disesuaikan dengan OKTA-host, akan ada objek konfigurasi pada halaman yang berisi semua nilai yang diperlukan. Anda kemungkinan besar tidak perlu memodifikasi objek ini.
Untuk aplikasi menggunakan widget tertanam, Anda harus memberikan konfigurasi OIDC:
Catatan: Lihat Konfigurasi untuk informasi lebih lanjut tentang nilai konfigurasi ini
var signIn = new OktaSignIn (
{
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}
) ;Membuat widget ke DOM. Pada keberhasilan, janji itu diselesaikan. Pada kesalahan, janji itu menolak. Jika kebijakan masuk memerlukan pengalihan ke OKTA atau penyedia identitas lain (IDP), browser akan mengarahkan ulang dan janji tidak akan diselesaikan. Tanggapan dan kesalahannya sama dengan yang untuk Renderel.
Catatan : Ini adalah cara yang disarankan untuk membuat widget untuk aplikasi spa. Aplikasi web sisi server harus menggunakan metode showigninAndRedirect sebagai gantinya.
showSignIn menerima opsi yang sama dengan konstruktor widget. Opsi yang diteruskan ke metode ini akan mengganti opsi dari konstruktor.
Catatan: Lihat Konfigurasi untuk informasi lebih lanjut tentang nilai konfigurasi ini
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 ) ;
} ) ; Membuat widget ke DOM. Pada otentikasi yang berhasil, browser akan diarahkan ke OKTA dengan informasi untuk memulai sesi baru. Server Okta akan memproses informasi dan kemudian mengalihkan kembali ke redirectUri aplikasi Anda. Jika berhasil, kode interaksi akan ada di URL sebagai parameter kueri interaction_code . Jika tidak berhasil, akan ada error dan parameter kueri error_description di URL. Apakah berhasil atau tidak, parameter state yang diteruskan ke widget juga akan dikembalikan pada pengalihan. Ini dapat digunakan oleh aplikasi web sisi server Anda agar sesuai dengan panggilan balik dengan sesi pengguna yang benar.
showSignInAndRedirect menerima opsi yang sama dengan konstruktor widget. Opsi yang diteruskan ke metode ini akan mengganti opsi dari konstruktor.
Catatan: Lihat Konfigurasi untuk informasi lebih lanjut tentang nilai konfigurasi ini
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
} ) ;Sembunyikan widget, tetapi simpan widget di DOM.
signIn . hide ( ) ;Tunjukkan widget jika disembunyikan.
signIn . show ( ) ;Lepaskan widget dari dom sepenuhnya.
signIn . remove ( ) ;Berlangganan acara yang diterbitkan oleh widget.
event - Acara untuk Berlangganancallback - Fungsi untuk menelepon saat acara dipicu // Handle a 'ready' event using an onReady callback
signIn . on ( 'ready' , onReady ) ;Berhenti berlangganan dari acara widget. Jika tidak ada panggilan balik disediakan, berhenti berlangganan semua pendengar dari acara tersebut.
event - Acara opsional untuk berhenti berlangganancallback - Callback opsional yang digunakan untuk berlangganan acara tersebut // 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 ) ;Memberikan akses ke objek yang mendasari [@okta/okta-auth-js] [] yang digunakan oleh widget masuk. Semua metode didokumentasikan dalam referensi API.
authClient dikonfigurasi menggunakan nilai yang diteruskan ke widget, seperti clientId , issuer , redirectUri , state , dan scopes . Opsi yang tidak didukung secara langsung oleh widget dapat diteruskan ke AuthJ menggunakan objek authParams .
authClient juga dapat dibuat dan dikonfigurasi di luar widget dan diteruskan ke widget sebagai opsi authClient . Jika opsi authClient dilewatkan, authParams akan diabaikan.
Catatan: Lihat Konfigurasi untuk informasi lebih lanjut tentang nilai konfigurasi ini
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 Jika tidak ada opsi authClient yang diatur, instance akan dibuat menggunakan opsi yang diteruskan ke widget dan authParams :
Catatan : Saat menggunakan opsi konfigurasi
authClient, pastikan untuk menginstal dan menggunakan versi yang sama dari@okta/okta-auth-jsseperti yang digunakan oleh widget yang diinstal. Versi ini dapat ditemukan di filepackage.jsondari widget yang diinstal.
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'Menambahkan fungsi kait asinkron yang akan dieksekusi sebelum tampilan diberikan.
Catatan: Lihat Konfigurasi untuk informasi lebih lanjut tentang nilai konfigurasi ini
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.
} ) ;Catatan : Fungsi ini hanya didukung saat menggunakan mesin identitas Okta
Menambahkan fungsi kait asinkron yang akan dieksekusi setelah tampilan diberikan.
Catatan: Lihat Konfigurasi untuk informasi lebih lanjut tentang nilai konfigurasi ini
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.
} ) ; Jika Anda menggunakan halaman SignIn Default OKTA-hosting, semua konfigurasi ditangani melalui bagian Customization UI Admin.
Jika Anda menggunakan halaman SignIn yang diselenggarakan OKTA khusus, objek konfigurasi disertakan pada halaman yang berisi semua nilai yang diperlukan. Anda mungkin tidak perlu memodifikasi objek ini, tetapi Anda dapat menggunakan objek ini sebagai titik awal dan menambahkan kustomisasi tambahan.
Untuk widget tertanam, Anda harus mengatur issuer , clientId , dan redirectUri . Secara default, widget akan berjalan pada mesin identitas menggunakan aliran kode interaksi. Widget juga dapat berjalan melawan mesin klasik dengan mengatur opsi useclassicengine menjadi true . (Lihat dokumen ini untuk detail lebih lanjut tentang berjalan di mesin klasik.
Semua widget tertanam harus mengatur opsi dasar ini: issuer , clientId , dan redirectUri .
Catatan : Widget yang di-host OKTA tidak boleh mengatur nilai-nilai ini.
URL dari server otorisasi yang akan mengeluarkan token oAuth untuk aplikasi Anda.
Catatan :
https://{yourOktaDomain}dapat berupa organisasi OKTA. Lihat Panduan Pengembang kami untuk bantuan menemukan domain Okta Anda.
Konfigurasi Dasar Menggunakan Server Otorisasi Kustom "Default":
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}Server otorisasi kustom yang berbeda dapat ditentukan:
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/custom' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} Beberapa aplikasi, seperti yang memerlukan akses ke API pengguna OKTA, akan ingin menggunakan server otorisasi organisasi Okta sebagai penerbit. Dalam hal ini issuer harus cocok dengan domain OKTA Anda:
var config = {
issuer : 'https://{yourOktaDomain}' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}Catatan : Server Otorisasi Organisasi OKTA hanya dimaksudkan untuk akses ke API pengguna OKTA dan tidak mendukung semua fitur server otorisasi kustom standar, seperti lingkup khusus pada token akses. Secara umum disarankan untuk menggunakan server otorisasi khusus untuk mengamankan akses ke sumber daya organisasi Anda.
Catatan : Nilai konfigurasi ini dapat ditemukan di UI admin okta. Lihat Panduan Pengembang kami untuk bantuan menemukan klien aplikasi Anda
ID klien aplikasi.
Catatan : Nilai konfigurasi ini dapat ditemukan di UI admin okta di bawah "Pengaturan Umum" aplikasi
URI untuk digunakan untuk panggilan balik oAuth.
Default ke false . Secara default, widget akan menggunakan aliran kode interaksi pada mesin identitas. Mengatur opsi useClassicEngine ke true akan menyebabkan widget berlari melawan mesin klasik sebagai gantinya. (Lihat dokumen ini untuk detail lebih lanjut tentang mengonfigurasi widget yang berjalan di mesin klasik).
Catatan : Opsi ini, bersama dengan dukungan untuk mesin klasik, akan dihapus dalam versi widget mendatang. Semua pelanggan didorong untuk bermigrasi dari mesin klasik ke mesin identitas. Kunjungi Migrasi ke OIE untuk detail lebih lanjut tentang Migrasi ke Mesin Identitas.
Tantangan Kode PKCE. Aplikasi SPA tidak akan memerlukan opsi ini karena widget akan mengelola seluruh transaksi. Aplikasi web harus menghasilkan tantangan kode dan rahasia kode mereka sendiri. Tantangan kode diteruskan ke widget, dan rahasia kode diadakan di sisi server untuk mendapatkan token pada panggilan balik login pengalihan.
Catatan : Lihat aplikasi sampel kami untuk contoh kerja lengkap aliran kode interaksi menggunakan PKCE
Nilai yang disediakan aplikasi yang akan dikembalikan sebagai parameter kueri selama panggilan balik login pengalihan atau email verifikasi panggilan balik. Jika tidak ada nilai yang ditetapkan, maka nilai acak akan dibuat. Saat menangani email verifikasi panggilan balik, nilai state dari parameter kueri harus diteruskan ke widget sebagai opsi konfigurasi (bersama dengan OTP). Ini akan memastikan bahwa widget dapat memuat dan melanjutkan transaksi saat ini.
Saat menangani email, verifikasi panggilan balik, nilai otp dari parameter kueri harus diteruskan ke widget sebagai opsi konfigurasi (bersama dengan status). Ini akan memastikan bahwa widget dapat memuat dan melanjutkan transaksi saat ini.
Default ke ['openid', 'email'] . Tentukan informasi apa yang tersedia di id_token atau access_token yang dikembalikan. Untuk OIDC, Anda harus menyertakan openid sebagai salah satu lingkup. Untuk daftar lingkup yang tersedia, lihat lingkup dan klaim.
Pesanan tampilan untuk penyedia identitas eksternal relatif terhadap formulir login Okta. Default ke SECONDARY .
PRIMARY - Tampilkan tombol IDP Eksternal di atas formulir login OktaSECONDARY - Tampilkan tombol IDP Eksternal di bawah formulir login OktaJalur atau URL lokal ke gambar logo yang ditampilkan di bagian atas widget masuk
// Hosted on the same origin
logo: '/img/logo.png'
// Can also be a full url
logo: 'https://acme.com/img/logo.png' Teks untuk atribut alt gambar logo, teks logo hanya akan muncul saat gambar logo tidak tersedia
// Text to describe the logo
logoText: 'logo text' Nama merek atau perusahaan yang ditampilkan dalam pesan yang diberikan oleh widget masuk (misalnya, "Atur Ulang { brandName } Kata Sandi Anda"). Jika tidak ada brandName yang disediakan, pesan generik diberikan sebagai gantinya (misalnya, "Atur Ulang Kata Sandi Anda"). Anda dapat lebih lanjut menyesuaikan teks yang ditampilkan dengan pengaturan bahasa dan teks.
brandName: 'Spaghetti Inc.' Opsi-opsi ini memungkinkan Anda menyesuaikan tampilan widget masuk.
Jika Anda ingin lebih banyak kustomisasi, Anda dapat memodifikasi file sumber SASS dan membangun widget.
Mengatur warna merek sebagai warna latar belakang tombol CTA utama. Warna harus dalam format hex, seperti #008000 .
colors: {
brand : '#008000'
}cs - Cekoda - Denmarkde - Jermanel - Yunanien - Bahasa Inggrises - Spanyolfi - Finlandiafr - Prancishu - Hongariaid - Indonesiait - Italiaja - Jepangko - Koreams - Malaysianb - Norwegianl-NL - Belandapl - Polandiapt-BR - Portugis (Brasil)ro - Rumaniaru - Rusiasv - Swediath - Thailandtr - Turkiuk - Ukrainazh-CN - Cina (RRC)zh-TW - Cina (Taiwan)Dukungan untuk bahasa tambahan dapat ditambahkan dengan opsi Aset. Bahasa.
Atur bahasa widget. Jika tidak ada bahasa yang ditentukan, widget akan memilih bahasa berdasarkan preferensi browser pengguna jika didukung, atau default ke 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 ] ;
} Atur kode negara default widget. Jika tidak ada defaultCountryCode yang disediakan, default kepada US . Ini menetapkan kode panggilan negara untuk nomor telepon yang sesuai di widget.
Mengamati teks di widget. Daftar lengkap properti dapat ditemukan di file login.properties dan 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'
}
}Mengamati URL dasar widget menarik file bahasanya dari. Widget hanya dikemas dengan teks bahasa Inggris secara default, dan memuat bahasa lain sesuai permintaan dari OKTA CDN. Jika Anda ingin melayani file bahasa dari server Anda sendiri, perbarui pengaturan ini.
// 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'
}Catatan: File JSON dapat diakses dari folder
dist/labels/jsonyang diterbitkan dalam modul NPM.
Tentukan daftar bahasa yang didukung yang di -host dan dapat diakses di bawah path {assets.baseUrl}/labels/json/ . Opsi ini menggantikan daftar default bahasa yang didukung. Jika bahasa yang tidak didukung diminta (secara eksplisit menggunakan opsi bahasa atau secara otomatis oleh deteksi browser), bahasa default ( en ) akan digunakan.
Anda dapat menggunakan fungsi ini untuk menulis ulang jalur aset dan nama file. Gunakan fungsi ini jika Anda akan meng -host file aset di host Anda sendiri, dan berencana untuk mengubah jalur atau nama file aset. Ini berguna, misalnya, jika Anda ingin menempel file.
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 ) ;
}
}Atur opsi konfigurasi berikut untuk mengganti URL Link Back to masuk. Jika tidak disediakan, widget akan menavigasi ke auth primer.
backToSignInLink: 'https://www.backtosignin.com'Catatan: Untuk kompatibilitas dengan versi widget sebelumnya,
signOutLinkditerima sebagai alias untukbackToSignInLink
Anda dapat menambahkan tautan pendaftaran ke halaman auth utama dengan mengatur opsi konfigurasi berikut.
Fungsi yang disebut saat tautan pendaftaran diklik.
// 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' ;
}
} Atur opsi konfigurasi berikut untuk mengganti URL tautan bantuan pada halaman Auth Utama.
// 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'
}
]
} Tautan khusus href untuk tautan "bantuan"
Tautan khusus href untuk tautan "lupa kata sandi"
Tautan khusus href untuk tautan "buka kunci akun". Agar tautan ini dapat ditampilkan, features.selfServiceUnlock harus diatur ke true , dan fitur Layanan Buka Kunci harus diaktifkan dalam pengaturan admin Anda.
Array objek tautan khusus {text, href, target} yang akan ditambahkan setelah tautan "bantuan". target tautan adalah opsional.
Atur opsi konfigurasi berikut untuk menyesuaikan skrip 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' ,
}
} , Atur opsi konfigurasi berikut untuk menyesuaikan skrip reCAPTCHA URI:
// An example that uses recaptcha.net
recaptcha : {
scriptSource : 'https://recaptcha.net/recaptcha/api.js'
} ,Panggilan balik asinkron dapat dipanggil sebelum atau setelah tampilan tertentu diberikan. Pengait dapat digunakan untuk menambahkan logika khusus seperti instrumentasi, pencatatan, atau input pengguna tambahan. Eksekusi normal diblokir saat fungsi kait dieksekusi dan akan dilanjutkan setelah janji dikembalikan dari fungsi kait diselesaikan. Kait dapat ditambahkan melalui konfigurasi, seperti yang ditunjukkan di bawah ini, atau saat runtime menggunakan metode sebelum atau sesudah. Daftar lengkap tampilan dapat ditemukan di 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
} ) ;Mengubah nama pengguna sebelum mengirim permintaan dengan nama pengguna ke Okta. Ini berguna ketika Anda memiliki pemetaan internal antara apa yang dimasukkan pengguna dan nama pengguna OKTA mereka.
// 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' ;
}Fungsi panggilan balik dapat disediakan yang akan dipanggil pada saat -saat tertentu dalam proses pendaftaran.
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 ) ;
}
} , Callback digunakan untuk mengubah skema JSON yang kembali dari OKTA API.
parseSchema: ( schema , onSuccess ) => {
// This example will add an additional field to the registration form.
schema . push (
{
'name' : 'userProfile.address' ,
'type' : 'text' ,
'placeholder' : 'Enter your street address' ,
'maxLength' : 255 ,
'label-top' : true ,
'label' : 'Street Address' ,
'required' : true ,
}
) ;
onSuccess ( schema ) ;
} Callback digunakan terutama untuk memodifikasi parameter permintaan yang dikirim ke OKTA API.
preSubmit: ( postData , onSuccess ) => {
// This example will append the domain name to the email address if the user forgets to add it during registration.
if ( ! postData . userProfile . email . includes ( '@acme.com' ) ) {
postData . userProfile . email += '@acme.com' ;
}
}
onSuccess ( postData ) ;
} Callback digunakan terutama untuk mendapatkan kontrol dan untuk memodifikasi pengajuan perilaku pos ke API pendaftaran.
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 ) ;
} Anda dapat menambahkan tombol khusus di bawah formulir login pada halaman auth utama dengan mengatur opsi konfigurasi berikut. Jika Anda ingin mengubah teks pembagi, gunakan opsi i18n Config.
// An example that adds a custom button below the login form on the Sign in form
customButtons: [ {
title : 'Click Me' ,
className : 'btn-customAuth' ,
click : ( ) => {
// clicking on the button navigates to another page
window . location . href = 'https://www.example.com' ;
}
} ]
// An example that adds a custom button with a localized title below the Sign in form
i18n: {
en : {
'customButton.title' : 'Custom Button Title' ,
} ,
} ,
customButtons : [ {
i18nKey : 'customButton.title' ,
className : 'btn-customAuth' ,
click : ( ) => {
// clicking on the button navigates to another page
window . location . href = 'https://www.example.com' ;
}
} ] String yang diatur sebagai teks tombol (atur hanya satu title atau i18nKey )
Kunci Terjemahan Kustom untuk Teks Tombol Ditentukan dalam Opsi Konfigurasi i18n (Setel hanya satu title atau i18nKey )
Kelas opsional yang dapat ditambahkan ke tombol
Fungsi yang dipanggil saat tombol diklik
Mengaktifkan atau menonaktifkan fungsionalitas widget dengan opsi berikut.
features: {
showPasswordToggleOnSignInPage : true ,
hideSignOutLinkInMFA : false ,
rememberMe : true
} Default ke true . Menampilkan ikon mata untuk beralih visibilitas pengguna yang memasukkan kata sandi pada halaman masuk OKTA. Kata sandi disembunyikan secara default, bahkan ketika bendera ini diaktifkan. Kata sandi terlihat selama 30 detik dan kemudian disembunyikan secara otomatis.
Default ke true . Menampilkan pengidentifikasi pengguna pada tampilan apa pun dengan konteks pengguna.
Default ke false . Menyembunyikan tautan "kembali untuk masuk" untuk pendaftaran authenticator dan aliran tantangan.
Default ke true . Pra-mengisi bidang pengidentifikasi dengan nama pengguna yang sebelumnya digunakan.
Default ke true . Secara otomatis memfokuskan bidang input pertama dari bentuk apa pun saat ditampilkan.
Default ke false . Mengatur atribut AutoComplete pada bidang input ke off .
Widget menyuntikkan blok skrip inline/gaya yang aman saat runtime untuk tujuan kustomisasi, tetapi blok -blok tersebut dapat melanggar aturan CSP yang ditetapkan di halaman web yang di -host.
cspNonce memungkinkan set nonce nilai dari header Content-Security-Policy ke blok yang disuntikkan, sehingga skrip/gaya dari blok tersebut masih dapat dieksekusi.
Catatan: Arahan Nonce ditambahkan ke CSP Level2, Anda mungkin masih melihat kesalahan CSP di konsol browser jika digunakan di browser yang tidak didukung.
Acara yang diterbitkan oleh Widget. Berlangganan acara ini menggunakan ON.
Dipicu saat widget siap menerima input pengguna untuk pertama kalinya. Mengembalikan objek context yang berisi properti berikut:
signIn . on ( 'ready' , function ( context ) {
// The Widget is ready for user input
} ) ; Widget akan menangani sebagian besar jenis kesalahan - misalnya, jika pengguna memasukkan kata sandi yang tidak valid atau ada masalah yang mengotentikasi. Untuk menangkap kesalahan perubahan status otentikasi setelah ditangani dan diterjemahkan oleh widget, dengarkan acara afterError . Anda juga dapat menangkap kesalahan oauth dan pendaftaran. Untuk jenis kesalahan lainnya, didorong untuk menanganinya menggunakan penangan kesalahan renderEl .
Mengembalikan objek context dan error yang berisi properti berikut:
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
} ) ; Dipicu ketika widget transisi ke halaman baru dan animasi telah selesai. 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!
| Memerintah | Keterangan |
|---|---|
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.
