javascript - 如何将 Cognito 托管的 UI 集成到 React 应用程序中？

Question

我正在创建一个 react 应用程序 - 使用 create-react-app 和 amplify - 并且我正在尝试设置身份验证。我似乎无法使用托管 UI 处理联合登录。

有些页面不需要身份验证即可访问，有些页面需要用户登录。我想使用托管 UI，因为它是预先构建的。我一直在关注这里的入门文档:https://aws-amplify.github.io/docs/js/authentication

对于背景，我有以下组件:- Amplify - 一个放大客户端，它将调用包装在 doSignIn doSignOut 等方法中。其想法是将所有这些代码保留在一个地方。这是一个普通的 javascript 类- session - 提供身份验证上下文作为 React 上下文。此上下文是使用放大客户端设置的。它具有使用上下文的 HOC- 页面 - 一些包含在 session HOC withAuthentication 中，仅在用户登录时才呈现页面

此结构实际上取自 Firebase 教程:https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/也许这对于 Amplify 来说是不可行的？虽然对我来说看起来很相似，但它应该可以工作。基本思想是 session 提供单个身份验证上下文，可以使用 withAuthentication HOC 订阅该上下文。这样，任何需要用户的组件都会在用户登录后立即呈现。

最初，我将整个应用程序组件包装在 amplify 提供的 withAuthenticator HOC 中，如文档中所述。然而，这意味着未经身份验证，任何页面都无法访问 - 主页需要在没有帐户的情况下访问。

接下来，我尝试使用登录按钮调用托管 UI，然后处理响应。问题是，当托管 UI 登录用户后，它会重定向回应用程序，导致其重新加载 - 这对于单页应用程序来说并不理想。

然后我尝试检查用户是否在每次应用程序启动时都经过身份验证 - 以处理重定向 - 但这变得很困惑，因为我需要将大量放大客户端代码移至 session 上下文，以便它可以正确初始化。我能看到的唯一方法是使用 Hub 模块:https://aws-amplify.github.io/docs/js/hub#listening-authentication-events缺点是登录后，应用程序会刷新，并且仍有一段时间需要注销，这使得用户体验很奇怪。

我本以为有一种方法可以不导致应用程序刷新。也许对于托管 UI 来说这是不可能的。让我感到困惑的是文档没有在任何地方提到它。事实上，有关于处理来自托管 UI 的回调的文档，据我所知，这种情况永远不会发生，因为整个页面都会刷新，因此回调永远无法运行。

我尝试将其精简为所需的内容。我可以根据要求提供更多信息。

放大:

import Amplify, { Auth } from 'aws-amplify';
import awsconfig from '../../aws-exports'; 
import { AuthUserContext } from '../Session';

class AmplifyClient {
    constructor() {
        Amplify.configure(awsconfig);
        this.authUserChangeListeners = [];
    }

    authUserChangeHandler(listener) {
        this.authUserChangeListeners.push(listener);
    }

    doSignIn() {
        Auth.federatedSignIn()
            .then(user => {
                this.authUserChangeListeners.forEach(listener => listener(user))
            })
    }

    doSignOut() {
         Auth.signOut()
            .then(() => {
                this.authUserChangeListeners.forEach(listener => listener(null))
            });
    }
}

const withAmplify = Component => props => (
    <AmplifyContext.Consumer>
        {amplifyClient => <Component {...props} amplifyClient={amplifyClient} />}
    </AmplifyContext.Consumer>
);

session :

const provideAuthentication = Component => {
    class WithAuthentication extends React.Component {
           constructor(props) {
            super(props);

            this.state = {
                authUser: null,
            };
        }

        componentDidMount() {
            this.props.amplifyClient.authUserChangeHandler((user) => {
                this.setState({authUser: user});
            });
        }

        render() {
            return (
                <AuthUserContext.Provider value={this.state.authUser}>
                    <Component {...this.props} />
                </AuthUserContext.Provider>
            );
        }
    }

    return withAmplify(WithAuthentication);
};

const withAuthentication = Component => {
    class WithAuthentication extends React.Component {
        render() {
            return (
                <AuthUserContext.Consumer>
                    {user =>
                        !!user ? <Component {...this.props} /> : <h2>You must log in</h2>
                    }
                </AuthUserContext.Consumer>
            );
        }
    }

    return withAmplify(WithAuthentication);
};

身份验证上下文在顶层提供一次:

export default provideAuthentication(App);

然后需要身份验证的页面可以使用它:

export default withAuthentication(MyPage);

我希望发生的是，在用户登录后，我可以设置 AuthUserContext，从而更新所有监听器。但由于重定向导致整个应用程序刷新来自 Auth.federatedSignIn() 的 promise 无法解析。这会导致用户显示您必须登录，即使他们刚刚登录。

有没有办法在仍然使用托管 UI 的同时阻止此重定向？也许在另一个选项卡或弹出窗口中启动它不会关闭我的应用程序？或者我以错误的方式处理这个问题？只是感觉不太“ react ”，导致整个页面刷新。

任何帮助将不胜感激。我可以根据要求提供更多详细信息。

Answer 1

您可以使用 Amplify 的内置消息传递系统来监听事件，而不是链接到 Auth 的 promise 。以下是我如何在自定义 Hook 中执行此操作以及如何处理在 Redux 中渲染的内容。

import { Auth, Hub } from 'aws-amplify';
import { useEffect } from 'react';

function useAuth({ setUser, clearUser, fetchQuestions, stopLoading }) {
  useEffect(() => {
    Hub.listen('auth', ({ payload: { event, data } }) => {
      if (event === 'signIn') {
        setUser(data);
        fetchQuestions();
        stopLoading();
      }
      if (event === 'signOut') {
        clearUser();
        stopLoading();
      }
    });

    checkUser({ fetchQuestions, setUser, stopLoading });
  }, [clearUser, fetchQuestions, setUser, stopLoading]);
}

async function checkUser({ fetchQuestions, setUser, stopLoading }) {
  try {
    const user = await Auth.currentAuthenticatedUser();
    setUser(user);
    fetchQuestions();
  } catch (error) {
    console.log(error);
  } finally {
    stopLoading();
  }
}