您如何将AWS放大身份验证与react-admin集成在一起？

Question

我正在尝试对我的react-admin实现aws-amplify。特别是对于Authentication部分。

而不是像这样：react-admin with Amplify NavBar on top

我希望从“ aws-amplify”获得“ UserName”和“ LogOut”按钮，就像默认视图一样：default-navbar-screenshot

authProvider <code example>：

const App = () => (
  <Admin
    dashboard={Dashboard}
    authProvider={authProvider}
    dataProvider={dataProvider}
  >
    <Resource name="users" list={UserList} icon={UserIcon} />
    <Resource
      name="posts"
      list={PostList}
      edit={PostEdit}
      create={PostCreate}
      icon={PostIcon}
    />
  </Admin>
);

[react-admin有一个我们可以定制的authProvider道具，但我不知道如何创建连接到aws-amplify的组件。

Answer 1

您需要为authProvider和dataProvider创建提供程序，它们将与react-admin兼容。

来自the official documentation：

什么是authProvider？就像dataProvider一样，authProvider是处理身份验证逻辑的对象。它公开了在需要时可进行react-admin调用并返回Promise的方法。最简单的authProvider是：

const authProvider = {
    login: params => Promise.resolve(),
    logout: params => Promise.resolve(),
    checkAuth: params => Promise.resolve(),
};

现在，对于每种方法，我们都需要从aws-amplify映射该方法：

import {Auth} from 'aws-amplify';

const authProvider = {
    login: ({ username, password }) => Auth.signIn(username, password),
    logout: Auth.signOut,
    checkAuth: Auth.currentAuthenticatedUser,
};