okta signin widget
7.25.1
วิดเจ็ตการลงชื่อเข้าใช้ Okta เป็นวิดเจ็ต JavaScript ที่ให้ประสบการณ์การเข้าสู่ระบบที่โดดเด่นและปรับแต่งได้อย่างสมบูรณ์ซึ่งสามารถใช้ในการตรวจสอบสิทธิ์และลงทะเบียนผู้ใช้ในเว็บและแอปพลิเคชันมือถือ
วิดเจ็ตใช้ในหน้า Signin เริ่มต้นของ Okta เพื่อเริ่มเซสชัน Okta SSO และตั้งค่าคุกกี้เซสชัน Okta ในเว็บเบราว์เซอร์ นอกจากนี้ยังสามารถดำเนินการโฟลว์ OIDC เพื่อรวมเว็บหรือแอพพลิเคชั่นมือถือของคุณเข้ากับแพลตฟอร์ม OKTA ได้อย่างง่ายดาย
สามารถกำหนดค่าหน้าลงชื่อเข้าใช้ Okta-hosted ที่กำหนดเองให้ใช้ชื่อโดเมนและการสร้างแบรนด์ขององค์กรของคุณ
วิดเจ็ตยังสามารถฝังลงในเว็บหรือแอปพลิเคชันมือถือขององค์กรโดยตรงเพื่อประสบการณ์การใช้งานที่ราบรื่น
ดูคู่มือการใช้งานสำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีเริ่มต้นใช้วิดเจ็ตลงชื่อเข้าใช้
yarn linkOkta Identity Engine (OIE) เป็นบริการแพลตฟอร์มที่ช่วยให้องค์กรต่างๆสามารถสร้างประสบการณ์การเข้าถึงที่ยืดหยุ่นได้มากขึ้นซึ่งปรับให้เหมาะกับความต้องการขององค์กร วิดเจ็ตการลงชื่อเข้าใช้ OKTA รองรับ OIE ในทุกสถานการณ์การใช้งาน
หมายเหตุ : เว้นแต่จะระบุไว้เป็นอย่างอื่น readme นี้จะถือว่าคุณกำลังใช้เอ็นจิ้นตัวตน ข้อมูลเกี่ยวกับการใช้วิดเจ็ตกับเอ็นจิ้นคลาสสิกสามารถพบได้ในเอกสารนี้
วิดเจ็ตลงชื่อเข้าใช้นั้นมีอยู่ในตัวเองและไม่จำเป็นต้องใช้กรอบอื่น ๆ ที่รันไทม์ อย่างไรก็ตามอาจมีคุณสมบัติบางอย่างที่แอปของคุณต้องการเช่นการจัดเก็บโทเค็นการต่ออายุหรือการตรวจสอบซึ่งวิดเจ็ตไม่ได้ให้
SDK เหล่านี้เข้ากันได้อย่างสมบูรณ์กับวิดเจ็ตการลงชื่อเข้าใช้ Okta และให้บริการสาธารณูปโภคเพื่อช่วยรวมการตรวจสอบความถูกต้องของ Okta ในแอปพลิเคชันของคุณเอง
แอปพลิเคชั่นตัวอย่างที่สมบูรณ์แสดงให้เห็นถึงการใช้วิดเจ็ตการลงชื่อเข้าใช้ Okta ทั้งในสถานการณ์ที่โฮสต์และฝังตัวทั้ง Okta
มีหลายวิธีในการใช้วิดเจ็ตการลงชื่อเข้าใช้ Okta:
Okta จัดเตรียมหน้าลงชื่อเข้าใช้เริ่มต้นสำหรับองค์กรของคุณโฮสต์ที่ URL OKTA ขององค์กรของคุณ
Okta รองรับตัวเลือกในการสร้างโดเมนที่กำหนดเองด้วยหน้าลงชื่อเข้าใช้ Okta ที่ปรับแต่งได้สูง
คุณสามารถฝังวิดเจ็ตลงในแอปพลิเคชันของคุณโดยตรง
Okta จัดเตรียมหน้าลงชื่อเข้าใช้ที่ URL ขององค์กรของคุณซึ่งช่วยให้ผู้ใช้สามารถทำโฟลว์การอนุญาตทั้งหมดเริ่มต้นเซสชัน SSO (Single Sign-On) และตั้งค่าคุกกี้เซสชัน OKTA ในเว็บเบราว์เซอร์ คุณสามารถปรับแต่งหน้านี้ด้วยภาพพื้นหลังและโลโก้ โดยค่าเริ่มต้นให้ลงชื่อเข้าใช้ในหน้านี้เปลี่ยนเส้นทางผู้ใช้ไปยังแผงควบคุมผู้ใช้ Okta
หน้าลงชื่อเข้าใช้ Okta-hosted เริ่มต้นสามารถตรวจสอบสิทธิ์ผู้ใช้ในแอปพลิเคชัน OIDC แอพของคุณสามารถเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้เพื่อดำเนินการโฟลว์การตรวจสอบความถูกต้องหลังจากนั้น Okta จะเปลี่ยนเส้นทางผู้ใช้กลับไปยังแอพโทรกลับ Okta ให้ SDKs ในหลายภาษาเพื่อช่วยสร้าง URL เปลี่ยนเส้นทางและจัดการการโทรกลับเข้าสู่ระบบเป็นส่วนหนึ่งของโฟลว์โฮสต์
Okta จัดหาแอปพลิเคชั่นตัวอย่างที่สมบูรณ์หลายรายการซึ่งแสดงให้เห็นถึงวิธีการใช้โฟลว์โฮสต์ Okta
Okta ยังมีหน้าลงชื่อเข้าใช้ที่โฮสต์ซึ่งสามารถปรับแต่งได้เพื่อให้สามารถใช้งานได้ภายใต้โดเมนที่กำหนดเองซึ่งเป็นโดเมนย่อยของโดเมนระดับบนสุดของ บริษัท ของคุณ แม้ว่าหน้านี้จะโฮสต์โดย Okta คุณสามารถปรับแต่งเทมเพลตของหน้านี้ด้วยวิธีที่ทรงพลังมากมาย
เท่าที่แอปของคุณเกี่ยวข้องวิดเจ็ตที่กำหนดเองจะทำงานเช่นเดียวกับวิดเจ็ต Okta-hosted เริ่มต้นและคุณสามารถใช้โฟลว์โฮสต์เดียวกันได้
หมายเหตุ: จะมีวัตถุการกำหนดค่าในหน้าซึ่งมีค่าที่ต้องการทั้งหมดและคุณสมบัติที่เปิดใช้งาน คุณมักจะไม่จำเป็นต้องแก้ไขวัตถุนี้ หากคุณพบว่าคุณจำเป็นต้องแก้ไขการกำหนดค่านี้ให้ระวังอย่าเขียนทับหรือลบค่าที่จำเป็นใด ๆ
สำหรับประสบการณ์ที่ไร้รอยต่ออย่างสมบูรณ์ที่ช่วยให้สามารถปรับแต่งได้ในระดับสูงสุดคุณสามารถฝังวิดเจ็ตลงชื่อเข้าใช้ลงในแอปพลิเคชันของคุณได้โดยตรง สิ่งนี้ช่วยให้การใช้งานการกำหนดค่าและ API ของวิดเจ็ตเต็มรูปแบบ
การใช้วิดเจ็ตฝังตัวเว็บฝั่งไคลเอ็นต์และแอพเนทีฟสามารถหลีกเลี่ยงการเปลี่ยนเส้นทางการเดินทางไปกลับของโฟลว์โฮสต์ในหลายกรณี ดู showsignin
เว็บแอปพลิเคชันฝั่งเซิร์ฟเวอร์จะได้รับ OAuth Tokens ฝั่งเซิร์ฟเวอร์ดังนั้นพวกเขาจึง ต้องจัดการการโทรกลับเปลี่ยนเส้นทาง แอพเหล่านี้ควรใช้ showninandretirect
คุณสามารถฝังวิดเจ็ตลงชื่อเข้าใช้ในแอปของคุณได้โดยรวมแท็กสคริปต์ที่ดึงวิดเจ็ตจาก Okta CDN หรือรวมโมดูล NPM ลงในแอปของคุณ
การโหลดสินทรัพย์ของเราโดยตรงจาก CDN เป็นตัวเลือกที่ดีหากคุณต้องการวิธีที่ง่ายในการเริ่มต้นกับวิดเจ็ตไม่ได้มีกระบวนการสร้างที่มีอยู่ซึ่งใช้ประโยชน์จาก NPM หรือเส้นด้ายสำหรับการพึ่งพาภายนอกหรือเหตุผลอื่น ๆ ที่คุณไม่ได้ ' ไม่ต้องการรวมวิดเจ็ตลงชื่อเข้าใช้ในแอปพลิเคชันของคุณ
ชุดมาตรฐาน ( okta-sign-in.min.js ) รวมถึงการรองรับทั้งเครื่องยนต์คลาสสิกและเอ็นจิ้นตัวตน นอกจากนี้ยังมีโพลีฟิลเพื่อให้แน่ใจว่าเข้ากันได้กับเบราว์เซอร์รุ่นเก่าเช่น IE11 หากแอปพลิเคชันของคุณไม่จำเป็นต้องสนับสนุน IE11 คุณสามารถรวมชุด no-polyfill แทนเพื่อลดเวลาในการโหลดสำหรับผู้ใช้ครั้งแรก ชุด polyfill แบบสแตนด์อโลนสามารถรวมอยู่ในหน้าเพื่อเพิ่มการสนับสนุนสำหรับเบราว์เซอร์รุ่นเก่าเฉพาะเมื่อจำเป็นเท่านั้น
หากองค์กรของคุณอัพเกรดเป็นเอ็นจิ้นตัวตนสามารถใช้ชุด oie ขนาดเล็กได้
| มัด | ชื่อไฟล์ | ประมาณ ขนาด | เครื่องยนต์คลาสสิก | เอ็นจิ้นตัวตน | โพลีฟิลด์ | หมายเหตุ |
|---|---|---|---|---|---|---|
| มาตรฐาน | okta-sign-in.min.js | 1.7 MB | ชุดมาตรฐานซึ่งรวมถึงทุกอย่าง | |||
| ไม่มีโพลีฟิลด์ | okta-sign-in.no-polyfill.min.js | 1.7 MB | ชุดมาตรฐานที่ไม่มีโพลีฟิล | |||
| Oie | okta-sign-in.oie.min.js | 1.3 MB | ชุดที่เล็กกว่าสำหรับ OIE ที่เปิดใช้งาน orgs | |||
| คลาสสิค | okta-sign-in.classic.min.js | 1.1 MB | ชุดขนาดเล็กสำหรับเครื่องยนต์คลาสสิกเท่านั้น | |||
| โพลีฟิลด์ | okta-sign-in.polyfill.min.js | 108kb | ชุดโพลีฟิลด์แบบสแตนด์อโลน สามารถใช้พร้อมกับชุดวิดเจ็ตที่ไม่รวม polyfill |
ในการฝังวิดเจ็ตลงชื่อเข้าใช้ผ่าน CDN ให้รวมลิงก์ไปยังไฟล์ JS และ CSS ใน HTML ของคุณ:
<!-- Latest CDN production Javascript and CSS -->
< script src =" https://global.oktacdn.com/okta-signin-widget/7.25.1/js/okta-sign-in.min.js " type =" text/javascript " integrity =" sha384-8QHSy1n8imbyR7imair5z4njOEYiZZk5gqBOJYbbUN3W6HQwW3PZ9lYQiybespeW " crossorigin =" anonymous " > </ script >
< link href =" https://global.oktacdn.com/okta-signin-widget/7.25.1/css/okta-sign-in.min.css " type =" text/css " rel =" stylesheet " integrity =" sha384-63aTBe2wMqzMRsDHNmlF/FreSWmf3p08BhUDoPlzVf3d+stbkfWtqmdyJ4He5m3m " crossorigin =" anonymous " />หมายเหตุ: URL CDN มีหมายเลขเวอร์ชัน หมายเลขนี้ควรจะเหมือนกันสำหรับทั้งไฟล์ JavaScript และ CSS และจับคู่เวอร์ชันในหน้ารีลีส เราขอแนะนำให้ใช้เวอร์ชันวิดเจ็ตล่าสุด
เมื่อใช้หนึ่งในชุดรวมที่ไม่มี polyfill รวมอยู่คุณอาจต้องการโหลดชุดโพลีฟิลแบบสแตนด์อโลนอย่างมีเงื่อนไข ควรโหลดโพลีฟิลด์ก่อนชุดวิดเจ็ต:
<!-- Polyfill for older browsers -->
< script src =" https://global.oktacdn.com/okta-signin-widget/7.25.1/js/okta-sign-in.polyfill.min.js " type =" text/javascript " integrity =" sha384-QzQIGwIndxyBdHRQOwgjmQJLod6LRMchZyYg7RUq8FUECvPvreqauQhkU2FF9EGD " crossorigin =" anonymous " > </ script >
<!-- Widget bundle for Okta Identity Engine -->
< script src =" https://global.oktacdn.com/okta-signin-widget/7.25.1/js/okta-sign-in.oie.min.js " type =" text/javascript " integrity =" sha384-T4d68QBaFQ/b3kDy8qubuXDALwWgBRfP0JsfZsYRzZNlIXflVE2svwIHrPaivLyd " crossorigin =" anonymous " > </ script >
<!-- CSS for widget -->
< link href =" https://global.oktacdn.com/okta-signin-widget/7.25.1/css/okta-sign-in.min.css " type =" text/css " rel =" stylesheet " integrity =" sha384-63aTBe2wMqzMRsDHNmlF/FreSWmf3p08BhUDoPlzVf3d+stbkfWtqmdyJ4He5m3m " crossorigin =" anonymous " />การใช้โมดูล NPM ของเราเป็นตัวเลือกที่ดีถ้า:
ในการติดตั้ง @okta/okta-signin-widget:
# Run this command in your project root folder
# yarn
yarn add @okta/okta-signin-widget
# npm
npm install @okta/okta-signin-widget --save สิ่งนี้ติดตั้งวิดเจ็ตลงชื่อเข้าใช้เวอร์ชันล่าสุดไปยังไดเรกทอรี node_modules ของโครงการของคุณ
หมายเหตุ: หากคุณใช้ TypeScript คุณจะต้องเปิดใช้งานการนำเข้าสังเคราะห์ใน tsconfig.json ของคุณ
{
...
"compilerOptions" : {
"allowSyntheticDefaultImports" : true ,
...
}
} โครงการ Angular (typecript) ต้องการการกำหนดค่าที่คล้ายกันใน tsconfig.json ของคุณ
{
...
"angularCompilerOptions" : {
"allowSyntheticDefaultImports" : true ,
...
}
} ไฟล์ต้นฉบับและสินทรัพย์ของวิดเจ็ตถูกติดตั้งเป็น node_modules/@okta/okta-signin-widget/dist และมีโครงสร้างไดเรกทอรีนี้:
node_modules/@okta/okta-signin-widget/dist/
├── css/
│ │ # Main CSS file for widget styles
│ └── okta-sign-in.min.css
│
│ # Base font and image files that are used in rendering the widget
├── font/
│
├── img/
│
├── js/
│ │ # CDN JS file that exports the OktaSignIn object in UMD format. This is
│ │ # packaged with everything needed to run the widget, including 3rd party
│ │ # vendor files and polyfills.
│ ├── okta-sign-in.min.js
| |
│ │ # CDN JS file bundled without polyfills.
│ ├── okta-sign-in.no-polyfill.min.js
│ │
│ │ # Development version of okta-sign-in.min.js. Equipped with helpful
│ │ # console warning messages for common configuration errors.
│ └── okta-sign-in.js
│
│ # Localized strings that are used to display all text and labels in the
│ # widget. Three output formats are included - json and properties
├── labels/
│
│ # Sass files that are used to generate the widget css. If you are already
│ # using Sass in your project, you can include these helper files to make
│ # generating your custom theme easier
└── sass/หลังจากติดตั้ง:
คัดลอกสินทรัพย์ไปยังโฟลเดอร์ที่จะแจกจ่ายไปยังไซต์ที่โฮสต์สาธารณะของคุณ โฟลเดอร์ที่คุณต้องคัดลอกคือ css , font , img , js และ labels
แทนที่จะคัดลอกไดเรกทอรี js และรวมไว้ในหน้าของคุณเป็นทั่วโลกคุณสามารถต้องการวิดเจ็ตลงชื่อเข้าใช้ในงานสร้างของคุณหากคุณใช้ Webpack, เบราว์เซอร์หรือระบบการรวมโมดูลอื่นที่เข้าใจรูปแบบ node_modules
// Load the Sign-In Widget module
var OktaSignIn = require ( '@okta/okta-signin-widget' ) ;
// Use OktaSignIn
var signIn = new OktaSignIn ( /* configOptions */ ) ;แผนที่แหล่งที่มามีให้เป็นไฟล์. map ภายนอก หากคุณใช้ WebPack สิ่งเหล่านี้สามารถโหลดได้โดยใช้ปลั๊กอิน Source-Map-Loader
หากคุณต้องการรวมรูปแบบวิดเจ็ตในชุดรวมโดยใช้ Style-Loader หรือ Mini-CSS-Extract-Plugin ให้ใช้การนำเข้าต่อไปนี้:
import '@okta/okta-signin-widget/css/okta-sign-in.min.css' ; หมายเหตุ: หากคุณใช้เบราว์เซอร์เพื่อรวมแอปของคุณคุณจะต้องใช้ตัวเลือก --noparse :
browserify main.js
--noparse= $PWD /node_modules/@okta/okta-signin-widget/dist/js-okta-sign-in.entry.js
--outfile=bundle.jsตรวจสอบให้แน่ใจว่าคุณได้รวม ES6 Polyfills ด้วย Bundler ของคุณหากคุณต้องการสนับสนุน IE11 วิดเจ็ตให้โพลีฟิลด์ที่จำเป็นทั้งหมดผ่านการส่งออก:
const polyfill = require('@okta/okta-signin-widget/polyfill');
หรือ
import polyfill from '@okta/okta-signin-widget/polyfill';
ตัวอย่างง่ายๆเหล่านี้ควรช่วยให้คุณเริ่มต้นด้วยการใช้วิดเจ็ตลงชื่อเข้าใช้ สำหรับโซลูชันแบบ end-to-end ที่สมบูรณ์ตรวจสอบแอปพลิเคชันตัวอย่างของเรา
แอปพลิเคชันหน้าเดียว (SPA) ทำงานอย่างสมบูรณ์ในเบราว์เซอร์ แอปพลิเคชัน SPA รับรองความถูกต้องโดยใช้กระแสด้านไคลเอนต์และเก็บโทเค็น OAuth ในที่เก็บเบราว์เซอร์
หมายเหตุ: ดูการกำหนดค่าสำหรับข้อมูลเพิ่มเติมเกี่ยวกับค่าการกำหนดค่าเหล่านี้
var signIn = new OktaSignIn (
{
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}
) ;
signIn . showSignIn ( {
// Assumes there is an empty element on the page with an id of 'osw-container'
el : '#osw-container'
} ) . then ( function ( res ) {
// Most flows will not require any redirection. In these cases, tokens will be returned directly.
// res.tokens is an object
oktaSignIn . authClient . handleLoginRedirect ( res . tokens ) ;
} ) . catch ( function ( error ) {
// This function is invoked with errors the widget cannot recover from:
// Known errors: CONFIG_ERROR, UNSUPPORTED_BROWSER_ERROR
} ) ; เว็บแอปพลิเคชันทำงานเป็นหลักบนเซิร์ฟเวอร์ วิดเจ็ตซึ่งดำเนินการฝั่งไคลเอ็นต์จะถูกฝังลงในหน้า HTML ซึ่งมีบล็อกสคริปต์ที่กำหนดค่าและแสดงวิดเจ็ต โทเค็น OAuth จะได้รับฝั่งเซิร์ฟเวอร์บนการเปลี่ยนเส้นทางการเข้าสู่ระบบของแอปพลิเคชัน
หมายเหตุ: ดูการกำหนดค่าสำหรับข้อมูลเพิ่มเติมเกี่ยวกับค่าการกำหนดค่าเหล่านี้
var signIn = new OktaSignIn (
{
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
state : '{{state passed from backend}}' , // state can be any string, it will be passed on redirect callback
codeChallenge : '{{PKCE code challenge from backend}}' , // PKCE is required for interaction code flow
}
) ;
// When the authorization flow is complete there will be a redirect to Okta.
// Okta's servers will process the information and then redirect back to your application's `redirectUri`
// If successful, an authorization code will exist in the URL as the "code" query parameter
// If unsuccesful, there will be an "error" query parameter in the URL
signIn . showSignInAndRedirect ( {
// Assumes there is an empty element on the page with an id of 'osw-container'
el : '#osw-container'
} ) . catch ( function ( error ) {
// This function is invoked with errors the widget cannot recover from:
// Known errors: CONFIG_ERROR, UNSUPPORTED_BROWSER_ERROR
} ) ; นอกเหนือจากโฟลว์การตรวจสอบความถูกต้องเริ่มต้นแล้ววิดเจ็ตยังรองรับการไหลที่กำหนดไว้ล่วงหน้าหลายครั้งซึ่งช่วยให้คุณสามารถจัดเตรียมหน้า HTML แบบอเนกประสงค์เดียวสำหรับกรณีการใช้งานทั่วไปหลายกรณี
โดยค่าเริ่มต้นวิดเจ็ตการลงชื่อเข้าใช้ Okta จะดำเนินการกับโฟลว์ปัจจุบันหรือเริ่มโฟลว์การรับรองความถูกต้องใหม่ ตัวเลือก flow อนุญาตให้ bootstrapping วิดเจ็ตลงในมุมมองเฉพาะเช่นลงทะเบียนปลดล็อคหรือรีเซ็ตรหัสผ่าน กระแสที่รองรับ:
หมายเหตุ: โฟลว์เฉพาะสามารถใช้งานได้เฉพาะเมื่อผู้ดูแลระบบได้กำหนดค่าองค์กร
flow: 'signup'อนุญาตการดำเนินการที่จำเป็น (ตัวอย่าง: หากการลงทะเบียนโปรไฟล์ (การลงทะเบียนผู้ใช้) ในคอนโซลผู้ดูแลระบบไม่ได้เปิดใช้งาน ส่งผลให้เกิดข้อผิดพลาด)
// login.html
new OktaSignIn ( {
flow : 'login'
} ) ;
// signup.html
new OktaSignIn ( {
flow : 'signup'
} ) ;
// reset_password.html
new OktaSignIn ( {
flow : 'resetPassword'
} ) ;
// unlock_account.html
new OktaSignIn ( {
flow : 'unlockAccount'
} ) ; การเปลี่ยนเส้นทางการโทรกลับเกิดขึ้นเมื่อแอปของคุณถูกโหลดใหม่ในเบราว์เซอร์เป็นส่วนหนึ่งของโฟลว์ ในระหว่างการโทรกลับเปลี่ยนเส้นทางแอพจะถูกโหลดที่เส้นทาง URL เฉพาะที่คุณกำหนดไว้ในการกำหนดค่าแอป Okta ของคุณ การเรียกกลับส่วนใหญ่สามารถจัดการได้เพียงครั้งเดียวและจะสร้างข้อผิดพลาดหากมีความพยายามที่จะจัดการสองครั้ง โดยทั่วไปแอพจะเปลี่ยนเส้นทางไปยังเส้นทาง URL ที่รู้จักกันดีหรือบันทึกไว้ก่อนหน้านี้หลังจากตรรกะการโทรกลับได้รับการจัดการเพื่อหลีกเลี่ยงข้อผิดพลาดในการโหลดหน้าใหม่
หมายเหตุ: แอพส่วนใหญ่ควรเตรียมพร้อมที่จะจัดการการโทรกลับอย่างน้อยหนึ่งรายการ แอปพลิเคชันสปาบางตัวอาจสามารถรับโทเค็นโดยไม่ต้องเปลี่ยนเส้นทาง อย่างไรก็ตามจะต้องมีการเพิ่มตรรกะหากนโยบายรวมถึงการลงชื่อเข้าใช้กับผู้ให้บริการโซเชียล / IDP หรืออนุญาตให้การตรวจสอบสิทธิ์หรือการกู้คืนบัญชีโดยใช้การตรวจสอบอีเมล
การโทรกลับ OAuth เป็นขั้นตอนสุดท้ายของการไหลของรหัสการโต้ตอบ ในการรับรองความถูกต้องที่ประสบความสำเร็จเบราว์เซอร์จะถูกเปลี่ยนเส้นทางไปยัง OKTA พร้อมข้อมูลเพื่อเริ่มเซสชันใหม่ เซิร์ฟเวอร์ของ Okta ประมวลผลข้อมูลจากนั้นเปลี่ยนเส้นทางกลับไปยัง redirectUri ของแอปพลิเคชันของคุณ หากประสบความสำเร็จรหัสการโต้ตอบจะปรากฏใน URL เป็นพารามิเตอร์การสืบค้น interaction_code หากไม่ประสบความสำเร็จจะมี error และ error_description พารามิเตอร์พารามิเตอร์ใน URL ไม่ว่าจะประสบความสำเร็จหรือไม่พารามิเตอร์ state ซึ่งเดิมผ่านไปยังวิดเจ็ตโดยแอปพลิเคชันของคุณก็จะถูกส่งกลับเมื่อเปลี่ยนเส้นทาง สามารถใช้งานได้โดยเว็บแอปพลิเคชันฝั่งเซิร์ฟเวอร์เพื่อให้ตรงกับการโทรกลับกับเซสชันผู้ใช้ที่ถูกต้อง
เว็บแอปพลิเคชันทั้งหมดจะจัดการการโทรกลับ OAuth สำหรับแอปพลิเคชัน SPA ในหลายกรณีนโยบายการลงชื่อเข้าใช้จะไม่จำเป็นต้องเปลี่ยนเส้นทางและแอปพลิเคชันเหล่านี้สามารถรับโทเค็นได้โดยตรงจาก sowsignin อย่างไรก็ตามหากนโยบายการลงชื่อเข้าใช้ต้องเปลี่ยนเส้นทางไม่ว่าด้วยเหตุผลใดก็ตาม (เช่นการรวมเข้ากับแอพ Social / IDP) แอพสปาจะต้องจัดการกับการโทรกลับ OAUTH ด้วยเหตุนี้เราขอแนะนำให้ แอพสปาทั้งหมดควรเตรียมพร้อมที่จะจัดการการโทรกลับ OAuth
หมายเหตุ: วิดเจ็ตไม่ได้จัดการการโทรกลับ OAuth โดยตรง เว็บแอปพลิเคชันฝั่งเซิร์ฟเวอร์สามารถใช้หนึ่งใน SDK ของเราเพื่อช่วยในการจัดการการโทรกลับ แอปพลิเคชัน SPA สามารถใช้ Okta-Auth-JS SDK ซึ่งรวมอยู่ในวิดเจ็ตลงชื่อเข้าใช้เป็นคุณสมบัติ
authClient
แอปพลิเคชันสปาสามารถจัดการฝั่งไคลเอ็นต์โทรกลับ OAuth โดยใช้ authClient ในตัว:
// https://myapp.mycompany.com/login/callback?interaction_code=ABC&state=XYZ
if ( signIn . authClient . isLoginRedirect ( ) ) {
await signIn . authClient . handleLoginRedirect ( ) ;
} หลังจากลงชื่อเข้าใช้ด้วย IDP ของบุคคลที่สามผู้ใช้จะถูกเปลี่ยนเส้นทางกลับไปยัง redirectUri ของแอปพลิเคชัน หากไม่จำเป็นต้องป้อนข้อมูลเพิ่มเติมจากผู้ใช้นี่จะเป็น OAuth callback ที่มีพารามิเตอร์ interaction_code หากจำเป็นต้องมีอินพุตเพิ่มเติมการเรียกกลับจะมีพารามิเตอร์ error ด้วยค่า interaction_required ในกรณีนี้ควรโหลดวิดเจ็ตลงชื่อเข้าใช้อีกครั้งเพื่อให้การไหลสามารถดำเนินการต่อได้
ทั้งแอปพลิเคชันเว็บฝั่งเซิร์ฟเวอร์และสปาควรค้นหาพารามิเตอร์การสืบค้น error และหากค่าเป็น interaction_required พวกเขาควรแสดงวิดเจ็ตอีกครั้งโดยใช้การกำหนดค่าเดียวกันกับการเรนเดอร์แรก พารามิเตอร์ state จะถูกส่งผ่านการโทรกลับซึ่งสามารถใช้เพื่อให้ตรงกับคำขอกับเซสชันแอปพลิเคชันของผู้ใช้ วิดเจ็ตจะดำเนินการทำธุรกรรมโดยอัตโนมัติ
แอปพลิเคชันของคุณจะต้องใช้การตรวจสอบการโทรกลับอีเมลหากนโยบายการลงชื่อเข้าใช้ของคุณใช้ Email Magic Link/OTP หลังจากผู้ใช้คลิกลิงก์ในอีเมลพวกเขาจะถูกเปลี่ยนเส้นทางกลับไปยัง email verify callback URI พารามิเตอร์แบบสอบถามที่ส่งผ่านไปยังแอปพลิเคชันรวมถึง state และ otp เช่นเดียวกับการเรียกกลับโซเชียล/IDP วิดเจ็ตควรแสดงผลอีกครั้งโดยใช้การกำหนดค่าเดียวกัน นอกจากนี้ otp ควรถูกส่งผ่านไปยังตัวสร้างของวิดเจ็ต
หมายเหตุ: ดูการกำหนดค่าสำหรับข้อมูลเพิ่มเติมเกี่ยวกับค่าการกำหนดค่าเหล่านี้
var signIn = new OktaSignIn (
{
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
state : '{{state from URL}}' ,
otp : '{{otp from URL}}'
}
) ; สร้างอินสแตนซ์ใหม่ของวิดเจ็ตลงชื่อเข้าใช้ด้วยตัวเลือกที่ให้ไว้
สำหรับแอปพลิเคชันที่ใช้วิดเจ็ต Okta-hosted ที่กำหนดเองจะมีวัตถุการกำหนดค่าในหน้าซึ่งมีค่าที่ต้องการทั้งหมด คุณมักจะไม่จำเป็นต้องแก้ไขวัตถุนี้
สำหรับแอปพลิเคชันที่ใช้วิดเจ็ตแบบฝังคุณจะต้องจัดเตรียมการกำหนดค่า OIDC:
หมายเหตุ: ดูการกำหนดค่าสำหรับข้อมูลเพิ่มเติมเกี่ยวกับค่าการกำหนดค่าเหล่านี้
var signIn = new OktaSignIn (
{
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}
) ;แสดงวิดเจ็ตไปยัง DOM ในความสำเร็จสัญญาจะแก้ไข เกี่ยวกับข้อผิดพลาดสัญญาปฏิเสธ หากนโยบายการลงชื่อเข้าใช้ต้องเปลี่ยนเส้นทางไปยัง OKTA หรือผู้ให้บริการข้อมูลประจำตัวอื่น (IDP) เบราว์เซอร์จะเปลี่ยนเส้นทางและสัญญาจะไม่สามารถแก้ไขได้ การตอบสนองและข้อผิดพลาดนั้นเหมือนกับสำหรับ Renderel
หมายเหตุ : นี่เป็นวิธีที่แนะนำในการแสดงวิดเจ็ตสำหรับแอปพลิเคชันสปา แอพพลิเคชั่นเว็บฝั่งเซิร์ฟเวอร์ควรใช้เมธอด sowsigninandredirect แทน
showSignIn ยอมรับตัวเลือกเดียวกันกับตัวสร้างวิดเจ็ต ตัวเลือกที่ส่งผ่านไปยังวิธีการจะแทนที่ตัวเลือกจากตัวสร้าง
หมายเหตุ: ดูการกำหนดค่าสำหรับข้อมูลเพิ่มเติมเกี่ยวกับค่าการกำหนดค่าเหล่านี้
var signIn = new OktaSignIn ( {
issuer : 'https://{yourOktaDomain}/oauth2/default'
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} ) ;
oktaSignIn . showSignIn ( {
// Assumes there is an empty element on the page with an id of ‘osw-container’
el : ‘ # osw - container’ ,
} ) . then ( response => {
oktaSignIn . authClient . handleLoginRedirect ( res . tokens ) ;
} ) . catch ( function ( error ) {
// This function is invoked with errors the widget cannot recover from:
// Known errors: CONFIG_ERROR, UNSUPPORTED_BROWSER_ERROR
console . log ( 'login error' , error ) ;
} ) ; แสดงวิดเจ็ตไปยัง DOM ในการรับรองความถูกต้องที่ประสบความสำเร็จเบราว์เซอร์จะถูกเปลี่ยนเส้นทางไปยัง OKTA พร้อมข้อมูลเพื่อเริ่มเซสชันใหม่ เซิร์ฟเวอร์ของ Okta จะประมวลผลข้อมูลจากนั้นเปลี่ยนเส้นทางกลับไปยัง redirectUri ของแอปพลิเคชันของคุณ หากประสบความสำเร็จรหัสการโต้ตอบจะมีอยู่ใน URL เป็นพารามิเตอร์การสืบค้น interaction_code หากไม่ประสบความสำเร็จจะมี error และ error_description พารามิเตอร์พารามิเตอร์ใน URL ไม่ว่าจะประสบความสำเร็จหรือไม่พารามิเตอร์ state ที่ส่งผ่านไปยังวิดเจ็ตก็จะถูกส่งกลับเมื่อเปลี่ยนเส้นทาง สามารถใช้งานได้โดยเว็บแอปพลิเคชันฝั่งเซิร์ฟเวอร์ของคุณเพื่อให้ตรงกับการโทรกลับกับเซสชันผู้ใช้ที่ถูกต้อง
showSignInAndRedirect ยอมรับตัวเลือกเดียวกันกับตัวสร้างวิดเจ็ต ตัวเลือกที่ส่งผ่านไปยังวิธีการจะแทนที่ตัวเลือกจากตัวสร้าง
หมายเหตุ: ดูการกำหนดค่าสำหรับข้อมูลเพิ่มเติมเกี่ยวกับค่าการกำหนดค่าเหล่านี้
var signIn = new OktaSignIn ( {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
state : '{{state passed from backend}}' , // state can be any string, it will be passed on redirect callback
codeChallenge : '{{PKCE code challenge from backend}}' , // PKCE is required for interaction code flow
} ) ;
signIn . showSignInAndRedirect ( {
// Assumes there is an empty element on the page with an id of 'osw-container'
el : '#osw-container'
} ) . catch ( function ( error ) {
// This function is invoked with errors the widget cannot recover from:
// Known errors: CONFIG_ERROR, UNSUPPORTED_BROWSER_ERROR
} ) ;ซ่อนวิดเจ็ต แต่เก็บวิดเจ็ตไว้ใน DOM
signIn . hide ( ) ;แสดงวิดเจ็ตถ้าซ่อนอยู่
signIn . show ( ) ;ลบวิดเจ็ตออกจาก DOM ทั้งหมด
signIn . remove ( ) ;สมัครสมาชิกเหตุการณ์ที่เผยแพร่โดยวิดเจ็ต
event - เหตุการณ์ที่จะสมัครสมาชิกcallback - ฟังก์ชั่นการโทรเมื่อมีการเรียกใช้เหตุการณ์ // Handle a 'ready' event using an onReady callback
signIn . on ( 'ready' , onReady ) ;ยกเลิกการสมัครจากกิจกรรมวิดเจ็ต หากไม่มีการโทรกลับให้ยกเลิกการสมัครผู้ฟังทั้งหมดจากเหตุการณ์
event - กิจกรรมเสริมในการยกเลิกการสมัครจากcallback - การโทรกลับทางเลือกที่ใช้ในการสมัครรับเหตุการณ์ // Unsubscribe all listeners from all events
signIn . off ( ) ;
// Unsubscribe all listeners that have been registered to the 'ready' event
signIn . off ( 'ready' ) ;
// Unsubscribe the onReady listener from the 'ready' event
signIn . off ( 'ready' , onReady ) ;ให้การเข้าถึงวัตถุ [@okta/okta-auth-js] [] พื้นฐานที่ใช้โดยวิดเจ็ตลงชื่อเข้าใช้ วิธีการทั้งหมดได้รับการบันทึกไว้ในการอ้างอิง API
authClient ได้รับการกำหนดค่าโดยใช้ค่าที่ส่งผ่านไปยังวิดเจ็ตเช่น clientId , issuer , redirectUri , state และ scopes ตัวเลือกที่ไม่ได้รับการสนับสนุนโดยตรงจากวิดเจ็ตสามารถส่งผ่านไปยัง AuthJs โดยใช้วัตถุ authParams
authClient ยังสามารถสร้างและกำหนดค่านอกวิดเจ็ตและส่งผ่านไปยังวิดเจ็ตเป็นตัวเลือก authClient หากมีการผ่านตัวเลือก authClient แล้ว authParams จะถูกละเว้น
หมายเหตุ: ดูการกำหนดค่าสำหรับข้อมูลเพิ่มเติมเกี่ยวกับค่าการกำหนดค่าเหล่านี้
var authClient = new OktaAuth ( {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{yourClientId}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} ) ;
var config = {
baseUrl : 'https://{yourOktaDomain}' ,
authClient : authClient ,
} ;
var signIn = new OktaSignIn ( config ) ;
// signIn.authClient === authClient หากไม่มีการตั้งค่าตัวเลือก authClient อินสแตนซ์จะถูกสร้างขึ้นโดยใช้ตัวเลือกที่ส่งผ่านไปยังวิดเจ็ตและ authParams :
หมายเหตุ : เมื่อใช้ตัวเลือกการกำหนดค่า
authClientตรวจสอบให้แน่ใจว่าได้ติดตั้งและใช้@okta/okta-auth-jsเวอร์ชันเดียวกัน กับที่ใช้โดยวิดเจ็ตที่ติดตั้ง รุ่นนี้สามารถพบได้ในไฟล์package.jsonของวิดเจ็ตที่ติดตั้ง
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{yourClientId}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
authParams : {
ignoreSignature : true
}
} ;
var signIn = new OktaSignIn ( config ) ;
// signIn.authClient.options.clientId === '{yourClientId}'
// signIn.authClient.options.ignoreSignature === true'เพิ่มฟังก์ชั่นตะขอแบบอะซิงโครนัสซึ่งจะดำเนินการก่อนที่จะแสดงมุมมอง
หมายเหตุ: ดูการกำหนดค่าสำหรับข้อมูลเพิ่มเติมเกี่ยวกับค่าการกำหนดค่าเหล่านี้
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{yourClientId}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} ;
var signIn = new OktaSignIn ( config ) ;
signIn . before ( 'success-redirect' , async ( ) => {
// custom logic can go here. when the function resolves, execution will continue.
} ) ;หมายเหตุ : ฟังก์ชั่นนี้ได้รับการสนับสนุนเฉพาะเมื่อใช้เอ็นจิ้น Okta Identity เท่านั้น
เพิ่มฟังก์ชันเบ็ดแบบอะซิงโครนัสซึ่งจะดำเนินการหลังจากดูมุมมอง
หมายเหตุ: ดูการกำหนดค่าสำหรับข้อมูลเพิ่มเติมเกี่ยวกับค่าการกำหนดค่าเหล่านี้
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{yourClientId}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} ;
var signIn = new OktaSignIn ( config ) ;
signIn . after ( 'identify' , async ( ) => {
// custom logic can go here. when the function resolves, execution will continue.
} ) ; หากคุณใช้หน้าลงชื่อเข้าใช้ Okta-Hosted เริ่มต้นการกำหนดค่าทั้งหมดจะถูกจัดการผ่านส่วน Customization ของ UI ผู้ดูแลระบบ
หากคุณใช้หน้า Signin ที่กำหนดเอง Okta-hosted วัตถุจะรวมอยู่ในหน้าเว็บซึ่งมีค่าที่จำเป็นทั้งหมด คุณอาจไม่จำเป็นต้องแก้ไขวัตถุนี้ แต่คุณอาจใช้วัตถุนี้เป็นจุดเริ่มต้นและเพิ่มการปรับแต่งเพิ่มเติม
สำหรับวิดเจ็ตที่ฝังตัวคุณควรตั้งค่า issuer clientId และ redirectUri โดยค่าเริ่มต้นวิดเจ็ตจะทำงานบนเอ็นจิ้นตัวตนโดยใช้การไหลของรหัสการโต้ตอบ วิดเจ็ตยังสามารถทำงานกับเครื่องยนต์คลาสสิกได้โดยการตั้งค่าตัวเลือก USECLASSICENGINE เป็น true (ดูเอกสารนี้สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการทำงานใน Engine คลาสสิก
วิดเจ็ตที่ฝังตัวทั้งหมดควรตั้งค่าตัวเลือกพื้นฐานเหล่านี้: issuer , clientId และ redirectUri
หมายเหตุ : วิดเจ็ต Okta-hosted ไม่ควรตั้งค่าเหล่านี้
URL ของเซิร์ฟเวอร์การอนุญาตซึ่งจะออกโทเค็น OAuth ไปยังแอปพลิเคชันของคุณ
หมายเหตุ :
https://{yourOktaDomain}สามารถเป็นองค์กร OKTA ใด ๆ ดูคู่มือนักพัฒนาซอฟต์แวร์ของเราเพื่อขอความช่วยเหลือในการค้นหาโดเมน Okta ของคุณ
การกำหนดค่าพื้นฐานโดยใช้เซิร์ฟเวอร์การอนุญาตที่กำหนดเอง "เริ่มต้น":
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/default' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}สามารถระบุเซิร์ฟเวอร์การอนุญาตแบบกำหนดเองที่แตกต่างกันได้:
var config = {
issuer : 'https://{yourOktaDomain}/oauth2/custom' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
} แอปพลิเคชั่นบางตัวเช่นที่ต้องการการเข้าถึง API ผู้ใช้ OKTA จะต้องการใช้เซิร์ฟเวอร์การอนุมัติ OKTA Organization Authorization เป็นผู้ออก ในกรณีนี้ issuer ควรตรงกับโดเมน Okta ของคุณ:
var config = {
issuer : 'https://{yourOktaDomain}' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}หมายเหตุ : เซิร์ฟเวอร์การอนุญาตของ Okta Organization นั้นมีไว้สำหรับการเข้าถึง API ผู้ใช้ OKTA เท่านั้นและไม่รองรับคุณสมบัติทั้งหมดของเซิร์ฟเวอร์การอนุญาตแบบกำหนดเองมาตรฐานเช่นขอบเขตที่กำหนดเองบนโทเค็นการเข้าถึง โดยทั่วไปขอแนะนำให้ใช้เซิร์ฟเวอร์การอนุญาตที่กำหนดเองเพื่อการเข้าถึงทรัพยากรขององค์กรของคุณ
หมายเหตุ : ค่าการกำหนดค่านี้สามารถพบได้ใน Okta Admin UI ดูคู่มือนักพัฒนาซอฟต์แวร์ของเราเพื่อขอความช่วยเหลือในการค้นหา clientId ของแอปพลิเคชันของคุณ
รหัสไคลเอนต์ของแอปพลิเคชัน
หมายเหตุ : ค่าการกำหนดค่านี้สามารถพบได้ใน Okta Admin UI ภายใต้ "การตั้งค่าทั่วไป" ของแอปพลิเคชันของแอปพลิเคชัน
URI ที่จะใช้สำหรับการโทรกลับ OAuth
ค่าเริ่มต้นเป็น false โดยค่าเริ่มต้นวิดเจ็ตจะใช้การไหลของรหัสการโต้ตอบกับเอ็นจิ้นตัวตน การตั้งค่าตัวเลือก useClassicEngine เป็น true จะทำให้วิดเจ็ตทำงานกับเครื่องยนต์คลาสสิกแทน (ดูเอกสารนี้สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการกำหนดค่าวิดเจ็ตที่ทำงานในเอ็นจิ้นคลาสสิก)
หมายเหตุ : ตัวเลือกนี้พร้อมกับการสนับสนุนสำหรับเอ็นจิ้นคลาสสิกจะถูกลบออกในเวอร์ชันวิดเจ็ตในอนาคต ลูกค้าทุกคนได้รับการสนับสนุนให้โยกย้ายจากเอ็นจิ้นคลาสสิกไปยังเอ็นจิ้นตัวตน เยี่ยมชมการย้ายถิ่นฐานไปยัง OIE สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการย้ายไปยังเอ็นจิ้นตัวตน
ความท้าทายรหัส PKCE แอปพลิเคชัน SPA ไม่จำเป็นต้องมีตัวเลือกนี้เนื่องจากวิดเจ็ตจะจัดการธุรกรรมทั้งหมด เว็บแอปพลิเคชันควรสร้างความท้าทายรหัสและรหัสลับของตนเอง ความท้าทายของรหัสจะถูกส่งผ่านไปยังวิดเจ็ตและรหัสความลับนั้นจัดขึ้นฝั่งเซิร์ฟเวอร์เพื่อรับโทเค็นในการโทรกลับเข้าสู่ระบบ
หมายเหตุ : ตรวจสอบแอปพลิเคชันตัวอย่างของเราสำหรับตัวอย่างการทำงานที่สมบูรณ์ของการไหลของรหัสการโต้ตอบโดยใช้ PKCE
ค่าแอปพลิเคชันที่ให้ไว้ซึ่งจะถูกส่งคืนเป็นพารามิเตอร์การสืบค้นระหว่างการโทรกลับเข้าสู่ระบบหรือตรวจสอบการโทรกลับทางอีเมล หากไม่มีการตั้งค่าค่าจะมีการสร้างค่าสุ่ม เมื่อจัดการการตรวจสอบการโทรกลับอีเมลค่าของ state จากพารามิเตอร์แบบสอบถามควรส่งผ่านไปยังวิดเจ็ตเป็นตัวเลือกการกำหนดค่า (พร้อมกับ OTP) สิ่งนี้จะช่วยให้มั่นใจได้ว่าวิดเจ็ตสามารถโหลดและดำเนินการต่อธุรกรรมปัจจุบันได้
เมื่อจัดการอีเมลยืนยันการโทรกลับค่าของ otp จากพารามิเตอร์การสืบค้นควรถูกส่งผ่านไปยังวิดเจ็ตเป็นตัวเลือกการกำหนดค่า (พร้อมกับสถานะ) สิ่งนี้จะช่วยให้มั่นใจได้ว่าวิดเจ็ตสามารถโหลดและดำเนินการต่อธุรกรรมปัจจุบันได้
ค่าเริ่มต้นเป็น ['openid', 'email'] ระบุข้อมูลที่จะให้บริการใน id_token ที่ส่งคืนหรือ access_token สำหรับ OIDC คุณต้องรวม openid เป็นหนึ่งในขอบเขต สำหรับรายการขอบเขตที่มีอยู่ให้ดูที่ขอบเขตและการเรียกร้อง
แสดงคำสั่งซื้อสำหรับผู้ให้บริการข้อมูลประจำตัวภายนอกที่สัมพันธ์กับแบบฟอร์มการเข้าสู่ระบบ OKTA ค่าเริ่มต้นเป็น SECONDARY
PRIMARY - แสดงปุ่ม IDP ภายนอกด้านบนแบบฟอร์มการเข้าสู่ระบบ OktaSECONDARY - แสดงปุ่ม IDP ภายนอกด้านล่างแบบฟอร์มการเข้าสู่ระบบ Oktaเส้นทางท้องถิ่นหรือ URL ไปยังภาพโลโก้ที่แสดงที่ด้านบนของวิดเจ็ตลงชื่อเข้าใช้
// Hosted on the same origin
logo: '/img/logo.png'
// Can also be a full url
logo: 'https://acme.com/img/logo.png' ข้อความสำหรับแอตทริบิวต์ alt ของภาพโลโก้ข้อความโลโก้จะปรากฏขึ้นเมื่อไม่มีภาพโลโก้
// Text to describe the logo
logoText: 'logo text' ชื่อแบรนด์หรือ บริษัท ที่แสดงในข้อความที่แสดงโดยวิดเจ็ตการลงชื่อเข้าใช้ (ตัวอย่างเช่น "รีเซ็ตรหัสผ่าน { brandName } ของคุณ") หากไม่มีการระบุ brandName จะแสดงข้อความทั่วไปแทน (ตัวอย่างเช่น "รีเซ็ตรหัสผ่านของคุณ") คุณสามารถปรับแต่งข้อความที่แสดงด้วยการตั้งค่าภาษาและข้อความเพิ่มเติม
brandName: 'Spaghetti Inc.' ตัวเลือกเหล่านี้ช่วยให้คุณปรับแต่งลักษณะที่ปรากฏของวิดเจ็ตลงชื่อเข้าใช้
หากคุณต้องการปรับแต่งมากขึ้นคุณสามารถแก้ไขไฟล์ต้นฉบับ SASS และสร้างวิดเจ็ต
ตั้งค่าสีแบรนด์เป็นสีพื้นหลังของปุ่ม CTA หลัก สีต้องอยู่ในรูปแบบ hex เช่น #008000
colors: {
brand : '#008000'
}cs - เช็กda - เดนมาร์กde - เยอรมันel - กรีกen - ภาษาอังกฤษes - สเปนfi - ฟินแลนด์fr - ฝรั่งเศสhu - ฮังการีid - อินโดนีเซียit - อิตาลีja - ญี่ปุ่นko - เกาหลีms - มาเลเซียnb - นอร์เวย์nl-NL - ดัตช์pl - โปแลนด์pt-BR - โปรตุเกส (บราซิล)ro - โรมาเนียru - รัสเซียsv - สวีเดนth - ไทยtr - ตุรกีuk - ยูเครนzh-CN - จีน (PRC)zh-TW - จีน (ไต้หวัน)การสนับสนุนสำหรับภาษาเพิ่มเติมสามารถเพิ่มได้ด้วยตัวเลือก Languages Assets.Languages
ตั้งค่าภาษาของวิดเจ็ต หากไม่มีการระบุภาษาวิดเจ็ตจะเลือกภาษาตามการตั้งค่าเบราว์เซอร์ของผู้ใช้หากรองรับหรือเริ่มต้นเป็น en
// You can simply pass the languageCode as a string:
language: 'ja'
// Or, if you need to determine it dynamically, you can pass a
// callback function:
language: ( supportedLanguages , userLanguages ) => {
// supportedLanguages is an array of languageCodes, i.e.:
// ['cs', 'da', ...]
//
// userLanguages is an array of languageCodes that come from the user's
// browser preferences
return supportedLanguages [ 0 ] ;
} ตั้งค่ารหัสประเทศเริ่มต้นของวิดเจ็ต หากไม่มีการจัดเตรียม defaultCountryCode ให้ค่าเริ่มต้นให้ US มันตั้งค่ารหัสการโทรของประเทศสำหรับหมายเลขโทรศัพท์ตามที่อยู่ในวิดเจ็ต
แทนที่ข้อความในวิดเจ็ต รายการคุณสมบัติทั้งหมดสามารถพบได้ในล็อกอิน properties และ country.properties ไฟล์
// The i18n object maps language codes to a hash of property keys ->
// property values.
i18n: {
// Overriding English properties
'en' : {
'primaryauth.title' : 'Sign in to Acme' ,
'primaryauth.username.placeholder' : 'Your Acme Username'
} ,
// Overriding Japanese properties
'ja' : {
'primaryauth.title' : 'ACMEにサインイン' ,
'primaryauth.username.placeholder' : 'ACMEのユーザー名'
}
}
// If you want to override any properties in the country.properties file,
// you will need to prefix the name with "country.":
i18n: {
'en' : {
// login.properties keys do not have a special prefix
'primaryAuth.title' : 'Sign in to Acme' ,
// country.properties keys are prefixed with 'country.'
'country.AF' : 'Afghanistan, edited' ,
'country.AL' : 'Albania, edited'
}
}แทนที่ URL พื้นฐานวิดเจ็ตดึงไฟล์ภาษาออกมา วิดเจ็ตถูกบรรจุด้วยข้อความภาษาอังกฤษตามค่าเริ่มต้นและโหลดภาษาอื่น ๆ ตามความต้องการจาก Okta CDN หากคุณต้องการให้บริการไฟล์ภาษาจากเซิร์ฟเวอร์ของคุณเองให้อัปเดตการตั้งค่านี้
// Loading the assets from a path on the current domain
assets: {
baseUrl : '/path/to/dist'
} ,
// Full urls work as well
assets : {
baseUrl : 'https://acme.com/assets/dist'
}หมายเหตุ: ไฟล์ JSON สามารถเข้าถึงได้จากโฟลเดอร์
dist/labels/jsonที่เผยแพร่ในโมดูล NPM
ระบุรายการภาษาที่รองรับซึ่งโฮสต์และเข้าถึงได้ภายใต้เส้นทาง {assets.baseUrl}/labels/json/ ตัวเลือกนี้แทนที่รายการเริ่มต้นของภาษาที่รองรับ หากมีการร้องขอภาษาที่ไม่ได้รับการสนับสนุน (อย่างชัดเจนโดยใช้ตัวเลือกภาษาหรือโดยอัตโนมัติโดยการตรวจจับเบราว์เซอร์) จะใช้ภาษาเริ่มต้น ( en )
คุณสามารถใช้ฟังก์ชั่นนี้เพื่อเขียนเส้นทางสินทรัพย์และชื่อไฟล์ใหม่ ใช้ฟังก์ชั่นนี้หากคุณจะโฮสต์ไฟล์สินทรัพย์บนโฮสต์ของคุณเองและวางแผนที่จะเปลี่ยนเส้นทางหรือชื่อไฟล์ของสินทรัพย์ สิ่งนี้มีประโยชน์เช่นหากคุณต้องการ cachebust ไฟล์
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 ) ;
}
}ตั้งค่าตัวเลือกการกำหนดค่าต่อไปนี้เพื่อแทนที่ Back to Sign in Link URL หากไม่ได้จัดเตรียมวิดเจ็ตจะนำทางไปยังการรับรองความถูกต้องหลัก
backToSignInLink: 'https://www.backtosignin.com'หมายเหตุ: สำหรับความเข้ากันได้กับเวอร์ชันวิดเจ็ตก่อนหน้านี้
signOutLinkได้รับการยอมรับว่าเป็นนามแฝงสำหรับbackToSignInLink
คุณสามารถเพิ่มลิงค์ลงทะเบียนไปยังหน้าตรวจสอบหลักโดยตั้งค่าตัวเลือกการกำหนดค่าต่อไปนี้
ฟังก์ชั่นที่เรียกว่าเมื่อคลิกลิงก์การลงทะเบียน
// An example that adds a registration link underneath the login form on the primary auth page
registration: {
click : ( ) => {
window . location . href = 'https://acme.com/sign-up' ;
}
} ตั้งค่าตัวเลือกการกำหนดค่าต่อไปนี้เพื่อแทนที่ URL ลิงค์ช่วยเหลือในหน้าตรวจสอบหลัก
// An example that overrides all help links, and sets two custom links
helpLinks: {
help : 'https://acme.com/help' ,
forgotPassword : 'https://acme.com/forgot-password' ,
unlock : 'https://acme.com/unlock-account' ,
custom : [
{
text : 'What is Okta?' ,
href : 'https://acme.com/what-is-okta'
} ,
{
text : 'Acme Portal' ,
href : 'https://acme.com' ,
target : '_blank'
}
]
} ลิงค์ที่กำหนดเอง href สำหรับลิงค์ "ช่วยเหลือ"
ลิงค์ที่กำหนดเอง href สำหรับลิงค์ "ลืมรหัสผ่าน"
ลิงค์ที่กำหนดเอง HREF สำหรับลิงค์ "ปลดล็อคบัญชี" สำหรับลิงค์นี้ที่จะแสดง features.selfServiceUnlock นี้ต้องตั้งค่า SelfServiceUnLock เป็น true และคุณลักษณะการปลดล็อคการบริการด้วยตนเองจะต้องเปิดใช้งานในการตั้งค่าผู้ดูแลระบบของคุณ
อาร์เรย์ของวัตถุลิงก์ที่กำหนดเอง {text, href, target} ที่จะถูกเพิ่มหลังจากลิงค์ "help" target ของลิงค์เป็นทางเลือก
ตั้งค่าตัวเลือกการกำหนดค่าต่อไปนี้เพื่อปรับแต่งสคริปต์ hCaptcha URI:
// An example that uses cn1 host
hcaptcha : {
scriptSource : 'https://cn1.hcaptcha.com/1/api.js' ,
scriptParams : {
apihost : 'https://cn1.hcaptcha.com' ,
endpoint : 'https://cn1.hcaptcha.com' ,
assethost : 'https://assets-cn1.hcaptcha.com' ,
imghost : 'https://imgs-cn1.hcaptcha.com' ,
reportapi : 'https://reportapi-cn1.hcaptcha.com' ,
}
} , ตั้งค่าตัวเลือกการกำหนดค่าต่อไปนี้เพื่อปรับแต่งสคริปต์ reCAPTCHA URI:
// An example that uses recaptcha.net
recaptcha : {
scriptSource : 'https://recaptcha.net/recaptcha/api.js'
} ,สามารถเรียกใช้การโทรกลับแบบอะซิงโครนัสก่อนหรือหลังการแสดงผลเฉพาะ ตะขอสามารถใช้เพื่อเพิ่มตรรกะที่กำหนดเองเช่นเครื่องมือวัดการบันทึกหรือการป้อนข้อมูลผู้ใช้เพิ่มเติม การดำเนินการปกติจะถูกบล็อกในขณะที่ฟังก์ชั่น Hook กำลังดำเนินการและจะกลับมาทำงานต่อหลังจากสัญญาที่ส่งคืนจากฟังก์ชั่น Hook จะแก้ไข ตะขอสามารถเพิ่มผ่านการกำหนดค่าดังที่แสดงด้านล่างหรือที่รันไทม์โดยใช้วิธีก่อนหรือหลัง รายการทั้งหมดของมุมมองสามารถพบได้ใน remediationConstants.js
// Hooks can be set in config
hooks: {
'identify' : {
after : [
async function afterIdentify ( ) {
// custom logic goes here
}
]
} ,
'success-redirect' : {
before : [
async function beforeSuccessRedirect ( ) {
// custom logic goes here
}
]
}
}
// Hooks can also be added at runtime
signIn . before ( 'success-redirect' , async ( ) => {
// custom logic goes here
} ) ;
signIn . after ( 'identify' , async ( ) => {
// custom logic goes here
} ) ;แปลงชื่อผู้ใช้ก่อนส่งคำขอด้วยชื่อผู้ใช้เป็น Okta สิ่งนี้มีประโยชน์เมื่อคุณมีการแมปภายในระหว่างสิ่งที่ผู้ใช้ป้อนและชื่อผู้ใช้ OKTA ของพวกเขา
// The callback function is passed two arguments:
// 1) username: The name entered by the user
// 2) operation: The type of operation the user is trying to perform:
// - PRIMARY_AUTH
// - FORGOT_PASSWORD
// - UNLOCK_ACCOUNT
transformUsername: ( username , operation ) => {
// This example will append the '@acme.com' domain if the user has
// not entered it
return username . includes ( '@acme.com' )
? username
: username + '@acme.com' ;
}สามารถให้ฟังก์ชั่นการโทรกลับซึ่งจะถูกเรียกในช่วงเวลาที่กำหนดในกระบวนการลงทะเบียน
registration : {
parseSchema : ( schema , onSuccess , onFailure ) => {
// handle parseSchema callback
onSuccess ( schema ) ;
} ,
preSubmit : ( postData , onSuccess , onFailure ) => {
// handle preSubmit callback
onSuccess ( postData ) ;
} ,
postSubmit : ( response , onSuccess , onFailure ) => {
// handle postsubmit callback
onSuccess ( response ) ;
}
} , การโทรกลับใช้เพื่อเปลี่ยนสคีมา JSON ที่กลับมาจาก 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 ) ;
} การโทรกลับใช้เป็นหลักในการแก้ไขพารามิเตอร์คำขอที่ส่งไปยัง OKTA API
preSubmit: ( postData , onSuccess ) => {
// This example will append the domain name to the email address if the user forgets to add it during registration.
if ( ! postData . userProfile . email . includes ( '@acme.com' ) ) {
postData . userProfile . email += '@acme.com' ;
}
}
onSuccess ( postData ) ;
} การโทรกลับใช้เพื่อรับการควบคุมเป็นหลักและเพื่อแก้ไขพฤติกรรมการส่งการส่งไปยัง API การลงทะเบียน
postSubmit: ( response , onSuccess ) => {
// This example will log the API request body to the browser console before completing registration.
console . log ( response ) ;
onSuccess ( response ) ;
} preSubmit: ( postData , onSuccess , onFailure ) => {
// A generic form level error is shown if no error object is provided
onFailure ( ) ;
} preSubmit: ( postData , onSuccess , onFailure ) => {
const error = {
"errorSummary" : "Custom form level error"
} ;
onFailure ( error ) ;
} preSubmit: ( postData , onSuccess , onFailure ) => {
const error = {
"errorSummary" : "API Error" ,
"errorCauses" : [
{
"errorSummary" : "Custom field level error" ,
"property" : "userProfile.email" ,
}
]
} ;
onFailure ( error ) ;
} คุณสามารถเพิ่มปุ่มที่กำหนดเองใต้แบบฟอร์มการเข้าสู่ระบบในหน้าตรวจสอบหลักโดยตั้งค่าตัวเลือกการกำหนดค่าต่อไปนี้ หากคุณต้องการเปลี่ยนข้อความตัวแบ่งให้ใช้ตัวเลือกการกำหนดค่า i18n
// An example that adds a custom button below the login form on the Sign in form
customButtons: [ {
title : 'Click Me' ,
className : 'btn-customAuth' ,
click : ( ) => {
// clicking on the button navigates to another page
window . location . href = 'https://www.example.com' ;
}
} ]
// An example that adds a custom button with a localized title below the Sign in form
i18n: {
en : {
'customButton.title' : 'Custom Button Title' ,
} ,
} ,
customButtons : [ {
i18nKey : 'customButton.title' ,
className : 'btn-customAuth' ,
click : ( ) => {
// clicking on the button navigates to another page
window . location . href = 'https://www.example.com' ;
}
} ] สตริงที่ตั้งค่าเป็นข้อความปุ่ม (ตั้งค่าเพียงหนึ่งใน title หรือ i18nKey )
คีย์การแปลที่กำหนดเองสำหรับข้อความที่ระบุไว้ในตัวเลือก i18n config (ตั้งค่าเฉพาะหนึ่งใน title หรือ i18nKey )
คลาสเสริมที่สามารถเพิ่มลงในปุ่ม
ฟังก์ชั่นที่เรียกว่าเมื่อคลิกปุ่ม
เปิดใช้งานหรือปิดใช้งานฟังก์ชั่นวิดเจ็ตด้วยตัวเลือกต่อไปนี้
features: {
showPasswordToggleOnSignInPage : true ,
hideSignOutLinkInMFA : false ,
rememberMe : true
} ค่าเริ่มต้นเป็น true แสดงไอคอนตาเพื่อสลับการมองเห็นของผู้ใช้ที่ป้อนรหัสผ่านในหน้าการลงชื่อเข้าใช้ Okta รหัสผ่านจะถูกซ่อนโดยค่าเริ่มต้นแม้ว่าจะเปิดใช้งานการตั้งค่าสถานะนี้ รหัสผ่านสามารถมองเห็นได้เป็นเวลา 30 วินาทีจากนั้นซ่อนโดยอัตโนมัติ
ค่าเริ่มต้นเป็น true แสดงตัวระบุของผู้ใช้ในมุมมองใด ๆ ที่มีบริบทผู้ใช้
ค่าเริ่มต้นเป็น false ซ่อนลิงค์ "Back to Sign In" สำหรับการลงทะเบียน Authenticator และ Challenge Flows
ค่าเริ่มต้นเป็น true เติมฟิลด์ฟิลด์ตัวระบุด้วยชื่อผู้ใช้ที่ใช้ก่อนหน้านี้
ค่าเริ่มต้นเป็น true มุ่งเน้นฟิลด์อินพุตแรกของแบบฟอร์มใด ๆ โดยอัตโนมัติเมื่อแสดง
ค่าเริ่มต้นเป็น false ตั้งค่าแอตทริบิวต์การเติมข้อความอัตโนมัติบนฟิลด์อินพุตเป็น off
วิดเจ็ตฉีดสคริปต์แบบอินไลน์/บล็อกสไตล์ที่รันไทม์เพื่อการปรับแต่ง แต่บล็อกเหล่านั้นอาจละเมิดกฎ CSP ที่ตั้งอยู่ในหน้าเว็บที่โฮสต์
cspNonce อนุญาตให้ตั้งค่าที่ไม่ได้กำหนดจากส่วนหัว Content-Security-Policy ไปยังบล็อกที่ฉีดดังนั้นสคริปต์/สไตล์จากบล็อกเหล่านั้นยังคงสามารถเรียกใช้งานได้
หมายเหตุ: คำสั่ง nonce ถูกเพิ่มลงใน CSP Level2 คุณอาจยังเห็นข้อผิดพลาด CSP ในคอนโซลเบราว์เซอร์หากใช้ในเบราว์เซอร์ที่ไม่ได้รับการสนับสนุน
กิจกรรมที่เผยแพร่โดยวิดเจ็ต สมัครสมาชิกเหตุการณ์เหล่านี้โดยใช้
ทริกเกอร์เมื่อวิดเจ็ตพร้อมที่จะรับอินพุตผู้ใช้เป็นครั้งแรก ส่งคืนวัตถุ context ที่มีคุณสมบัติต่อไปนี้:
signIn . on ( 'ready' , function ( context ) {
// The Widget is ready for user input
} ) ; วิดเจ็ตจะจัดการกับข้อผิดพลาดส่วนใหญ่ - ตัวอย่างเช่นหากผู้ใช้ป้อนรหัสผ่านที่ไม่ถูกต้องหรือมีปัญหาในการตรวจสอบสิทธิ์ ในการจับข้อผิดพลาดการเปลี่ยนแปลงสถานะการตรวจสอบความถูกต้องหลังจากได้รับการจัดการและแสดงผลโดยวิดเจ็ตให้ฟังเหตุการณ์ afterError นอกจากนี้คุณยังสามารถจับข้อผิดพลาดของ OAuth และการลงทะเบียน สำหรับประเภทข้อผิดพลาดอื่น ๆ ควรจัดการกับพวกเขาโดยใช้ตัวจัดการข้อผิดพลาด renderEl
ส่งคืนวัตถุ context และข้อ error ที่มีคุณสมบัติต่อไปนี้:
context :error : signIn . on ( 'afterError' , function ( context , error ) {
console . log ( context . controller ) ;
// reset-password
console . log ( error . name ) ;
// AuthApiError
console . log ( error . message ) ;
// The password does not meet the complexity requirements
// of the current password policy.
console . log ( error . statusCode ) ;
// 403
} ) ; 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!
| สั่งการ | คำอธิบาย |
|---|---|
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.
