使用Ionic 2配置Identity Server 4 [英] Configure Identity Server 4 With Ionic 2
问题描述
我正在尝试配置Identity Server与Ionic 2一起使用.我对如何配置重定向URL感到有些困惑.当我在浏览器中进行测试时.
I'm trying to configure Identity Server to work with Ionic 2. I'm a bit confused on how to configure the Redirect urls. For when I'm testing in the browser.
我正在更新和集成OIDC Cordova组件. 旧的组件git hub在这里: https://github.com/markphillips100/oidc-cordova-demo
I'm in the process of updating and integrating an OIDC Cordova component. The old component git hub is here: https://github.com/markphillips100/oidc-cordova-demo
我已经创建了一个打字稿提供程序并将其注册到我的app.module.ts
I've created a typescript provider and registered it with my app.module.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import { Component } from '@angular/core';
import * as Oidc from "oidc-client";
import { Events } from 'ionic-angular';
import { environment } from "../rules/environments/environment";
export class UserInfo {
user: Oidc.User = null;
isAuthenticated: boolean = false;
}
@Injectable()
export class OidcClientProvider {
USERINFO_CHANGED_EVENT_NAME: string = ""
userManager: Oidc.UserManager;
settings: Oidc.UserManagerSettings;
userInfo: UserInfo = new UserInfo();
constructor(public events:Events) {
this.settings = {
//authority: "https://localhost:6666",
authority: environment.identityServerUrl,
client_id: environment.clientAuthorityId,
//This doesn't work
post_logout_redirect_uri: "http://localhost/oidc",
redirect_uri: "http://localhost/oidc",
response_type: "id_token token",
scope: "openid profile",
automaticSilentRenew: true,
filterProtocolClaims: true,
loadUserInfo: true,
//popupNavigator: new Oidc.CordovaPopupNavigator(),
//iframeNavigator: new Oidc.CordovaIFrameNavigator(),
}
this.initialize();
}
userInfoChanged(callback: Function) {
this.events.subscribe(this.USERINFO_CHANGED_EVENT_NAME, callback);
}
signinPopup(args?): Promise<Oidc.User> {
return this.userManager.signinPopup(args);
}
signoutPopup(args?) {
return this.userManager.signoutPopup(args);
}
protected initialize() {
if (this.settings == null) {
throw Error('OidcClientProvider required UserMangerSettings for initialization')
}
this.userManager = new Oidc.UserManager(this.settings);
this.registerEvents();
}
protected notifyUserInfoChangedEvent() {
this.events.publish(this.USERINFO_CHANGED_EVENT_NAME);
}
protected clearUser() {
this.userInfo.user = null;
this.userInfo.isAuthenticated = false;
this.notifyUserInfoChangedEvent();
}
protected addUser(user: Oidc.User) {
this.userInfo.user = user;
this.userInfo.isAuthenticated = true;
this.notifyUserInfoChangedEvent();
}
protected registerEvents() {
this.userManager.events.addUserLoaded(u => {
this.addUser(u);
});
this.userManager.events.addUserUnloaded(() => {
this.clearUser();
});
this.userManager.events.addAccessTokenExpired(() => {
this.clearUser();
});
this.userManager.events.addSilentRenewError(() => {
this.clearUser();
});
}
}
我试图了解如何配置重定向URL,以便可以在浏览器中正常进行身份验证.通常,您将配置重定向 网址以获取登录后的过程和令牌.
I'm trying to understand how I would configure the redirect urls so I can authenticate normally in the browser. Normally you would configure a redirect url to take your process the token and claims after login.
this.settings = {
authority: environment.identityServerUrl,
client_id: environment.clientAuthorityId,
post_logout_redirect_uri: "http://localhost:8100/oidc",
redirect_uri: "http://localhost:8100/oidc",
response_type: "id_token token",
scope: "openid profile AstootApi",
automaticSilentRenew: true,
filterProtocolClaims: true,
loadUserInfo: true,
//popupNavigator: new Oidc.CordovaPopupNavigator(),
//iframeNavigator: new Oidc.CordovaIFrameNavigator(),
}
Ionic 2不使用url进行路由,假设我有一个组件AuthenticationPage
,用于处理存储身份验证令牌.
如何配置重定向URL,以便它导航到身份验证页面,以便可以在浏览器中进行测试?
Ionic 2 doesn't use urls for routing, Supposing I have a component AuthenticationPage
which handles storing the authentication token.
How can I configured a redirect url so it navigates to the authentication page, so I can test this in the browser?
推荐答案
TL; DR
我必须做一些事情才能使其正常工作.
起初我没有意识到,但是我的重定向URL必须与我的客户端在身份服务器中存储的内容匹配.
I had to do a few things to get this working.
I didn't realize at first but My Redirect Urls had to be matching for what my client has stored in identity server.
new Client
{
ClientId = "myApp",
ClientName = "app client",
AccessTokenType = AccessTokenType.Jwt,
RedirectUris = { "http://localhost:8166/" },
PostLogoutRedirectUris = { "http://localhost:8166/" },
AllowedCorsOrigins = { "http://localhost:8166" },
//...
}
所以Typescript中的OIDC客户端也需要更新.
So the OIDC client in Typescript needed to be updated too.
this.settings = {
authority: environment.identityServerUrl,
client_id: environment.clientAuthorityId,
post_logout_redirect_uri: "http://localhost:8166/",
redirect_uri: "http://localhost:8166/",
response_type: "id_token token",
}
此外,由于我不想在Ionic中设置路由,因此我需要找到一种方法来与Ionic进行通信的url(出于浏览器测试目的,正常的通信将通过cordova进行).
Also since I didn't feel like setting up routing in Ionic I needed to figure out a way to a url to communicate with Ionic (For Browser testing purpose, normal commucation will be done through cordova).
因此,我指出了重定向网址是ionic托管我的应用程序的网址,并且在构造函数中的app.Component.ts上,我添加了代码以尝试获取身份验证令牌.
So I pointed the redirct url to be the url ionic is hosting my application and on app.Component.ts in the Constructor I added code to try to get my authentication token.
constructor(
public platform: Platform,
public menu: MenuController,
public oidcClient: OidcClientProvider
)
{
//Hack: since Ionic only has 1 default address, attempt to verify if this is a call back before calling
this.authManager.verifyLoginCallback().then((isSuccessful) => {
if (!isSuccessful) {
this.authManager.IsLoggedIn().then((isLoggedIn) => {
if (isLoggedIn) {
return;
}
this.nav.setRoot(LoginComponent)
});
}
});
}
编辑:验证登录回调应仅是oidc客户端回调,该回调将从get参数中读取令牌
Edit Verify login call back should just the oidc client call back which will read the token from the get params
verifyLoginCallback(): Promise<boolean> {
return this.oidcClient.userManager.signinPopupCallback()
.then(user => {
return this.loginSuccess(user).
then(() => true,
() => false);
}, err => { console.log(err); return false; });
}
注意.Login组件只是一个模式,代表登录页面,该页面仅使用登录按钮来初始化弹出窗口.您可以将其挂接到任何由用户驱动的事件中,以触发登录,但是如果要支持Web而又不触发弹出窗口阻止程序,则必须使用用户驱动的事件
NOTE the Login component is just a modal which represents login landing page, which just uses a login button to initialize the popup. You can hook this into any user driven event to trigger the login, but you must use a user driven event if you want to support the web without triggering a popup blocker
<ion-footer no-shadow>
<ion-toolbar no-shadow position="bottom">
<button ion-button block (click)="login()">Login</button>
</ion-toolbar>
</ion-footer>
login(): Promise<any> {
return this.oidcClient.signinPopup().then((user) => {
this.events.publish(environment.events.loginSuccess);
}).catch((e) => { console.log(e); });
}
我敢肯定,重定向到其他路由更好,这只是一个快速而肮脏的技巧
I'm sure there is a better do the redirect to a different route, This is just a quick and dirty hack
这篇关于使用Ionic 2配置Identity Server 4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!