angular - WebAPI で OAuth2.0 を使用した Angular 8 CRUD が次のエラーで失敗する: "unsupported_grant_type"

Question

WebAPI で OAuth2.0 を使用した Angular 8 CRUD を使用して、WebApi 2 で OAuth ログインを設定しようとしています ( https://www.c-sharpcorner.com/article/angular-8-crud-with-oauth2- 0-in-webapi-part-2/ ) 記事。

私は彼のコードをほとんど切り取って貼り付けましたが、次のようになりました。

400 (不正な要求) エラー: 「unsupported_grant_type」

http://localhost/oauth/tokenを使用して Visual Studio 2015 IIS Express インスタンスにコールバックすると、

私は十数件の記事に目を通しましたが、そのすべてが application/x-www-urlencoded の content-type ヘッダーを含めるように言っています。

彼のユーザー認証はサービスであり、次のようになります。

import {HttpClient,HttpHeaders} from '@angular/common/http';    
import { ProductDTO } from '../app/ProductDTO';    
import { Observable } from 'rxjs';    
@Injectable({    
  providedIn: 'root'    
})    
export class ProductService {    
  ApiUrl='http://localhost:57046/';    
  constructor(private httpclient: HttpClient) { }    

  UserAuthentication(UserName: string,Password: string):Observable<any>{    
   let credentials='username=' +UserName  + '&password=' +Password +'&grant_type=password';     
   var reqHeader = new HttpHeaders({'Content-Type': 'application/x-www-urlencoded','No-Auth':'True' });    
  return this.httpclient.post<any>(this.ApiUrl+'token',encodeURI(credentials),{headers:reqHeader});    
  }    
}

OAuth リクエストを受信して​​いるバックエンドは次のとおりです。

public class UtiliAuthProvider : OAuthAuthorizationServerProvider
    {
        private const string IPW = "invalid_password";
        private const string IPWC = "invalid_password_recaptcha";

        public override Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context)
        {
            string clientId;
            string clientSecret;
            string jwtName = context.Parameters.Get(ConfigurationManager.AppSettings["WebJWTName"]);

            if (!context.TryGetBasicCredentials(out clientId, out clientSecret))
            {
                context.TryGetFormCredentials(out clientId, out clientSecret);
            }

            if (context.ClientId == null || jwtName.Equals(ConfigurationManager.AppSettings["WebJWTProg"]))
            {
                context.Validated(ConfigurationManager.AppSettings["AudienceId"]);
            }
            else
            {

                if (context.ClientId == null)
                {
                    context.SetError("invalid_clientId", "client_Id is not set");
                }
                else
                {

                    if (AudienceProvider.FindAudience(context.ClientId) == null)
                    {
                        context.SetError("invalid_clientId", $"Invalid client_id '{context.ClientId}'");
                    }
                    else
                    {
                        context.Validated();
                    }
                }
            }

            return Task.FromResult<object>(null);
        }

        public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
        {
            context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { ConfigurationManager.AppSettings["CORSUrl"] });

            ApplicationUserManager userManager = context.OwinContext.GetUserManager<ApplicationUserManager>();
            UtiliUserModel user = await userManager.FindAsync(context.UserName, context.Password);

            if (user == null)
            {
                UtiliUserModel failUser = await userManager.FindByNameAsync(context.UserName);

                if (failUser == null)
                {
                    context.SetError("user_not_found", "Please check your user name and try again.");
                    return;
                }

                await userManager.AccessFailedAsync(failUser.Id);

                if (await userManager.IsLockedOutAsync(failUser.Id))
                {
                    ContextSetErrorLockOut(context);
                    return;
                }

                int attemptsLeft = userManager.MaxFailedAccessAttemptsBeforeLockout - failUser.AccessFailedCount;

                context.SetError(attemptsLeft == 1 ? IPWC : IPW, $"Incorrect password. You have {attemptsLeft} attempt{(attemptsLeft > 1 ? "s" : "")} left before account is locked out.");
                return;
            }

            if (await userManager.IsLockedOutAsync(user.Id))
            {
                ContextSetErrorLockOut(context);
                return;
            }

            if (user.AccessFailedCount > 0) await userManager.ResetAccessFailedCountAsync(user.Id);

            IFormCollection formData = await context.Request.ReadFormAsync();
            ClaimsIdentity oAuthIdentity = await user.GenerateUserIdentityAsync(userManager, "JWT");
            oAuthIdentity.AddClaim(new Claim(ConfigurationManager.AppSettings["WebJWTName"], formData[ConfigurationManager.AppSettings["WebJWTName"]]));
            oAuthIdentity.AddClaim(new Claim(ConfigurationManager.AppSettings["ScopeClaim"], new UtiliportalViews(null).IsCurrentRoleAnyAdmin(context.UserName) ? ConfigurationManager.AppSettings["ScopeClaimAdmin"] : ConfigurationManager.AppSettings["ScopeClaimUser"]));
            context.Validated(new AuthenticationTicket(oAuthIdentity, new AuthenticationProperties(new Dictionary<string, string> {{ UtiliportalDbConstants.AudiencePropertyKey, context.ClientId ?? string.Empty }})));
        }

        private static void ContextSetErrorLockOut(OAuthGrantResourceOwnerCredentialsContext context)
        {
            context.SetError("locked_out", "This account has been locked.");
        }
    }

このバックエンドは何年も機能しており、現在の AngularJS クライアントでは問題はありません。サイトをAngular 8に書き直そうとすると、このナンセンスが発生します。

Visual Studio IIS Express サーバーを使用して、OAuth/WebApi 2.0 ログイン トークンを呼び出す方法の実例を投稿してください。