Попытка использовать JavaScript Взаимодействие с помощью клиентской стороны Blazor. Виджет не отображается.
Я надеялся настроить портал для сотрудников в Blazor, но, конечно, хотел использовать виджет Okta. Первоначально я просто не мог заставить виджет отображаться, и теперь больше проблем. Придется немного отследить, но кто-нибудь знает, как визуализировать javascript компонент пользовательского интерфейса в Blazor?
Также я заменил информацию о конфигурации Okta своей собственной информацией об экземпляре разработчика Okta - не показано ниже ...
@inject IJSRuntime JSRuntime
<h3>Employee Login</h3>
<div id="okta-signin-widget"></div>
@code {
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JSRuntime.InvokeAsync<object>("RenderLogin", "OnAfterRender was Triggered");
}
}
}
RenderLogin - это тег в JavaScript файле OktaLogin. js
Внутри файла OktaLogin. js (все в файле на стороне клиента):
signInWidgetConfig = {
// Enable or disable widget functionality with the following options. Some of these features require additional configuration in your Okta admin settings. Detailed information can be found here: https://github.com/okta/okta-signin-widget#okta-sign-in-widget
// Look and feel changes:
logo: '//logo.clearbit.com/okta.com', // Try changing "okta.com" to other domains, like: "workday.com", "splunk.com", or "delmonte.com"
language: 'en', // Try: [fr, de, es, ja, zh-CN] Full list: https://github.com/okta/okta-signin-widget#language-and-text
i18n: {
//Overrides default text when using English. Override other languages by adding additional sections.
'en': {
'primaryauth.title': 'Sign In', // Changes the sign in text
'primaryauth.submit': 'Sign In' // Changes the sign in button
// More e.g. [primaryauth.username.placeholder, primaryauth.password.placeholder, needhelp, etc.].
// Full list here: https://github.com/okta/okta-signin-widget/blob/master/packages/@okta/i18n/dist/properties/login.properties
}
},
// Changes to widget functionality
features: {
registration: true, // Enable self-service registration flow
rememberMe: true, // Setting to false will remove the checkbox to save username
//multiOptionalFactorEnroll: true, // Allow users to enroll in multiple optional factors before finishing the authentication flow.
//selfServiceUnlock: true, // Will enable unlock in addition to forgotten password
//smsRecovery: true, // Enable SMS-based account recovery
//callRecovery: true, // Enable voice call-based account recovery
router: true // Leave this set to true for the API demo
},
baseUrl: 'https://live-widget.oktapreview.com',
clientId: '0oaexo9c530ZUVuOj0h7',
redirectUri: 'https://developer.okta.com/live-widget',
authParams: {
issuer: 'https://live-widget.oktapreview.com/oauth2/ausexqn31sz3HMxdf0h7',
responseType: ['id_token', 'token'],
scopes: ['openid', 'email', 'profile']
}
};
signInWidget = new OktaSignIn(signInWidgetConfig);
function widgetSuccessCallback(res) {
var key = '';
if (res[0]) {
key = Object.keys(res[0])[0];
signInWidget.tokenManager.add(key, res[0]);
}
if (res[1]) {
key = Object.keys(res[1])[0];
signInWidget.tokenManager.add(key, res[1]);
}
if (res.status === 'SUCCESS') {
var token = signInWidget.tokenManager.get(key);
console.log("Logged in to Okta and issued token:");
console.log(token);
console.log("Reload this page to start over.");
alert("Logged in! Check your developer console for details");
}
}
function widgetErrorCallback(err) {
}
RenderLogin:** signInWidget.renderEl({ el: '#widget-container' }, widgetSuccessCallback, widgetErrorCallback);