Facebook Login using native control

If you've tried creating a Hybrid WebApp with a website using Facebook login, you've probably experienced the pain of clicking that Login with Facebook button only to see your app launch into an IE window, thus destroying any opportunity to control the outcome of the login.

Fear not as there is a way to overcome this, broken down by platform below.

Note that this tutorial assumes you're using the HybridWebView Control. It also assumes that the website you're working with uses the Facebook SDK for JavaScript

Windows 8.1 using WebAuthenticationBroker

The steps:

1. Add a mapping to the appropriate route, override window.open
2. Handle the KnownMessageTypes.WindowOpen m.essage
3. Proxy the result of the authentication back to the website

Step 1: Add a mapping to the appropriate route

Add a handler for the Ready event on the HybridWebView control:

<toolkit:HybridWebView x:Name="WebHost" WebUri="http://www.example.org" MessageReceived="HybridWebView_MessageReceived" Ready="HybridWebView_Ready" />

In the code-behind, add the following to the HybridWebView_Ready handler:

private void HybridWebView_Ready(object sender, EventArgs e)
{
    WebHost.WebRoute.Map("/", async (uri, success, errorCode) =>
    {
        await WebHost.Interpreter.EvalAsync("framework.overrideWindowOpen();");
    });
}