Guide pas à pas de la connexion avec Google et Apple

Ce guide s'adresse à l'administrateur d'un compte en marque blanche. Il vous montre ce qu'il faut créer chez Google et chez Apple pour que vos clients puissent utiliser Continuer avec Google et Continuer avec Apple sur votre propre domaine. Vous faites chaque partie une seule fois. Passez à Google ou à Apple ci-dessous, et terminez dans Paramètres > Connexion sur votre domaine.

Les deux fournisseurs ont besoin de deux adresses de votre part. Paramètres > Connexion sur votre domaine les affiche pour votre domaine, chacune avec un bouton de copie : copiez-les toujours à cet endroit et collez-les, ne les saisissez jamais, car un seul caractère erroné suffit pour que le fournisseur refuse la connexion. Elles ressemblent à ceci, à titre d'orientation seulement :

• JavaScript origin : votre domaine avec https devant et rien après (ni chemin, ni barre oblique finale)
• Adresse de retour Google (redirect URI) : <your domain>/gorouter/ai/wl/oauth/google/callback
• Adresse de retour Apple (Return URL) : <your domain>/gorouter/ai/wl/oauth/apple/callback

Google et Apple renomment leurs menus de temps en temps. Si un libellé ci-dessous n'est pas exactement celui que vous voyez, cherchez le plus proche : les étapes restent les mêmes.

Google#

Il vous faut un compte Google que vous contrôlez. La connexion de base utilisée ici ne demande que le nom, l'adresse e-mail et la photo de profil du client (les scopes openid, email et profile), et rien d'autre.

1. Se connecter et choisir un projet#

1. Ouvrez la Google Cloud Console (console.cloud.google.com) et connectez-vous avec votre compte Google.
2. Dans le sélecteur de projet de la barre du haut, choisissez un projet, ou cliquez sur New project, donnez-lui un nom et créez-le. Vérifiez que ce projet est bien sélectionné avant de continuer.

2. Configurer l'écran de consentement#

C'est l'écran que Google montre à vos clients. Il se trouve dans Google Auth Platform.

1. Ouvrez Google Auth Platform et cliquez sur Get started.
2. App information : saisissez le nom d'application que vos clients reconnaîtront (votre propre marque, pas la nôtre) et une adresse e-mail d'assistance.
3. Audience : choisissez External. Internal ne laisse se connecter que les comptes de votre propre organisation Google Workspace, ce qui ne convient pas à des clients.
4. Contact information : saisissez une adresse e-mail où Google peut vous écrire au sujet du projet.
5. Acceptez la politique relative aux données des utilisateurs et cliquez sur Create.

3. Ajouter des utilisateurs de test, ou publier l'application#

Une nouvelle application démarre en statut Testing. Dans cet état, Google limite la connexion aux adresses que vous listez, 100 au maximum.

• Pour les lister, ouvrez Audience, trouvez Test users et ajoutez chaque adresse Google qui se connectera. Faites-le pour vous-même et pour toute personne qui essaie la connexion avant la publication.
• Pour que chaque client puisse se connecter, publiez l'application : dans Audience, faites passer le statut de publication de Testing à In production avec le bouton de publication. Comme cette connexion n'utilise que les scopes de base openid, email et profile, Google n'exige pas de revue de vos scopes et n'affiche pas aux clients d'avertissement « application non validée ». Google peut toutefois demander que vous validiez votre marque avant d'afficher le nom et le logo de l'application sur l'écran de consentement : le Verification Center de Google Auth Platform vous l'indique.

4. Créer le client#

1. Dans Google Auth Platform, ouvrez Clients et cliquez sur Create client.
2. Pour Application type, choisissez Web application et donnez-lui un nom.
3. Sous Authorized JavaScript origins, cliquez sur Add URI et collez le JavaScript origin copié depuis Paramètres > Connexion sur votre domaine.
4. Sous Authorized redirect URIs, cliquez sur Add URI et collez l'adresse de retour Google copiée au même endroit.
5. Cliquez sur Create.

5. Copier le Client ID et le Client secret#

Google affiche maintenant le Client ID et le Client secret. Copiez les deux tout de suite. Pour un nouveau client, Google n'affiche le secret qu'à cet instant et n'en garde ensuite que les quatre derniers caractères. Si vous le perdez, créez un nouveau secret depuis la page du client.

6. Terminer dans les paramètres#

Dans Paramètres > Connexion sur votre domaine, collez le Client ID et le Client secret dans la section Google, activez Google et enregistrez.

