Ionic应用程序:将Google登录与现有后端集成

3
我正在遵循这个tutorial来为我的Ionic应用程序创建Google登录。 我已经设置了一个电子邮件/密码登录,并希望将Google登录添加到此系统中。 我按照说明进行操作,除了注销和服务部分之外,这是有些棘手的,因为我已经为我的电子邮件/密码登录设置了一些代码。
目前,在登录屏幕上单击“登录”按钮没有任何反应。
对于这篇文章的Facebook版本,我也有同样的问题。
请帮忙!
2个回答

0

0

好的,我有同样的问题,并且采用了不同的方法。首先,您必须阅读https://www.thepolyglotdeveloper.com/2014/07/using-oauth-2-0-service-ionicframework/。该链接包含有关Google开发人员控制台的重要信息。在那里,您必须“注册”您的ionic应用程序并获取您的clientId和clientSecret。对于我的实现,需要cordovaOauth,但它与ngCordova一起提供。

所以对我有效的代码是:

//视图

 <button ng-click="googleLogin()" class="button button-block button-stable">
      Sign In
 </button> 

//控制器

//请注意,您需要从Google开发者控制台获取clientId

.controller('LoginController', ['$scope', '$cordovaOauth',    
'$http','$location','$rootScope','$state','$window','$ionicLoading',   
 function($scope, $cordovaOauth, $http, $location, 
 $rootScope,$state,$window,$ionicLoading){

  $scope.googleLogin = function(){
  $cordovaOauth.google(clientId,         


 ["https://www.googleapis.com/auth/urlshortener","https://www.googleapis.com/auth/userinfo.email",

   "https://www.googleapis.com/auth/userinfo.profile",    "https://www.googleapis.com/auth/plus.me"]).
  then(function(result){

  var accessToken;

  accessToken = JSON.stringify(result);


  $ionicLoading.show({
    content: 'Loading',
    animation: 'fade-in',
    showBackdrop: true,
    maxWidth: 200,
    showDelay: 0
  });
  $http({method:"GET", url:"https://www.googleapis.com/plus/v1/people/me?access_token="+result.access_token}).
  success(function(response){
          var param = {
            provider: 'google',
              google: {
                            uid: response["id"],
                            provider: 'google',
                            first_name: response["name"]["givenName"],
                            last_name: response["name"]["familyName"],
                            email: response.emails[0]["value"],
                            image: response.image.url
                        }
            };


            //alert("get method");

            first_name  = response["name"]["givenName"];
            email =response.emails[0]["value"];

            $scope.first_name = first_name;
            $scope.email = email;


            $ionicLoading.hide();

            $location.url('/app/viewyouwanttoredirect');

  }, function(error) {
     alert("App can't get your info: " +error);
     });


}, function(error){
   alert("Authentication error!Please try again!" +error);
   });
}

}])

更新: 如果您在oauth方面遇到问题,例如“找不到InAppBrowser插件”, 请在ng-cordova.js中将所有org.apache.cordova.inappbrowser的出现替换为cordova-plugin-inappbrowser。这将解决问题。当然,您需要在index.html中拥有它:
<script src="yourpath/ng-cordova.js"></script>

你说你不想要ngCordovaOAuth的解决方案,但glogin会带来痛苦。所以我发布我的答案,希望能帮助你和社区。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接