2014-06-10 20 views
7

kullanarak Phonegap içinde Angularjs kullanarak Google OAuth2 ile nasıl oturum açılır? Google OAuth2 aracılığıyla Angularjs (İyonik Çerçeve kullanılarak) kullanarak Phonegap Uygulamamdan giriş yapmaya çalışıyorum. Şu anda oturum açmak için http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html kullanıyorum. Ama Ionic için Angular-UI-Router kullandığımda gerçekten çirkin görünümlü kod oluşturma ve kod anlamak için oldukça zordur.ClientID ve ClientSecret

Bu sorun herhangi bir uygun yanıt olmadan etrafta dolaşıyor gibi görünüyor. Umarım şimdi çözülmelidir. Google Angular Guys yardım etmeli. How to implement Google Auth in phonegap?

En yakın konu How to use Google Login API with Cordova/Phonegap, ancak bu angularjs için bir çözüm değildir.

Aşağıdaki kodu kullanarak javascript değişken değerleri aktarmak zorunda:

 var el = document.getElementById('test'); 
     var scopeTest = angular.element(el).scope(); 
     scopeTest.$apply(function(){ 
      scopeTest.user = user; 
      scopeTest.logged_in = true; 
      scopeTest.name = user.name; 
      scopeTest.email = user.email; 
     }); 

cevap

18

böyle bir çözüm, TestCtrl Girişi Düğme bulunduğu Denetleyicisi'dir yaptı. Angualar şekilde değiştireceğim jQuery tabanlı $ .ajax çağrıları bir karışımı var. Google_call işlevi, temelde yukarıda belirtilen bağlantıda belirtilen google_api'yi telefon rehberi ipuçlarında çağırır.

.controller('TestCtrl', function($scope,$ionicPopup) { 
$scope.logged_in = false; 
$scope.getMember = function(id) { 
    console.log(id); 
}; 
$scope.test = function(){ 
    $ionicPopup.alert({"title":"Clicked"}); 
} 

$scope.call_google = function(){ 
    googleapi.authorize({ 
    client_id: 'CLIENT_ID', 
    client_secret: 'CLIENT_SECRET', 

    redirect_uri: 'http://localhost', 
    scope: 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email' 
    }).done(function(data) { 
     accessToken=data.access_token; 
     // alert(accessToken); 
     // $loginStatus.html('Access Token: ' + data.access_token); 
     console.log(data.access_token); 
     //$ionicPopup.alert({"title":JSON.stringify(data)}); 
     $scope.getDataProfile(); 
    }); 
}; 
$scope.getDataProfile = function(){ 
    var term=null; 
    // alert("getting user data="+accessToken); 
    $.ajax({ 
      url:'https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token='+accessToken, 
      type:'GET', 
      data:term, 
      dataType:'json', 
      error:function(jqXHR,text_status,strError){ 
      }, 
      success:function(data) 
      { 
      var item; 

      console.log(JSON.stringify(data)); 
      // Save the userprofile data in your localStorage. 
      window.localStorage.gmailLogin="true"; 
      window.localStorage.gmailID=data.id; 
      window.localStorage.gmailEmail=data.email; 
      window.localStorage.gmailFirstName=data.given_name; 
      window.localStorage.gmailLastName=data.family_name; 
      window.localStorage.gmailProfilePicture=data.picture; 
      window.localStorage.gmailGender=data.gender; 
      window.localStorage.gmailName=data.name; 
      $scope.email = data.email; 
      $scope.name = data.name; 
      } 
     }); 
     //$scope.disconnectUser(); //This call can be done later. 
}; 
$scope.disconnectUser = function() { 
    var revokeUrl = 'https://accounts.google.com/o/oauth2/revoke?token='+accessToken; 

    // Perform an asynchronous GET request. 
    $.ajax({ 
    type: 'GET', 
    url: revokeUrl, 
    async: false, 
    contentType: "application/json", 
    dataType: 'jsonp', 
    success: function(nullResponse) { 
     // Do something now that user is disconnected 
     // The response is always undefined. 
     accessToken=null; 
     console.log(JSON.stringify(nullResponse)); 
     console.log("-----signed out..!!----"+accessToken); 
    }, 
    error: function(e) { 
     // Handle the error 
     // console.log(e); 
     // You could point users to manually disconnect if unsuccessful 
     // https://plus.google.com/apps 
    } 
    }); 
}; 
}) 

Google OAuth2 kullanarak giriş çalışırken benim gibi benzer sorunlarla karşı karşıya başlayanlar için bu cevabı veren ediyorum. Bu yüzden ben de burada yeni olduğum için utanmazca Upvotes için soruyorum!

+0

Kötülük soruşturması yapan bir kişi olarak, Angular'ın $ http üzerinden jQuery ajax çağrısını kullanmanın bir sebebi var mıydı, olsun (...)? –

+0

Aslında bu, bir başarı işlevi ve bir hata fonksiyonu ile $ http.get (....) ile çok fazla değiştirilebilir. Bunu yaptığımda da bilmiyordum! Söz için teşekkürler. – tor9ado

İlgili konular