Question

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

在创建OIDC CLient并将其在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安装了react应用。

Launche在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登录选项

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

0 个答案: