IdentityServer4 (三) 前后端分离

1. 在上面的项目中，开通CORS。

2.新建一个Angular项目,并安装oidc 包：

ng new ids4Client
cd ids4Client
npm i oidc-client

3. 修改appComponent 来访问IDS4

export class AppComponent {
  title = 'ids4Client';
  mgr: Oidc.UserManager;

  constructor() {

 　　　　const config = {

     　　 authority: 'https://localhost:6001',

    　　  client_id: 'm2m.client',

    　　  redirect_uri: 'https://localhost:5001',

   　　   response_type: 'client_credentials',

    　　  scope: 'scope1',

    　　  post_logout_redirect_uri: 'https://localhost:5003/index.html',

    　　};

    this.mgr = new Oidc.UserManager(config);

  }

  login(): void {
    this.mgr.signinRedirect();
  }

  logout(): void {
    this.mgr.getUser().then( user => {
      const url = 'https://localhost:6001/identity';

      const xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.onload = () => {
          console.log(xhr.status, JSON.parse(xhr.responseText));
      };
      xhr.setRequestHeader('Authorization', 'Bearer ' + user?.access_token);
      xhr.send();
  });
  }

  api(): void {

  }
}

 这里的

client_id: 'm2m.client',
redirect_uri: 'https://localhost:5003/callback.html', 

response_type: 'code',

scope: 'openid profile api1',
这些值要和 数据库中对应。 不然会出现类似下面的错误：