ASP.NET Core mit Angular

Niko77 · 3. November 2023, 22:50

Hallo zusammen,Ich habe vor mir über den Winter eine kleine Web App zu basteln, bin aber Anfänger.Habe mit Visual Studio 2022 ein Projekt mit der Vorlage ASP.NET Core mit Angular erstellt. Als Authentifizierungstyp habe ich Einzelne Konten gewählt.Nun habe ich Im Backend ein simples Modul für Produckte und ein Controller HttpGet..POST…Put..usw. gemacht. Das ganze habe ich mit Postman getestet und ich kann alle Aktionen ausführen.Dann hab ich in Angular eine Komponente (Lager) erstellt, einen Service , eine Component und eine Html.Nun versuche ich ein POST abzusetzen der mir die Daten an das backend sendet, doch wird er vorher in Angular schon abgefangen und ich bekomme POST localhost:7199/api/lager 400 (Bad Request) authorize.service.ts:63Ich weiß das es mit der authorize zu tun haben muss, doch schnalle ich noch nicht wie ich das hinbekommen soll.

Lger.component

Quellcode

import { Component } from '@angular/core';
import { LagerService } from './lager.service';
@Component({
selector: 'app-lager',
templateUrl: './lager.component.html',
})
export class LagerComponent {
constructor(private lagerService: LagerService) { }
datenHochladen(): void {
const hartcodierteDaten = [
{ Name: 'Produkt 1', Menge: 10 }
];
this.lagerService.datenHochladen(hartcodierteDaten).subscribe(
response => {
console.log('Daten erfolgreich hochgeladen:', response);
},
error => {
console.error('Fehler beim Hochladen der Daten:', error);
}
);
}
}

lager.service

Quellcode

import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LagerService {
constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) { }
public datenHochladen(daten: any): Observable<any> {
const headers = new HttpHeaders().set('Content-Type', 'application/json');
console.log('Daten werden hochgeladen:', { headers: headers });
return this.http.post<any>('https://localhost:7199/api/lager', JSON.stringify(daten), { headers: headers })
}
}

Code-Tags korrigiert, Topic verschoben. ~Thunderbolt

Mono · 5. November 2023, 19:58

Wo ist denn dein Authorize Service?

Niko77 · 5. November 2023, 21:41

Der ist bei der Projektvorlage schon dabei und sieht so aus.

Quellcode

