DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • An Overview of Kubernetes Security Projects at KubeCon Europe 2023
  • Web Development Checklist
  • Never Use Credentials in a CI/CD Pipeline Again
  • Transactional Outbox Patterns Step by Step With Spring and Kotlin

Trending

  • An Overview of Kubernetes Security Projects at KubeCon Europe 2023
  • Web Development Checklist
  • Never Use Credentials in a CI/CD Pipeline Again
  • Transactional Outbox Patterns Step by Step With Spring and Kotlin
  1. DZone
  2. Coding
  3. Frameworks
  4. OAuth Implicit flow Using Angular 6 and ASP.NET MVC Core

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

Want to learn more about using the authorization code grant flow? Check out this post to learn how using Angular 6 and the ASP.NET MVC Core.

Aniket Rai user avatar by
Aniket Rai
·
Updated Feb. 04, 19 · Tutorial
Like (6)
Save
Tweet
Share
24.22K Views

Join the DZone community and get the full member experience.

Join For Free

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.

    Image title

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

    Image title

  4. Click on the "New application registration."
    Image title

  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.
    Image title

  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.

    Image title

  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."

Image title

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."

Image title

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.

Image title

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.

Image title

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

Image title

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.    

Image title

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!

ASP.NET MVC authentication AngularJS .NET ASP.NET app security Flow (web browser) Web API application

Opinions expressed by DZone contributors are their own.

Trending

  • An Overview of Kubernetes Security Projects at KubeCon Europe 2023
  • Web Development Checklist
  • Never Use Credentials in a CI/CD Pipeline Again
  • Transactional Outbox Patterns Step by Step With Spring and Kotlin

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: