热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在Cordova/Phonegap中使用GoogleLoginAPI-HowtouseGoogleLoginAPIwithCordova/Phonegap

IwanttouseLoginwithGoogleinmyPhonegapApp.Ihavereadmanyarticlesbutcouldntfindou

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.

我想在我的Phonegap应用程序中使用“Login with Google”。我读了很多文章但却无法知道它是如何完成的。提前致谢。我尝试按照此URL使用oAuth2作为“已安装的应用程序”。但随后应用用户必须手动并粘贴到我的应用中。我正在使用built.io联合登录,如果它相关。

4 个解决方案

#1


32  

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.

将此代码添加到一个js文件中并包含在您的项目中。当你想访问谷歌登录api按钮点击通话功能调用谷歌()休息将由此代码完成。别忘了添加您的客户端ID和Client_Secret密钥。它对我来说很好。你需要inappbrowser cordova插件。

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

#2


20  

Google has dropped support for the accepted answer above! After April 20th 2017 use of the In-App browser as described by @Deep Mehta will no longer be supported. If you use the accepted answer then it is going to start failing very soon.

谷歌已经放弃了对上面接受的答案的支持! 2017年4月20日之后,将不再支持使用@Deep Mehta所述的应用程序内浏览器。如果您使用接受的答案,那么很快就会失败。

Here's Google's post about the change: https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html

以下是Google关于此更改的帖子:https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html

Luckily there's a new plugin that wraps up all the funcitonality that you need to do this:

幸运的是,有一个新的插件,它包含了你需要做的所有功能:

https://github.com/EddyVerbruggen/cordova-plugin-googleplus and on NPM https://www.npmjs.com/package/cordova-plugin-googleplus

https://github.com/EddyVerbruggen/cordova-plugin-googleplus和NPM https://www.npmjs.com/package/cordova-plugin-googleplus

Here's an article on how to use it in Ionic 1 and 2 also: http://blog.ionic.io/google-oauth-changes

这里有一篇关于如何在Ionic 1和I中使用它的文章:http://blog.ionic.io/google-oauth-changes

Again - DO NOT USE THE ACCEPTED ANSWER! It will fail after April 20 2017.

再次 - 不要使用接受的答案!它将在2017年4月20日之后失败。

#3


3  

I recommend this cordova plugin: https://www.npmjs.com/package/cordova-plugin-googleplus It's pretty recent but I just added it to my app and it seems to do the trick!

我推荐这个cordova插件:https://www.npmjs.com/package/cordova-plugin-googleplus这是最近的,但我刚刚将它添加到我的应用程序,它似乎做了伎俩!

#4


0  

Another implementation that works well here: https://github.com/valenzia10/PhonegapGoogleLogin

另一个在这里运行良好的实现:https://github.com/valenzia10/PhonegapGoogleLogin


推荐阅读
  • 黑马头条项目:Vue 文章详情模块与交互功能实现
    本文详细介绍了如何在黑马头条项目中配置文章详情模块的路由、获取和展示文章详情数据,以及实现关注、点赞、不喜欢和评论功能。通过这些步骤,您可以全面了解如何开发一个完整的前端文章详情页面。 ... [详细]
  • java文本编辑器,java文本编辑器设计思路
    java文本编辑器,java文本编辑器设计思路 ... [详细]
  • 在 Android 开发中,通过 Intent 启动 Activity 或 Service 时,可以使用 putExtra 方法传递数据。接收方可以通过 getIntent().getExtras() 获取这些数据。本文将介绍如何使用 RoboGuice 框架简化这一过程,特别是 @InjectExtra 注解的使用。 ... [详细]
  • 本文将详细介绍多个流行的 Android 视频处理开源框架,包括 ijkplayer、FFmpeg、Vitamio、ExoPlayer 等。每个框架都有其独特的优势和应用场景,帮助开发者更高效地进行视频处理和播放。 ... [详细]
  • 在高并发需求的C++项目中,我们最初选择了JsonCpp进行JSON解析和序列化。然而,在处理大数据量时,JsonCpp频繁抛出异常,尤其是在多线程环境下问题更为突出。通过分析发现,旧版本的JsonCpp存在多线程安全性和性能瓶颈。经过评估,我们最终选择了RapidJSON作为替代方案,并实现了显著的性能提升。 ... [详细]
  • 本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ... [详细]
  • ssm框架整合及工程分层1.先创建一个新的project1.1配置pom.xml ... [详细]
  • 在编译BSP包过程中,遇到了一个与 'gets' 函数相关的编译错误。该问题通常发生在较新的编译环境中,由于 'gets' 函数已被弃用并视为安全漏洞。本文将详细介绍如何通过修改源代码和配置文件来解决这一问题。 ... [详细]
  • 深入解析 Android IPC 中的 Messenger 机制
    本文详细介绍了 Android 中基于消息传递的进程间通信(IPC)机制——Messenger。通过实例和源码分析,帮助开发者更好地理解和使用这一高效的通信工具。 ... [详细]
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • 本文探讨了在 SQL Server 中使用 JDBC 插入数据时遇到的问题。通过详细分析代码和数据库配置,提供了解决方案并解释了潜在的原因。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 创建一个功能齐全的联系我们表单,包括布局和样式设计。 ... [详细]
  • 本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作,并介绍了获取本地文件路径的方法。HTML5提供了一系列API,使得这些操作变得更加简便和安全。 ... [详细]
  • 本文详细介绍如何使用 Python 集成微信支付的三种主要方式:Native 支付、APP 支付和 JSAPI 支付。每种方式适用于不同的应用场景,如 PC 网站、移动端应用和公众号内支付等。 ... [详细]
  • 本文详细介绍了Linux内核中misc设备驱动框架的实现原理及应用方法,包括misc设备的基本概念、驱动框架的初始化过程、数据结构分析以及设备的注册与注销流程。 ... [详细]
author-avatar
Naive
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有