Upgrade your asp.net core 2.1 app to angular 6 okta developer

import { BrowserModule } from ‘@angular/platform-browser’ ; import { NgModule } from ‘@angular/core’ ; import { FormsModule } from ‘@angular/forms’ ; import { HttpClientModule } from ‘@angular/common/http’ ; import { RouterModule } from ‘@angular/router’ ; import { OktaAuthModule , OktaCallbackComponent } from ‘@okta/okta-angular’ ; import { AppComponent } from ‘./app.component’ ; import { NavMenuComponent } from ‘./nav-menu/nav-menu.component’ ; import { HomeComponent } from ‘./home/home.component’ ; import { CounterComponent } from ‘./counter/counter.component’ ; import { FetchDataComponent } from ‘./fetch-data/fetch-data.component’ ; import { ProfileComponent } from ‘./profile/profile.component’ ; const config = { issuer : ‘ https://{yourOktaDomain}/oauth/default’ , redirectUri : ‘http://localhost:5000/implicit/callback’ , clientId : ‘{clientId}’ }; @ NgModule ({ declarations : [ AppComponent , NavMenuComponent , HomeComponent , CounterComponent , FetchDataComponent , ProfileComponent ], imports : [ BrowserModule .


withServerTransition ({ appId : ‘ng-cli-universal’ }), HttpClientModule , FormsModule , RouterModule . forRoot ([ { path : ” , component : HomeComponent , pathMatch : ‘full’ }, { path : ‘counter’ , component : CounterComponent }, { path : ‘fetch-data’ , component : FetchDataComponent }, { path : ‘implicit/callback’ , component : OktaCallbackComponent } ]), OktaAuthModule . initAuth ( config ) ], providers : [], bootstrap : [ AppComponent ] }) export class AppModule {}

using System.Linq ; using System.Threading.Tasks ; using Microsoft.AspNetCore.Authorization ; using Microsoft.AspNetCore.Mvc ; using Microsoft.EntityFrameworkCore ; using okta_dotnetcore_react_example.Data ; namespace dotnet_angular_crud_example.Controllers { [ Authorize ] [ Route ( "/api/[controller]" )] public class RestaurantRatingController : Controller { private readonly RestaurantRatingContext context ; public RestaurantRatingController ( RestaurantRatingContext context ) { this . context = context ; } [ HttpGet ] public async Task GetAsync () { var userId = this . GetUserId (); var ratings = await context . RestaurantRatings . Where ( rr => rr . UserID == userId ). ToListAsync (); return Ok ( ratings ); } [ HttpGet ( "{id}" )] public async Task GetByIdAsync ( int id ) { var userId = this . GetUserId (); var rating = await context . RestaurantRatings . SingleOrDefaultAsync ( rr => rr . ID == id ); if ( rating . UserID != userId ) { return Unauthorized (); } else { return Ok ( rating ); } } [ HttpPost ] public async Task PostAsync ([ FromBody ] RestaurantRating rating ) { var userId = this . GetUserId (); if ( rating . ID > 0 ) { var savedRating = await context . RestaurantRatings . SingleOrDefaultAsync ( rr => rr . ID == rating . ID ); if ( savedRating == null ) { return NotFound ( rating ); } if ( savedRating . UserID != userId ) { return Unauthorized (); } savedRating . RestaurantName = rating . RestaurantName ; savedRating . RestaurantType = rating . RestaurantType ; savedRating . Rating = rating . Rating ; await context . SaveChangesAsync (); return Ok ( rating ); } else { rating . UserID = userId ; await context . AddAsync ( rating ); await context . SaveChangesAsync (); return CreatedAtAction ( "GetByIdAsync" , rating ); } } [ HttpDelete ( "{id}" )] public async Task DeleteAsync ( int id ) { var ratingToDelete = new RestaurantRating { ID = id }; context . RestaurantRatings . Attach ( ratingToDelete ); context . Entry ( ratingToDelete ). State = EntityState . Deleted ; await context . SaveChangesAsync (); return Ok (); } private string GetUserId () { return User . Claims . SingleOrDefault ( u => u . Type == "uid" )?. Value ; } } }

First, all of the controller actions are asynchronous. This will help prevent performance bottlenecks. I am also using some ActionResult helper methods like Ok() and NotFound(). These are super helpful in making sure the right HTTP status is set in the return headers. You may also notice a rather odd helper being returned in the PostAsync() method called CreatedAtAction(). Not only does this helper send the right HTTP status, but it adds a URL for getting the newly created resource in proper ReST form!

import { Component , OnInit } from ‘@angular/core‘ ; import { OktaAuthService } from ‘@okta/okta-angular’ ; import { RestaurantRatingsService } from ‘../shared/restaurant-ratings.service’ ; import { RestaurantRating } from ‘../shared/RestaurantRating’ ; @ Component ({ selector : ‘app-profile’ , templateUrl : ‘./profile.component.html’ , styleUrls : [ ‘./profile.component.css’ ] }) export class ProfileComponent implements OnInit { user : any ; ratings : Array = []; currentRating : RestaurantRating = new RestaurantRating (); constructor ( private oktaAuth : OktaAuthService , private ratingService : RestaurantRatingsService ) {} async ngOnInit () { this . user = await this . oktaAuth . getUser (); await this . ratingService . getAll () . subscribe ( ratings => ( this . ratings = ratings )); } async addUpdateRating () { await this . ratingService . addOrUpdate ( this . currentRating ) . subscribe ( rating => { if ( ! this . currentRating . id ) { this . ratings . push ( rating ); } this . currentRating = new RestaurantRating (); }); } async deleteRating ( rating : RestaurantRating ) { await this . ratingService . delete ( rating . id ). subscribe ( response => { var idx = this . ratings . indexOf ( rating ); this . ratings . splice ( idx , 1 ); }); } selectRating ( rating : RestaurantRating ) { this . currentRating = rating ; } }