angularjs - IdentityServer 4 - invaid_client 错误

Question

我是 Identity Server 的新手。我之前没有配置过。但我正在开展的项目需要它。 该 API 将为 Angular JS 客户端、iOS 应用程序和 Android 应用程序提供服务。我们需要实现身份验证和授权以及客户授权

注意:我正在尝试在同一个 Web API 项目中配置 Identity Server 和我的 API。

我已按照文档进行操作并配置了 Identity Server，如下所示:

在startup.cs中的ConfigureServices()

    private readonly IConfiguration config;

    private const string DEFAULT_CORS_POLICY = "localhost";

    public Startup (IConfiguration config) => this.config = config;

    public void ConfigureServices (IServiceCollection services) {
        services.AddIdentityServer ()
            .AddDeveloperSigningCredential ()
            //.AddInMemoryApiResources(config.GetSection("ApiResources"))
            .AddInMemoryApiResources (Config.GetApis ())
            //.AddInMemoryClients(config.GetSection("Clients"))
            .AddInMemoryClients (Config.GetClients ())
            .AddInMemoryIdentityResources (Config.GetIdentityResources ())
            //.AddInMemoryIdentityResources(config.GetSection("IdentityResources"))
            .AddExtensionGrantValidator<WechatGrantValidator> ();

        services.AddTransient<IUserCodeValidator, UserCodeValidator> ();

        services.AddCors (options => {
            options.AddPolicy (DEFAULT_CORS_POLICY, builder => {
                builder.WithOrigins ("http://localhost:5202");
                builder.AllowAnyHeader ();
                builder.AllowAnyMethod ();
            });
        });
    }

我实现了接口(interface)IExtensionGrantValidator并注册了扩展授权

    public class WechatGrantValidator : IExtensionGrantValidator {

    private IUserCodeValidator validator;

    public WechatGrantValidator (IUserCodeValidator validator) {
        this.validator = validator;
    }
    public string GrantType => "wechat_grant";

    public async Task ValidateAsync (ExtensionGrantValidationContext context) {
        string userCode = context.Request.Raw.Get ("userCode");
        var result = await validator.ValidateAsync (userCode);
        if (result.IsError) {
            context.Result = new GrantValidationResult (TokenRequestErrors.InvalidGrant);
            return;
        }
        context.Result = new GrantValidationResult (result.UserId, GrantType);
        return;
    }
}

我已按照文档进行操作并配置了客户端信息，如下所示

        public static IEnumerable<Client> GetClients () {
        return new Client[] {
                    new Client {
                    ClientId = "javascritpClient",
                    ClientName = "JavaScript Client",
                    AllowedGrantTypes = { "wechat_grant" },
                    AllowAccessTokensViaBrowser = true,
                    AllowedCorsOrigins = { "http://localhost:5202" },
                    AllowedScopes = { "api1" },
                    ClientSecrets = { new Secret ("secret".Sha256 ()) }
                    }
        };
    }

现在因为我想使用 Angular JS、iOS 和 Android，所以我只想从 IdentityServer 获取访问 token ，然后使用访问 token 进行身份验证和授权。

为此，我尝试从 JS 客户端访问/connect/token

但我收到 invalid_client 错误。

@Injectable()
export class OauthService {
  private http: Http;
  public constructor(http: Http) {
    this.http = http;
  }

  public async getDiscoveryInfos(issuer: string): Promise<DiscoveryInfos> {
    if (!issuer.endsWith('/')) {
      issuer += '/';
    }
    issuer += '.well-known/openid-configuration';
    return this.http.get(issuer).map(response => {
      return response.json();
    }).toPromise();
  }

  public async getToken(): Promise<any> {
    const headers = new Headers({ "Content-Type": "application/x-www-form-urlencoded" });
    const discovery = await this.getDiscoveryInfos('http://localhost:5200');
    return this.http.post(discovery.token_endpoint, {
      grant_type: 'wechat_grant',
      userCode: 'userCodeAA',
      client_id: 'javascritpClient',
      client_secret: 'secret',
      scope:'api1'
    }, { headers: headers }).map(response => response.json()).toPromise();
  }

}

http response infos

服务器响应“error”:“invalid_client”

log infos

我在服务器端收到的错误是“找不到客户端标识符”:

1 - 为什么我会收到此错误？

2 - 由于我需要在 JS 中以编程方式获取 token ，所以我需要使用/connect/token，我对此是否正确？我走的路正确吗？

Answer 1

在 ng2 中使用如下方法:

public Token(data: SigninModel): Observable<any> {
    this.options = new RequestOptions({ headers: this.headers });
    this.headers.append('Content-Type', 'application/x-www-form-urlencoded');
    const url = this.urlBase + `connect/token`;
    const param = new URLSearchParams();
    param.set('grant_type', 'password');
    param.set('client_Id', 'javascritpClient');
    param.set('client_secret', 'secret');
    param.set('scope', 'offline_access');
    param.set('username', data.username);
    param.set('password', data.password);
    return this.http.post(url, `${param.toString()}`, this.options)
        .map((response: Response) => {
            return (response.json()); 
        })
        .catch(this.handleError);
}