Nativescript Webview callback uri

Question

Can we have post back from external url to web view in nativescript and get the values from postback? It is the oauth2 flow with redirect uri where user display external link of website in native webview and get tokens value from postback url . Any suggestion or pointer to tut or blog? All the major players provide support for this and it is very much used for oauth.

Answer 1

This is my main-page.js where all the tokens and value i get within the function under args.url

var vmModule = require("./main-view-model");
var webViewModule = require('ui/web-view');
function pageLoaded(args) {

    var page = args.object;
    page.bindingContext = vmModule.mainViewModel;
    var webView = page.getViewById('myWebView');
    debugger;
    //webView.url = 
    webView.on(webViewModule.WebView.loadFinishedEvent, function (args) {
        alert(JSON.stringify(args.url));
    });
    webView.src = vmModule.mainViewModel.url;

}
exports.pageLoaded = pageLoaded;

And my view is

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <GridLayout>
        <WebView id="myWebView" />
    </GridLayout>
</Page>

All the time it was written there in documentation and i just didn't look at it carefully. Hopefully it will help others.

Answer 2

You should be able to watch the urlProperty for changes. E.g.

Given you have a view which looks like this:

<Page loaded="loaded">
     <WebView id="myWebView" src="{{ url }}" />
</Page>

Then you can attach an observer to that WebView and react to changes to the URL property like this:

var webViewModule = require('ui/web-view');

function loaded(args) {
    var page = args.object;
    var webView = page.getViewById('myWebView');
    webView.on(webViewModule.WebView.urlProperty, function (changeArgs) {
        console.dir(changeArgs); 
        // Do something with the URL here.
        // E.g. extract the token and hide the WebView.
    });
}