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.

Learning Objective-C Setting environment & HelloWorld.m

Couple of weeks back I happened to meet one of my relative in a family function who is in college studying computer science. He is a tech kid who expected so many things from me when I told I am working in computer field for the last 6 years. He is more interested in creating his own computer game rather than playing .When in college people might not have selected a technology path and will be having knowledge in all most all the areas such as Embedded Systems,.Net,Networking,Java etc...He was not an exception and he started shooting his questions when he met a 6 years experienced professional. The conversation (mainly his doubts) touched so many areas from creating small web sites to programming artificial intelligence systems and controlling device through parallel port to creating a robot.

I was able to survive on the programming topics related to assembly language,C,C++,Java & .Net and how the computer functions internally at the register level. But really failed on Obj C used in iPhone,iPad, Symbian in Nokia, embedded systems and robotics. Finally he asked me “What are you doing in your company related to computer science?” .I had to admit that I am developing a highly generic .Net application for executing workflows which is now targeting auditing workflows. Even I don’t know the auditing business because there is another application to author auditing workflow which is carried out by business analysts. One more thing is we are programming one level up from the real machine and OS .ie we are talking /programming to the .Net and .Net will talk to the machine through OS to carry out the tasks.

The conversation stopped there. But when I think about that I feel there are so many things in high level language club which I don’t know. Learning robotics and programming for embedded systems are not at all in the scope at least now. I applied filters again and came to 3 topics VC++,Android & Obj C. Learning VC++ is delayed because I didn’t get a chance to work. It will not be a problem, if I get a chance. Android uses Java which is again .Net like language. So the remaining is Obj-C which I never tried. Yes my next is Objective-C.

Why should I learn Obj C / benefits of Obj-C
My first reason is the popularity of Apple products and this is the way I can make use of their framework.There are so many iPhone clones. But they cannot get into an agreement that which is the real clone. So iPhone is still the king .As everybody knows Cocoa is the framework to program iPad and iPhone and it need Obj-C. When I started ObjC the usage of class got my attention on the first day itself.We need to have an interface and implementation when we write a simple class itself. We need to share that interface only when we distribute that class. There are lot more reasons when we look at the language level.If you are interested please check the below links
http://support.apple.com/kb/TA45902?viewlocale=en_US
http://www.answerbag.com/q_view/135341

Starting Objective-C
As everybody when we start something fresh we look for teachers. Likewise I checked with the iPhone team in my company .Its 2 new joiners fresh out of college with one Mac and one iPad who got trained in WPF and Silverlight by me .According to them XCode is the only way to execute Objective C and now its licensed and it needs a MAC machine. My upgrade request toWin7 and if possible i7 is pending for months.In this situation asking MAC machine from the company to learn Obj C is not at all a question.Again I am alone and only way is google. I could see couple of ways which helps us to learn objective C in windows. Let’s start with  GNUStep which I feel the simple way.

Setting up environment in Windows
You can get detailed instructions and download links from the below sites.
http://www.gnustep.org/experience/Windows.html
http://www.techotopia.com/index.php/Installing_and_using_GNUstep_and_Objective-C_on_Windows

According to my experience you need to install 3 things in the given order

• GNUstep MSYS System
• GNUstep Core
• GNUstep Devel

This will give you the shell which can be opened by StartMenu->Programs->GNUStep->Shell

Compiling & Running first ObjC program
Just write a small C program to output HelloWorld which can be compiled in normal c compilers or through visual studio.Don’t add any ObjC features such as classes.Below is a small sample.

#include <stdio.h>

int main(void)
{
    printf("God is Love\n");
    Foo();
    return ;
}
void Foo()
{
    printf("Inside Foos\ns");
}

I normally starts with “God id Love” rather than “Hello World”.The extension for objective C programs is dot(.)m.Save the above program in helloworld.m.Now we have the sample. Then compile using gcc  compiler which will give the .exe file.

gcc helloworld.m

If the environment variable is not set properly this may cause some errors.In that case set the environement variables properly. It will be the PATH variable in the environment setup.Successful compilation will give an .exe file. Now execute that exe same as normal exe. Now we are in a position to learn Obj C.Next time other language features such as loops ,select etc…Then go to class and objects.