OAuth Implicit flow Using Angular 6 and ASP.NET MVC Core

In this tutorial, we are going to implement authentication and authorization using the Azure active directory.

There are various protocols for implementing authentication using the Azure active directory. In this tutorial, we will use the OAuth and implicit code flow.

Implementing the Implicit Flow

You will need access to the Azure portal and AAD. 

1. Open Azure portal. From the left navbar, select Azure Active Directory.

2. In Azure Active Directory, we will add two apps — one for our Angular application and another one for the .NET Core Web API.
   
   

3.   Click on the "App registration." Here, we will register both apps.
   
   

4. Click on the "New application registration."
   

5. Click on the "Create" button. If all the validations are passed, then a new app will be created. We will do the same for the .NET Core Web API.
   

6. In the sign-on URL, we have to enter our deployed URL, like : https://myserviceapidemo.com. 

7. All the applications that will be created will have an APP ID (Identifier), which is a globally unique identifier. Using this APP ID, we can identify our app.
   
   

8. Click on the DemoAngularPoC --> Manifest. Set "oauth2AllowImplicitFlow" property to true and click "SAVE."

9. In the same way, click on DotnetCoreWebAPI --> Manifest. Set the "oauth2AllowImplicitFlow" property to true and click "SAVE."

10.   Click on the DotnetCoreWebAPI --> Settings --> Required permissions.
             a) Click on Grant permissions to give access to other apps in your AAD.
             b) Then, click "Yes." 

11. Click on the DemoAngularPoC --> Settings --> Required permissions. Then, select Add. Here, we will add the DotnetCoreWebAPI app so that we can set a delegated permission between them.

12. Click on "Select an API." Search here for the: "DotnetCoreWebAPI." Then, select all the delegated permissions and click on "Done."

13.  Click on the DemoAngularPoC --> Settings --> Required permissions. 

        a) Click on "Grant permissions."
        b) Then, click "Yes."

Now, we have created both an Angular and web API application in our AAzure AD. Now, let's assign the users who can access these applications.

14.  Navigate to the "Enterprise applications."

Here, we can see our both Angular and web API apps. Select the Angular app, then click on "User and        Group." Here, we can add the "User," who can access our applications.

Great job! At this point, we have successfully configured the Azure part. Now, let's set up our code.

You can clone the demo code for Angular and .NET.

15.   Let us understand our Angular code.

We have three methods in our app.componet.ts file. They include: 

  a) Login method: This will be called when the user clicks the "Login" button. It will be called the login method from the adal package, which will redirect the user to Azure login page.

  b) ngOnInit: In this method, we will implement this method if the user is logged in. Then, we will fetch the access token from the Azure Active directory and call our backend API using this access token. 

  c) Logout: This method will log out the current user.

1. Let us now understand our .NET core API code.      

2.  In the startup class, inside  ConfigureServices, we first added CORS. Then, we set up our JWT token validations. Here, it will validate whether the token is from the expected authority and audience or not.  We can add other validations also, like checking that the token is expired or not.    

In the Configure method, we will add the "UseAuthentication" middleware. So, we are telling .NET core to use authentication for each request.  We can secure our APIs at the controller level and at action method levels by just adding the "Authorize" filter above them.

Note: If we set the "oauth2AllowImplicitFlow" property as false, then we will get the error: "Response_type 'token' is not enabled for the application."

Now, we have successfully implemented authentication and authorization.  Let us know what you think in the comment section below!