Comment utiliser L'API de connexion Google avec Cordova / Phonegap
Je veux utiliser "Connexion avec Google" dans mon application Phonegap. J'ai lu beaucoup d'articles mais je n'ai pas pu savoir comment cela se fait. Merci à l'Avance. J'ai essayé d'utiliser oAuth2 pour les "Applications installées" selon cette URL . Mais les utilisateurs de l'application doivent copier manuellement le code et le coller dans mon application. J'utilise built.io Connexion fédérée , si elle est pertinente.
4 réponses
Ajoutez ce code dans un fichier js et incluez - le dans votre projet. lorsque vous souhaitez accéder à l'api de connexion google sur le bouton, cliquez sur l'appel function callGoogle()
rest sera effectué par ce code. N'oubliez pas d'ajouter vos clés client id et Client_Secret. Sa fonctionne très bien pour moi. Vous avez besoin 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
}
});
}
Google a abandonné le support de la réponse acceptée ci-dessus! Après le 20 avril 2017, l'utilisation du navigateur intégré comme décrit par @Deep Mehta ne sera plus prise en charge. Si vous utilisez la réponse acceptée, cela va commencer à échouer très bientôt.
Voici le post de Google sur le changement: https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html
Heureusement, il y a un nouveau plugin qui enveloppe toute la funcitonality que vous devez faire ceci:
Https://github.com/EddyVerbruggen/cordova-plugin-googleplus et sur NPM https://www.npmjs.com/package/cordova-plugin-googleplus
Voici un article sur la façon de l'utiliser dans Ionic 1 et 2 aussi: http://blog.ionic.io/google-oauth-changes
Encore une fois - N'utilisez pas la réponse acceptée! Il échouera après avril 20 2017.
Je recommande ce plugin cordova: https://www.npmjs.com/package/cordova-plugin-googleplus c'est assez récent mais je viens de l'ajouter à mon application et il semble faire l'affaire!
Une autre implémentation qui fonctionne bien ici: https://github.com/valenzia10/PhonegapGoogleLogin