Javascript adapter Hybrid Apps with Capacitor
Hamed KARAMOKO
interface KeycloakInitOptions {
...
/**
* Set the capacitor App API handling App state and events.
* More information https://capacitor.ionicframework.com/docs/apis/app
*/
capacitorAppApi?: any;
}
keycloak.js
L140 : var adapters = ['default', 'cordova', 'cordova-native', 'capacitor'];
L143 : adapter = loadAdapter(initOptions.adapter, initOptions.capacitorAppApi);
L1283 : function loadAdapter(type, appApi) {
if (type == 'capacitor') {
loginIframe.enable = false;
return {
login: function(options) {
var promise = createPromise(false);
var loginUrl = kc.createLoginUrl(options);
appApi.addListener('appUrlOpen', (data) => {
window.cordova.plugins.browsertab.close();
var oauth = parseCallback(data.url);
processCallback(oauth, promise);
});
window.cordova.plugins.browsertab.openUrl(loginUrl);
return promise.promise;
},
logout: function(options) {
var promise = createPromise(false);
var logoutUrl = kc.createLogoutUrl(options);
appApi.addListener('appUrlOpen', (data) => {
window.cordova.plugins.browsertab.close();
kc.clearToken();
promise.setSuccess();
});
window.cordova.plugins.browsertab.openUrl(logoutUrl);
return promise.promise;
},
register : function(options) {
var promise = createPromise(false);
var registerUrl = kc.createRegisterUrl(options);
appApi.addListener('appUrlOpen', (data) => {
window.cordova.plugins.browsertab.close();
var oauth = parseCallback(data.url);
processCallback(oauth, promise);
});
window.cordova.plugins.browsertab.openUrl(registerUrl);
return promise.promise;
},
accountManagement : function() {
var accountUrl = kc.createAccountUrl();
if (typeof accountUrl !== 'undefined') {
window.cordova.plugins.browsertab.openUrl(accountUrl);
} else {
throw "Not supported by the OIDC server";
}
},
redirectUri: function(options) {
if (options && options.redirectUri) {
return options.redirectUri;
} else if (kc.redirectUri) {
return kc.redirectUri;
} else {
return "http://localhost";
}
}
}
}
import * as Keycloak from 'keycloak-js';
import { Plugins } from '@capacitor/core';
const { App } = Plugins;
@Injectable({
providedIn: 'root'
})
export class AuthenticationService {
…
init(): Promise<any> {
const keycloakAuth: Keycloak.KeycloakInstance = Keycloak({
url: environment.keycloakApi,
realm: environment.keycloak.realm,
clientId: environment.keycloak.clientId
});
…
return new Promise((resolve, reject) => {
keycloakAuth.init({
onLoad: 'login-required',
adapter: 'capacitor',
responseMode: 'query',
redirectUri: environment.keycloak.redirectUri,
capacitorAppApi: App
}).success(() => {
...
resolve();
}).error(() => {
…
reject();
});
});
}
…
}
It works fine so I propose it to the community before doing a pull request.
What do you think about this solution ?
Best regards,
Hamed KARAMOKO
Jon Koops
--
You received this message because you are subscribed to the Google Groups "Keycloak Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to keycloak-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-dev/7893936f-0c5a-4d1b-9b06-de1e5377fbfc%40googlegroups.com.
Stian Thorgersen
To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-dev/CACeKFDOKRRcD6fX8g33tDWP6T2jY%2BhVWSh7%3DFLXt%3Dr_Hwsn0rA%40mail.gmail.com.
Stian Thorgersen
Jon Koops
Stian Thorgersen
Jon Koops
To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-dev/CAJgngAf8jROA8WHV19ZgE-5pcdvCuUWymWcGzHasTOvOuitp%2Bw%40mail.gmail.com.
Stian Thorgersen
Hi guys, I just wanted to get back to you since I have had some time to take a look at this issue and it turns out that we actually already allow a custom adapter implementation to be passed into the client. However since the type definitions and documentation do not reflect this I can see how this can be missed easily.@Hamed, I believe the code below should be enough for you to get started to build your own adapter that should work with Capacitor, it would be great if you could find a way to open-source your efforts in this regard to help out others in the future.import Keycloak, { KeycloakAdapter } from 'keycloak-js';class MyCustomAdapter implements KeycloakAdapter {// Implement methods required by KeycloakAdapter here.}const keycloak = new Keycloak();keycloak.init({adapter: MyCustomAdapter,});We should provide better type definitions for providing a custom adapter, we apparently already have an interface type for the KeycloakAdapter (see code example above) so I have taken the liberty of actually documenting and using this type more explicitly in this PR: https://github.com/keycloak/keycloak/pull/7168 I'll also try to whip up a PR for the documentation as soon as I have some time.
All things considered I would also recommend that we officially deprecate the cordova and cordova-native options as the examples are not actively maintained and neither of these options is covered by our test suite, meaning they could break at any point in time. After the deprecation it would make sense if we move the native adapter into a seperate repository where it can be tested and better maintained by the community at large.
