okta signin widget
7.25.1
أداة تسجيل الدخول OKTA هي عنصر واجهة مستخدم JavaScript توفر تجربة تسجيل دخول مميزة وقابلة للتخصيص بالكامل والتي يمكن استخدامها لمصادقة المستخدمين في تطبيقات الويب والجوال.
يتم استخدام القطعة على صفحة علامة OKTA الافتراضية لبدء جلسة OKTA SSO وتعيين ملف تعريف الارتباط OKTA في متصفح الويب. يمكنه أيضًا إجراء تدفق OIDC لدمج الويب أو تطبيقات الهاتف المحمول بسهولة في منصة OKTA.
يمكن تكوين صفحة علامة OKTA المخصصة التي تستضيفها OKTA لاستخدام اسم مجال مؤسستك وعلاماتها التجارية.
يمكن أيضًا تضمين عنصر واجهة المستخدم مباشرة في تطبيقات الويب الخاصة بمؤسستك أو تطبيقات الهاتف المحمول لتجربة مستخدم سلسة.
راجع دليل الاستخدام لمزيد من المعلومات حول كيفية البدء باستخدام أداة تسجيل الدخول.
yarn linkOKTA Identity Engine (OIE) هي خدمة منصة تتيح للمؤسسات بناء تجارب وصول أكثر مرونة تم تصميمها لتلبية احتياجاتها التنظيمية. يدعم أداة تسجيل الدخول OKTA OIE في جميع سيناريوهات الاستخدام.
ملاحظة : ما لم يذكر خلاف ذلك ، تفترض هذا ReadMe أنك تستخدم محرك الهوية. يمكن العثور على معلومات حول استخدام القطعة مع المحرك الكلاسيكي في هذا المستند
أداة تسجيل الدخول قائمة بذاتها ولا تتطلب أي أطر أخرى في وقت التشغيل. ومع ذلك ، قد تكون هناك ميزات معينة احتياجات تطبيقك مثل التخزين المميز أو التجديد أو التحقق من الصحة ، والتي لا توفرها عنصر واجهة المستخدم.
هذه SDKs متوافقة تمامًا مع عنصر واجهة المستخدم OKTA وتوفير الأدوات المساعدة للمساعدة في دمج مصادقة OKTA من طرف إلى طرف في التطبيق الخاص بك.
تُظهر تطبيقات العينة الكاملة استخدام عنصر واجهة مستخدم OKTA في كل من السيناريوهات التي تستضيفها OKTA والمدمجة.
هناك عدة طرق لاستخدام أداة تسجيل الدخول OKTA:
يوفر Okta صفحة تسجيل الدخول الافتراضية لمؤسستك ، مستضافة في عنوان URL لمؤسستك.
تدعم OKTA خيارًا لإنشاء مجال مخصص مع صفحة تسجيل دخول مستضافة OKTA قابلة للتخصيص للغاية.
يمكنك تضمين عنصر واجهة المستخدم مباشرة في التطبيق الخاص بك.
توفر OKTA صفحة تسجيل الدخول ، متوفرة في عنوان URL لمؤسستك ، والتي تتيح للمستخدم إكمال تدفق التفويض بالكامل ، وبدء جلسة SSO (تسجيل الدخول الفردي) ، وتعيين ملف تعريف ارتباط جلسة OKTA في متصفح الويب. يمكنك تخصيص هذه الصفحة مع صورة وشعار خلفية. بشكل افتراضي ، يقوم التوقيع في هذه الصفحة بإعادة توجيه المستخدم إلى لوحة معلومات مستخدم OKTA.
يمكن لصفحة تسجيل الدخول التي تستضيفها OKTA الافتراضي أيضًا مصادقة مستخدم في تطبيق OIDC. يمكن للتطبيق الخاص بك إعادة توجيه إلى صفحة تسجيل دخول لتنفيذ تدفق المصادقة ، وبعد ذلك يعيد OKTA إعادة المستخدم إلى رد الاتصال على التطبيق. يوفر Okta SDKs بعدة لغات للمساعدة في بناء عنوان URL إعادة توجيه والتعامل مع رد اتصال تسجيل الدخول كجزء من التدفق المستضاف.
توفر OKTA العديد من تطبيقات العينة الكاملة التي توضح كيفية استخدام تدفق OKTA المستضافة.
توفر OKTA أيضًا صفحة تسجيل دخول مستضافة يمكن تخصيصها بحيث تكون متوفرة ضمن مجال مخصص وهو نطاق فرعي لنطاق شركتك الأعلى. على الرغم من أن الصفحة تستضيفها OKTA ، يمكنك تخصيص قالب هذه الصفحة بعدة طرق قوية.
فيما يتعلق بتطبيقك ، يتصرف عنصر واجهة المستخدم المخصصة بنفس القسطية الافتراضية التي تستضيفها OKTA ويمكنك استخدام نفس التدفق المستضاف.
ملاحظة: سيكون هناك كائن تكوين على الصفحة التي تحتوي على جميع القيم المطلوبة والميزات الممكّنة. من المحتمل ألا تحتاج إلى تعديل هذا الكائن. إذا وجدت أنك بحاجة إلى تعديل هذا التكوين ، فاحرص على عدم الكتابة أو إزالة أي قيم مطلوبة.
للحصول على تجربة سلسة تمامًا تسمح بأعلى مستوى من التخصيص ، يمكنك تضمين عنصر واجهة المستخدم مباشرة في تطبيقك. هذا يسمح بالاستخدام الكامل لتكوين عنصر واجهة برمجة التطبيقات.
باستخدام عنصر واجهة مستخدم مضمّنة ، يمكن لشبكة الويب من جانب العميل والتطبيقات الأصلية تجنب إعادة توجيه رحلة ذهابًا وإيابًا للتدفق المستضاف في كثير من الحالات. انظر Showsignin.
ستتلقى تطبيقات الويب من جانب الخادم جانب الخادم OAUTH ، لذلك يجب عليها التعامل مع رد اتصال إعادة توجيه . يجب أن تستخدم هذه التطبيقات shownandredirect.
يمكنك تضمين أداة تسجيل الدخول في تطبيقك إما من خلال تضمين علامة نصية تقوم بسحب القطعة من OKTA CDN أو تجميع وحدة NPM في التطبيق الخاص بك.
يعد تحميل أصولنا مباشرة من CDN اختيارًا جيدًا إذا كنت تريد طريقة سهلة للبدء في عنصر واجهة المستخدم ، فلا يوجد بالفعل عملية بناء موجودة تستفيد من NPM أو الغزل للتبعيات الخارجية ، أو أي سبب آخر لا تدون فيه " T تريد تجميع أداة تسجيل الدخول في التطبيق الخاص بك.
تتضمن الحزمة القياسية ( okta-sign-in.min.js ) دعمًا لكل من المحرك الكلاسيكي ومحرك الهوية. ويشمل أيضًا polyfill لضمان التوافق مع المتصفحات القديمة مثل IE11. إذا لم يكن تطبيقك بحاجة إلى دعم IE11 ، فيمكنك تضمين حزمة no-polyfill بدلاً من ذلك لتقليل وقت التحميل للمستخدمين لأول مرة. يمكن تضمين حزمة polyfill المستقلة بشكل مشروط على الصفحات لإضافة دعم للمتصفحات القديمة فقط عند الضرورة.
إذا كانت مؤسستك قد تمت ترقيتها إلى محرك الهوية ، فيمكن استخدام حزمة oie الأصغر.
| باقة | اسم الملف | تقريبا. مقاس | المحرك الكلاسيكي | محرك الهوية | polyfill | ملحوظات |
|---|---|---|---|---|---|---|
| معيار | Okta-Sign-in.min.js | 1.7 ميغابايت | ✅ | ✅ | ✅ | حزمة قياسية تتضمن كل شيء |
| لا polyfill | Okta-Sign-in.no-polyfill.min.js | 1.7 ميغابايت | ✅ | ✅ | حزمة قياسية بدون polyfill | |
| أوي | Okta-Sign-in.oie.min.js | 1.3 ميغابايت | ✅ | حزمة أصغر ل OIE ORGS | ||
| كلاسيكي | Okta-Sign-in.classic.min.js | 1.1 ميغابايت | ✅ | حزمة أصغر للمحرك الكلاسيكي فقط | ||
| polyfill | Okta-Sign-in.polyfill.min.js | 108 كيلو بايت | ✅ | حزمة polyfill المستقلة. يمكن استخدامها جنبا إلى جنب مع حزمة القطعة التي لا تشمل 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 المستقلة بشكل مشروط. يجب تحميل 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 (TypeScript) تكوين Simliar ، أيضًا في tsconfig.json
{
...
"angularCompilerOptions" : {
"allowSyntheticDefaultImports" : true ,
...
}
} يتم تثبيت ملفات المصدر والأصول القطعة على node_modules/@okta/okta-signin-widget/dist ، واحصل على بنية الدليل هذه:
node_modules/@okta/okta-signin-widget/dist/
├── css/
│ │ # Main CSS file for widget styles
│ └── okta-sign-in.min.css
│
│ # Base font and image files that are used in rendering the widget
├── font/
│
├── img/
│
├── js/
│ │ # CDN JS file that exports the OktaSignIn object in UMD format. This is
│ │ # packaged with everything needed to run the widget, including 3rd party
│ │ # vendor files and polyfills.
│ ├── okta-sign-in.min.js
| |
│ │ # CDN JS file bundled without polyfills.
│ ├── okta-sign-in.no-polyfill.min.js
│ │
│ │ # Development version of okta-sign-in.min.js. Equipped with helpful
│ │ # console warning messages for common configuration errors.
│ └── okta-sign-in.js
│
│ # Localized strings that are used to display all text and labels in the
│ # widget. Three output formats are included - json and properties
├── labels/
│
│ # Sass files that are used to generate the widget css. If you are already
│ # using Sass in your project, you can include these helper files to make
│ # generating your custom theme easier
└── sass/بعد التثبيت:
انسخ الأصول إلى المجلد الذي سيتم توزيعه على موقعك المستضاف للجمهور. المجلدات التي ستحتاج إلى نسخها هي css font و img و js labels .
بدلاً من نسخ دليل js وإدراجه في صفحتك كعالم عالمي ، يمكنك أن تتطلب أداة تسجيل الدخول في الإنشاء الخاص بك إذا كنت تستخدم WebPack أو Browserify أو نظامًا آخر لتجميع الوحدة النمطية يفهم تنسيق node_modules .
// Load the Sign-In Widget module
var OktaSignIn = require ( '@okta/okta-signin-widget' ) ;
// Use OktaSignIn
var signIn = new OktaSignIn ( /* configOptions */ ) ;يتم توفير خرائط المصدر كملف .map خارجي. إذا كنت تستخدم WebPack ، فيمكن تحميلها باستخدام المكون الإضافي لـ Source-Map-Loader.
إذا كنت ترغب في تضمين أنماط عنصر واجهة مستخدم في الحزمة باستخدام style-loader أو mini-css-extract-plugin ، استخدم الاستيراد التالي:
import '@okta/okta-signin-widget/css/okta-sign-in.min.css' ; ملاحظة: إذا كنت تستخدم Browserify لتجميع التطبيق الخاص بك ، فستحتاج إلى استخدام الخيار --noparse :
browserify main.js
--noparse= $PWD /node_modules/@okta/okta-signin-widget/dist/js-okta-sign-in.entry.js
--outfile=bundle.jsتأكد من تضمين Polyfills ES6 مع Bundler الخاص بك إذا كنت بحاجة إلى دعم IE11. يوفر القطعة جميع الملفيات المطلوبة من خلال التصدير:
const polyfill = require('@okta/okta-signin-widget/polyfill');
أو
import polyfill from '@okta/okta-signin-widget/polyfill';
يجب أن تساعدك هذه الأمثلة البسيطة في البدء باستخدام أداة تسجيل الدخول. للحصول على حلول كاملة من طرف إلى طرف ، تحقق من تطبيقات العينة الخاصة بنا.
يعمل تطبيق صفحة واحدة (SPA) بالكامل في المتصفح. تتوافق تطبيقات السبا باستخدام تدفقات من جانب العميل وتخزين الرموز المميزة في التخزين القائم على المتصفح.
ملاحظة: راجع التكوين لمزيد من المعلومات حول قيم التكوين هذه
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 بتمهيد واجهة المستخدم في طريقة عرض محددة مثل التسجيل أو إلغاء القفل أو إعادة تعيين كلمة المرور. التدفقات المدعومة:
ملاحظة: لا يمكن أن يعمل تدفق معين إلا إذا قام المسؤول بتكوين ORG للسماح للعمليات المطلوبة (مثال: إذا لم يتم تمكين تسجيل الملف الشخصي (تسجيل المستخدم) في وحدة تحكم المسؤول ، فإن قم بتمهيد عنصر واجهة المستخدم مع
flow: 'signup'يؤدي إلى خطأ)
// login.html
new OktaSignIn ( {
flow : 'login'
} ) ;
// signup.html
new OktaSignIn ( {
flow : 'signup'
} ) ;
// reset_password.html
new OktaSignIn ( {
flow : 'resetPassword'
} ) ;
// unlock_account.html
new OktaSignIn ( {
flow : 'unlockAccount'
} ) ; يحدث رد اتصال إعادة توجيه عندما يتم إعادة تحميل تطبيقك في المتصفح كجزء من التدفق. أثناء رد الاتصال إعادة التوجيه ، يتم تحميل التطبيق على مسار عنوان URL معين قمت بتعريفه في تكوين تطبيق OKTA الخاص بك. لا يمكن معالجة معظم عمليات الاسترجاعات إلا مرة واحدة وستنتج خطأ إذا كانت هناك محاولة للتعامل معها مرتين. عادةً ، سيقوم التطبيق بإعادة توجيه نفسه إلى مسار URL معروف أو تم حفظه مسبقًا بعد معالجة منطق رد الاتصال لتجنب الأخطاء في إعادة تحميل الصفحة.
ملاحظة: يجب أن تكون معظم التطبيقات مستعدة للتعامل مع واحد أو أكثر من عمليات الاسترجاعات إعادة توجيه. اعتمادًا على كيفية تكوين سياسة تسجيل الدخول ، قد تكون بعض تطبيقات SPA قادرة على تلقي الرموز دون إعادة توجيه. ومع ذلك ، يجب إضافة المنطق إذا كانت السياسة تتضمن تسجيل الدخول مع مزود اجتماعي / IDP أو يسمح بمصادقة أو استعادة الحساب باستخدام التحقق من البريد الإلكتروني.
رد اتصال OAUTH هو الخطوة الأخيرة من تدفق رمز التفاعل. في المصادقة الناجحة ، يتم إعادة توجيه المتصفح إلى Okta بمعلومات لبدء جلسة جديدة. تقوم خوادم Okta بمعالجة المعلومات ثم إعادة توجيه إلى redirectUri التطبيق الخاص بك. إذا نجحت ، يكون رمز التفاعل موجودًا في عنوان URL كمعلمة استعلام interaction_code . إذا لم تنجح ، فهناك error ومعلمات استعلام error_description في عنوان URL. سواء كانت ناجحة أم لا ، سيتم أيضًا إرجاع معلمة state ، التي تم تمريرها في الأصل إلى عنصر واجهة المستخدم بواسطة تطبيقك ، على إعادة التوجيه. يمكن استخدام ذلك بواسطة تطبيقات الويب من جانب الخادم لمطابقة رد الاتصال مع جلسة المستخدم الصحيحة.
ستتعامل جميع تطبيقات الويب مع رد اتصال OAUTH . بالنسبة لتطبيقات SPA ، في كثير من الحالات ، لن تتطلب سياسة الإشارة إلى إعادة توجيه ويمكن أن تتلقى هذه التطبيقات الرموز المميزة مباشرة من Dreaminin. ومع ذلك ، إذا كانت سياسة تسجيل الدخول تتطلب إعادة توجيه لأي سبب من الأسباب (مثل التكامل مع مزود SICT / IDP) ، ستحتاج تطبيقات SPA إلى التعامل مع رد اتصال OAUTH. لهذا السبب ، فإننا نوصي بأن تكون جميع تطبيقات SPA مستعدة للتعامل مع رد اتصال OAuth .
ملاحظة: لا يتعامل عنصر القطعة مع رد اتصال OAuth مباشرة. يمكن لتطبيقات الويب من جانب الخادم استخدام أحد SDKs الخاصة بنا للمساعدة في التعامل مع رد الاتصال. يمكن لتطبيقات SPA استخدام OKTA-Auth-JS SDK ، والتي تم تضمينها مع عنصر واجهة المستخدم كقمة
authClient.
يمكن لتطبيق SPA التعامل مع جانب عميل رد الاتصال OAUTH باستخدام authClient المدمج:
// https://myapp.mycompany.com/login/callback?interaction_code=ABC&state=XYZ
if ( signIn . authClient . isLoginRedirect ( ) ) {
await signIn . authClient . handleLoginRedirect ( ) ;
} بعد تسجيل الدخول مع IDP من طرف ثالث ، يتم إعادة توجيه المستخدم إلى redirectUri التطبيق. إذا لم يكن هناك حاجة إلى مزيد من الإدخال من المستخدم ، فسيكون هذا رد اتصال OAUTH يحتوي على معلمة interaction_code . إذا كان هناك حاجة إلى مزيد من الإدخال ، فسيتضمن رد الاتصال معلمة error مع interaction_required القيمة. في هذه الحالة ، يجب تحميل أداة تسجيل الدخول مرة أخرى بحيث يمكن أن يستمر التدفق.
يجب أن يبحث كل من تطبيقات الويب والمنتجع الصحي من جانب الخادم عن معلمة استعلام error ، وإذا كانت القيمة interaction_required ، فيجب عليها تقديم عنصر واجهة المستخدم مرة أخرى باستخدام نفس التكوين مثل العرض الأول. سيتم أيضًا تمرير معلمة state على رد الاتصال الذي يمكن استخدامه لمطابقة الطلب مع جلسة تطبيق المستخدم. سوف تستمر القطعة تلقائيا مع المعاملة.
سيحتاج طلبك إلى تطبيق بريد إلكتروني تحقق من رد الاتصال إذا كانت سياسة تسجيل الدخول الخاصة بك تستخدم رابط البريد الإلكتروني السحري/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 ، سيكون هناك كائن تكوين على الصفحة التي تحتوي على جميع القيم المطلوبة. من المحتمل ألا تحتاج إلى تعديل هذا الكائن.
للتطبيقات التي تستخدم عنصر واجهة مستخدم مضمن ، ستحتاج إلى توفير تكوين 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.
ملاحظة : هذه هي الطريقة الموصى بها لتقديم عنصر واجهة المستخدم لتطبيقات السبا. يجب أن تستخدم تطبيقات الويب من جانب الخادم طريقة shownandredirect بدلاً من ذلك.
يقبل 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
} ) ;إخفاء القطعة ، ولكن الحفاظ على القطعة في دوم.
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
يضيف وظيفة خطاف غير متزامنة سيتم تنفيذها بعد عرض عرض.
ملاحظة: راجع التكوين لمزيد من المعلومات حول قيم التكوين هذه
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 ، يتم التعامل مع جميع التكوينات عبر قسم Customization في واجهة المستخدم.
إذا كنت تستخدم صفحة علامة OKTA المخصصة التي تستضيفها OKTA ، يتم تضمين كائن تكوين في الصفحة التي تحتوي على جميع القيم اللازمة. ربما لن تحتاج إلى تعديل هذا الكائن ، ولكن يمكنك استخدام هذا الكائن كنقطة انطلاق وإضافة تخصيصات إضافية.
بالنسبة للعناصر واجهة المستخدم المدمجة ، يجب عليك تعيين issuer ، clientId ، و redirectUri . بشكل افتراضي ، سيتم تشغيل القطعة على محرك الهوية باستخدام تدفق رمز التفاعل. يمكن أن تعمل القطعة أيضًا على المحرك الكلاسيكي من خلال ضبط خيار useclassicengine إلى true . (راجع هذا المستند لمزيد من التفاصيل حول التشغيل في المحرك الكلاسيكي.
يجب أن تضع جميع الأدوات المصغرة المدمجة هذه الخيارات الأساسية: issuer ، clientId ، redirectUri .
ملاحظة : يجب ألا تضع أجهزة التشغيل التي تستضيفها OKTA هذه القيم.
عنوان 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}}' ,
} سترغب بعض التطبيقات ، مثل تلك التي تتطلب الوصول إلى واجهة برمجة تطبيقات مستخدمي OKTA ، في استخدام خادم ترخيص OKTA منظمة OKTA كمصدر. في هذه الحالة ، يجب على issuer مطابقة مجال OKTA الخاص بك:
var config = {
issuer : 'https://{yourOktaDomain}' ,
clientId : '{{clientId of your OIDC app}}' ,
redirectUri : '{{redirectUri configured in OIDC app}}' ,
}ملاحظة : يهدف خادم OKTA Organization Cuplization فقط للوصول إلى واجهة برمجة تطبيقات مستخدم OKTA ولا يدعم جميع ميزات خادم التفويض المخصص القياسي ، مثل النطاقات المخصصة على رموز الوصول. يوصى عمومًا باستخدام خادم تفويض مخصص لتأمين الوصول إلى موارد مؤسستك.
ملاحظة : يمكن العثور على قيمة التكوين هذه في واجهة المستخدم OKTA Admin. راجع دليل المطورين الخاص بنا للمساعدة في العثور على ClientId الخاص بالتطبيق الخاص بك
معرف العميل للتطبيق.
ملاحظة : يمكن العثور على قيمة التكوين هذه في واجهة المستخدم OKTA Admin ضمن "الإعدادات العامة" للتطبيق
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 الأساسي. يجب أن تكون الألوان بتنسيق سداسي ، مثل #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 - الصينية (تايوان)يمكن إضافة دعم لغات إضافية مع خيار الأصول.
اضبط لغة القطعة. إذا لم يتم تحديد أي لغة ، فستختار القطعة لغة تعتمد على تفضيلات متصفح المستخدم إذا كانت مدعومة ، أو الافتراضية في 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 . يضع رمز الاتصال البلد لرقم الهاتف وفقًا لذلك في عنصر واجهة المستخدم.
تجاوز النص في القطعة. يمكن العثور على القائمة الكاملة للخصائص في ملفات تسجيل الدخول.
// 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 ) ;
}
}قم بتعيين خيار التكوين التالي لتجاوز الظهر لتسجيل تسجيل الدخول في عنوان 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 Link Link على صفحة المصادقة الأولية.
// An example that overrides all help links, and sets two custom links
helpLinks: {
help : 'https://acme.com/help' ,
forgotPassword : 'https://acme.com/forgot-password' ,
unlock : 'https://acme.com/unlock-account' ,
custom : [
{
text : 'What is Okta?' ,
href : 'https://acme.com/what-is-okta'
} ,
{
text : 'Acme Portal' ,
href : 'https://acme.com' ,
target : '_blank'
}
]
} رابط مخصص HREF لرابط "المساعدة"
الرابط المخصص HREF لرابط "نسيت كلمة المرور"
رابط مخصص HREF لرابط "فتح الحساب". من أجل عرض هذا الرابط features.selfServiceUnlock . يجب ضبط SelfServiceUnlock على true ، ويجب تمكين ميزة إلغاء تأمين الخدمة الذاتية في إعدادات المشرف الخاصة بك.
مجموعة من كائنات الارتباط المخصصة {text, href, target} التي سيتم إضافتها بعد ارتباط "المساعدة". target الرابط اختياري.
قم بتعيين خيارات التكوين التالية لتخصيص hCaptcha SCRIPT 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 script uri:
// An example that uses recaptcha.net
recaptcha : {
scriptSource : 'https://recaptcha.net/recaptcha/api.js'
} ,يمكن استدعاء عمليات الاسترجاعات غير المتزامنة قبل أو بعد تقديم عرض محدد. يمكن استخدام السنانير لإضافة منطق مخصص مثل الأجهزة أو التسجيل أو إدخال المستخدم الإضافي. يتم حظر التنفيذ الطبيعي أثناء تنفيذ وظيفة الخطاف وستستأنف بعد أن تم إرجاع الوعد من وظيفة الخطاف. يمكن إضافة السنانير عبر التكوين ، كما هو موضح أدناه ، أو في وقت التشغيل باستخدام الأساليب قبل أو بعد. يمكن العثور على القائمة الكاملة للآراء في CremediationConstants.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 الذي يعود من API OKTA.
parseSchema: ( schema , onSuccess ) => {
// This example will add an additional field to the registration form.
schema . push (
{
'name' : 'userProfile.address' ,
'type' : 'text' ,
'placeholder' : 'Enter your street address' ,
'maxLength' : 255 ,
'label-top' : true ,
'label' : 'Street Address' ,
'required' : true ,
}
) ;
onSuccess ( schema ) ;
} يستخدم رد الاتصال في المقام الأول لتعديل معلمات الطلب المرسلة إلى API OKTA.
preSubmit: ( postData , onSuccess ) => {
// This example will append the domain name to the email address if the user forgets to add it during registration.
if ( ! postData . userProfile . email . includes ( '@acme.com' ) ) {
postData . userProfile . email += '@acme.com' ;
}
}
onSuccess ( postData ) ;
} يعتبر رد الاتصال يستخدم للسيطرة في المقام الأول وتعديل السلوك بعد التقديم إلى 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 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' ;
}
} ] السلسلة التي يتم تعيينها كنص الزر (اضبط فقط title أو i18nKey )
مفتاح ترجمة مخصص لنص الزر المحدد في خيار التكوين i18n (اضبط فقط title أو i18nKey )
فئة اختيارية يمكن إضافتها إلى الزر
الوظيفة التي يتم استدعاؤها عند النقر فوق الزر
تمكين أو تعطيل وظيفة القطعة مع الخيارات التالية.
features: {
showPasswordToggleOnSignInPage : true ,
hideSignOutLinkInMFA : false ,
rememberMe : true
} الافتراضات إلى true . يعرض أيقونة العين لتبديل رؤية المستخدم الذي تم إدخاله على كلمة المرور على صفحة تسجيل الدخول OKTA. يتم إخفاء كلمة المرور افتراضيًا ، حتى عند تمكين هذه العلامة. كلمات المرور مرئية لمدة 30 ثانية ثم مخبأة تلقائيًا.
الافتراضات إلى true . يعرض معرف المستخدم على أي طريقة عرض مع سياق المستخدم.
الإعدادات الافتراضية إلى false . يخفي رابط "العودة لتسجيل الدخول" لتسجيل المصادقة وتدفقات التحدي.
الافتراضات إلى true . يملأ حقل المعرف مع اسم المستخدم المستخدم سابقًا.
الافتراضات إلى true . يركز تلقائيًا على حقل الإدخال الأول من أي نموذج عند عرضه.
الإعدادات الافتراضية إلى false . يعين السمة الإكمال التلقائي على حقول الإدخال إلى off .
يقوم عنصر واجهة المستخدم بحقن كتل البرنامج النصي/النمط المضمّن في وقت التشغيل لغرض التخصيص ، ولكن قد تنتهك تلك الكتل قواعد CSP التي تم تعيينها في صفحة الويب المستضافة.
يسمح cspNonce بتعيين قيمة nonce من رأس Content-Security-Policy إلى الكتل المحقونة ، لذلك لا يزال من الممكن تنفيذ النصوص/النمط من هذه الكتل.
ملاحظة: تمت إضافة توجيه NONCE إلى CSP Level2 ، قد لا تزال ترى أخطاء CSP في وحدة التحكم في المتصفح إذا تم استخدامها في المتصفحات غير المدعومة.
الأحداث التي نشرتها القطعة. اشترك في هذه الأحداث باستخدام ON.
يتم تشغيله عندما تكون القطعة جاهزة لقبول مدخلات المستخدم لأول مرة. إرجاع كائن 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
} ) ; يتم تشغيلها عندما تنتهي عنصر واجهة المستخدم إلى صفحة جديدة والرسوم المتحركة. 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.
