React 应用程序中的 Auth0 Lock v11 未捕获“已验证”事件

Question

我正在尝试在React 应用程序中实现Lock v11，并且在用户登录后，即使我点击了事件侦听器并且事件类型是authenticated，回调函数也没有被调用来处理令牌。

这是我的App.jsx，我正在初始化Auth0 Lock 并等待authenticated 事件。知道为什么我的听众不工作吗？为了进一步澄清，我在代码中输入了debuggers。用户成功登录后，我确实点击了第一个debugger，但没有点击第二个。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import Auth0Lock from 'auth0-lock';

// Actions
import * as appActions from '../actions/app-actions';

// Components
import Home from './home/Home';
import Public from './public/Public';

class App extends Component {

    lock = new Auth0Lock('my_auth0_client_id', 'my_domain.auth0.com', {
        auth: {
            audience: 'https://my_backend_api_url/',
            redirectUrl: 'http://localhost:3000',
            responseType: 'token id_token',
            sso: false
        }
      });

    constructor(props) {

        super(props);
        this.onAuthenticated = this.onAuthenticated.bind(this);
        this.isAuthenticated = this.isAuthenticated.bind(this);

        this.onAuthenticated();
    }

    onAuthenticated() {
        debugger; // After successful login, I hit this debugger
        this.lock.on('authenticated', (authResult) => {
            debugger; // But I never hit this debugger
            let expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
            sessionStorage.setItem('access_token', authResult.accessToken);
            sessionStorage.setItem('id_token', authResult.idToken);
            sessionStorage.setItem('expires_at', expiresAt);

          });
    }

    isAuthenticated() {

        if(!sessionStorage.getItem("access_token") || !sessionStorage.getItem("id_token") || !sessionStorage.getItem("expires_at"))
            return false;

        const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
        return new Date().getTime() < expiresAt;
    }

    render() {

        const isAuthenticated = this.isAuthenticated();

        return (
            <div>
                <Switch>
                    <Route exact path="/" render={props => isAuthenticated ? <Home {...props} /> : <Redirect to="/public" />} />
                    <Route path="/public">
                        <Public lock={this.lock} />
                    </Route>
                </Switch>
            </div>
        );
    }
}

function mapStateToProps(state) {

    return {
        isAuthenticated: state.app.isAuthenticated
    };
}

function mapDispatchToProps(dispatch) {

    return {

        actions: bindActionCreators(appActions, dispatch)
    };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

Answer 1

authLock 对象需要在类外部初始化，因此不仅可以在索引中声明它。

然而，要在多个页面/组件中使用注销，您需要公开它。比起全局变量，我更喜欢 redux。

如果需要在一个地方使用对象：

const authLockOptions: Auth0LockConstructorOptions = {
  allowSignUp: false,
  languageDictionary: { title: 'empty if you don't want title' },
  theme: {
    primaryColor: '#333435',
    logo: 'https://your-logo-url.com',
  },
};
const domain = process.env.AUTH0_DOMAIN || '';
const clientId = process.env.AUTH0_CLIENT_ID || '';
const authLock = new Auth0Lock(clientId, domain, authLockOptions);

export class LoginViewClass extends React.Component<LoginViewProps<BaseProps>, LoginViewState> {
  private authLock?: Auth0LockStatic;

  constructor(props: LoginViewProps<BaseProps>) {
    super(props);

    this.initializeAuthentication();
  }

  private initializeAuthentication = (): void => {
    authLock.on('authenticated', (authResult: any) => {
      // call authentication function;
    });

    authLock.show();
  };

  render(): React.ReactNode {
    return <div className='login'></div>;
  }
}

或者，如果您需要从多个位置调用注销

// if you are using TypeScript, Auth0LockStatic is the typeof authLock object
export type YourStore = {
  authLock: Auth0LockStatic;
  // ...
};

// start the authLock when creating the DefaultStore
export const DefaultStore: YourStore = {
  authLock: new Auth0Lock(clientId, domain, authLockOptions),
  // ...
};

// in case you use reducer
const rootReducer = combineReducers({
  // other reducers
  authLock: (state = {}) => state,
});

将其添加到 redux 存储后，您可以连接 mapStateToProps (react-redux) 或 useSelector (react-redux) 并随意使用它。

  authLock.on('authenticated', (authResult: any) => {
    // add your authentication functionality like dispatching the authentication
  });

  authLock.show();

Answer 2

将 this.lock.on('authenticated'... 拉到 index.js 并使 lock = new Auth0Lock... 在 index.js 中也是全局的。

或者使用 auth0 react sdk 指南：https://auth0.com/docs/quickstart/spa/react/01-login

希望对您有所帮助。

Answer 3

我是 Konrad，我是 Auth0 社区工程师，让我来帮你吧！查看有关 Lock 及其第一段的文档：

https://auth0.com/docs/libraries/lock/v11/configuration

看来你需要在索引文件中初始化Lock并通过这个文档判断：

https://auth0.com/docs/libraries/lock/v11/api#on-

监听器应该放在你初始化 Lock 的同一个文件中。