OIDC - Additional parameters included in sign-in URL query string

I am working on a Javascript client that utilizes OIDC for authentication with the authorization code flow. Below is a snippet of the code:

var config = {
    authority: "http://localhost:5000",
    client_id: "js",
    redirect_uri: "http://localhost:5003/callback.html",
    response_type: "code",
    scope:"openid profile web_api",
    post_logout_redirect_uri: "http://localhost:5003/index.html"
};
var mgr = new Oidc.UserManager(config);

I want to incorporate additional parameters in the config object above, which should be present in the query string of the URL accessible in the Login method of my Authorization Server (http://localhost:5000/Account/Login):

(C# code):

// <summary>
/// Entry point into the login workflow
/// </summary>
[HttpGet]
public async Task<IActionResult> Login(string returnUrl)
{
    ...
}

(The URL query string can be accessed in the aforementioned code through both the returnUrl parameter and the HttpContext.Request.Query property)

However, adding new (non-standard) parameters in the config object on the Javascript client does not result in them being passed to the URL query string.

In this scenario, I require these extra parameters to authenticate the user as they are essential besides the username and password. The values of these parameters are set within the client's Javascript code (e.g., device ID like a cell phone's IMEI). Any alternate approach to accomplish this would be appreciated.

I have managed to achieve this using Postman, following a discussion on GitHub here:

With Postman, it is possible to modify the authorization endpoint URL to include parameters:

http://MyAuthorizationEndpoint?paramName=paramValue

E.g., http://localhost:5000/connect/authorize?device_id=XYZ

Unlike Postman, in the Javascript client, I don't explicitly specify the authorization endpoint, only the authority (as shown in the config object above).

Note: I do not plan to utilize any other form of authorization flow, such as an Extension Grant, due to security concerns and lack of recommendation.

Answer №1

After researching and coming across this informative discussion, I was able to find the solution I needed. The method Oidc.UserManager.signinRedirect now accepts an argument called extraQueryParams, which serves the specific purpose of adding custom query parameters:

(For Javascript clients):

mgr.signinRedirect({
        extraQueryParams: {
            device_id: "XYZ"
        },
    });

This feature proves to be invaluable for anyone facing challenges with the Authorization Code Flow, where passing customized parameters is necessary for validation before obtaining the code/token.

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

Revisiting Angular: The Curious Case of an Object Attribute Altering Attributes on Two Separate Objects

Creating a website with Angularjs involves working with an array of objects: $scope.fieldsToShow = [ { "fields": {}, "type": "LOGGED_IN" }, { "fields": {}, "type": "PERSONAL", "user": 2, "name": ...

Designing the Logic Layer for Business Operations

I hate to admit it, but I've been stewing over this question for a while now and I really feel like a beginner for asking. When it comes to designing the Business Logic Layer (BLL) of a tiered application, do you typically organize all your entity cl ...

Tips for expanding a fabric canvas to match the entire width of its parent division

specific scenario I have a cloth canvas placed inside a main section. How can I expand the canvas to cover the entire width and height of its container? Here is what my current code looks like: <div class="design_editor_div"> &l ...

Unexpected Behavior Arises from Axios Get API Request

Below is a functional example in my CodePen showing what should be happening. Everything is working as intended with hard coded data. CodePen: https://codepen.io/anon/pen/XxNORW?editors=0001 Hard coded data: info:[ { "id": 1, "title": "Title one ...

Trigger a function when clicking outside the element, similar to how a Bootstrap modal is closed

I have successfully created a popup box using angular in my project. It appears when I click on an icon and disappears when I click on the close button. However, I would like it to also close if someone clicks outside of the popup. Can anyone help me with ...

Using JSDoc, consider a Plain Old JavaScript Object (POJO) as an instance

When working with a class and a function that accepts an instance of that class or a similar POJO object, there is a desire to use JSDoc annotations. class Example { constructor(x, y) { this.x = x; this.y = y; } } /** * @param {E ...

Step by step guide to verifying email addresses with Selenium WebDriver

A feature in my EXTJS application includes a page with an Email button. When this button is clicked, it generates a link to the page contents and opens the default email client with this link in the body. Upon inspecting the DOM, I found that the Email bu ...

What is the reason for browsers changing single quotation marks to double when making an AJAX request?

Jquery: var content = "<!DOCTYPE html><html lang='en'><head><meta charset='utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='w ...

Having trouble displaying form in a different view, form is not appearing as expected

I am facing an issue with rendering a form inside a modal. The form is being rendered but the form_for does not show up, only the inputs are visible. This prevents me from targeting the submit button, which I need for ajax functionality. My file path: Adg ...

Pass the code from the webpage to the PHP script

On my website, I have implemented a feature using JavaScript that dynamically changes the page content. Now, I am looking for a way to send this updated content to a PHP script. How can I achieve this functionality? ...

Unable to show input in Javascript HTML

Every time I try to run this code on my webpage, the buttons do not seem to respond when clicked. I am aiming to have the user input for full name, date of birth, and gender displayed in the text box when the display button is clicked. When the next butt ...

Having difficulty sending file input contents to controller action with jquery in ASP.Net Core 6.0

When attempting to send a file to a controller action for saving, I encountered two issues. The first problem arose when using $.post to submit the data: $("#setting-form").on("submit", function(event) { var formData = new FormData(); ...

What is the best way to incorporate PHP code within a JavaScript function?

Is it possible to dynamically append the uploaded file name to the list displayed in ('.list')? The challenge lies in passing $_FILES["fileImage"]["name"] as an argument to a separate JavaScript function for appending, especially since the PHP sc ...

Enrollment of Vue components

After importing the component into the JavaScript file, I added it to the index.vue file as follows: import fmsSubUnitDetails from '../subunitDetails'; export default{ components: { fmsSubUnitDetails }, } Despite this, I am still encount ...

Displaying Meteor session variables in templates in a user-friendly and descriptive manner rather than as html code

Currently, I am in the process of loosely validating a group of fields within a multistage form to ensure that essential data is present before moving forward. The validation function I have created is quite basic at the moment, as my main goal is to estab ...

How to search for an object within an array using MongoDB and Express.js

In my "equipos" database, the structure is as follows: [ "_id" : ObjectId("5ae4ea9f434d9b51dad68813"), "team_name" : "Alavés", "nombre_equipo_movil" : "ALA", "cantidad_integrantes" : 20, "partidos_jugados" : 29, "partidos_g ...

Leveraging mongorestore for efficiently populating a temporary collection with numerous documents

I am working with an array of objects. const arr = [ { name: 'somename', age: 25, }, { name: 'othername', age: 15, }, ] After successfully updating my collection with the above array: MyCollection.insertMany(a ...

Learn the steps for creating smooth transitions between two HTML pages

Can anyone help me achieve a transition effect between HTML pages when clicking on menus or submenus? I want the page to open with a smooth transition. Thank you in advance for your guidance. I found a link that shows how to add a transition effect within ...

Is there a way to conceal the headers during an ajax request?

I'm currently exploring APIs using jQuery and Ajax. To set the header of Ajax, I typically use code similar to this: headers: { "My-First-Header":"first value", "My-Second-Header":"second value" }, I am working on a basic school project and ...

What is the best way to share in a LinkedIn group using JavaScript?

Attempting to share on my group via the JavaScript API is resulting in an error - Access to write groups denied (403 Forbidden). How can I resolve this issue? IN.API.Raw("/groups/" + 10356772 + "/posts?format=json") .method("POST") .body(JSON.stringif ...