import { Injectable } from '@angular/core';
import { User, UserManager } from 'oidc-client';
import { BehaviorSubject, concat, from, Observable } from 'rxjs';
import { filter, map, mergeMap, take, tap } from 'rxjs/operators';
import { ApplicationPaths, ApplicationName } from './api-authorization.constants';
export type IAuthenticationResult =
SuccessAuthenticationResult |
FailureAuthenticationResult |
RedirectAuthenticationResult;
export interface SuccessAuthenticationResult {
status: AuthenticationResultStatus.Success;
state: any;
}
export interface FailureAuthenticationResult {
status: AuthenticationResultStatus.Fail;
message: string;
}
export interface RedirectAuthenticationResult {
status: AuthenticationResultStatus.Redirect;
}
export enum AuthenticationResultStatus {
Success,
Redirect,
Fail
}
export interface IUser {
name?: string;
}
@Injectable({
providedIn: 'root'
})
export class AuthorizeService {
static getAccessToken() {
throw new Error('Method not implemented.');
}
private popUpDisabled = true;
private userManager?: UserManager;
private userSubject: BehaviorSubject<IUser | null> = new BehaviorSubject<IUser | null>(null);
public isAuthenticated(): Observable<boolean> {
return this.getUser().pipe(map(u => !!u));
}
public getUser(): Observable<IUser | null> {
return concat(
this.userSubject.pipe(take(1), filter(u => !!u)),
this.getUserFromStorage().pipe(filter(u => !!u), tap(u => this.userSubject.next(u))),
this.userSubject.asObservable());
}
public getAccessToken(): Observable<string | null> {
return from(this.ensureUserManagerInitialized())
.pipe(mergeMap(() => from(this.userManager!.getUser())),
map(user => user && user.access_token));
}
public async signIn(state: any): Promise<IAuthenticationResult> {
await this.ensureUserManagerInitialized();
let user: User | null = null;
try {
user = await this.userManager!.signinSilent(this.createArguments());
this.userSubject.next(user.profile);
return this.success(state);
} catch (silentError) {
console.log('Silent authentication error: ', silentError);
try {
if (this.popUpDisabled) {
throw new Error('Popup disabled. Change \'authorize.service.ts:AuthorizeService.popupDisabled\' to false to enable it.');
}
user = await this.userManager!.signinPopup(this.createArguments());
this.userSubject.next(user.profile);
return this.success(state);
} catch (popupError: any) {
if (popupError.message === 'Popup window closed') {
return this.error('The user closed the window.');
} else if (!this.popUpDisabled) {
console.log('Popup authentication error: ', popupError);
}
try {
await this.userManager!.signinRedirect(this.createArguments(state));
return this.redirect();
} catch (redirectError: any) {
console.log('Redirect authentication error: ', redirectError);
return this.error(redirectError);
}
}
}
}
public async completeSignIn(url: string): Promise<IAuthenticationResult> {
try {
await this.ensureUserManagerInitialized();
const user = await this.userManager!.signinCallback(url);
this.userSubject.next(user && user.profile);
return this.success(user && user.state);
} catch (error) {
console.log('There was an error signing in: ', error);
return this.error('There was an error signing in.');
}
}
public async signOut(state: any): Promise<IAuthenticationResult> {
try {
if (this.popUpDisabled) {
throw new Error('Popup disabled. Change \'authorize.service.ts:AuthorizeService.popupDisabled\' to false to enable it.');
}
await this.ensureUserManagerInitialized();
await this.userManager!.signoutPopup(this.createArguments());
this.userSubject.next(null);
return this.success(state);
} catch (popupSignOutError: any) {
console.log('Popup signout error: ', popupSignOutError);
try {
await this.userManager!.signoutRedirect(this.createArguments(state));
return this.redirect();
} catch (redirectSignOutError: any) {
console.log('Redirect signout error: ', redirectSignOutError);
return this.error(redirectSignOutError);
}
}
}
public async completeSignOut(url: string): Promise<IAuthenticationResult> {
await this.ensureUserManagerInitialized();
try {
const response = await this.userManager!.signoutCallback(url);
this.userSubject.next(null);
return this.success(response && response.state);
} catch (error: any) {
console.log(`There was an error trying to log out '${error}'.`);
return this.error(error);
}
}
private createArguments(state?: any): any {
return { useReplaceToNavigate: true, data: state };
}
private error(message: string): IAuthenticationResult {
return { status: AuthenticationResultStatus.Fail, message };
}
private success(state: any): IAuthenticationResult {
return { status: AuthenticationResultStatus.Success, state };
}
private redirect(): IAuthenticationResult {
return { status: AuthenticationResultStatus.Redirect };
}
private async ensureUserManagerInitialized(): Promise<void> {
if (this.userManager !== undefined) {
return;
}
const response = await fetch(ApplicationPaths.ApiAuthorizationClientConfigurationUrl);
if (!response.ok) {
throw new Error(`Could not load settings for '${ApplicationName}'`);
}
const settings: any = await response.json();
settings.automaticSilentRenew = true;
settings.includeIdTokenInSilentRenew = true;
this.userManager = new UserManager(settings);
this.userManager.events.addUserSignedOut(async () => {
await this.userManager!.removeUser();
this.userSubject.next(null);
});
}
private getUserFromStorage(): Observable<IUser | null> {
return from(this.ensureUserManagerInitialized())
.pipe(
mergeMap(() => this.userManager!.getUser()),
map(u => u && u.profile));
}
}

ASP.NET Core mit Angular

ASP.NET Core mit Angular

Quellcode

Quellcode

Quellcode

Tags

Ähnliche Themen

2 Benutzer haben hier geschrieben