代码改变世界

IdentityServer4 (三) 前后端分离

2021-03-27 23:01  qgbo  阅读(299)  评论(0)  编辑  收藏  举报

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';


  </span><span style="color: #0000ff;">const</span> xhr = <span style="color: #0000ff;">new</span><span style="color: #000000;"> XMLHttpRequest();
  xhr.open(</span><span style="color: #800000;">'</span><span style="color: #800000;">GET</span><span style="color: #800000;">'</span><span style="color: #000000;">, url);
  xhr.onload </span>= () =&gt;<span style="color: #000000;"> {
      console.log(xhr.status, JSON.parse(xhr.responseText));
  };
  xhr.setRequestHeader(</span><span style="color: #800000;">'</span><span style="color: #800000;">Authorization</span><span style="color: #800000;">'</span>, <span style="color: #800000;">'</span><span style="color: #800000;">Bearer </span><span style="color: #800000;">'</span> + user?<span style="color: #000000;">.access_token);
  xhr.send();



});

}


api(): void {


}

}

 这里的

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

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