Navigating multiple OAuth services with unique clientIDs in a JavaScript single-page application

In our enterprise windows network, we have a JS single page application that accesses multiple webservices in different windows subdomains to provide summarized results for the end user. Previously, we used kerberos with domain trusts which was a bit cumbersome. However, the first service switched to OAuth and, after some initial challenges, it worked well. Only one of these services is developed by our team, while the others are from different parts of the company and are not specifically created for our use.

Now, the second service is planning to make the switch to OAuth with its own clientID and different grants. We are unsure how to manage obtaining multiple tokens without having to redirect to our ADFS for each service.

Since the client is running in a location where all services are accessible, we cannot call the other services from our backend via an "On-Behalf-Of" flow.

As far as I know, for Single Page Applications, it is recommended to use the authorization grant workflow with PKCE, which may limit our options.

Dealing with this kind of situation may be common with microservices, but I have not come across clear best practices for it. Should we set up an API gateway in our client subnet with an OBO flow to avoid multiple redirects, or can the client handle this in a more user-friendly manner?

Answer №1

STANDARDIZED WORKFLOWS

In order to ensure secure access to their data, organizations can opt for a standards-based approach where they design seamless end-to-end flows.

Under this option, the client initiates a single code flow at the authorization server to obtain an access token that can be used to call multiple APIs:

  • client_id=web_client
  • scope=openid orders products

If there are separate APIs for 'orders' and 'products', each API can have its own set of required scopes. Every request to these APIs involves validating the access token and verifying the required scope.

This streamlined approach results in a single redirect for the end user, while providing the necessary authorization details to the APIs by controlling the issued tokens. For a more visual representation of this process, check out my blog post on the OAuth SPA and API Workflow.

DESIGN OF TOKEN ISSUANCE

The effectiveness of the above process lies in the utilization of tokens issued exclusively by the organization's authorization server for clients and APIs.

Often, issues arise when clients attempt to use 'foreign access tokens', such as those obtained through services like Sign in with Google, which are not suitable for the organization's APIs.

YOUR QUERY

It seems perplexing why your SPA would necessitate a redirect to your ADFS authorization server for each service. Could you provide more details on how this setup functions and the scopes involved? Why do APIs mandate the use of a specific client ID by the SPA?

What are the token requisites for each API? Do they all rely on tokens from ADFS, or do some APIs generate their own tokens? Are there external APIs that utilize tokens from an external authorization server?

It appears that there may be unconventional behavior at play, and resolving your issue might require adjusting the API logic. However, with additional information from you, I can offer a more tailored solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting a form to submit to a Rails server using AJAX in IE11 with jQuery

Currently, I'm attempting to transfer data from a form to a Rails server using AJAX. The form consists of two text inputs and one file input. Below is the code for my submit event handler: $("form").on("submit", function(event) { event.preventDefa ...

Difficulty in defining the header while using the submit hook in Remix 1.15

