如何登录使用Angularjs谷歌OAuth2内的PhoneGap使用客户端ID和ClientSecret客户端、Angularjs、谷歌、ClientSecret

2023-09-05 09:24:48 作者:空城

我想从我的PhoneGap应用程序中使用Angularjs(使用离子框架)通过谷歌OAuth2登录。目前我使用的http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html用于登录,但它是建立真正难看code和相当费解code时,我采用了棱角分明-UI-路由器离子。

这个问题似乎是螺旋式上升的周围没有任何合适的答案。我希望现在应该解决了。在谷歌角度家伙应该有所帮助。 如何在PhoneGap的实现谷歌验证?

最近的话题是How使用具有科尔多瓦/ PhoneGap的的谷歌登录API,但是这不是angularjs溶液

我用下面的code转移的JavaScript变量的值:

  VAR EL =的document.getElementById('测试');
        变种scopeTest = angular.element(EL).scope();
        scopeTest。$应用(函数(){
            scopeTest.user =用户;
            scopeTest.logged_in = TRUE;
            scopeTest.name = user.name;
            scopeTest.email = user.email;
        });
 

解决方案

我没有解决这个样子,哪里TestCtrl是控制器所在的登录按钮所在。还有就是基于jQuery的$就调用,我要改变的angualar方式的混合。该google_call函数调用基本上是上文中的PhoneGap,提示中提到的链接google_api。

  .controller(TestCtrl',函数($范围,$ ionicPopup){
$ scope.logged_in = FALSE;
$ scope.getMember =功能(ID){
    的console.log(ID);
};
$ scope.test =功能(){
    $ ionicPopup.alert({称号:点击});
}

$ scope.call_google =功能(){
    googleapi.authorize({
    CLIENT_ID:CLIENT_ID,
    client_secret:CLIENT_SECRET,

    redirect_uri:HTTP:// localhost'的,
    适用范围:https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email
    })。完成(功能(数据){
        accessToken = data.access_token;
        //警报(accessToken);
        // $ loginStatus.html(访问令牌:'+ data.access_token);
        执行console.log(data.access_token);
        //$ionicPopup.alert({"title":JSON.stringify(data)});
        $ scope.getDataProfile();
    });
};
$ scope.getDataProfile =功能(){
    VAR长期= NULL;
    //警报(获取用户数据=+ accessToken);
    $阿贾克斯({
           网址:将https://www.googleapis.com/oauth2/v1/userinfo ALT = JSON和放大器; access_token ='+ accessToken,
           键入:GET,
           数据:长期,
           数据类型:JSON,
           错误:函数(jqXHR,text_status,STRERROR){
           },
           成功:函数(数据)
           {
           VAR项目;

           的console.log(JSON.stringify(数据));
           //保存用户配置文件的数据在你的localStorage。
           window.localStorage.gmailLogin =真;
           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(); //此调用可稍后再进行。
};
$ scope.disconnectUser =功能(){
  VAR revokeUrl ='https://accounts.google.com/o/oauth2/revoke?token='+accessToken;

  //执行异步GET请求。
  $阿贾克斯({
    键入:GET,
    网址:revokeUrl,
    异步:假的,
    的contentType:应用/ JSON
    数据类型:JSONP,
    成功:函数(nullResponse){
      //做一些事情,现在用户断开连接
      //回应始终是不确定的。
      accessToken = NULL;
      的console.log(JSON.stringify(nullResponse));
      的console.log(-----签署了.. !! ----+ accessToken);
    },
    错误:函数(E){
      //处理错误
      //执行console.log(E);
      //你可以指向用户如果不成功手动断开
      // https://plus.google.com/apps
    }
  });
};
})
 
如何下载angularjs

我提供这个答案谁面临类似的问题,像我这样的,而尝试使用谷歌OAuth2登录的新手。因此,要求Upvotes耍赖,因为我是新来的呢!

I am trying to login from my Phonegap App using Angularjs (using the Ionic Framework) through Google OAuth2. Currently I am using the http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html for logging in. But it is creating really ugly looking code and quite a hard to understand code when I am using Angular-UI-Router for Ionic.

This issue seems to be spiralling around without any proper answers. I hope it should be solved now. The Google Angular Guys should help. How to implement Google Auth in phonegap?

The closest topic is How to use Google Login API with Cordova/Phonegap, but this is not a solution for angularjs.

I had to transfer the javascript variable values using the following code:

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

解决方案

I did the solution like this, where TestCtrl is the Controller where the Login Button resides. There is a mix of jquery based $.ajax calls, which I am going to change to the angualar way. The google_call function basically calls the google_api which is mentioned in the link mentioned above in phonegap-tips.

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

I am providing this answer for the newbies who faced similar problems like mine while trying to login using Google OAuth2. So asking for Upvotes shamelessly as I am new here too!