时间戳

首页 > 解决方案 > 为来自 OKTA (React SDK) 的授权失败提供自定义逻辑

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

问题描述

我正在使用 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 将取决于一些事情

标签： reactjsokta

解决方案

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

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

推荐阅读