1

我们一直在使用 OpenIdDict 和密码流。

但是:我们想要切换到隐式流(来自 openiddict 身份验证服务器的弹出窗口)。我可以找到一个 ASP.NET 应用程序的示例,但我们想在以下情况下使用它: 1/ Angular 1.0 网站 2/ Ionic 2.0 应用程序

有人可以给出一些提示吗?(Aurelia 的例子很接近,但我们无法让它在 Ionic 或 Angular 中工作)。我们可以使用哪些库,我们应该进行哪些调用?

非常感谢,

Frank
4

1 回答 1

3

我只使用带有 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,它们可以简单地调用signinCallbacksignoutCallback重定向到您的应用程序中的某个位置,例如您的主页。

@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_uriishttp://localhost:5000/loginpost_logout_redirect_uriishttp://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

于 2017-01-19T13:47:36.790 回答