KEYCLOAK-2606: document the different cordova modes of the javascript adapter

This commit is contained in:
Gregor Tudan 2018-06-22 18:03:07 +02:00 committed by Stian Thorgersen
parent 15b3d7f707
commit bf29410b6b

View file

@ -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]
----
<preference name="AndroidLaunchMode" value="singleTask" />
----
==== 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 <<hybrid-apps-with-cordova>>)
* custom - allows you to implement a custom adapter (only for advanced use cases)
responseType::