如何使用与科尔多瓦/ PhoneGap的谷歌登录API [英] How to use Google Login API with Cordova/Phonegap

问题描述

我想在我的PhoneGap的应用程序中使用与谷歌登录。我看了很多文章，但无法了解它是如何做。提前致谢。我试着用oAuth2的安装应用程序按照这个网址。但随后的应用程序的用户必须手动复制code和我的应用程序粘贴。 我使用built.io 联合登录，如果​​相关的。

I want to use "Login with Google" in my Phonegap App. I have read many articles but couldn't find out how it is done. Thanks in Advance. I tried using oAuth2 for "installed Applications" as per this URL. But then the app users have to manually copy code and paste in my app. I am using built.io Federated Login, if its relevant.

推荐答案

在一个js文件添加此code，包括在您的项目。当你想访问谷歌API登录按钮点击通话函数callGoogle（）其余部分将通过这个code来完成。不要忘记添加您的客户ID和Client_Secret键。它的工作对我罚款。您需要inappbrowser科尔多瓦插件。

add this code in one js file and include in your project. when you want to access google login api on button click call function callGoogle() rest will be done by this code. Dont forget to add your client id and Client_Secret keys. Its working fine for me. You need inappbrowser cordova plugin.

         var googleapi = {
        authorize: function(options) {
            var deferred = $.Deferred();

            //Build the OAuth consent page URL
            var authUrl = 'https://accounts.google.com/o/oauth2/auth?' + $.param({
                client_id: options.client_id,
                redirect_uri: options.redirect_uri,
                response_type: 'code',
                scope: options.scope

            });

            //Open the OAuth consent page in the InAppBrowser
            var authWindow = window.open(authUrl, '_blank', 'location=no,toolbar=no');

            //The recommendation is to use the redirect_uri "urn:ietf:wg:oauth:2.0:oob"
            //which sets the authorization code in the browser's title. However, we can't
            //access the title of the InAppBrowser.
            //
            //Instead, we pass a bogus redirect_uri of "http://localhost", which means the
            //authorization code will get set in the url. We can access the url in the
            //loadstart and loadstop events. So if we bind the loadstart event, we can
            //find the authorization code and close the InAppBrowser after the user
            //has granted us access to their data.
            $(authWindow).on('loadstart', function(e) {
                var url = e.originalEvent.url;
                var code = /\?code=(.+)$/.exec(url);
                var error = /\?error=(.+)$/.exec(url);

                if (code || error) {
                    //Always close the browser when match is found
                    authWindow.close();
                }

                if (code) {
                    //Exchange the authorization code for an access token
                    $.post('https://accounts.google.com/o/oauth2/token', {
                        code: code[1],
                        client_id: options.client_id,
                        client_secret: options.client_secret,
                        redirect_uri: options.redirect_uri,
                        grant_type: 'authorization_code'
                    }).done(function(data) {
                        deferred.resolve(data);

                        $("#loginStatus").html('Name: ' + data.given_name);
                    }).fail(function(response) {
                        deferred.reject(response.responseJSON);
                    });
                } else if (error) {
                    //The user denied access to the app
                    deferred.reject({
                        error: error[1]
                    });
                }
            });

            return deferred.promise();
        }
    };
     var accessToken;
    var UserData=null;

    function callGoogle()
    {

    //  alert('starting');
        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);
    console.log(JSON.stringify(data));
                                    getDataProfile();


                                    });

    }
    // This function gets data of user.
    function getDataProfile()
    {
        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.
               localStorage.gmailLogin="true";
               localStorage.gmailID=data.id;
               localStorage.gmailEmail=data.email;
               localStorage.gmailFirstName=data.given_name;
               localStorage.gmailLastName=data.family_name;
               localStorage.gmailProfilePicture=data.picture;
               localStorage.gmailGender=data.gender;
               }
               });
    disconnectUser();
    }
    function disconnectUser() {
      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
        }
      });
    }

这篇关于如何使用与科尔多瓦/ PhoneGap的谷歌登录API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！