Opening external link and closing it at an event

ionic-v1
1

I am creating an app where in the user will have to login. The login is done by social auth present on the website. So I have created the login buttons in ionic when user clicks on the button an external link opens as

$scope.facebookLogin = function() {
    window.open($scope.facebookLink, '_blank', 'location=yes');
};

The problem here is that the user is being successfully logedin but I cannot close the page I opened for loging in the user. I tried window.close(); in the final page but its not being closed. Am i missing something.

1 Like
2

Have you installed the InAppBrowser plugin?

3

You can use _system instead of _blank there for the system default action will be triggered like opening in system browser.

Please use $window in angularjs context instead of window.

Then you store your $window.open(…) to a variable and add eventlisteners like ‘loadstart’ to parse window url to trigger special actions or close event and so on.

4

ok something is really wrong in here. When i am opening the link in the p.c. browser with ‘_blank’ or ‘_system’ its being opened in a different window but while i open the link in the app its being opened in the same window. I figured this out by printing winindow.location.toString(). And because its being opened in the same window i cant close it.

5

The problem here is that when user clicks the login button he goes to a facebook page where facebook asks him to login and redirects him to my website so once the facebook page is loaded the eventlistener i have applied wont work any further to detect the further redirection so i suppose applying event listener wont help.

6

Okay but a new window should open with $window.open with the _blank or _system parameter.
I use this approach in some apps.

You can listen to the browser url -> via adding eventlistener to ‘loadstart’ event.
There you can get browser url… if you are trying to log in via facebook.

E.g.:
you click login -> page loads and url changes -> loadstart is triggered
Facebook login redirects to https://www.facebook.com/login.php…

there you can set a variable -> tried to login if you then get back to facebook.com without /login.php -> you are successfully loggedin -> close the window with $window.close

7

I tried this

$scope.winindow = $window.open($scope.facebookLink, '_system', 'location=yes');
$scope.$watch('winindow', function() {
    console.log($scope.winindow.location.toString()); //working only once
});
$scope.winindow.addEventListener("load", function() {
    console.log($scope.winindow.location.toString()); //not working even once
}, false);
8

you have to listen to loadstart.

i think the load event are not supported on every device.

9

even loadstart is not helping

10

I am using something like this for social login with magento:

// get login url for social community
var loginUrl = $rootScope[type],
	// open new window for login
	socialLoginWindow = window.open(loginUrl, '_blank', 'location=no,toolbar=yes');

// listen to page load events
socialLoginWindow.addEventListener('loadstart', function (event) {
	var url = event.url,
		params = {},
		// get uri
		parts = url.split('?'),
		uri,
		urlParams,
		loading;

	// if there is an uri
	if (parts[1]) {
		uri = parts[1];
		// get uri params
		urlParams = uri.split('&');

		// get uri params and store them with key, value
		angular.forEach(urlParams, function (paramString) {
			var param = paramString.split('=');
			params[param[0]] = param[1];
		});
	}

	// if there is an email param or an error -> close the window
	if (params.email || params.error) {
		socialLoginWindow.close();
	}
});

It works great. The window opens and everytime the page loads i can analyze the url.

2 Likes
11

I am going crazy. I now created a new project added inappbrowser plugin in it added the plugin to config.xml created a button and put a ng-click in it.

<button ng-click="outofwrld()">hello</button>

then in my controller

$scope.outofwrld = function() {
	try {
		alert("1");
		var loginUrl = "http://www.google.com/"
		window.open(loginUrl, '_self', 'location=no,toolbar=yes');
		alert("2")
	} catch (err) {
		alert(err);
	}
}

but now the page doesnt show up but alerts are working fine without any error does this mean that the window is being opened in the background. If so how to bring it to the foreground.

1 Like
12

I am having a same issue, did you find a solution ? @sar009

13

i think the ‘_self’ parameter will not work. try “_blank” instead. if you open it with “_self” you are not able to jump back in your app again. maybe this is the reason why it is not allowed… maybe…^^

1 Like
14

I am having same issue, i need to track url of AppBrowser and close the poup on some specific url,
for that this is what i tried but neither loadstart trigger nor loadstop any clue on this.

  var InAppOptions = {location: 'yes',clearcache: 'yes',toolbar: 'no'};
     $scope.loginWithfb = function(){
            UserServices.GetAuthEndpoints().then(function(authPath){
                $cordovaInAppBrowser.open($config.BasePath+authPath,'_blank',InAppOptions)
          })
   }

        $rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event){
                  console.log('loadstart',event.url);
          });
        
          $rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){
                  console.log('loadstop',event.url);
          })

i have also tried bengtler suggestion but no luck

1 Like
15

hi,
is it possible to get a value from that page without passing it to url.
like using localstorage, $scope…