为来自 OKTA (React SDK) 的授权失败提供自定义逻辑答案

【问题标题】：Provide custom logic for failed authorization from OKTA (React SDK)为来自 OKTA (React SDK) 的授权失败提供自定义逻辑
【发布时间】：2021-07-03 23:13:54
【问题描述】：

我正在使用 React OKTA 库，试图在我的应用程序中更好地处理“授权失败”的情况，但无法找到解决方法。我的代码大致如下：

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Security, LoginCallback } from '@okta/okta-react';
import { OktaAuth } from '@okta/okta-auth-js';

const config = {
  // Configuration here
};
const oktaAuth = new OktaAuth(config);

const CALLBACK_PATH = '/implicit/callback';

const App = () => {
  return (
    <Router>
      <Security oktaAuth={oktaAuth}>
          <Route path={CALLBACK_PATH} component={LoginCallback} />
      </Security>
    </Router>
  );
};
export default App;

为了通过我的身份验证/授权，用户需要一个有效的用户名/密码组合，以及对指定组的访问权限。在 OKTA 端进行了正确配置，因为只有当我拥有有效的用户名/密码组合以及对特定组的访问权限时，我才能进入。当我尝试使用有效的用户名/密码组合但没有所需的组登录时，我会留在地址栏中带有 /implicit/callback 的空白页面上。我的目标是此时能够编写自定义逻辑，这会将我的用户重定向到我们新应用程序的回退/旧版本。在不破坏成功路径的情况下，我将在哪里提供这样的逻辑？

注意：我使用的是 OKTA React 库 (https://developer.okta.com/docs/guides/sign-into-spa/react/handle-callback/)

注意：我需要能够编写自定义逻辑，因为我重定向到的 URL 将取决于一些事情

【问题讨论】：

标签： reactjs okta

【解决方案1】：

查看 Okta 的示例 https://github.com/okta/samples-js-react/tree/master/custom-login

他们登录后有一个登陆页面，可以处理在认证过程中收到的信息。您可以更改它以验证用户是否有正确的声明，以决定将他们重定向到您的后备信息

【讨论】：