Question

我试图将okta-signin-widget集成到我的反应应用中，但我无法使其正常运行。

我的小部件配置看起来像这样......

export const OktaSignInWidget = new OktaSignIn({
    baseUrl: `https://${OktaDomain}.com`,
    clientId: clientId,
    authParams: {
        issuer: `https://${OktaDomain}.com/oauth2/default`,
        responseType: ['id_token', 'token'],
        responseMode: 'query',
        scopes: ['openid', 'profile', 'email']
    }
});

我的登录页面就是这样......

import React, { Component } from "react";
import { withStyles } from "material-ui/styles";
import "./SignInStyles.css";
import Grid from "material-ui/Grid";
import {OktaSignInWidget} from '../common/OktaConfig';
class OktaSignIn extends Component{

    componentDidMount(){
        console.log('Component Mounted');
        OktaSignInWidget.renderEl(
            {el: "#okta-sign-in-container"},
            function success(res){
                console.log('success');
                console.log(res);
            },
            function error(err) {
                console.log('err');
                console.log(err);
            }
        )
    }

    render(){
        return (
            <Grid container align="flex-start" justify="center" className="epc-grid">
                <Grid item>
                    <div id="okta-sign-in-container"></div>
                </Grid>
            </Grid>
        )
    }
}
const styles = theme => ({

});
export default withStyles(styles)(OktaSignIn);

在chromes dev控制台中，我可以观看网络并看到正在进行的authn呼叫以及回复的响应，但它永远不会转到success或error。有什么想法吗？或者我可能还需要配置什么

编辑：我还尝试更改我的登录以使用此组件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class OktaSignInWidget extends Component {
    componentDidMount() {
        const el = ReactDOM.findDOMNode(this);
        this.widget = this.props.widget;
        this.widget.renderEl({el}, this.props.onSuccess, this.props.onError);
    }

    componentWillUnmount() {
        this.widget.remove();
    }

    render() {
        return <div />;
    }
};

然后更改登录看起来像这样......

class OktaSignIn extends Component{


    componentWillMount() {
        this.onSuccess = this.onSuccess.bind(this);
        this.onError = this.onError.bind(this);
    }

    onSuccess(tokens) {
        this.props.auth.handleAuthentication(tokens);
        console.log('sucess');
    }

    onError(err) {
        console.log('error logging in', err);
    }

    render(){
        const { auth } = this. props; 
        return (
            <Grid container align="flex-start" justify="center" className="epc-grid">
                <Grid item>
                    <OktaSignInWidget
                        widget={auth.oktaAuth}
                        onSuccess={this.onSuccess}
                        onError={this.onError}/>
                </Grid>
            </Grid>
        )
    }
}
const styles = theme => ({
    errorContainer: {
        marginTop: 10,
        marginBottom: 10
    }
});
export default withStyles(styles)(withAuth(OktaSignIn));

但仍然没有运气

Okta-Signin-widget没有回调发生

0 个答案: