Ways to safeguard your Asp.net core 2.1 and Vue.js single page application using Identity Server 4

Hello, I've encountered a small dilemma regarding architecture. I have two separate applications and one Identity Server4 Application. One of the applications is an AspNet core 2.1 API solution running on a different domain and server, as well as the other two. Now, here are the key points that are causing my confusion:

  1. I have added my Client Application (which is Vue.js SPA) as a client in Identity Server4 with Implicit mode since it is a JavaScript client.
  2. Do I need to add the API application as a client in the IDP Server?
    1. If yes, then how do I call any API from Vue.js using Axios? When logging in from the Vue.js application, it will receive the Token for this client which will be used to display or hide buttons and sections on the web page.
    2. I am unsure whether to use the Claims received for the vue.js client to validate the API.
    3. If I register the API as a client in Identity Server 4, how can I invoke the API from the Vue.js client application?
javascriptvue.jsidentityserver4asp.net-core-2.1

Answer №1

  1. To properly integrate the API, it should be added as an ApiResource rather than a Client and registered in the Startup file. To see a fully configured example, refer to the quickstart guide for JS applications available here: https://github.com/IdentityServer/IdentityServer4.Samples/tree/master/Quickstarts/6_JavaScriptClient.

  2. Within the Javascript client, you will need to make calls to the Identity Server for authentication. Utilize the library https://github.com/IdentityModel/oidc-client-js, which handles this process. This library is also demonstrated in the aforementioned quickstart guide.

  3. When making requests to the API, ensure that the authorization header is set to "Bearer " along with the access token obtained from the Identity Server. Additionally, configure Jwt Bearer Authentication in the API.

The Quickstart guide mentioned earlier provides sample code for implementing these steps effectively.

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

What is the best method for showcasing a nested JSON value?

I need to show the data for the month of April. Here is the code snippet: {{my_dates['2018-04-23']}} This code displays: { "april":0, "may":0, "june":0, "july":0, "august":0, "september":0, "october":0, "income_trips":" ...

vue.js

What is the best way to dynamically apply the "active" class to a link when it is clicked

Here is how my vue component looks: <template> <div> ... <div class="list-group"> <a :href="baseUrl+'/message/inbox'" class="list-group-item"> Message </a> ...

javascriptvue.jsvuejs2vue-component

Error: React - Module not found. This issue arises when attempting to require the 'express' package from within the installed

Hello, I attempted to install the express package in a React project. However, when I try to import the package inside app.js using: const app = require("express"); I encounter 30 errors all stating: Module not found Error: Can't resolve 'x&ap ...

javascriptnode.jsreactjsexpressnpm-install

Guide to incorporating third-party JavaScript files and functions into my Angular web app

I have been trying to integrate external code (HTML, JS, and CSS files) into my Angular web application. Within this external code, the structure of the HTML file is as follows: index.html <html> <header> </header> <body> </bo ...

javascriptangularanimationexternal-js

Show an empty table/data grid with blank rows using Material UI

I am attempting to showcase a table with empty lines and a predefined height, even when there is no data to display initially. By default, the table appears without any visible lines. My goal is to have these empty lines displayed, ensuring that the table ...

javascriptreactjsdatagridmaterial-ui

Using local variables in NodeJS callbacks

Despite the abundance of information on SO, I have yet to find a suitable answer to my particular situation. The following code snippet is causing me issues: for(var i=0; i < shop.collections.length; i++){ if(!shop.collection[i].active){ var dat ...

javascriptnode.jscallback

Animate a three.js object moving towards the front of the camera

Currently, I have an object that is smoothly tweening towards the front of the camera by using WestLangleys solution from a different question: var pLocal = new THREE.Vector3( 0, 0, -10 ); var pWorld = pLocal.applyMatrix4( camera.matrixWorld ); ...

javascript3dthree.js

Error message appearing repeatedly and submit button functioning only after second click

I am currently working on my CS50 Final Project, where I am in the process of designing a web app using Flask. Specifically, this issue arises in the login/register page where I am attempting to verify if the username is already taken (through jsonify) and ...

javascriptpythonjqueryhtml

Issues arising from the JSON responses within the Angular application

**JS Code** Currently facing an issue with retrieving JSON object values from PHP and displaying them in the console. I have set up a post method with the user value containing email and password. In my PHP file, I am validating it and returning the value ...

javascriptphpjqueryangularjs

The HttpContext.Current State being lost due to PageMethods call in JavaScript

I find myself in a bit of a pickle. I've been utilizing JavaScript's PageMethod feature and it's been working wonderfully. However, I'm running into an issue when trying to access the HttpContext's state, which is returning a value ...

c#javascriptasp.netpagemethods

An issue has been encountered in the code during the installation of react.js

node:internal/modules/cjs/loader:1148 throw err; ^ Error: Module 'C:\Users\hp\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js' could not be found. at Module._resolveFilename (node:internal ...

javascriptreactjsnode.jsnpmnode-modules

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

javascriptcssangulartypescriptangular-material

JavaScript for Web Scraping

I am attempting to use JavaScript to scrape the contents of a multi-page website and then export it to an excel or CSV file. The issue I am facing is that I can only scrape the first page and I am struggling to export it to excel or CSV format. Below is ...

javascriptexpressweb-scrapingaxioscheerio

Finding the substring enclosed by two symbols using Javascript

I'm working with a string that contains specific symbols and I need to extract the text between them. Here is an example: http://mytestdomain.com/temp-param-page-2/?wpv_paged_preload_reach=1&wpv_view_count=1&wpv_post_id=720960&wpv_post_se ...

javascriptjqueryregex

While experimenting with p5.js, I encountered an issue where I received the error message stating that "loadAnimation is not defined and createSprite not defined." This problem persists even when using VSCode

let background, sleeping, brushing, gyming, eating, drinking, moving, astronaut; function preload() { background = loadImage("images/iss.png"); sleeping = loadAnimation("images/sleep.png"); brushing = loadAnimation("images/ ...

javascriptp5.js

How to retrieve the current element in AngularJS version 1.x

I have done extensive research on how to get the current element in jQuery using $(this). However, I have not been able to find a similar method in AngularJS 1.x. Here is what I have tried: angular.element(this), but it does not work as expected. Below is ...

javascriptjqueryangularjs

Changing the designated materialUI class

Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...

javascriptcssreactjsmaterial-ui

Tips on minimizing object array and extracting its worth using javascript

I am currently facing a challenge with reducing an object array. The array is as follows: arr=[{title: 'AP', CurrentDate: 2019-07-31, Status: 'done', NoOfEvents:'6' }] My goal is to reduce this array object specifically to ex ...

javascriptarraysreactjs

Monitor website visitors' traffic sources using the Google Analytics Nuxt module

Recently I integrated Google Analytics into my Nuxt website. After installing the module, I configured it in the nuxt.config.js file like this: gtm: { id: 'GTM-WGW****' }, googleAnalytics: { id: 'UA-230******-*' ...

javascriptvue.jsgoogle-analyticsnuxt.js

Is there a way to efficiently load a data table once the page is fully loaded?

Is there a way to load data into a table after the page has finished loading? My page includes a table, a textbox, and a search button. I have been considering using ajax, but have not found a suitable solution yet. What is the best approach for this - J ...

javascriptjqueryasp.net-mvcajax