- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在我的 ionic(4) cordova 应用程序中使用 Keycloak-js(来自 4.4.0.Final)库。我关注了example和来自 documentation 的说明.我已经安装了cordova-plugin-browsertab
, cordova-plugin-deeplinks
, cordova-plugin-inappbrowser
.已添加 <preference name="AndroidLaunchMode" value="singleTask" />
在我的 config.xml
这就是我对 config.xml 的修改方式。
<widget id="org.phidatalab.radar_armt"....>
<plugin name="cordova-plugin-browsertab" spec="0.2.0" />
<plugin name="cordova-plugin-inappbrowser" spec="3.0.0" />
<plugin name="cordova-plugin-deeplinks" spec="1.1.0" />
<preference name="AndroidLaunchMode" value="singleTask" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<universal-links>
<host name="keycloak-cordova-example.exampledomain.net" scheme="https">
<path event="keycloak" url="/login" />
</host>
</universal-links>
</widget>
我的服务使用 Keycloak-js
如下所示。
static init(): Promise<any> {
// Create a new Keycloak Client Instance
let keycloakAuth: any = new Keycloak({
url: 'https://exampledomain.net/auth/',
realm: 'mighealth',
clientId: 'armt',
});
return new Promise((resolve, reject) => {
keycloakAuth.init({
onLoad: 'login-required',
adapter: 'cordova-native',
responseMode: 'query',
redirectUri: 'android-app://org.phidatalab.radar_armt/https/keycloak-cordova-example.github.io/login'
}).success(() => {
console.log("Success")
resolve();
}).error((err) => {
reject(err);
});
});
}
我可以为 Android
成功构建和运行应用程序.但是,它不起作用。来自 adb
我得到的日志(对于 cordova
和 cordova-native
适配器)
12-04 19:07:35.911 32578-32578/org.phidatalab.radar_armt D/SystemWebChromeClient: ng:///AuthModule/EnrolmentPageComponent.ngfactory.js: Line 457 : ERROR
12-04 19:07:35.911 32578-32578/org.phidatalab.radar_armt I/chromium: [INFO:CONSOLE(457)] "ERROR", source: ng:///AuthModule/EnrolmentPageComponent.ngfactory.js (457)
12-04 19:07:35.918 32578-32578/org.phidatalab.radar_armt D/SystemWebChromeClient: ng:///AuthModule/EnrolmentPageComponent.ngfactory.js: Line 457 : ERROR CONTEXT
12-04 19:07:35.919 32578-32578/org.phidatalab.radar_armt I/chromium: [INFO:CONSOLE(457)] "ERROR CONTEXT", source: ng:///AuthModule/EnrolmentPageComponent.ngfactory.js (457)
如果我尝试在浏览器上运行它,我会得到 "universalLink is undefined"
.
我真的很想得到一些帮助来让它工作。我错过了什么?非常感谢任何形式的帮助。或者是否有解决方法/示例让 keycloak 为 ionic (公共(public))客户端工作?
最佳答案
我在这里发布我的解决方案,因为我浪费了很多时间来获取适用于我的环境的可用插件。 keycloak-js
提供的实现相当过时。因此,如果您尝试将它用于 ionic-3 应用程序,它就是行不通的。
我的解决方案是使用 InAppBrowser
插件(类似于 keycloak-js
的 cordova
方法)并遵循标准 Oauth2 authorization_code
程序。我查看了 keycloak-js
的代码并基于它实现了解决方案。也感谢 keycloak-js
。
在这里。第一步:安装[cordova-inapp-browser][1]
。
第 2 步:示例 keycloak-auth.service.ts
如下所示。这可能会取代 keycloak-js,但仅限于 cordova
选项。
import 'rxjs/add/operator/toPromise'
import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http'
import {Injectable} from '@angular/core'
import {JwtHelperService} from '@auth0/angular-jwt'
import {StorageService} from '../../../core/services/storage.service'
import {StorageKeys} from '../../../shared/enums/storage'
import {InAppBrowser, InAppBrowserOptions} from '@ionic-native/in-app-browser';
const uuidv4 = require('uuid/v4');
@Injectable()
export class AuthService {
URI_base: 'https://my-server-location/auth';
keycloakConfig: any;
constructor(
public http: HttpClient,
public storage: StorageService,
private jwtHelper: JwtHelperService,
private inAppBrowser: InAppBrowser,
) {
this.keycloakConfig = {
authServerUrl: 'https://my-server-location/auth/', //keycloak-url
realm: 'myrealmmName', //realm-id
clientId: 'clientId', // client-id
redirectUri: 'http://my-demo-app/callback/', //callback-url registered for client.
// This can be anything, but should be a valid URL
};
}
public keycloakLogin(login: boolean): Promise<any> {
return new Promise((resolve, reject) => {
const url = this.createLoginUrl(this.keycloakConfig, login);
const options: InAppBrowserOptions = {
zoom: 'no',
location: 'no',
clearsessioncache: 'yes',
clearcache: 'yes'
}
const browser = this.inAppBrowser.create(url, '_blank', options);
const listener = browser.on('loadstart').subscribe((event: any) => {
const callback = encodeURI(event.url);
//Check the redirect uri
if (callback.indexOf(this.keycloakConfig.redirectUri) > -1) {
listener.unsubscribe();
browser.close();
const code = this.parseUrlParamsToObject(event.url);
this.getAccessToken(this.keycloakConfig, code).then(
() => {
const token = this.storage.get(StorageKeys.OAUTH_TOKENS);
resolve(token);
},
() => reject("Count not login in to keycloak")
);
}
});
});
}
parseUrlParamsToObject(url: any) {
const hashes = url.slice(url.indexOf('?') + 1).split('&');
return hashes.reduce((params, hash) => {
const [key, val] = hash.split('=');
return Object.assign(params, {[key]: decodeURIComponent(val)})
}, {});
}
createLoginUrl(keycloakConfig: any, isLogin: boolean) {
const state = uuidv4();
const nonce = uuidv4();
const responseMode = 'query';
const responseType = 'code';
const scope = 'openid';
return this.getUrlForAction(keycloakConfig, isLogin) +
'?client_id=' + encodeURIComponent(keycloakConfig.clientId) +
'&state=' + encodeURIComponent(state) +
'&redirect_uri=' + encodeURIComponent(keycloakConfig.redirectUri) +
'&response_mode=' + encodeURIComponent(responseMode) +
'&response_type=' + encodeURIComponent(responseType) +
'&scope=' + encodeURIComponent(scope) +
'&nonce=' + encodeURIComponent(nonce);
}
getUrlForAction(keycloakConfig: any, isLogin: boolean) {
return isLogin ? this.getRealmUrl(keycloakConfig) + '/protocol/openid-connect/auth'
: this.getRealmUrl(keycloakConfig) + '/protocol/openid-connect/registrations';
}
loadUserInfo() {
return this.storage.get(StorageKeys.OAUTH_TOKENS).then( tokens => {
const url = this.getRealmUrl(this.keycloakConfig) + '/protocol/openid-connect/userinfo';
const headers = this.getAccessHeaders(tokens.access_token, 'application/json');
return this.http.get(url, {headers: headers}).toPromise();
})
}
getAccessToken(kc: any, authorizationResponse: any) {
const URI = this.getTokenUrl();
const body = this.getAccessTokenParams(authorizationResponse.code, kc.clientId, kc.redirectUri);
const headers = this.getTokenRequestHeaders();
return this.createPostRequest(URI, body, {
header: headers,
}).then((newTokens: any) => {
newTokens.iat = (new Date().getTime() / 1000) - 10; // reduce 10 sec to for delay
this.storage.set(StorageKeys.OAUTH_TOKENS, newTokens);
});
}
refresh() {
return this.storage.get(StorageKeys.OAUTH_TOKENS)
.then(tokens => {
const decoded = this.jwtHelper.decodeToken(tokens.access_token)
if (decoded.iat + tokens.expires_in < (new Date().getTime() /1000)) {
const URI = this.getTokenUrl();
const headers = this.getTokenRequestHeaders();
const body = this.getRefreshParams(tokens.refresh_token, this.keycloakConfig.clientId);
return this.createPostRequest(URI, body, {
headers: headers
})
} else {
return tokens
}
})
.then(newTokens => {
newTokens.iat = (new Date().getTime() / 1000) - 10;
return this.storage.set(StorageKeys.OAUTH_TOKENS, newTokens)
})
.catch((reason) => console.log(reason))
}
createPostRequest(uri, body, headers) {
return this.http.post(uri, body, headers).toPromise()
}
getAccessHeaders(accessToken, contentType) {
return new HttpHeaders()
.set('Authorization', 'Bearer ' + accessToken)
.set('Content-Type', contentType);
}
getRefreshParams(refreshToken, clientId) {
return new HttpParams()
.set('grant_type', 'refresh_token')
.set('refresh_token', refreshToken)
.set('client_id', encodeURIComponent(clientId))
}
getAccessTokenParams(code , clientId, redirectUrl) {
return new HttpParams()
.set('grant_type', 'authorization_code')
.set('code', code)
.set('client_id', encodeURIComponent(clientId))
.set('redirect_uri', redirectUrl);
}
getTokenUrl() {
return this.getRealmUrl(this.keycloakConfig) + '/protocol/openid-connect/token';
}
getTokenRequestHeaders() {
const headers = new HttpHeaders()
.set('Content-Type', 'application/x-www-form-urlencoded');
const clientSecret = (this.keycloakConfig.credentials || {}).secret;
if (this.keycloakConfig.clientId && clientSecret) {
headers.set('Authorization', 'Basic ' + btoa(this.keycloakConfig.clientId + ':' + clientSecret));
}
return headers;
}
getRealmUrl(kc: any) {
if (kc && kc.authServerUrl) {
if (kc.authServerUrl.charAt(kc.authServerUrl.length - 1) == '/') {
return kc.authServerUrl + 'realms/' + encodeURIComponent(kc.realm);
} else {
return kc.authServerUrl + '/realms/' + encodeURIComponent(kc.realm);
}
} else {
return undefined;
}
}
}
第 3 步:然后您可以根据需要在您的组件中使用此服务。
@Component({
selector: 'page-enrolment',
templateUrl: 'enrolment-page.component.html'
})
export class EnrolmentPageComponent {
constructor(
public storage: StorageService,
private authService: AuthService,
) {}
goToRegistration() {
this.loading = true;
this.authService.keycloakLogin(false)
.then(() => {
return this.authService.retrieveUserInformation(this.language)
});
}
}
注意:keycloakLogin(true)带你到登录页面或keycloakLogin(false)带你到keycloak的注册页面。
我希望这能或多或少地帮助你解决它。
关于android - ionic 应用程序的Keycloak : keycloak-js with cordova-native does not work,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53630761/
我最近在/ drawable中添加了一些.gifs,以便可以将它们与按钮一起使用。这个工作正常(没有错误)。现在,当我重建/运行我的应用程序时,出现以下错误: Error: Gradle: Execu
Android 中有返回内部存储数据路径的方法吗? 我有 2 部 Android 智能手机(Samsung s2 和 s7 edge),我在其中安装了一个应用程序。我想使用位于这条路径中的 sqlit
这个问题在这里已经有了答案: What's the difference between "?android:" and "@android:" in an android layout xml f
我只想知道 android 开发手机、android 普通手机和 android root 手机之间的实际区别。 我们不能从实体店或除 android marketplace 以外的其他地方购买开发手
自Gradle更新以来,我正在努力使这个项目达到标准。这是一个团队项目,它使用的是android-apt插件。我已经进行了必要的语法更改(编译->实现和apt->注释处理器),但是编译器仍在告诉我存在
我是android和kotlin的新手,所以请原谅要解决的一个非常简单的问题! 我已经使用导航体系结构组件创建了一个基本应用程序,使用了底部的导航栏和三个导航选项。每个导航选项都指向一个专用片段,该片
我目前正在使用 Facebook official SDK for Android . 我现在正在使用高级示例应用程序,但我不知道如何让它获取应用程序墙/流/状态而不是登录的用户。 这可能吗?在那种情
我在下载文件时遇到问题, 我可以在模拟器中下载文件,但无法在手机上使用。我已经定义了上网和写入 SD 卡的权限。 我在服务器上有一个 doc 文件,如果用户单击下载。它下载文件。这在模拟器中工作正常但
这个问题在这里已经有了答案: What is the difference between gravity and layout_gravity in Android? (22 个答案) 关闭 9
任何人都可以告诉我什么是 android 缓存和应用程序缓存,因为当我们谈论缓存清理应用程序时,它的作用是,缓存清理概念是清理应用程序缓存还是像内存管理一样主存储、RAM、缓存是不同的并且据我所知,缓
假设应用程序 Foo 和 Eggs 在同一台 Android 设备上。任一应用程序都可以获取设备上所有应用程序的列表。一个应用程序是否有可能知道另一个应用程序是否已经运行以及运行了多长时间? 最佳答案
我有点困惑,我只看到了从 android 到 pc 或者从 android 到 pc 的例子。我需要制作一个从两部手机 (android) 连接的 android 应用程序进行视频聊天。我在想,我知道
用于使用 Android 以编程方式锁定屏幕。我从 Stackoverflow 之前关于此的问题中得到了一些好主意,并且我做得很好,但是当我运行该代码时,没有异常和错误。而且,屏幕没有锁定。请在这段代
文档说: android:layout_alignParentStart If true, makes the start edge of this view match the start edge
我不知道这两个属性和高度之间的区别。 以一个TextView为例,如果我将它的layout_width设置为wrap_content,并将它的width设置为50 dip,会发生什么情况? 最佳答案
这两个属性有什么关系?如果我有 android:noHistory="true",那么有 android:finishOnTaskLaunch="true" 有什么意义吗? 最佳答案 假设您的应用中有
我是新手,正在尝试理解以下 XML 代码: 查看 developer.android.com 上的文档,它说“starStyle”是 R.attr 中的常量, public static final
在下面的代码中,为什么当我设置时单选按钮的外观会发生变化 android:layout_width="fill_parent" 和 android:width="fill_parent" 我说的是
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 9
假设我有一个函数 fun myFunction(name:String, email:String){},当我调用这个函数时 myFunction('Ali', 'ali@test.com ') 如何
我是一名优秀的程序员,十分优秀!