KEYCLOAK-2606: Added fixes suggested by matthewhelmke
This commit is contained in:
parent
044afd3e62
commit
bb7a5f5f22
1 changed files with 16 additions and 19 deletions
|
@ -163,25 +163,22 @@ keycloak.init({ flow: 'hybrid' })
|
||||||
|
|
||||||
==== Hybrid Apps with Cordova
|
==== 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`:
|
Keycloak 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.
|
The default is cordova, which the adapter will automatically select 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.
|
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 {project_name} and afterwards returns to the app by redirecting to http://localhost. Because of this, you must whitelist this URL as a valid redirect-uri in the client configuration section of the Administration Console.
|
||||||
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:
|
While this mode is easy to setup, it also has some disadvantages:
|
||||||
The InApp-Browser is a browser embedded in the app and not the phones default browser.
|
* The InApp-Browser is a browser embedded in the app and is not the phone's default browser. Therefore it will have different settings and stored credentials will not be available.
|
||||||
Therefore it will have different settings and stored credentials will not be available. It might be slower, especially when rendering more complex themes.
|
* The InApp-Browser might also be slower, especially when rendering more complex themes.
|
||||||
There are security concerns to consider, before using this mode:
|
* There are security concerns to consider, before using this mode, such as that 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 do not trust.
|
||||||
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.
|
|
||||||
|
|
||||||
We have an example app that can help you get started: https://github.com/keycloak/keycloak/tree/master/examples/cordova
|
Use this example app to help you get started: https://github.com/keycloak/keycloak/tree/master/examples/cordova
|
||||||
|
|
||||||
The alternative mode `cordova-native` takes a different approach.
|
The alternative mode `cordova-nativei` takes a different approach.
|
||||||
It opens the login page in the systems browser.
|
It opens the login page using the system's browser.
|
||||||
After the user has authenticated, the browser redirects back into the app by a special URL.
|
After the user has authenticated, the browser redirects back into the app using a special URL.
|
||||||
From there, the keycloak adapter can finish the login by reading the code or token from the URL.
|
From there, the {project_name} 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 `init` method:
|
You can activate the native mode by passing the adater type `cordova-native` to the `init` method:
|
||||||
|
|
||||||
|
@ -192,20 +189,20 @@ keycloak.init({ adapter: 'cordova-native' })
|
||||||
|
|
||||||
This adapter required two additional plugins:
|
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/google/cordova-plugin-browsertab[cordova-plugin-browsertab]: allows the app to open webpages in the system's browser
|
||||||
* https://github.com/e-imaxina/cordova-plugin-deeplinks[cordova-plugin-deeplinks]: allow the browser to redirect back to your app by special URLs
|
* 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.
|
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]].
|
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)].
|
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.
|
While the former are easier to setup and tend to work more reliably, 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.
|
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.
|
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:
|
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`
|
* Universal Links on iOS seem to work more reliably 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`:
|
* To prevent Android from opening a new instance of your app on redirect add the following snippet to `config.xml`:
|
||||||
[source,xml]
|
[source,xml]
|
||||||
----
|
----
|
||||||
|
@ -286,7 +283,7 @@ adapter::
|
||||||
Available options:
|
Available options:
|
||||||
* "default" - the library uses the browser api for redirects (this is the default)
|
* "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" - 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>>)
|
* "cordova-native" - the library tries to open the login and registration page using the phone's 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)
|
* custom - allows you to implement a custom adapter (only for advanced use cases)
|
||||||
|
|
||||||
responseType::
|
responseType::
|
||||||
|
|
Loading…
Reference in a new issue