在 Cordova / Phonegap 中使用 Google API javascript

Question

我正在使用 Cordova 开发一个应用程序，并希望将文件保存在 Googe Drive 中。

我已成功使用 cordova-plugin-googleplus (https://github.com/EddyVerbruggen/cordova-plugin-googleplus) 登录 Google。但是我无法让插件返回给我 accessToken 或 idToken，因此我可以使用 Google javascript API。

window.plugins.googleplus.login(
    {
        'scopes': 'https://www.googleapis.com/auth/drive.file profile',
        'offline': true, 
        'webApiKey': ‘CODE’ 
    },
    function (obj) {
        $scope.$apply(function() {
            $scope.srcImage = obj.imageUrl;
            $scope.NomeGoogle = obj.displayName;
        });
    },
    function (msg) {
        alert('Erro');
        alert('error: ' + msg);
    }
);

我尝试使用下面的代码，但返回以下错误：

“未捕获的 gapi.auth2.ExternallyVisibleError: cookiePolicy 无效”

gapi.load('auth2', function() {

    gapi.auth2.init({

        client_id: 'REVERSED_CLIENTID',

    }).then(function(){

        auth2 = gapi.auth2.getAuthInstance();
        console.log(auth2.isSignedIn.get()); //now this always returns correctly        

    });
});

Answer 1

起初我希望跳过对 cordova-plugin-googleplus 的需求，只使用 Cordova/PhoneGap 中的 gapi 来处理与 Google 的身份验证，但它似乎是 gapi client authentication may not work within cordova's file:// protocol。

answer from @Joao 向我发送了正确的方向，但是在检索到 access_token 后尝试使用 gapi 时，我一直收到 Invalid cookiePolicy 错误（这是因为我忽略了下面列出的第 2 步，在使用插件进行身份验证后，我错误地尝试使用gapi 进行身份验证再次。

有一个步骤（下面提到的#3）我不清楚。要通过 Google 进行身份验证，然后在 Cordova/PhoneGap 中使用gapi，这可以代替...

1. 使用cordova-plugin-googleplus 来处理身份验证和访问令牌检索，这里根本不要使用gapi
2. 加载 gapi 客户端库（跳过 gapi.client.init() 调用和所有正常的 gapi 身份验证过程）
3. 将我们从插件获得的访问令牌附加到 gapi 客户端，然后根据需要进行 gapi 调用

第 3 步采用 some digging for me to find，这意味着我需要添加 access_token

gapi.client.setToken({access_token:'abc123456xyz'});

将访问令牌附加到 gapi 客户端后，我可以在 Cordova/Phonegap 中使用 gapi：

// Load the YouTube API.
gapi.client.load('youtube', 'v3', function() {
  // Do stuff...
};

Answer 2

我设法找出问题所在，为什么没有从插件中获取 serverAuthCode。 有必要在 Google Developers Console 上创建 2 个凭据。第一个必须是Android，这将是插件，第二个应该是Web App，这是实现serverAuthCode所必需的。

代码如下所示

window.plugins.googleplus.login(
    {
        'scopes': 'https://www.googleapis.com/auth/drive.file profile',
        'offline': true, 
        'webApiKey': ‘REVERSED_CODE of Web App Credential’ 
    },
    function (obj) {
        $scope.$apply(function() {
            $scope.srcImage = obj.imageUrl;
            $scope.NomeGoogle = obj.displayName;
        });


            var data = $.param({
                client_id: 'REVERSED_CODE of Web App Credential',
                client_secret: 'SECRET_CODE of Web App Credential',
                grant_type: 'authorization_code',
                code: obj.serverAuthCode
            });

            var config = {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            }

            $http.post("https://www.googleapis.com/oauth2/v3/token", data, config).success(function(data, status) {
                //data.access_token;

/** from now you can do use of google API **/

            })
            .error(function(data, status) {
                console.log(data);
                console.log(status);
            });

    },
    function (msg) {
        alert('Erro');
        alert('error: ' + msg);
    }
);

谢谢你的回复rojobo

Answer 3

试试

    window.plugins.googleplus.login(
        {
            'scopes': 'https://www.googleapis.com/auth/drive.file profile',
            'offline': true, 
            'cookiepolicy': 'none',
            'webApiKey': ‘CODE’ 
        }