Display content based on group membership - OKTA + ReactJS

问题

I'm using Okta for user authentication of my SPA (+ Express backend). How can I use the Okta API to show/hide content based on group membership?

e.g. if I want to show some menu items if the active user is a member of a specific group.

Is there anything in the Okta React SDK? I'm coming up short, product seems great, docs seems less so.

I've found this API https://developer.okta.com/docs/api/resources/users.html#get-member-groups

I'm however unsure of how to best use this from my app. when and where should I call it, should I store group membership in some object and then pass that to all my sub components?

Any ideas and directions are welcome

回答1:

By specifying the groups scope, you can return a list of active groups the user is assigned to. In your React app, use @okta/okta-react to overload the default params by passing the following into 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')} >

Sample code taken from the React Quickstart.

Next, use the getUser() method to return the full user object from the 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).

来源：https://stackoverflow.com/questions/47611058/display-content-based-on-group-membership-okta-reactjs