Se connecter sur les téléviseurs et les périphériques d'entrée limités

Vous pouvez autoriser les utilisateurs à se connecter à votre application avec leur compte Google sur des appareils aux fonctionnalités d'entrée limitées, tels que les téléviseurs connectés à Internet.

L'application affiche un code court et une URL de connexion. Ensuite, l'utilisateur ouvre l'URL de connexion dans un navigateur Web, saisit le code et autorise l'application à accéder à ses informations de connexion. Enfin, l'application reçoit une confirmation et l'utilisateur est connecté.

Pour utiliser ce flux de connexion, l'application doit s'exécuter sur un appareil répondant aux critères suivants:

  • L'appareil doit pouvoir afficher une URL de 40 caractères et un code utilisateur de 15 caractères, ainsi que des instructions.
  • L'appareil doit être connecté à Internet.

Obtenir un ID et un code secret de client

Votre application a besoin d'un ID client et d'un code secret OAuth 2.0 pour envoyer des requêtes aux points de terminaison de connexion de Google.

Pour trouver l'ID client et le code secret du client pour votre projet, procédez comme suit:

  1. Sélectionnez un identifiant OAuth 2.0 existant ou ouvrez la page Identifiants.
  2. Si vous ne l'avez pas déjà fait, créez les identifiants OAuth 2.0 de votre projet en cliquant sur Créer des identifiants > ID client OAuth et en fournissant les informations nécessaires à la création des identifiants.
  3. Recherchez l'ID client dans la section ID client OAuth 2.0. Pour plus d'informations, cliquez sur l'ID client.

Si vous créez un ID client, sélectionnez le type d'application Téléviseurs et périphériques d'entrée limités.

Obtenir un code utilisateur et une URL de validation

Lorsqu'un utilisateur demande à se connecter à l'aide d'un compte Google, vous obtenez un code utilisateur et une URL de validation en envoyant une requête HTTP POST au point de terminaison de l'appareil OAuth 2.0, https://oauth2.googleapis.com/device/code. Dans votre requête, incluez votre ID client et la liste des champs d'application dont vous avez besoin. Si vous souhaitez connecter uniquement les utilisateurs avec leur compte Google, demandez uniquement les champs d'application profile et email. Si vous souhaitez demander l'autorisation d'appeler une API compatible au nom des utilisateurs, demandez les champs d'application requis en plus des champs d'application profile et email.

Voici un exemple de requête de code utilisateur:

POST /device/code HTTP/1.1
Host: oauth2.googleapis.com
Content-Type: application/x-www-form-urlencoded

client_id=YOUR_GOOGLE_CLIENT_ID&scope=email%20profile

En utilisant curl :

curl -d "client_id=YOUR_GOOGLE_CLIENT_ID&scope=email profile" https://oauth2.googleapis.com/device/code

La réponse est renvoyée sous la forme d'un objet JSON:

 {
  "device_code" : "4/4-GMMhmHCXhWEzkobqIHGG_EnNYYsAkukHspeYUk9E8",
  "user_code" : "GQVQ-JKEC",
  "verification_url" : "https://www.google.com/device",
  "expires_in" : 1800,
  "interval" : 5
}

Votre application affiche les valeurs user_code et verification_url à l'utilisateur et, en même temps, interroge le point de terminaison de connexion au interval spécifié jusqu'à ce que l'utilisateur se connecte ou que le délai spécifié par expires_in soit écoulé.

Afficher le code utilisateur et l'URL de validation

Une fois que vous avez reçu un code utilisateur et une URL de validation du point de terminaison de l'appareil, affichez-les et demandez à l'utilisateur d'ouvrir l'URL et de saisir le code utilisateur.

Les valeurs de verification_url et user_code sont susceptibles d'être modifiées. Concevez votre interface utilisateur de sorte qu'elle puisse gérer les limites suivantes:

  • user_code doit être affiché dans un champ suffisamment large pour gérer 15 caractères de taille W.
  • verification_url doit être affiché dans un champ suffisamment large pour gérer une chaîne d'URL de 40 caractères.

Les deux chaînes peuvent contenir n'importe quel caractère imprimable du jeu de caractères US-ASCII.

