如何使用ClientID和ClientSecret在Phonegap中使用Angularjs登录Google OAuth2

 2674224139_8a6503 发布于 2023-01-10 10:07

我正尝试使用Angularjs(使用Ionic Framework)通过Google OAuth2从我的Phonegap应用程序登录.目前我正在使用http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html进行登录.但它正在创建看起来非常难看的代码和非常难以理解的代码我正在使用Angular-UI-Router for Ionic.

如果没有任何正确的答案,这个问题似乎正在蔓延.我希望现在应该解决.Google Angular Guys应该会有所帮助. 如何在phonegap中实施Google Auth?

最接近的主题是如何使用带有Cordova/Phonegap的Google Login API,但这不是angularjs的解决方案.

我不得不使用以下代码传输javascript变量值:

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

tor9ado.. 18

我做了这样的解决方案,其中TestCtrl是Login Button所在的Controller.有一个基于jquery的$ .ajax调用混合,我将改变为angualar方式.google_call函数基本上调用google_api,这在上面提到的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
    }
  });
};
})

我正在为尝试使用Google OAuth2登录时面临类似问题的新手提供此答案.所以,因为我也是新人,所以要求Upvotes无耻!

1 个回答
  • 我做了这样的解决方案,其中TestCtrl是Login Button所在的Controller.有一个基于jquery的$ .ajax调用混合,我将改变为angualar方式.google_call函数基本上调用google_api,这在上面提到的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
        }
      });
    };
    })
    

    我正在为尝试使用Google OAuth2登录时面临类似问题的新手提供此答案.所以,因为我也是新人,所以要求Upvotes无耻!

    2023-01-10 10:08 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有