Javascript window.external.notify to communicate to WebBrowser control

How to communicate from web page loaded inside browser control to the hosting application

There are so many scenarios, where we may need to show web page inside our native applications such as Windows forms, WPF, Windows Phone, Android, iPhone etc... One of the scenario is to integrate with external authentication providers.

If we look at any third party authentication providers such as Google, Facebook, Azure ACS they don't let us take the user authentication details via our forms and get it authenticated using their web services. Instead the are strict in accepting the user name and password only through their web pages. The reason is security. If each and every application starts accepting user's Facebook or Google user name and password, there are chances that some of those apps will store the credentials locally and it might be miss used. That is the issue which is addressed by only allowing web page login even if we are in native applications.

The solution is, if we are developing even WPF or native mobile application and want to get external authentication we need to show their web page in our application. And once the authentication happens inside the browser, the native application can receive the security token and use it for subsequent operations.

For showing identity provider login page, we need to rely on the browser control available in the corresponding platform. If its WPF the browser control name is WebBrowser, in Android its named as WebView and in iOS its UIWebView. It is simple. First part is over, now our native application need to know when the authentication is completed, so that it can remove the browser control and obtain the token. This is the main topic of this post. In other words, the authentication happened inside the browser and browser need to to notify that event to the host application via some techniques.

The same technique, we can reuse the same technique if we want to notify any event happens inside the web page loaded inside the browser control.

Communication from HTML5 web page to WPF

WPF Browser control class has a property called ObjectForScripting. Assign any object to this property and it will be available as the window.external object in Javascript. So whatever methods are available in the class of the object assigned, those can be invoked from Javascript. For example, we created a class called HTMLInteropClass and that class has a method named MyMethod(). If we assign an object of that class to the WebBrowser.ObjectForScirpting property, we can invoke the MyMethod() written in C# from javascript using window.external.MyMethod() statement. Obviously the javascript should be downloaded from server or injected during run time to be running inside the browser control. Steps are as follows.

1. Develop the interop class. Have the method inside it, which we are intended to call from javascript.
2. Create object of that class and assign to the ObjectForScripting property of the WPF WebBrowser control.
3. Point web browser control to the web page which is having invocation code. ie window.external.<methodname>()
4. Develop the web page which is having the invocation code

More details here.

Communication from HTML5 web page to Android

In Android the web browser control name changes. But the handling is kind of same as of WPF browser control. Steps given below

1. Develop a class in Java for Android application with method which will be called from javascript.
2. In the onCreate() method of activity capture the webView reference and relate the object of above class with javascript using addJavascrtiptInterface() method.
3. Make sure the Javascript is changed to call the method, present in the class created in step 1.
4. Point the WebView to the page which contains the code to invoke our Android method.

More details here.

Communication from HTML5 web page to Windows phone

Windows phone uses a different way than WPF. It uses event based method invocation. ie We need to listen to the ScriptNotify event of WebBrowser. Steps below

1. Subscribe to the ScriptNotify event.
2. In the event handler e.Value gives the value sent from javascript
3. The javascript code can invoke this method using window.external.notify("value");

This can be used in Silverlight as is. More details here.

Communication from HTML5 web page to iPhone

Here again the way is different. We cannot handle the window.external object directly. Need to follow a workaround. Whenever we want to communicate to the iOS UIWebView, we need to navigate to a dummy url and catch the navigation event in objective C code. We can use the webViewDidFinishLoad handler of UIWebView to capture the event. Steps below.

1. Write code in JS to redirect the window.external invocations to a dummy url with data in its query string.
2. Handle the webViewDidFinishLoad of UIWebView control and write the code in it.

More details here.