如何将 aws-amplify 身份验证与 react-admin 集成？答案

【问题标题】：How do you integrate aws-amplify authentication with react-admin?如何将 aws-amplify 身份验证与 react-admin 集成？
【发布时间】：2019-08-10 15:25:25
【问题描述】：

我正在尝试对我的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 的组件。

【问题讨论】：

您需要从 authProvider 内部调用 aws amplify sdk。从提供给身份验证提供者的参数中获取身份验证参数。这一切都是完全可配置的
你好，你有dataProvider的代码示例吗？

标签： authentication amazon-cognito admin-on-rest aws-amplify react-admin

【解决方案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,
};

【讨论】：

有谁知道这方面的工作示例？我唯一能找到的是在 react-admin-amplify repo 中查看 AuthProvider 的源代码

【解决方案2】：

react-admin 和 Amplify 都可以充当应用程序的容器/包装器。然而，试图将它们合并在一起并不像使用这两个组件那样简单，因为它们会相互竞争（不幸的是）。但是，正如@Alexander 所提到的，您可以使用 Amplify 方法来创建自定义 authProvider。如果您正在寻找更多的即插即用功能，react-admin-amplify npm 包看起来可以为您做很多这样的事情。它看起来相当新，但正在取得积极进展，并且似乎已经克服了您所看到的许多最初的障碍。

【讨论】：