webentwicklung-frage-antwort-db.com.de

So verwenden Sie die Google Login-API mit Cordova/Phonegap

Ich möchte in meiner Phonegap App "Mit Google anmelden" verwenden. Ich habe viele Artikel gelesen, konnte aber nicht herausfinden, wie es gemacht wird. Danke im Voraus. Ich habe versucht, oAuth2 für "installierte Anwendungen" gemäß diesem URL zu verwenden. Dann müssen die App-Benutzer den Code manuell kopieren und in meine App einfügen. Ich benutze built.io Federated Login , wenn es relevant ist.

26

fügen Sie diesen Code in eine JS-Datei ein und fügen Sie sie in Ihr Projekt ein. wenn Sie auf google login api on button zugreifen möchten, klicken Sie auf den Aufruf function callGoogle() rest wird von diesem Code ausgeführt. Vergessen Sie nicht, Ihre Client-ID und Client_Secret-Schlüssel hinzuzufügen. Es funktioniert gut für mich. Sie benötigen ein 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
        }
    });
}
32
Deep Mehta

Google hat die Unterstützung für die oben akzeptierte Antwort eingestellt! Nach dem 20. April 2017 wird die Verwendung des von @Deep Mehta beschriebenen In-App-Browsers nicht mehr unterstützt. Wenn Sie die akzeptierte Antwort verwenden, wird dies sehr bald fehlschlagen.

Hier ist der Beitrag von Google über die Änderung: https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html

Glücklicherweise gibt es ein neues Plugin, das alle Funktionen enthält, die Sie dazu benötigen:

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

Hier ist ein Artikel zur Verwendung in Ionic 1 und 2 auch: http://blog.ionic.io/google-oauth-changes

Nochmals - VERWENDEN SIE NICHT DIE ANNEHMERNAHME Es wird nach dem 20. April 2017 fehlschlagen.

23
Nico Westerdale

Ich empfehle dieses Cordova-Plugin: https://www.npmjs.com/package/cordova-plugin-googleplus Es ist ziemlich neu, aber ich habe es gerade meiner App hinzugefügt und es scheint den Trick zu tun!

4
ldeluca

Eine andere Implementierung, die hier gut funktioniert: https://github.com/valenzia10/PhonegapGoogleLogin

0
Jason Washo

Es ist 2019 und die Google+ API ist geschlossen.

Google hat einen Artikel zum Authentifizieren mit der Firebase-API: https://firebase.google.com/docs/auth/web/cordova

0
Alex