CODEWITHSUNDEEP
authenticationoauth-2.0nativescript
Atul Chaudhary
Atul Chaudhary

Reputation: 3736

Nativescript Webview callback uri

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.

Upvotes: 5

Views: 3541

Answers (4)

Dobrea Petrisor
Dobrea Petrisor

Reputation: 501

On IOS you can do it like this:

args.object.ios.stringByEvaluatingJavaScriptFromString('YOUR_JAVASCRIPT_CODE');

Just for the record, now this is how you do it

var webViewNat = this.webView.nativeElement;
this.oLangWebViewInterface = new webViewInterfaceModule.WebViewInterface(webViewNat)
webViewNat.ios.evaluateJavaScriptCompletionHandler(`var myvar = document.getElementById('userNameInput').value = '${getString('Email')}';`, (id, err) => {
  if (err) {
      return err;
  }
 return id;
});

Upvotes: 0

Virat
Virat

Reputation: 31

I Know this is old. But the code below can help a lot of people.

YOUR_WEB_VIEW_OBJECT.on(webViewModule.WebView.loadFinishedEvent, function (args) {
    args.object.android.getSettings().setJavaScriptEnabled(true);

    args.object.android.evaluateJavascript('(function() { console.log("LOGS"); return "MESSAGE"; })();', new android.webkit.ValueCallback({
        onReceiveValue: function (result) {
            console.log(result);
        }
    }));
});

This code currently works for Android. You can create iOS version as well by digging into their APIs Reference then converting it into {N} Suitable.

Upvotes: 2

Atul Chaudhary
Atul Chaudhary

Reputation: 3736

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.

Upvotes: 7

Emil Oberg
Emil Oberg

Reputation: 4036

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.
    });
}

Upvotes: 5

Related Questions