Token-Based Security: Angular Applications – Part 1


I’ve written a few posts on token-based security, its importance, OAuth, OIDC, and identity server. If you are new to these topics, you can check out the previous posts.

Today, I will write about securing angular applications with these technologies. We will see how to wire angular applications with the ID server.

Angular application is a Public client Application type, these applications are not capable of encryption. Server side Client applications such as ASP .NET MVC, Nodejs, etc.

in the past, Implicit Flow used to be angular but is no longer recommended. As we have learned in previous posts. Authority code. + PKCE Today’s routine.

This flow involves redirecting from an angular app to the ID server and their user enters the login / password on the IDP, is authenticated there, and then sent back to the angular application.

I have seen many applications. In the app Login screens (for example within an angular application), although this can be done (usually using a resource owner password flow), but avoid this process if possible. It creates more problems than it solves. If you are not happy with the IDP default views for login / logout, you can style / change the IDP screens instead of creating login / logout etc. screens within your angular application.

In this post, we will cover the recommended flow, but, first, we need some API endpoint (on the resource server) that will return some data. Let’s make a simple end point:

API endpoint.

I have an API, which is just a .NET core web application. To get started, I created an API for the product that uses, as shown below. D.Upper And Post Gray MySQL To read data from the database and return it to the caller in JSON format:

(I’m using the PostGrass database with Dipper ORM, you can actually just return the memory data and skip the DB part altogether if you wish).

Next, we will create an angular application and products component. The angular application will make an HTTP call at the gate end point on the product controller and receive JSON data which will then be displayed using HTML.

Angular application.

I have created a very basic angular application using angular-CLI. The application contains a Product component Which displays product data in the table. You can use your existing or new angular application and the mechanism will be the same.

This is also a service. api.service.ts Which makes HTTP calls back to API and point (product controller).

Client App Angular.

Now, if we run the Angle app and see the product.Product list angular.On the TS page, on the product page:

Therefore, our angular application is able to call and retrieve data at the API endpoint. Next, let’s protect the last point of this API:

API security

Let’s protect the API by applying the authorized attribute:

API security

Therefore, the API is secure and only authorized customers can access it.

Now, at this point, we have the end point of the Products API. Resource server Safe to use. To give authority Description. Our ID server. Protecting the resource server. We have کونیی۔ Application that makes HTTP calls to the endpoint of the Products API. Next, let’s take the necessary steps to allow this HTTP call to receive data.

OIDC client

We can use our angular application to connect to the server and handle different flows. oidc The client library manages the details of this redirect and protocol level for us.

You can install the package using the npm command: npm install oidc-client

Next, we will create a service (AuthService) that will serve as a security context for our angular application. This service will be used internally. oidc Library as needed

Eighth service.

We will start by creating this service. The Auth service will use the OIDC library and will work hard for us to verify with OIDC.

Author's service.

First, we will import. User manager And User Type from the oidc library. These are the basic types you will deal with oidc client.

Next, we included the private sector. User manager And User قسم. User Manager will create the user upon completion of the login process. Next, we get started. User manager I Constructor AuthService.

We will see. User Variable soon.

  • User manager Object manages the details of all lower level protocols of OIDC flow for us. So, we don’t have to worry about what’s going on at the wire level between our app and the identity provider.
  • User Covers client-side information about type a. Signed in user, As
    • Identification and access. Token Came back from IDP
    • Any user. Profile Return from IDP as information Claims.
    • And being able to when the user’s tokens run out.

In Service Constructor, we are launching the User Manager. sts settings. If you remember from our postman demo, you may already know some of them.

  • redirect_uri: This is the URI when the IdentityServer redirects back after the login process. We will make an angular component for this.
  • post_logout_redirect_uri: As above, we will create an angular component to deal with this when users log out of STS and they will be redirected to the angular application.

These two components will be very simple, mostly with just one. Empty div And some JavaScript. We will look at these two components later in the post.

Login process.

Next, I added one. log in Method in AuthService, which makes calls. singinRedirect On userManager Thing:

AuthService login method.

After a successful login, the user manager stores. Session storage This results in the user’s item being created so that it can be retrieved at any time, such as AccessToken To send it API Calls

Contains a user object. Access And ID token., As well as one Expired The flag that we can check to make sure the access token has not expired.

Access token has not expired.

Logged in helpful way.

The code above is in the picture, I made. isLoggedIn One way. This method will help us to know from any component that “Check if the user is already logged in.“.

Extend event when user loads.

When there is a redirect from STS to the Angular app, the process that takes place. ID And Access tokens. happens Unshakably From rootwave loading. So, we will need it too. Raise an event When the user loads (see image below), the UI that depends on it can be updated. We will use one. RxJs observable. to do so:

Angular RxJs observable.

Therefore, to achieve this, we will declare a Private property _loginChangedSubject On AuthService which is an RxJs topic and then a Public viewable _loginChanged Which is produced by topic. Then we add the code. Fire that is observable. I Logged in Method

Check if the user is logged in.

We will also remove this observable when Login process Completes, But we’ll get back to that later.

Loading user from session storage.

Next, update the root. AppComponent with IsLoggedIn Check to see if the user is already in session storage from the previous login to load when launched.

Loading user from session storage.

I’ve also added an event handler to update. isLoggedIn Property When the login status changes..

Therefore, the app component will now be notified whenever the user’s status changes and the application will be able to respond to that change.

Login / Logout button and method.

Next, I added the login / logout button (HTML) and method. AppComponent:

Login / Logout button.

And here is the code of login / logout methods:

Login / Logout Methods

We still have to log in and sign out. Callback components And some other angular code. We need too Configure STS With angular client settings. However, to control the length of the post, we will pause now and continue with the rest of the setup in the next post. You can download source code from this gut repository. We will continue this post in the next post, let me know if you have any comments or questions. Until next time, Happy Coding.


Write a Comment

Your email address will not be published. Required fields are marked *