Angularjsでサードパーティのログインを使用して認証を処理する方法

Question

以下のコードを実行すると、認証ウィンドウがポップアップし、ユーザーがログインを確認します。この部分は動作します。認証ボタンがクリックされると、これは同じウィンドウ内の前のタブにリダイレクトされます（親ウィンドウにないポップアップ内）。認証がユーザーによって確認された後、このポップアップウィンドウを閉じるにはどうしたらいいですか？また、どのようにしてURLから認証コードを取り戻すことができますか？たとえば、以下のコードでは、最初の "console.log（event.url）;"実行されません。

var redirectUri = "http://localhost:8100/callback"; 

    var ref = window.open('https://www.example.com/oauth/authorize?client_id=' + clientID + '&redirect_uri=' + redirectUri + '&scope=write&response_type=code&approval_prompt=force', '_blank', 'location=no,clearsessioncache=yes,clearcache=yes'); 

    ref.addEventListener('loadstart', function (event) { // THIS IS NOT TRIGGERED FOR SOME REASON 

     console.log(event.url); 

     if ((event.url).indexOf(redirectUri) === 0) { 
      requestToken = (event.url).split("code=")[1]; 

      $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
      $http({ 
        method: "post", 
        url: "https://www.example.com/oauth/token", 
        data: "client_id=" + clientId + "&client_secret=" + clientSecret + "&code=" + requestToken 
       }) 
       .success(function (data) { 
        $scope.data = data; 
        console.log(event.url); 

       }) 
       .error(function (data, status) { 
        deferred.reject("Problem authenticating"); 
       }); 
     } 
    }); 

以下は、アプリケーションで使用されるタブです。コールバックの後でtab.exampleに戻るにはどうすればよいですか？

// setup an abstract state for the tabs directive 
    .state('tab', { 
    url: '/tab', 
    abstract: true, 
    templateUrl: 'templates/tabs.html' 
}) 

.state('tab.example', { 
     url: '/example', 
     views: { 
      'tab-example': { 
       templateUrl: 'templates/tab-example.html', 
       controller: 'ExampleAPICtrl' 
      } 
     } 
    }) 
    .state('callback', { 


    }); 

// if none of the above states are matched, use this as the fallback 
$urlRouterProvider.otherwise('/'); 

Answer 1

イベントコールバックを聞くことができるようにサードパーティプロバイダをラップするサービスが必要です。

私が使用した偉大なライブラリの実装：

mrzmyr Angular-Google-Plus

librarieのアプローチの中心は、次のコードスニペットである：あなたがしたい

 NgGooglePlus.prototype.login = function() { 
      deferred = $q.defer(); 
      gapi.auth.authorize({ 
       client_id: options.clientId, 
       scope: options.scopes, 
       immediate: false, 
       approval_prompt: "force", 
       max_auth_age: 0 
      }, this.handleAuthResult); 
      return deferred.promise; 
     }; 

---

Answer 2

第三者とのログイン、良い情報をログインシステムに送信することによってログインを実行するログインサービスを作成するアドバイス（他のAPI、WebアプリケーションイオンとURL ...）。で返すようにhttps://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

：そのような は、あなたのサービスでは、イベントを進めて行きたい場合は、このリンクをたどることができ、よりアクション

$scope.$broadcast('loadstart', { 
    someProp: 'send parameter to your event in the data object' 
}); 

$scope.$on('loadstart', function (event, data) { 
    //your function the tretment of the reply 
}); 

を実行するには、アプリケーションで使用できるイベントを発することができますあなたのtab.exampleではhttpリクエストの.success部分で$ stateを試すことができます。このサービスでは、次の状態を選択することができます。

$state.go('tab.example');