Javascript 使用Ionic 2配置Identity Server 4
我正在尝试将Identity Server配置为与离子2一起使用。我对如何配置重定向URL有点困惑。当我在浏览器中测试时 我正在更新和集成OIDC Cordova组件。 旧组件git hub位于此处: 我已经创建了一个typescript提供程序,并在我的app.module.ts中注册了它Javascript 使用Ionic 2配置Identity Server 4,javascript,angular,cordova,typescript,ionic2,Javascript,Angular,Cordova,Typescript,Ionic2,我正在尝试将Identity Server配置为与离子2一起使用。我对如何配置重定向URL有点困惑。当我在浏览器中测试时 我正在更新和集成OIDC Cordova组件。 旧组件git hub位于此处: 我已经创建了一个typescript提供程序,并在我的app.module.ts中注册了它 import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Rx'; import 'rxjs/add/ope
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();
});
}
}
Ionic 2不使用URL进行路由,假设我有一个组件AuthenticationPage
,用于存储身份验证令牌。
如何配置重定向url,使其导航到身份验证页面,以便在浏览器中进行测试?TL;DR
我必须做几件事才能让它工作。起初我并没有意识到,但我的重定向URL必须与我的客户端在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客户端也需要更新
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完成)
因此,我将redirct url指向ionic托管我的应用程序的url,并在构造函数中的app.Component.ts上添加代码以尝试获取身份验证令牌
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参数读取令牌
verifyLoginCallback(): Promise<boolean> {
return this.oidcClient.userManager.signinPopupCallback()
.then(user => {
return this.loginSuccess(user).
then(() => true,
() => false);
}, err => { console.log(err); return false; });
}
verifyLoginCallback():承诺{
返回此.OIDClient.userManager.SigningPopupCallback()
。然后(用户=>{
返回此。登录成功(用户)。
然后(()=>对,
()=>假);
},err=>{console.log(err);返回false;});
}
注意登录组件只是一个表示登录登录页面的模式,它只使用登录按钮初始化弹出窗口。您可以将其挂接到任何用户驱动的事件中以触发登录,但如果您希望在不触发弹出窗口阻止程序的情况下支持web,则必须使用用户驱动的事件
<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); });
}
登录
登录():承诺{
返回此.OIDClient.SignInPup()。然后((用户)=>{
this.events.publish(environment.events.loginsAccess);
}).catch((e)=>{console.log(e);});
}
我相信有更好的方法可以重定向到不同的路径,这只是一个快速而肮脏的攻击你不会碰巧有一个可以共享的存储库来演示你的应用程序设置吗?作为一个现在正在介入此事的人,搞清楚身份验证是我最大的问题。@Aeseir我没有可共享回购协议,你有什么问题?几乎所有的代码都是用来让它工作的。我是爱奥尼亚的新手,所以我正在收集关于关键主题的信息,我需要进行适当的身份验证app@Aeseir为什么要使用令牌服务器,而不仅仅是使用JWT进行身份验证?与其说是令牌的类型,还不如说是令牌的工作方式。因此,我试图找出IdentityServer4设置需要如何进行移动应用程序身份验证以及需要使用的令牌类型。我读到PKCE是我们应该使用的类型。无论给定的访问令牌是什么,我都将其用作从api服务器获取数据的承载令牌。您是否使用inappbrowser插件访问idp?虽然我还没有在本机上测试它,但OIDC提供商会为您处理,因为我改为目标PWA。如果这些信息中有任何一条被证明是有用的,请记住投票。如果您还有其他问题,请给我发一条评论,我将尽我所能帮助您解决问题。我已经完成了一个简单的实现,它在native上不起作用,因为它没有连接到inappbrowser。在网页上工作,但不是本地的。在这个阶段,如果您想使用定制,那么ionic似乎不太适合这个目的idp@Aeseir请参阅我问题中注释掉的两行代码,这两行代码假定设置了oidc以使用idp的弹出式导航器。但是如果你在angular 4上工作,有一个更好的OIDC管理器可以使用。顺便说一句,我将研究ResourceOwner流作为替代方案,并实现我自己的前端。这不是推荐的方式,但可以启用restful登录和注销。保持联系以获取更新(我将获得github回购)
<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); });
}