我们一直在使用 OpenIdDict 和密码流。
但是:我们想要切换到隐式流(来自 openiddict 身份验证服务器的弹出窗口)。我可以找到一个 ASP.NET 应用程序的示例,但我们想在以下情况下使用它: 1/ Angular 1.0 网站 2/ Ionic 2.0 应用程序
有人可以给出一些提示吗?(Aurelia 的例子很接近,但我们无法让它在 Ionic 或 Angular 中工作)。我们可以使用哪些库,我们应该进行哪些调用?
非常感谢,
Frank
我们一直在使用 OpenIdDict 和密码流。
但是:我们想要切换到隐式流(来自 openiddict 身份验证服务器的弹出窗口)。我可以找到一个 ASP.NET 应用程序的示例,但我们想在以下情况下使用它: 1/ Angular 1.0 网站 2/ Ionic 2.0 应用程序
有人可以给出一些提示吗?(Aurelia 的例子很接近,但我们无法让它在 Ionic 或 Angular 中工作)。我们可以使用哪些库,我们应该进行哪些调用?
非常感谢,
Frank
我只使用带有 typescript 的 angular2 应用程序中的 OpenIddict 隐式流,但我强烈建议您使用 oidc-client。无论如何,所有 SPA 的相同方法都适用。
您可以制作一个包装此库的角度服务,其中包含UserManager
和 一些方法的简写,例如 signIn、signInCallback ...
@Injectable()
export class OAuthService {
private client: UserManager;
private user: Promise<User | null>;
constructor(private ngZone: NgZone, @Inject(OAUTH_CONFIG_TOKEN) options: IOAuthConfig) {
Log.logger = console;
Log.level = Log.INFO;
this.client = new UserManager(<UserManagerSettings>{
authority: options.authority, // the url of your openiddict service
client_id: options.client_id, // your openiddict application id
redirect_uri: options.redirect_uri, // the url of your app after login
post_logout_redirect_uri: options.post_logout_redirect_uri, // the url of your app after logout
scope: options.scope, // your openid scopes like 'openid email profile roles'
response_type: 'id_token token', //id + access token
filterProtocolClaims: true,
loadUserInfo: true,
});
this.client.events.addUserLoaded(user => {
this.user = Promise.resolve(user);
Log.logger.info('OAuthService: User loaded');
});
this.client.events.addUserSignedOut(() => Log.logger.info('OAuthService: User signed out'));
this.client.events.addUserUnloaded(() => Log.logger.info('OAuthService: User unloaded'));
this.client.events.addSilentRenewError(err => Log.logger.error(err));
this.user = this.ngZone.runOutsideAngular(() => {
return this.client.getUser().then((user) => {
if (user == null) {
return null;
}
return user;
});
});
}
public get events(): UserManagerEvents {
return this.client.events;
}
public signin(): Promise<any> {
return this.ngZone.runOutsideAngular(() => {
return this.client.signinRedirect()
.catch(err => Log.logger.error(err));
});
}
public signinCallback(): Promise<User|null> {
this.user = this.ngZone.runOutsideAngular(() => {
return this.client.signinRedirectCallback()
.then(user => {
if (user == null) {
return null;
}
return user;
})
.catch(err => Log.logger.error(err));
});
return this.user;
}
public signout(): Promise<any> {
return this.ngZone.runOutsideAngular(() => {
return this.client.signoutRedirect()
.catch(err => Log.logger.error(err));
});
}
public signoutCallback(): Promise<any> {
return this.client.signoutRedirectCallback()
.catch(err => Log.logger.error(err));
}
public authorizationHeader(): Promise<string> {
return this.ngZone.runOutsideAngular(() => {
return this.user
.then(user => user == null ? '' : user.token_type + ' ' + user.access_token);
});
}
public getUser(): Promise<User|null> {
return this.ngZone.runOutsideAngular(() => {
return this.user
.catch(err => Log.logger.error(err));
});
}
public isLoggedIn(debugToken = ''): Promise<boolean> {
return this.ngZone.runOutsideAngular(() => {
return this.user.then(user => {
if (user != null) {
return !user.expired;
}
return false;
});
});
}
}
我在 angular2 和 oidc-client 承诺之间存在兼容性问题,所以我不得不使用NgZone,如您所见。
在您需要的任何地方注入此服务(profile
字段User
包含您的声明role
,如unique_name
等)。
制作两个组件,例如 LoginComponent 和 LogoutComponent,它们可以简单地调用signinCallback
并signoutCallback
重定向到您的应用程序中的某个位置,例如您的主页。
@Component({
selector: 'app-logout',
templateUrl: './logout.template.html'
})
export class LogoutComponent implements OnInit {
constructor(private router: Router, private oauthService: OAuthService) { }
ngOnInit() {
this.oauthService.signoutCallback().then(() => this.router.navigate(['']));
}
}
这两个组件路由必须匹配构造函数中给定的 UserManager 配置OAuthService
。
{
path: 'login',
component: LoginComponent
},
{
path: 'logout',
component: LogoutComponent
},
例如 if redirect_uri
ishttp://localhost:5000/login
和post_logout_redirect_uri
ishttp://localhost:5000/login
您可能需要订阅一些事件才能在用户刚登录时刷新一些属性。
public ngOnInit(): void {
this.onUserChange();
this.oauthService.events.addUserLoaded(() => this.onUserChange());
this.oauthService.events.addUserUnloaded(() => this.onUserChange());
}
private onUserChange(): void {
this.oauthService.isLoggedIn().then(x => this.isLoggedIn = x);
}
在这之后你就完成了,OpenIddict 还不支持静默登录,我还没有找到解决方法。
同样,这都是 Typescript/Angular2,但它应该很容易适应 JS/Angular