Si Google refuse#

• La console n'accepte pas l'adresse de retour à cause de son domaine : ouvrez Branding, trouvez Authorized domains et ajoutez votre domaine, puis ajoutez de nouveau l'adresse.
• redirect_uri_mismatch juste après la création du client : Google peut mettre de quelques minutes à plusieurs heures pour appliquer un changement. Patientez et réessayez. Si l'erreur persiste, comparez caractère par caractère l'adresse du client et celle des paramètres.
• L'accès est bloqué pour une seule personne : si l'application est encore en Testing, ajoutez l'adresse de cette personne sous Test users, ou publiez l'application.

Apple#

Il vous faut une adhésion payante à l'Apple Developer Program : sans elle, Apple ne vous laisse pas créer ces éléments. Toutes les étapes ci-dessous se font dans votre compte Apple Developer (developer.apple.com/account), sous Certificates, Identifiers & Profiles.

1. Un App ID avec Sign in with Apple#

Apple rattache un site web à un App ID. Si votre compte a déjà un App ID avec Sign in with Apple activé, utilisez-le et passez à l'étape suivante. Sinon :

1. Ouvrez Identifiers et cliquez sur le bouton d'ajout (+).
2. Choisissez App IDs, puis le type App, et continuez.
3. Saisissez une description et un bundle ID de votre choix, par exemple de la forme com.yourcompany.signin.
4. Dans la liste des capabilities, cochez Sign in with Apple, puis continuez et enregistrez.

2. Créer le Services ID#

1. Dans Identifiers, cliquez sur le bouton d'ajout (+), choisissez Services IDs et continuez.
2. Saisissez une description et un identifiant de votre choix, par exemple com.yourcompany.signin.web. Cet identifiant est votre Services ID : notez-le.
3. Continuez et enregistrez, puis ouvrez le nouveau Services ID dans la liste.
4. Cochez Sign in with Apple et cliquez sur Configure.
5. Comme Primary App ID, choisissez l'App ID de l'étape précédente.
6. Dans les URL du site web, ajoutez votre domaine sous Domains and Subdomains, sans le préfixe https, par exemple app.yourcompany.com.
7. Sous Return URLs, collez l'adresse de retour Apple copiée depuis Paramètres > Connexion sur votre domaine.
8. Cliquez sur Done, puis sur Continue, puis sur Save.

3. Créer la clé#

1. Ouvrez Keys et cliquez sur le bouton d'ajout (+).
2. Saisissez un nom de clé, cochez Sign in with Apple, puis cliquez sur Configure à côté.
3. Choisissez le même primary App ID et enregistrez.
4. Continuez et enregistrez la clé.
5. Cliquez sur Download et conservez le fichier, qui se termine par .p8. Apple ne vous laisse le télécharger qu'une seule fois. Un primary App ID peut avoir deux clés au maximum.
6. Notez le Key ID affiché pour la clé.

4. Trouver le Team ID#

Ouvrez Membership details dans votre compte développeur. Le Team ID, de dix caractères, y figure.

5. Terminer dans les paramètres#

Dans Paramètres > Connexion sur votre domaine, saisissez dans la section Apple le Services ID, le Team ID et le Key ID, envoyez le fichier .p8, activez Apple et enregistrez.

Bon à savoir#

• Apple ne transmet le nom d'un client que lors de sa première connexion, pas ensuite.
• Un client peut choisir de masquer son e-mail. Apple fournit alors une adresse de relais privée, qui transmet vers la vraie.
• Pour que vos e-mails parviennent à ces adresses de relais, enregistrez le domaine ou l'adresse depuis laquelle vous envoyez sous Sign in with Apple for Email Communication : dans Certificates, Identifiers & Profiles, ouvrez Services, cliquez sur Configure à côté, puis ajoutez-le sous Email Sources. Publiez aussi un enregistrement SPF pour ce domaine, comme Apple le demande.
• Si Apple refuse la connexion, vérifiez que le domaine et l'adresse de retour du Services ID sont exactement ceux affichés dans les paramètres, et que la clé n'a pas été révoquée.

Quand vous avez terminé#

N'activez une méthode qu'une fois ses champs remplis, puis enregistrez. Essayez-la dans une fenêtre de navigation privée sur votre propre domaine. Le résumé de la fonction se trouve dans l'article Connexion sur votre domaine avec Google, Apple ou un code par e-mail.