When I utilize the useSubmit hook to send a POST request, it appears that the header I specify is not being taken into account. Below is the code snippet for my submit function: submit('/dashboard/', { method: 'post', heade ...

How can the distinctions between two bars be illustrated in high charts?

Is there a way to display different values on a new line between two bar charts using Highcharts plugins? I have created a simple bar chart in Highcharts, but I am looking to show the difference between the two bars on a new line. The concept is illustrate ...

Arrange jQuery UI elements in descending order

I need to rearrange a list in descending order, starting from the highest value down to the lowest. The values are currently listed as 10,9,8,7,6,5,4,3,2,1 and I need to update the data-ids accordingly. jQuery('.photos').sortable({ stop: f ...

Click on an Object within a modal window using JavaScript in Internet Explorer 8

I'm facing a strange issue with the SELECT object in a Modal Window. Within my HTML code, I have a button that opens a modal window when clicked. Inside this modal window, a JSP page is loaded. On this JSP page, there is a dropdown list created using ...

A collapsible select list with checkboxes for children items

I am currently developing a website using Vue.js, HTML, and SCSS. I am looking to implement a drop-down functionality similar to the animated example provided in the gif below: https://i.stack.imgur.com/Mia2D.gif The gif demonstrates how the drop-down me ...

Tips for preventing the need to convert dates to strings when receiving an object from a web API

I am facing an issue with a class: export class TestClass { paymentDate: Date; } Whenever I retrieve an object of this class from a server API, the paymentDate field comes as a string instead of a Date object. This prevents me from calling the ...

Struggling to organize and paginate numbers in angularjs and facing filtering and sorting issues

I'm running into some issues with getting the paging feature to work properly while applying filters. Currently, when the filters are active, the paging numbers do not display correctly and only filter the first page of results. What I'm aiming ...

What is the significance of incorporating vinyl-source-stream into gulp in my workflow?

Recently, I've been experimenting with gulp and browserify to convert my .jsx files into .js files. var gulp = require('gulp'); var browserify = require('browserify'); var reactify = require('reactify'); gulp.task(&apos ...

Retrieve a true value by using either Array.some or _.some

I am looking to retrieve a truthy value from the array.Some other than "true", This is my approach: let category; arduair.aqi_ranges[pollutant].some((item,index)=> { let min = item.range[0]; let max = item.range[1]; if (_.inRange(c,min,max)){ ...

Is there a bug in Safari 8.0 related to jQuery and backslashes?

I am using Mac OS 10.10 Yosemite and Safari 8.0. Attempting to read an XML (RSS) file: <content:encoded>bla bla bla</content:encoded> The Javascript Ajax method I am using is: description:$(valeur).find('content\\:encoded&apo ...

Error: The JavaScript SRC cheat is malfunctioning

Having an issue with the code below. The 'dummy1' and 'dummy2' variables are not loading their content as expected on the page. Any suggestions? <html> <head> <title>JavaScript On-line Test</title> <script LA ...

Updating array properties in a JSON object using a foreach loop will automatically update all corresponding keys

Having a slight headache working on this particular issue. My aim is to construct an array of JSON objects using a foreach loop, and everything is functioning perfectly except for one property. The problematic property is actually an array that gets update ...

Utilizing the power of Material-UI with React in conjunction with Python-Django: A comprehensive

I am seeking guidance on implementing React with Material UI components in my web application. The technologies I have utilized in multiple projects include: Materialize CSS, Javascript, Jquery. The technologies I wish to explore for future projects are ...

The sluggish rendering speed of AngularJS is causing a delay in displaying the loader

Within my application, I have tabs that load a form in each tab with varying numbers of controls. Some tabs may contain a large number of controls while others may have fewer. My goal is to display a loader while the contents are being rendered into the HT ...

Modify components in a web application based on the content of a JavaScript variable

I'm in the process of developing a webapp that needs to interact with an Arduino for its inputs in order to dynamically change the contents of the webpage. Currently, I am experimenting with variables that I have created and assigned random numbers t ...

The jQuery bookmarklet in the djangobyexample book is completely unresponsive

As I work my way through Django By Example, I came across a chapter where a jQuery bookmarklet is created within a Django app. This allows users to easily save jpg images from websites into their user profile area within the Django app. Although the tutor ...

Transforming a JavaScript component based on classes into a TypeScript component by employing dynamic prop destructuring

My current setup involves a class based component that looks like this class ArInput extends React.Component { render() { const { shadowless, success, error } = this.props; const inputStyles = [ styles.input, !shadowless && s ...

Modifying button appearance based on state change in AngularJS

I have a button with a grey color and I want to create two different states for it: one that is selected (blue) and another that is in an idle state (grey). Currently, I am working on Angularjs but I am fairly new to this platform. Could you kindly provid ...

Align the timing of the animation with the dataset in ThreeJS

I am faced with the challenge of working with data that includes time in milliseconds and the x, y, z position of an object at each specific time interval. msec |pos_x |pos_y |pos_z ------------------------------ 0 |318 |24 |3 25 |3 ...