node.js - 无法运行从 OKta 的 Github 存储库克隆的 OKTA 示例 React-OIDC 应用程序

Question

无法在博客中描述的 Okta 示例应用程序中获取登录页面（用户名和密码），其中代码存储库位于click

关注关于创建 OIDC 客户端并在 React 应用程序中使用它的 OKta 博客。 https://developer.okta.com/blog/2017/03/30/react-okta-sign-in-widget

克隆了 Git 存储库 https://github.com/okta/samples-js-react/tree/master/okta-hosted-login

在 Okta 上创建开发帐户并创建 OIDC 客户端并获取身份验证 URL、CLinet ID、客户端密码等。

npm 安装了反应应用程序。

启动应用程序上的浏览器http://localhost:3000 启动并显示页面，但没有登录小部件或页面显示

使用 Windows 10、node.js (10.15.3)、npm 6.4.1、Chrome 浏览器

我删除了 node_modules 和 package-lock.json 并按照建议再次运行 npm install 但它没有帮助。

import React from 'react';
import OktaSignIn from '@okta/okta-signin-widget';

export default class LoginPage extends React.Component
{
    constructor()
    {
        super();
        this.widget = new OktaSignIn(
        {
            baseUrl: 'https://dev-315128.oktapreview.com',
            clientId: '0oah3nicwuWOMY4ie356',
            redirectUri: 'http://localhost:3000',
            authParams: {
            responseType: 'id_token'
        }
    }
    );
  }

  componentDidMount()
  {
    this.widget.session.get((response) => {
      if(response.status !== 'INACTIVE'){
        this.setState({user:response.login});
      }else{
        this.showLogin();
      }
    });
  }

   showLogin(){
    Backbone.history.stop();
    this.widget.renderEl({el:this.loginContainer},
      (response) => {
        this.setState({user: response.claims.email});
      },
      (err) => {
        console.log(err);
      }
    );
  }

  logout(){
    this.widget.signOut(() => {
      this.setState({user: null});
      this.showLogin();
    });
  }

  render(){
    return(
      <div>
        {this.state.user ? (
          <div className="container">
            <div>Welcome, {this.state.user}!</div>
            <button onClick={this.logout}>Logout</button>
          </div>
        ) : null}
        {this.state.user ? null : (
          <div ref={(div) => {this.loginContainer = div; }} />
        )}
      </div>
    );
  }
}

浏览器应该显示登录页面，但我只得到 Valilla 页面，没有 Okta 的登录选项

标签： node.jsreactjsoktaopenid-connect