Cellular apps use in-app browsers to maintain customers hooked to the app ecosystem and make their expertise higher. These browsers let folks see internet content material with out leaving the app. When customers go to exterior browsers to take a look at internet content material, they may get sidetracked by different issues. In-app browsers present customers with easy searching 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 other than the primary Cordova WebView. This window acts like an everyday internet browser, however with one key distinction: it may’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, not like the primary WebView.Â
- Self-contained searching. The InAppBrowser retains hyperlinks inside itself as a substitute of sending them to the machine’s default browser.Â
- Session dealing with. The InAppBrowser clears its session and cache while you shut and reopen the app. However in the event you simply put the app within the background and convey it again, the InAppBrowser retains its session. This strategy strikes a steadiness between protecting consumer 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 internet 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 powerful safety requirements Google follows for OAuth 2.0.Â
Google’s security guidelines recommend utilizing the system browser, which is safer. In any other case, we will 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 monitor URL modifications, watch consumer 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 (internet views) due to consumer expertise and safety points. As an alternative, 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 drawback comes from Google’s security guidelines, which require sure options and safeguards that the InAppBrowser may not provide. To repair this, app makers may 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 may create issues for builders.
Apple now not helps UIWebView and can quickly reject App Retailer submissions that use it. Builders ought to use WKWebView so as to add internet 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 strategy is newer and offers extra choices to indicate and work together with content material. It really works with iOS and Android, and in addition helps Progressive Internet Apps (PWAs) and Electron apps.
Capacitor Browser Challenges
Common hyperlinks may not work as you’d anticipate 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, reduce 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 an alternative of common hyperlinks for login flows, Ionic apps can arrange customized URL schemes with PKCE (Proof Key for Code Alternate). This methodology provides a secure solution to deal with logins whereas nonetheless working properly throughout completely different platforms.
Customized URL Schemes for OAuth 2.0 in Cellular Apps
Many cellular and desktop platforms help communication between apps by way of 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 utility 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 choosing a URI scheme, test whether or not the scheme is predicated on a site title beneath your management, and utilized in reverse order. An internet 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 circulation for the customized URL scheme:
- The authorization server will redirect to the shopper’s redirection URI after a profitable authentication.
- The working system launches the cellular app  the URL might 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 solution to deal with OAuth 2.0 flows in cellular apps, enhancing consumer expertise by permitting direct navigation throughout the app
iOS
If a number of apps register the identical customized URL scheme, iOS doesn’t stop the scheme from being invoked. As an alternative, it turns into undefined which app might be launched when the scheme is known as.Â
For added info, 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 consumer, permitting them to pick out which app ought to deal with the URL. This conduct offers extra management to the consumer however can nonetheless pose safety dangers.Â
For added info, see Android’s documentation.
PKCE (Proof Key for Code Alternate)
Cellular functions ought to implement the Proof Key for Code Alternate extension to OAuth, and identification suppliers ought to present help for PKCE.
PKCE is a protocol utilized in OAuth 2.0 authorization to ensure the shopper that initiated the authorization is receiving the authorization code. It really works as follows:
- The shopper utility generates a cryptographically random string referred to as the “code verifier.”
- The shopper creates a “code problem” by remodeling the code verifier, sometimes utilizing the SHA-256 hashing algorithm.
- The shopper 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 shopper 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 shopper can entry the authorization code, as an intercepting occasion wouldn’t possess the code verifier. PKCE is now beneficial for all OAuth shoppers utilizing the authorization code circulation.
ASWebAuthenticationSession
ASWebAuthenticationSession provides 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 overview course of, Apple prefers to implement authentication utilizing ASWebAuthenticationSession.
ASWebAuthenticationSession shares web site information with Safari browser and cellular apps. It will 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 offers a safer and user-friendly answer for iOS.
Conclusion
Implementing OAuth authorization flows in cellular functions requires cautious consideration of safety and platform-specific finest practices. Whereas Cordova’s InAppBrowser is now not beneficial because of safety issues, builders produce other dependable options.
For iOS, ASWebAuthenticationSession is most popular for the OAuth flows, providing enhanced safety and seamless integration with the working system. For Android, the Capacitor InAppBrowser plugin offers a viable answer for implementing safe authentication processes.
Nevertheless, for normal content material show exterior of authentication flows, the Capacitor Browser plugin stands out as a extra versatile and applicable choice for each iOS and Android.
