Получение токена как неопределенного, поскольку я получаю токен из серверной части (Angular, .NET) ⇐ C#

[Anonymous]

У меня есть система аутентификации JWT со службой gRPC в .NET и кольцевой на стороне клиента.
Кажется, все в порядке, за исключением того, что я не могу хранить свой токен в localStorage на стороне клиента, Я получил токен из бэкэнда, но всякий раз, когда я пытался установить его в localStorage, я получал токен как неопределенный
это мой бэкэнд службы gRPC:

Код: Выделить всё

using Grpc.Core;
using Microsoft.AspNetCore.Identity;

public class AuthServiceImpl : AuthService.AuthServiceBase {
private readonly ITokenService _tokenService;
private readonly UserManager _userManager;

private readonly ILogger _logger;

public AuthServiceImpl(ITokenService tokenService, UserManager userManager, ILogger logger) {
_tokenService = tokenService;
_userManager = userManager;
_logger = logger;
}

public override async Task Login(LoginRequest request, ServerCallContext context) {
var user = await _userManager.FindByNameAsync(request.Username);

if (user == null) {

return new AuthResponse
{
Token = "",
Success = false,
Message = "Invalid username or password."
};
}
var passwordHasher = new PasswordHasher();
var result = passwordHasher.VerifyHashedPassword(user, user.PasswordHash, request.Password);

if (result == PasswordVerificationResult.Failed) {
return new AuthResponse {
Token = "",
Success = false,
Message = "Invalid username or password."
};
}
_logger.LogInformation("Received gRPC request: {Request}", request);
var token = _tokenService.GenerateToken(user.UserName, user.Email);
_logger.LogInformation(token);
return new AuthResponse {
Token = token, Success = true, Message = "Done!"
};
// return await Task.FromResult(new AuthResponse { Token = token, Success=true, Message="Done!" });

}

public override async Task SignUp(SignUpRequest request, ServerCallContext context) {
Console.WriteLine($"Received sign-up request: Username={request.Username}, Email={request.Email}");
var user = new ApplicationUser
{
UserName = request.Username,
Email = request.Email
};
var passwordHasher = new PasswordHasher();
user.PasswordHash = passwordHasher.HashPassword(user, request.Password);

var result = await _userManager.CreateAsync(user);

if (!result.Succeeded) {
Console.WriteLine(result.Errors);
var errors = string.Join(", ", result.Errors.Select(e =>  e.Description));
return new AuthResponse {
Token = "",
Success = false,
Message = $"User creation failed: {errors}"

};
}

var token = _tokenService.GenerateToken(request.Username, request.Email);
return await Task.FromResult(new AuthResponse {Token = token, Message = "added", Success = true});
}
}

это мой генератор токенов:

Код: Выделить всё

using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
using Microsoft.IdentityModel.Tokens;

public class TokenService : ITokenService {
private readonly IConfiguration _configuration;

public TokenService(IConfiguration configuration) {
_configuration = configuration;
}

public string GenerateToken( string username, string email) {
var claims = new[] {
new Claim(JwtRegisteredClaimNames.Sub, username),
new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString())
};

var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration["Jwt:Key"]));
var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);

var token = new JwtSecurityToken(
issuer: _configuration["Jwt:Issuer"],
audience: _configuration["Jwt:Audience"],
claims: claims,
expires: DateTime.Now.AddDays(10),
signingCredentials: creds);

return new JwtSecurityTokenHandler().WriteToken(token);

}

}

а это мой компонент входа:

Код: Выделить всё

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuthService } from '../../auth.service';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-login',
standalone: true,
imports: [CommonModule, FormsModule, ReactiveFormsModule],
templateUrl: './login.component.html',

})

export class LoginComponent {
loginForm: FormGroup;

constructor(private fb: FormBuilder, private authService: AuthService) {
this.loginForm = this.fb.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
}

onSubmit() {
if (this.loginForm.valid) {
this.authService.login(this.loginForm.value).subscribe((response : any) => {

// both of these giving me undefined token
const token1 =response[0];

// undefined token
const token = response.toen;
console.log(token1);
console.log(token);
try{
console.log(response);
localStorage.setItem('token', token);
} catch (e) {
console.error(e);
}
});
}
}
}

это моя служба аутентификации в angular:

Код: Выделить всё

import { Injectable } from '@angular/core';
import { AuthServiceClient } from './proto/auth_pb_service';
import { Observable } from 'rxjs';
import { LoginRequest, SignUpRequest } from './proto/auth_pb';
import { BrowserHeaders } from 'browser-headers';

@Injectable({
providedIn: 'root'
})

export class AuthService {
private client: AuthServiceClient;

constructor() {
this.client = new AuthServiceClient('http://127.0.0.1:5002');
}

login(credentials: { username: string, password: string }): Observable {
const request = new LoginRequest();
request.setUsername(credentials.username);
request.setPassword(credentials.password);

return new Observable(observer => {
this.client.login(request, (error: any, response) => {
if (error) {
observer.error(error);
} else {
observer.next(response)
observer.complete()
}
},)
});
};

signUp(credentials: { Username: string, Password: string, Email: string}): Observable {
const request = new SignUpRequest();
request.setUsername(credentials.Username);
request.setEmail(credentials.Email);
request.setPassword(credentials.Password);

console.log('Sending sign up request with:', credentials);

return new Observable(observer =>  {
this.client.signUp(request, (error: any, response) => {
if (error) {
observer.error(error);
} else {
observer.next(response)
console.log("this is the response", response)
observer.complete()
}
})
})
}
}

а также это ответ, который я получил от серверной части

Код: Выделить всё

Object { f: null, b: undefined, D: -1, u: (3) […], G: 1.7976931348623157e+308, a: {} }
​
D: -1
​
G: 1.7976931348623157e+308
​
a: Object {  }
​
b: undefined
​
f: null
​
u: Array(3) [ "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJtYXRpbjEiLCJqdGkiOiJlYTFkZWFjZi03Njg4LTQ0NzAtYTcyNi0wNWY1OGNjZDE0NzQiLCJleHAiOjE3Mjc1OTIxMTgsImlzcyI6IjEyNy4wLjAuMTo1MDAyIiwiYXVkIjoiMTI3LjAuMC4xOjQyMDAifQ.2YENWX2v1h8LlUN4Joun-dSGIfwu1eNP6nIPeDzrVE4", "Done!", true ]

также у меня есть перехватчик, который назначает заголовки моим запросам:

Код: Выделить всё

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {

intercept(req: HttpRequest, next: HttpHandler): Observable {
if (req.url.includes('/song/add') && req.method === 'POST') {
const clonedRequest = req.clone({
headers: req.headers.delete('Content-Type')
});
return next.handle(clonedRequest);
}
const modifiedReq = req.clone({
headers: req.headers
.set('Content-Type', 'application/json')
.set('Access-Control-Allow-Origin', '*')
});
return next.handle(modifiedReq);
}
}

Должен отметить, что вроде бы все в порядке, даже я протестировал свою службу grpc с помощью Bloomrpc, и она генерировала новые токены
при необходимости запросите у меня дополнительный код.

Подробнее здесь: https://stackoverflow.com/questions/790 ... ngular-net