如何进行身份验证/授权答案

【问题标题】：How to do Authentication/Authorization如何进行身份验证/授权
【发布时间】：2021-12-27 13:16:27
【问题描述】：

我想创建一个应用程序，它将由一个 React 应用程序、一个 Flutter 移动应用程序和一个将由前端应用程序调用的后端 REST API 组成。我想为这两个客户端应用添加身份验证和对 API 的授权。

过去几天我一直在阅读这个主题，但我似乎找不到一种既安全又对用户体验友好的方法。我检查了一些技术/提供者（Ory、Keycloak、Auth0 和 IdentityServer），我对它们的问题是它们将你重定向到另一个 URL，这对于 React 来说更容易接受。但是，对于移动应用程序，这将弹出应用程序内浏览器或直接将您重定向到您的浏览器，这只是糟糕的用户体验。只有 Auth0 提到了嵌入式登录的可能性，但我找不到示例，而且他们的 flutter sdk 记录不充分（甚至没有在他们的网站上列出）。

我希望流程是：

用户打开应用
用户会看到一个登录页面
用户填写凭据并登录

我的问题是：我该怎么做？我对身份验证/授权的了解非常有限，因此欢迎任何指针。提前致谢。

【问题讨论】：

您可以使整个体验与 Chrome 自定义选项卡等更加集成。请参阅：stackoverflow.com/questions/67091322/… 正如该答案中所指出的，您实际上没有选择使用浏览器，因为 IAM 需要能够做的不仅仅是一个简单的用户名/密码表单。它需要能够向您显示任何 2FA 问题、密码重置、安全问题等 - 这需要一个浏览器。（如链接答案中所述，不推荐使用密码流。）
另见：pub.dev/packages/flutter_appauth

标签： reactjs flutter security authentication authorization

【解决方案1】：

const Home = lazy(() =>
    import ("../containers/home/Home")
);

这里我使用惰性导入容器

<PrivateRoute exact path="/home" component={Home} isAuth={isUserLoggedIn} />

在这里，我正在使用计数器制作路线，并且我正在通过 isUserLoggedIn redux 状态，我在登录时设置

以下是我的私人路线代码

import React from "react";
import { Route, Redirect } from "react-router-dom";

const PrivateRoute = ({ component: Component, isAuth, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        if (isAuth) {
          return <Component {...props} />;
        } else {
          return (
            <Redirect
              to={{
                pathname: "/page_not_found",
                state: {
                  from: props.location,
                },
              }}
            />
          );
        }
      }}
    />
  );
};

export default PrivateRoute;

我正在使用react-router-dom 这样做

【讨论】：

【解决方案2】：

当您构建移动应用程序时，您将始终需要打开浏览器窗口 - 如果流程基于 OAuth2.0。但是，对于 Ory Kratos，情况并非如此，因为流程是基于 cookie 的。查看此分步指南如何实现它： https://www.ory.sh/login-react-native-authentication-example-api/

【讨论】：