0

尝试使用 Blazor 客户端使用 JavaScript 互操作。 小部件不呈现。

我希望在 Blazor 中设置一个员工门户，但当然想使用 Okta 小部件。最初我只是无法让小部件呈现，现在出现了更多问题。将不得不回溯一点，但有人知道如何在 Blazor 中呈现 javascript UI 组件吗？

此外，我用我自己的 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);
4

0 回答 0