web-dev-qa-db-fra.com

Documentation pour le popup automatique "Continue as" de Google

Comment puis-je obtenir l'un des cadres automatiques "Se connecter avec Google" sur mon site? Cela se produit si vous êtes connecté à un compte et visitez Kayak.com par exemple. Tout documentation que je rencontre est pour l'ancien bouton "Se connecter avec Google".

Voici à quoi cela ressemble en visitant Kayak.com.

enter image description here

google-signingoogle-identity
14
Hem

Modifier (9 novembre 2019):

Il semble que les liens mènent maintenant à 404. Je ne trouve aucune information sur la disparition de la connexion One Tap.

Réponse originale:

J'ai eu la même question et j'ai trouvé ceci (j'ai googlé "google automatic login"):

https://developers.google.com/identity/one-tap/web/

Les captures d'écran dont ils disposent sont pour mobile, mais la fenêtre contextuelle est exactement la même que celle que vous voyez sur d'autres applications Web.

Si vous cliquez sur l'onglet Guides , vous devriez y trouver des documents dont un Mise en route section:

https://developers.google.com/identity/one-tap/web/get-started

Cela vous montrera comment obtenir la configuration des informations d'identification comme vous le feriez pour n'importe quelle autre API Google, comme API JavaScript Maps par exemple.

Une fois que vous avez vos informations d'identification, vous chargez la bibliothèque de Google dans votre fichier HTML principal ou partout où vous chargez vos autres scripts, si vous en avez:

<script src="https://smartlock.google.com/client"></script>

Vous devriez alors être en mesure d'accéder à la bibliothèque via l'objet googleyolo :

window.onGoogleYoloLoad = (googleyolo) => {
  // The 'googleyolo' object is ready for use.
};

Ce que vous voyez dans cette capture d'écran (et ce que j'ai vu également) semble être un appel à googleyolo.hint().

Cela semble dépendre du fait que l'utilisateur s'est déjà connecté ou non au site. S'ils ont ou s'ils ont un mot de passe enregistré pour le site dans leur navigateur, il devrait alors les connecter automatiquement ou du moins le demander. Cette API gère également les inscriptions en plus de celles qui utilisent l'appel googleyolo.hint() mentionné précédemment.

Des exemples de code plus détaillés peuvent être trouvés sur la page Guides .

Vous aurez également besoin de contrôler le backend de ce site pour vérifier l'intégrité des jetons ID à partir d'une googleyolo.hint() ou googleyolo.retrieve() appel. Cela est couvert à https://developers.google.com/identity/one-tap/web/idtoken-auth .

11
Chris Gala