Cell apps use in-app browsers to maintain customers hooked to the app ecosystem and make their expertise higher. These browsers let folks see net content material with out leaving the app. When customers go to exterior browsers to take a look at net content material, they could get sidetracked by different issues. In-app browsers present customers with easy looking options with out all of the bells and whistles of a full browser.
Cordova InAppBrowser
The InAppBrowser plugin for Cordova creates a separate browser window that works by itself aside from the primary Cordova WebView. This window acts like a daily net browser, however with one key distinction: it will possibly’t entry Cordova APIs. This separation makes it a very good choicefor loading third-party (untrusted) content material, because it provides an additional layer of safety in comparison with loading such content material straight into the primary Cordova WebView.
Listed here are the primary options of the InAppBrowser:
- Freedom from whitelist. The InAppBrowser would not should observe the app’s content material safety coverage or whitelist, in contrast to the primary WebView.
- Self-contained looking. The InAppBrowser retains hyperlinks inside itself as an alternative of sending them to the system’s default browser.
- Session dealing with. The InAppBrowser clears its session and cache while you shut and reopen the app. However should you simply put the app within the background and produce it again, the InAppBrowser retains its session. This method strikes a steadiness between retaining person information throughout regular app use and defending privateness when the app shuts down.
Challenges With Cordova InAppBrowser
When cellular apps use the InAppBrowser plugin from Cordova to launch net hyperlinks, like those wanted for Single Signal-On (SSO), they hit a roadblock. After we tried integrating it with Google’s IdP, we bumped into an issue. The InAppBrowser just isn’t opening Google’s login URL due to the robust safety requirements Google follows for OAuth 2.0.
Google’s security guidelines counsel utilizing the system browser, which is safer. In any other case, we are able to use different options like ASWebAuthenticationSession on iOS, that are particularly crafted for OAuth 2.0 Signal-ins.
Why Cordova InAppBrowser Does not Work With Google IdP
Cordova InAppBrowser makes use of WKWebView on iOS, a customized WebView. This WebView lets builders observe URL modifications, watch person actions, and add scripts, amongst different issues. These options fear Google about safety, making Cordova InAppBrowser unsuitable for Google login.
Google now bans OAuth requests in embedded browsers (net views) due to person expertise and safety points. As a substitute, Google suggests utilizing the system browser or in-app browser tabs for OAuth. On iOS, this implies utilizing SFSafariViewController, not WKWebView, to make logging in safer and simpler for customers.
This downside comes from Google’s security guidelines, which require sure options and safeguards that the InAppBrowser won’t provide. To repair this, app makers might need to think about different methods to log in or use options made for particular platforms like ASWebAuthenticationSession for iOS, that are constructed to deal with safe login processes.
Capacitor InAppBrowser
Apple retains updating its merchandise and expertise. This helps, however it will possibly create issues for builders.
Apple not helps UIWebView and can quickly reject App Retailer submissions that use it. Builders ought to use WKWebView so as to add net content material to their apps.
Capacitor’s InAppBrowser makes use of WKWebView on iOS and WebView on Android. On iOS, it makes use of SFSafariViewController, which meets OAuth service wants. This setup has solely fundamental occasion listeners for browser actions, which makes it safer.
Capacitor’s method is newer and provides extra choices to point out and work together with content material. It really works with iOS and Android, and likewise helps Progressive Net Apps (PWAs) and Electron apps.
Capacitor Browser Challenges
Common hyperlinks won’t work as you’d count on on Android and a few iOS variations while you use the InAppBrowser. This occurs as a result of the InAppBrowser runs in a sandboxed WebView, lower off from the primary app to maintain issues safe. This separation stops WebView from attending to native app options that require common hyperlinks to work.
As a substitute of common hyperlinks for login flows, Ionic apps can arrange customized URL schemes with PKCE (Proof Key for Code Trade). This technique presents a secure technique to deal with logins whereas nonetheless working effectively throughout completely different platforms.
Customized URL Schemes for OAuth 2.0 in Cell Apps
Many cellular and desktop platforms help communication between apps by URIs by permitting apps to register customized URL schemes. These schemes, like “com.instance.app”, allow apps to deal with particular URI requests.
To implement an OAuth 2.0 authorization request with a customized URL scheme. The cellular software opens an in-app browser with an authorization request. The redirection URI within the authorization request makes use of a customized URL scheme registered with the working system.
When deciding on a URI scheme, test whether or not the scheme is predicated on a website title below your management, and utilized in reverse order. A web site/app having myapp.customurl.com ought to use com.customurl.myapp as its scheme. Attempt to keep away from utilizing generic schemes like “myapp” as they do not meet the area title requirement. A number of apps maintained by the identical writer ought to guarantee every scheme is exclusive inside that group.
Instance of a redirect URI utilizing a customized URL scheme: com.instance.app:/oauth2redirect/example-provider.
Right here is the authorization move for the customized URL scheme:
- The authorization server will redirect to the consumer’s redirection URI after a profitable authentication.
- The working system launches the cellular app the URL will likely be handed to a app listener.
- The cellular app will course of the redirect URI to extract the authorization code and different parameters.
Customized URL schemes present a seamless technique to deal with OAuth 2.0 flows in cellular apps, enhancing person expertise by permitting direct navigation throughout the app
iOS
If a number of apps register the identical customized URL scheme, iOS doesn’t forestall the scheme from being invoked. As a substitute, it turns into undefined which app will likely be launched when the scheme is named.
For extra data, see Apple’s documentation.
Android
When a number of apps register for a similar customized URL scheme on Android, the system shows a chooser dialog to the person, permitting them to pick out which app ought to deal with the URL. This habits gives extra management to the person however can nonetheless pose safety dangers.
For extra data, see Android’s documentation.
PKCE (Proof Key for Code Trade)
Cell functions ought to implement the Proof Key for Code Trade extension to OAuth, and identification suppliers ought to present help for PKCE.
PKCE is a protocol utilized in OAuth 2.0 authorization to verify the consumer that initiated the authorization is receiving the authorization code. It really works as follows:
- The consumer software generates a cryptographically random string known as the “code verifier.”
- The consumer creates a “code problem” by remodeling the code verifier, usually utilizing the SHA-256 hashing algorithm.
- The consumer sends the code problem together with the authorization request to the identification supplier.
- The identification supplier shops the code problem and points an authorization code.
- Whereas exchanging the authorization code for tokens, the consumer sends the unique code verifier.
- The identification supplier verifies that the code verifier matches the unique code problem.
This course of will ensure that solely the unique consumer can entry the authorization code, as an intercepting occasion wouldn’t possess the code verifier. PKCE is now advisable for all OAuth shoppers utilizing the authorization code move.
ASWebAuthenticationSession
ASWebAuthenticationSession presents a number of benefits over the Capacitor browser for authentication flows:
ASWebAuthenticationSession is designed particularly for authentication and is compliant with OAuth necessities. Within the Apple app assessment course of, Apple prefers to implement authentication utilizing ASWebAuthenticationSession.
ASWebAuthenticationSession shares web site information with Safari browser and cellular apps. This may present a seamless single sign-on expertise throughout cellular apps and the browser. It shares cookies and permits password autocompletion, enhancing usability.
Whereas different in-app browser plugins provide cross-platform compatibility, ASWebAuthenticationSession gives a safer and user-friendly answer for iOS.
Conclusion
Implementing OAuth authorization flows in cellular functions requires cautious consideration of safety and platform-specific greatest practices. Whereas Cordova’s InAppBrowser is not advisable as a consequence of safety issues, builders produce other dependable alternate options.
For iOS, ASWebAuthenticationSession is most well-liked for the OAuth flows, providing enhanced safety and seamless integration with the working system. For Android, the Capacitor InAppBrowser plugin gives a viable answer for implementing safe authentication processes.
Nevertheless, for basic content material show exterior of authentication flows, the Capacitor Browser plugin stands out as a extra versatile and acceptable possibility for each iOS and Android.