Lorsque vous affichez la chaîne user_code, ne la modifiez en aucune façon (par exemple, en changeant la casse ou en insérant d'autres caractères de mise en forme), car votre application pourrait ne plus fonctionner si le format du code change par la suite.

Si vous le souhaitez, vous pouvez modifier la chaîne verification_url en supprimant le schéma de l'URL à des fins d'affichage. Dans ce cas, assurez-vous que votre application peut gérer les variantes "http" et "https". Ne modifiez pas la chaîne verification_url.

Lorsque l'utilisateur accède à l'URL de validation, une page semblable à la suivante s'affiche:

Connecter un appareil en saisissant un code

Une fois que l'utilisateur a saisi le code utilisateur, le site Google Sign-In affiche un écran de consentement semblable à celui-ci:

Exemple d'écran de consentement pour un client d'appareil

Si l'utilisateur clique sur Autoriser, votre application peut obtenir un jeton d'ID pour identifier l'utilisateur, un jeton d'accès pour appeler les API Google et un jeton d'actualisation pour acquérir de nouveaux jetons.

Obtenir un jeton d'identification et un jeton d'actualisation

Une fois que votre application a affiché le code utilisateur et l'URL de validation, commencez à interroger le point de terminaison du jeton (https://oauth2.googleapis.com/token) avec le code de l'appareil que vous avez reçu du point de terminaison de l'appareil. Interrogez le point de terminaison du jeton à l'intervalle, en secondes, spécifié par la valeur interval.

Voici un exemple de requête:

POST /token HTTP/1.1
Host: oauth2.googleapis.com
Content-Type: application/x-www-form-urlencoded

client_id=YOUR_GOOGLE_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&code=DEVICE_CODE&grant_type=http://oauth.net/grant_type/device/1.0

En utilisant curl :

curl -d "client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&code=YOUR_DEVICE_CODE&grant_type=http://oauth.net/grant_type/device/1.0" https://oauth2.googleapis.com/token

Si l'utilisateur n'a pas encore approuvé la demande, la réponse est la suivante:

{
  "error" : "authorization_pending"
}

Votre application doit répéter ces requêtes à un taux qui ne dépasse pas la valeur de interval. Si votre application interroge trop rapidement, la réponse est la suivante:

{
  "error" : "slow_down"
}

Une fois que l'utilisateur s'est connecté et a accordé à votre application l'accès aux champs d'application demandés, la réponse à la requête suivante de votre application inclut un jeton d'ID, un jeton d'accès et un jeton d'actualisation:

{
  "access_token": "ya29.AHES6ZSuY8f6WFLswSv0HZLP2J4cCvFSj-8GiZM0Pr6cgXU",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "1/551G1yXUqgkDGnkfFk6ZbjMMMDIMxo3JFc8lY8CAR-Q",
  "id_token": "eyJhbGciOiJSUzI..."
}

Dès réception de cette réponse, votre application peut décoder le jeton d'ID pour obtenir des informations de base sur le profil de l'utilisateur connecté ou envoyer le jeton d'ID au serveur backend de votre application pour s'authentifier de manière sécurisée auprès du serveur. Votre application peut également utiliser le jeton d'accès pour appeler les API Google autorisées par l'utilisateur.

Les jetons d'ID et les jetons d'accès ont une durée de vie limitée. Pour que l'utilisateur reste connecté au-delà de la durée de vie des jetons, stockez le jeton d'actualisation et utilisez-le pour demander de nouveaux jetons.

Obtenir des informations de profil utilisateur à partir du jeton d'ID

Vous pouvez obtenir des informations de profil sur l'utilisateur connecté en décodant le jeton d'ID avec n'importe quelle bibliothèque de décodage JWT. Par exemple, en utilisant la bibliothèque JavaScript jwt-decode Auth0:

var user_profile = jwt_decode(<var>id_token</var>);

// The "sub" field is available on all ID tokens. This value is unique for each
// Google account and can be used to identify the user. (But do not send this
// value to your server; instead, send the whole ID token so its authenticity
// can be verified.)
var user_id = user_profile["sub"];

// These values are available when you request the "profile" and "email" scopes.
var user_email = user_profile["email"];
var email_verified = user_profile["email_verified"];
var user_name = user_profile["name"];
var user_photo_url = user_profile["picture"];
var user_given_name = user_profile["given_name"];
var user_family_name = user_profile["family_name"];
var user_locale = user_profile["locale"];

Plus d'informations