diff --git a/securing_apps/topics/oidc/javascript-adapter.adoc b/securing_apps/topics/oidc/javascript-adapter.adoc index 768ff548e0..ea8a4608c9 100644 --- a/securing_apps/topics/oidc/javascript-adapter.adoc +++ b/securing_apps/topics/oidc/javascript-adapter.adoc @@ -161,6 +161,52 @@ For the Hybrid flow, you need to pass the parameter `flow` with value `hybrid` t keycloak.init({ flow: 'hybrid' }) ---- +==== Hybrid Apps with Cordova + +Keycloaks support hybird mobile apps developed with https://cordova.apache.org/[Apache Cordova]. The Javascript adapter has two modes for this: `cordova` and `cordova-native`: + +The default is `cordova`. The adapter will pick it automatically if no adapter type has been configured and `window.cordova` is present. +When logging in, it will open an https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/[InApp Browser] that lets the user interact with keycloak and afterwards returns to the app by redirecting to http://localhost. +Therefore this URL needs to be whitelisted as valid redirect-uri in the client configuration section of the Administration Console. + +While this mode is very easy to setup, it also has a few disadvantages: +The InApp-Browser is a browser embedded in the app and not the phones default browser. +Therefore it will have different settings and stored credentials will not be available. It might be slower, especially when rendering more complex themes. +There are security concerns to consider, before using this mode: +It is possible for the app to gain access to the credentials of the user, as it has full control of the browser rendering the login page. +So do not allow its use in apps you dont trust. + +The alternative mode `cordova-native` takes a different approach. +It opens the login page in the systems browser. +After the user has authenticated, the browser redirects back into the app by a special URL. +From there, the keycloak adapter can finish the login by reading the code or token from the URL. + +You can activate the native mode by passing the adater type `cordova-native` to the ìnit` method: + +[source,javascript] +---- +keycloak.init({ adapter: 'cordova-native' }) +---- + +This adapter required two additional plugins: + +* https://github.com/google/cordova-plugin-browsertab[cordova-plugin-browsertab]: allows the app to open webpages in the systems browser +* https://github.com/e-imaxina/cordova-plugin-deeplinks[cordova-plugin-deeplinks]: allow the browser to redirect back to your app by special URLs + +The technical details for linking to an app differ on each plattform and special setup is needed. +Please refer to the according sections of the deeplinks plugin for further instructions (https://github.com/e-imaxina/cordova-plugin-deeplinks#android-web-integration[Android] and [iOS https://github.com/e-imaxina/cordova-plugin-deeplinks#ios-web-integration[iOS]]. + +There are different kinds of links for opening apps: custom schemes (i.e. `myapp://login` or `android-app://com.example.myapp/https/example.com/login`) and https://developer.apple.com/ios/universal-links/[Universal Links (iOS]) / https://developer.android.com/training/app-indexing/deep-linking.html[Deep Links (Android)]. While the former are easier to setup and tend to work more reliable, the later offer extra security as they are unique and only the owner of a domain can register them. Custom-URLs are deprecated on iOS. We recommend that you use universal links, combined with a fallback site with a custom-url link on it for best reliability. + +Furthermore, we recommend the following steps to improve compatibility with the Keycloak Adapter: + +* Universal Links on iOS seem to work more reliable with `response-mode` set to `query` +* To prevent Android from opening a new instance of your app on redirect add the following snippet to `config.xml`: +[source,xml] +---- + +---- + ==== Earlier Browsers The JavaScript adapter depends on Base64 (window.btoa and window.atob) and HTML5 History API. @@ -233,6 +279,7 @@ adapter:: Available options: * "default" - the library uses the browser api for redirects (this is the default) * "cordova" - the library will try to use the InAppBrowser cordova plugin to load keycloak login/registration pages (this is used automatically when the library is working in a cordova ecosystem) + * "cordova-native" - the library try to open the login andregistration page in the phones system browser using the BrowserTabs cordova plugin. This requires extra setup for redirecting back to the app (see <>) * custom - allows you to implement a custom adapter (only for advanced use cases) responseType::