Build a CRUD app with ASP.NET Core and Angular

Lee Brandt

Do you have a git repo for your code that I can look at?

Lee Brandt

Markup has been fixed.

JP Hellemons

I had some issues with the Observable.fromPromise which is now (angular 7) replaced with from. It was in the auth.interceptors.ts

import {from, Observable} from ‘rxjs’;
import ‘rxjs/add/operator/mergeMap’;

maria morato

I had the same issue- but this resolved it npm install --save rxjs-compat

Andrew Koebrick

I have adapted this pattern for a project I am working on, but the grid does not update when records are added or deleted. Shouldn’t the subscribe function continually repopulate the grid? Any idea what would be missing that could cause this ?

navinika goyal

I am really impressed the way you have written the blog Thank you so much for sharing the valueable post, I appreciate your hard work.Keep blogging.
Angular JS Training in Electronic City
Angular JS 2&4 Training in Electronic City

dennis602

How do you get roles? I’m used to .NET applications where authentication and authorization is handled in the web.config and all within the server. It seems Okta only handles users and not roles.

Matt Raible

I’m not a .NET developer, but I have developed a lot of Java and JavaScript apps. For those, you can create a “groups” claim and stuff it in your ID token. https://developer.okta.com/…

dennis602

I can get it to work with groups and putting it in the claim but only with an MVC application. But, I cannot seem to find or get an answer with using angular and a web api. [Authorize] works but decorating a method with a role doesn’t seem to work. I’m not sure how to do this and nobody seems to know.

Munazzah Asad

I have followed the example and got the login redirect but this.oktaAuth.isAuthenticated() is always false. I have tried many examples and different browsers but even after successful login this flag is always false and I dont get nay token also. Urgent help required

leebrandt

Do you have a repo for your example, I can take a look.

leebrandt

You’ll need to:
1. Make sure your groups are part of the claims sent back in the token.
2. Tell ASP.NET Core that the Roles claim type is named "groups"
3. Then you can check groups from the token in Angular.

This post might help: https://developer.okta.com/…

dennis602

I have it working except for logout. When I click the logout link I get : 400 BAD REQUEST
Identity Provider:
Error Code: illegal_post_logout_redirect_uri
Description: The ‘post_logout_redirect_uri’ parameter must be an absolute URI that is whitelisted in the client app settings.

Matt Raible

If you look at the URL in your browser, you should see the value that’s being used for the illegal_post_logout_redirect_uri parameter. If you add that value to the list of Logout redirect URIs in your app, everything should work.

Luis Raul Espinoza Barboza


import { Injectable } from ‘@angular/core’;
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from ‘@angular/common/http’;
import { mergeMap } from ‘rxjs/operators’;
import { OktaAuthService } from ‘@okta/okta-angular’;
import { Observable, from } from ‘rxjs’;

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

constructor(private oktaAuth: OktaAuthService) {
}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<httpevent<any>> {
return this.isAuthenticated()
.pipe(mergeMap((isAuthenticated) => {
if (!isAuthenticated) {
return next.handle(request);
}

return this.getAccessToken()
.pipe(
mergeMap((accessToken) => {
request = request.clone({
setHeaders: {
Authorization: Bearer ${accessToken}
}
});
return next.handle(request);
})
);
}))
}

private isAuthenticated(): Observable<boolean> {
const observableFromPromise = from(this.oktaAuth.isAuthenticated());
return observableFromPromise;
}

private getAccessToken(): Observable<string> {
const observableFromPromise = from(this.oktaAuth.getAccessToken());
return observableFromPromise;
}
}

gulshan lalwani

Hi, is there a way we can use a authorization code flow in the asp.net core 3.1 api side and get the access token and pass it to angular side? I do not want to use client credentials from front end. I also want to add my own claims and policy to each token individually, as I am in an organization setup. Could you please help with a repo or some direction, I could not find any samples in okta blogs. Here is my question on SO - https://stackoverflow.com/q…

gulshan lalwani

IMPORTANT - Could you show same example with Authorization Code with PKCE protection? This example shows Implicit flow which is now not recommended for SPA applications