️ À partir de la version 6.0.0 du plugin, la version minimale requise de Cordova-ios est 4.5.0. Besoin d'utiliser une version inférieure de Cordova-ios ? Utilisez la version 5.3.2 ou inférieure du plugin.
idToken
serverAuthCode
Ce plugin vous permet d'authentifier et d'identifier les utilisateurs avec Google Sign-In sur iOS et Android. Prêt à l'emploi, vous recevrez un e-mail, un nom d'affichage, un prénom, un nom de famille, l'URL de la photo de profil et un identifiant d'utilisateur. Vous pouvez également le configurer pour obtenir un idToken et un serverAuthCode.
Ce plugin encapsule uniquement l'accès à l'API Google Sign-In. Un accès supplémentaire à l'API doit être mis en œuvre par cas d'utilisation et par développeur.
Androïde
IOS
Pour communiquer avec Google, vous devez effectuer une configuration fastidieuse, désolé.
Il est (fortement) recommandé d’utiliser le même projet pour iOS et Android.
Accédez à votre config.xml
et assurez-vous que le nom de votre package (c'est-à-dire l'ID de l'application) est celui que vous souhaitez. Utilisez ce nom de package lors de la configuration d’iOS et d’Android dans les étapes suivantes ! Si vous ne le faites pas, vous obtiendrez probablement une erreur 12501, « utilisateur annulé » même si vous n'avez jamais annulé le processus de connexion.
Cette étape est particulièrement importante si vous utilisez un framework tel que Ionic pour échafauder votre projet. Lorsque vous créez le projet, le config.xml
a un nom de package réservé, par exemple com.ionic.*, afin que vous puissiez commencer à développer immédiatement.
xml version = ' 1.0 ' encoding = ' utf-8 ' ?>
< widget id = " ** REPLACE THIS VALUE ** " ...>
...
widget >
La plate-forme de navigateur nécessite un WEB_APPLICATION_CLIENT_ID
valide généré sur la Google Developer Console. Assurez-vous d'avoir ajouté votre adresse URL (exemple : http://localhost:3000
) à la section Origines JavaScript autorisées . Voir cette capture d'écran par exemple
Pour obtenir votre iOS REVERSED_CLIENT_ID
, générez un fichier de configuration ici. Ce fichier GoogleService-Info.plist
contient le REVERSED_CLIENT_ID
dont vous aurez besoin lors de l'installation. Cette valeur n'est nécessaire que pour iOS.
Le REVERSED_CLIENT_ID
est également connu sous le nom de « schéma d'URL iOS » dans la console du développeur.
La connexion sur iOS amène l'utilisateur à un SafariViewController via le SDK Google, au lieu du navigateur Safari séparé.
Pour configurer Android, générez un fichier de configuration ici. Activez Google Sign-In et ajoutez une application Android pour ajouter l'empreinte digitale SHA1. Une fois Google Sign-In activé, Google créera automatiquement les informations d'identification nécessaires dans la Developer Console pour le Web et Android. Il n'est pas nécessaire d'ajouter le fichier google-services.json généré dans votre projet cordova. Vous devrez peut-être configurer l'écran de consentement.
Assurez-vous d'exécuter les étapes keytool
comme expliqué ici, sinon l'authentification échouera (faites-le pour les magasins de clés de version et de débogage).
IMPORTANT:
keytool
, montre 2 types d'empreintes digitales de certificat, la Release et la Debug , lors de la génération du fichier de configuration, il est préférable d'utiliser l'empreinte digitale du certificat Debug , après cela, vous devez aller sur Google Credentials Manager, et créer manuellement un identifiant pour le client OAuth2 avec l'empreinte digitale de votre certificat de version . Cela est nécessaire au travail de votre application sur les versions de développement et de production. $ keytool -exportcert -keystore -list -v -alias
La connexion sur Android utilisera les comptes connectés sur l'appareil de l'utilisateur.
Pour configurer la version des services Google Play, vous pouvez utiliser le paramètre PLAY_SERVICES_VERSION (avec la valeur 11.8.0 par défaut). Ceci est utile afin d'éviter les conflits avec d'autres plugins qui utilisent une autre version différente du service Google Play, car ils DOIVENT être la même version.
Google re-signe votre application avec un certificat différent lorsque vous la publiez sur le Play Store. Une fois votre application publiée, copiez l'empreinte SHA-1 du "Certificat de signature d'application", trouvé dans la section "Signature d'application" sous "Gestion des versions", dans la console Google Play. Collez cette empreinte digitale dans l'ID client Release OAuth dans Google Credentials Manager.
Si vous souhaitez récupérer un idToken
ou serverAuthCode
du processus de connexion, vous devrez transmettre l'ID client de l'application Web de votre projet. Vous pouvez le trouver sur la page d'informations d'identification de l'API de votre projet dans la console du développeur Google.
Ce plugin est compatible avec :
Voici comment cela fonctionne (sauvegardez d'abord votre projet !) :
Utilisation de la CLI Cordova et de npm :
$ cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid --variable WEB_APPLICATION_CLIENT_ID=mywebapplicationclientid
$ cordova prepare
Utilisation de la CLI Cordova pour récupérer la dernière version de GitHub :
$ cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid --variable WEB_APPLICATION_CLIENT_ID=mywebapplicationclientid
$ cordova prepare
IMPORTANT:
Veuillez noter que myreversedclientid
est un espace réservé pour le clientId inversé que vous trouvez dans votre fichier de configuration iOS. N'entourez pas cette valeur de guillemets. (Applications iOS uniquement)
Si vous créez une application hybride (iOS et Android) ou une application Android, vous devez remplacer myreversedclientid
par la valeur inversée de l'ID client dans vos informations d'identification de version générées à l'étape 3, sur la console du développeur Google, ce sera : "com .googleusercontent.apps. uniqueId
" , sans guillemets. Exemple : "123-abc123.apps.googleusercontent.com" devient "com.googleusercontent.apps.123-abc123".
myreversedclientid
est un espace réservé pour l'ID client Oauth spécifiquement généré pour l'application Web dans la console de votre développeur Google.
GooglePlus.js est automatiquement intégré. Il n'est pas nécessaire de modifier ou d'ajouter quoi que ce soit dans votre code HTML.
Ajoutez ceci à votre config.xml :
Pour la version (stable) NPM :
< plugin name = " cordova-plugin-googleplus " source = " npm " >
< variable name = " REVERSED_CLIENT_ID " value = " myreversedclientid " />
< variable name = " WEB_APPLICATION_CLIENT_ID " value = " mywebapplicationclientid " />
plugin >
Pour la dernière version de Git (non recommandée) :
< plugin spec = " https://github.com/EddyVerbruggen/cordova-plugin-googleplus.git " source = " git " >
< variable name = " REVERSED_CLIENT_ID " value = " myreversedclientid " />
< variable name = " WEB_APPLICATION_CLIENT_ID " value = " mywebapplicationclientid " />
< plugin >
Ce plugin utilise le gestionnaire de dépendances CocoaPods afin de satisfaire les dépendances de la bibliothèque iOS Google SignIn SDK.
Par conséquent, assurez-vous que Cocoapods est installé dans votre environnement de construction iOS - les instructions de configuration peuvent être trouvées ici. Assurez-vous également que votre dépôt Cocoapods local est à jour en exécutant pod repo update
.
Si vous créez votre projet dans Xcode, vous devez ouvrir YourProject.xcworkspace
(et non YourProject.xcodeproj
) afin que votre projet d'application Cordova et le projet Pods soient chargés dans Xcode.
Vous pouvez lister les dépendances des pods dans votre projet Cordova iOS en installant les dépendances cocoapods :
sudo gem install cocoapods-dependencies
cd platforms/ios/
pod dependencies
Consultez l'application de démonstration pour démarrer rapidement, ou blessez-vous et suivez ces étapes.
Notez qu'aucune de ces méthodes ne doit être appelée avant le déclenchement deviceready
.
Exemple:
document . addEventListener ( 'deviceready' , deviceReady , false ) ;
function deviceReady ( ) {
//I get called when everything's ready for the plugin to be called!
console . log ( 'Device is ready!' ) ;
window . plugins . googleplus . trySilentLogin ( ... ) ;
}
31/03/16 : Il n’est plus nécessaire de vérifier cette méthode au préalable. Il est conservé pour l’orthogonalité du code.
La fonction de connexion guide l'utilisateur tout au long du processus Google Auth. Tous les paramètres sont facultatifs, mais il y a quelques mises en garde.
Pour obtenir un idToken
sur Android, vous devez transmettre votre webClientId
(une erreur fréquente consiste à fournir l'ID client Android). Sur iOS, l' idToken
est inclus par défaut dans le résultat de connexion.
Pour obtenir un serverAuthCode
, vous devez transmettre votre webClientId
et le définir offline
sur true. Si la valeur hors ligne est vraie, mais qu'aucun webClientId n'est fourni, le serverAuthCode
ne sera PAS demandé.
Les étendues par défaut demandées sont profile
et email
(toujours demandé). Pour demander d’autres étendues, ajoutez-les sous forme de liste séparée par des espaces au paramètre scopes
. Ils seront demandés exactement tels qu'ils ont été transmis. Reportez-vous à la documentation Google Scopes pour plus d'informations sur les étendues valides qui peuvent être demandées. Par exemple, 'scope': 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/tasks'
.
Naturellement, afin d'utiliser des étendues ou des API supplémentaires, elles devront être activées dans la console du développeur de votre projet.
window . plugins . googleplus . login (
{
'scopes' : '... ' , // optional, space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.
'webClientId' : 'client id of the web app/server side' , // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
'offline' : true // optional, but requires the webClientId - if set to true the plugin will also return a serverAuthCode, which can be used to grant offline access to a non-Google server
} ,
function ( obj ) {
alert ( JSON . stringify ( obj ) ) ; // do something useful instead of alerting
} ,
function ( msg ) {
alert ( 'error: ' + msg ) ;
}
) ;
Le rappel de réussite (deuxième argument) obtient un objet JSON avec le contenu suivant, avec des exemples de données de mon compte Google :
obj . email // '[email protected]'
obj . userId // user id
obj . displayName // 'Eddy Verbruggen'
obj . familyName // 'Verbruggen'
obj . givenName // 'Eddy'
obj . imageUrl // 'http://link-to-my-profilepic.google.com'
obj . idToken // idToken that can be exchanged to verify user identity.
obj . serverAuthCode // Auth code that can be exchanged for an access token and refresh token for offline access
obj . accessToken // OAuth2 access token
Des informations utilisateur supplémentaires sont disponibles par cas d’utilisation. Ajoutez les étendues nécessaires à l'option scopes, puis renvoyez les informations à l'objet de résultat en cours de création dans les fonctions handleSignInResult
et didSignInForUser
sur Android et iOS, respectivement.
Sur Android, le rappel d'erreur (troisième argument) reçoit un code d'état d'erreur si l'authentification n'a pas réussi. Une description de ces codes d'état peut être trouvée sur le site Web des développeurs Android de Google à l'adresse GoogleSignInStatusCodes.
Sur iOS, le rappel d’erreur inclura une NSError localizedDescription.
Vous pouvez appeler trySilentLogin
pour vérifier s'ils sont déjà connectés à l'application et les connecter silencieusement s'ils le sont.
Si cela réussit, vous obtiendrez le même objet que celui obtenu par la fonction login
, mais si cela échoue, la boîte de dialogue d'authentification ne sera pas affichée à l'utilisateur.
L'appel de trySilentLogin
se fait de la même manière que login
, à l'exception du nom de la fonction.
window . plugins . googleplus . trySilentLogin (
{
'scopes' : '... ' , // optional - space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.
'webClientId' : 'client id of the web app/server side' , // optional - clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
'offline' : true , // Optional, but requires the webClientId - if set to true the plugin will also return a serverAuthCode, which can be used to grant offline access to a non-Google server
} ,
function ( obj ) {
alert ( JSON . stringify ( obj ) ) ; // do something useful instead of alerting
} ,
function ( msg ) {
alert ( 'error: ' + msg ) ;
}
) ;
Il est fortement recommandé que trySilentLogin soit implémenté avec les mêmes options que login, pour éviter toute complication potentielle.
Cela effacera le jeton OAuth2.
window . plugins . googleplus . logout (
function ( msg ) {
alert ( msg ) ; // do something useful instead of alerting
}
) ;
Cela effacera le jeton OAuth2, oubliera quel compte a été utilisé pour se connecter et déconnectera ce compte de l'application. Cela obligera l'utilisateur à autoriser à nouveau l'accès à l'application lors de sa prochaine connexion. Sachez que cet effet n'est pas toujours instantané. La déconnexion complète peut prendre du temps.
window . plugins . googleplus . disconnect (
function ( msg ) {
alert ( msg ) ; // do something useful instead of alerting
}
) ;
idToken
Documentation Google pour l'authentification avec un serveur backend
Comme le mentionnent les articles ci-dessus, l' idToken
peut être échangé contre des informations utilisateur afin de confirmer l'identité de l'utilisateur.
Remarque : Google ne souhaite pas que les données d'identité des utilisateurs soient envoyées directement à un serveur. L'idToken est leur méthode préférée pour envoyer ces données en toute sécurité, car elles doivent être vérifiées via leurs serveurs afin de pouvoir être décompressées.
Cela a plusieurs utilisations. Côté client, cela peut être un moyen de confirmer doublement l'identité de l'utilisateur, ou cela peut être utilisé pour obtenir des détails tels que le domaine de l'hôte de messagerie. C’est du côté serveur que l’ idToken
atteint vraiment son rythme de croisière. C'est un moyen simple de confirmer l'identité des utilisateurs avant de leur permettre d'accéder aux ressources de ce serveur ou avant d'échanger le serverAuthCode
contre un jeton d'accès et d'actualisation (voir la section suivante).
Si votre côté serveur n’a besoin que d’une identité, et non d’un accès supplémentaire au compte, il s’agit d’un moyen simple et sécurisé de fournir ces informations.
serverAuthCode
Documentation Google pour l'activation de l'accès côté serveur
Comme le mentionnent les articles ci-dessus, le serverAuthCode
est un élément qui peut être échangé contre un jeton d'accès et d'actualisation. Contrairement à idToken
, cela permet au côté serveur d'avoir un accès direct au compte Google de l'utilisateur.
Ce n'est que lors de la demande de connexion initiale que serverAuthCode
sera renvoyé. Si vous souhaitez recevoir le jeton une deuxième fois, vous pouvez d'abord vous déconnecter.
Vous avez plusieurs options en ce qui concerne cet échange : vous pouvez utiliser les API REST de Google pour les obtenir dans l'application hybride elle-même ou vous pouvez envoyer le code à votre serveur backend pour y être échangé, en utilisant la méthode nécessaire (Google fournit des exemples). pour Java, Python et JS/HTTP).
Comme indiqué précédemment, ce plugin concerne uniquement l'authentification et l'identité de l'utilisateur, donc toute utilisation du compte de l'utilisateur au-delà doit être mise en œuvre par cas d'utilisation et par application.
Q : Je n’arrive pas à faire fonctionner l’authentification sur Android. Et pourquoi n’y a-t-il pas de clé API ANDROID ?
R : Sur Android, vous devez exécuter les étapes keytool
, voir les instructions d'installation pour plus de détails.
Q : Après avoir suivi les étapes keytool
, je n'arrive toujours pas à faire fonctionner l'authentification sur Android. J'ai une "erreur 10" !!!
R : Vous devez obtenir le certificat SHA 1 à partir de votre fichier apk. Exécutez : keytool -list -printcert -jarfile
et copiez le SHA 1 sur votre ID client Android sur la console Google.
Q : OMG $@#* ! la version Android échoue
R : Vous devez avoir installé le référentiel de support Android et la bibliothèque de support Android dans le gestionnaire de SDK Android. Assurez-vous que vous utilisez une version assez à jour de ceux-ci.
Q : Pourquoi cela ne fonctionne-t-il pas sur mon émulateur Android ???
R : Assurez-vous que vous utilisez un appareil virtuel fonctionnant avec une cible Google APIs et/ou un processeur Google APIs !
Q : J'obtiens l'erreur 10 , que dois-je faire ?
R : Cela est probablement dû au fait que Cordova n'utilise pas le magasin de clés que vous souhaitez utiliser (par exemple parce que vous avez généré le vôtre). Veuillez consulter https://cordova.apache.org/docs/en/latest/guide/platforms/android/#signing-an-app pour savoir comment procéder. Certains ont signalé que vous deviez exécuter cordova clean
avant d'exécuter la build pour résoudre l'erreur 10.
Q : J'obtiens l'erreur 16 , que dois-je faire ?
R : C'est toujours un problème car la signature (ou l'empreinte digitale) de votre application Android une fois signée n'est pas ajoutée à la liste blanche OAuth de la console Google (ou Firebase). Veuillez vérifier si vous avez fait tout ce qui était nécessaire pour cela. Voir le mini-guide ci-dessous.
Tout d’abord, assurez-vous d’avoir entièrement lu et compris le guide sur la signature d’applications dans la documentation Android !
Après/pendant la lecture de cela, vérifiez si vous avez effectué correctement toutes les étapes 1 à 4 ci-dessous :
Afin de signer votre application (en développement ou en publication), vous devrez créer un magasin de clés local et une clé avec Android Studio ou via un terminal. Google dispose d'une fonctionnalité appelée "Google Play App Signing" qui permet de conserver la clé sur son serveur et de signer votre application pour vous, mais si vous utilisez cette fonctionnalité ou non, vous aurez besoin d'un magasin de clés local et d'une clé dans les deux cas.
Votre magasin de clés et votre clé locaux seront votre clé officielle de signature d'application.
Vous devrez ajouter sur liste blanche les empreintes digitales suivantes (au format SHA1) dans les paramètres Google OAuth :
debug.keystore
par défaut AndroidVotre magasin de clés local et votre clé seront votre « Clé de téléchargement » et une autre clé pour la « Clé de signature d'application » officielle est créée et gérée par Google.
Vous devez mettre sur liste blanche les empreintes digitales suivantes (au format SHA1) dans les paramètres Google Oauth :
debug.keystore
par défaut AndroidObtenez les empreintes digitales des clés ci-dessus (au format SHA1) pour pouvoir les mettre sur liste blanche.
Pour le debug.keystore
par défaut d'Android, faites :
keytool -exportcert -keystore /Users/myusername/.android/debug.keystore -list -v
Vous verrez l'empreinte SHA1 pour la clé de débogage dans le terminal. Copiez ça.
Pour le magasin de clés créé avec la clé (pour 2A ou 2B), faites :
keytool -exportcert -keystore /path/to/your/key/yourKeystoreFile.keystore -list -v
Vous verrez l'empreinte SHA1 pour la clé de débogage dans le terminal. Copiez ça.
Uniquement lorsque la signature d'application Google Play est activée (pour 2B). Vous pouvez trouver la clé que Google utilisera pour signer vos builds dans la console Google Play.
Condition : Vous devez avoir terminé les informations de base sur votre application Android, puis télécharger un APK signé pour les tests internes. Une fois celui-ci téléchargé, vous pourrez accéder au menu suivant :
Accédez à Gestion des versions > Signature d’application. Là tu verras
Celui "Télécharger" est (et devrait être) le même que la clé B. ci-dessus. Et le « Certificat de signature d'application » est la clé que Google utilisera. Copiez celui-ci.
Encore une fois, nous avons 2 options pour les mettre sur liste blanche. Projets qui utilisent uniquement Google Cloud Platform ou projets qui utilisent Firebase .
(Si vous utilisez également Firebase, vous pouvez ignorer cette étape)