基于组成员显示内容 - OKTA + ReactJS

Question

我正在使用 Okta 对我的 SPA（+ Express 后端）进行用户身份验证。我如何根据组成员资格使用 Okta API 到 show/hide 内容？

例如如果活跃用户是特定组的成员，我想显示一些菜单项。

Okta React SDK 里有什么吗？我说得很短，产品看起来不错，文档似乎没那么好。

我找到了这个 API https://developer.okta.com/docs/api/resources/users.html#get-member-groups

但是我不确定如何在我的应用程序中最好地使用它。我应该何时何地调用它，我是否应该将组成员资格存储在某个对象中，然后将其传递给我的所有子组件？

欢迎任何想法和指导

Answer 1

通过指定 groups 范围，您可以 return 用户分配到的活动列表 groups。在您的 React 应用程序中，使用 @okta/okta-react 通过将以下内容传递到 Security:

来重载默认参数

<Security issuer={config.issuer}
          client_id={config.client_id}
          redirect_uri={window.location.origin + '/implicit/callback'}
          scope={['openid', 'email', 'profile', 'groups']}
          onAuthRequired={({history}) => history.push('/login')} >

示例代码取自 React Quickstart.

接下来，使用 getUser() 方法 return 来自 userInfo API 的完整用户对象。

this.props.auth.getUser().then(profile => {
  const groups = profile.groups;
  // Do your show/hide logic here
});

This requires extra configuration in your Okta OpenID Connect app to accept groups as a scope. More info on that here (Creating Token with Groups) and here (Okta Answers).

基于组成员显示内容 - OKTA + ReactJS

Display content based on group membership - OKTA + ReactJS

reactjs

okta

okta-api