Connexion sur un téléviseur et des périphériques de saisie limités

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Vous pouvez autoriser les utilisateurs à se connecter à votre application avec leur compte Google sur des appareils dont les fonctionnalités de saisie sont limitées, comme les téléviseurs connectés à Internet.

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

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

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

Obtenir un ID client et un code secret du client

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

Pour trouver l'ID et le code secret du client, 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 > l'ID client OAuth, puis en fournissant les informations nécessaires pour créer les identifiants.
  3. Recherchez la ID client dans la section ID client OAuth 2.0. Pour plus de détails, 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 à entrée limitée.

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 OAuth 2.0 de https://oauth2.googleapis.com/device/code. Incluez votre ID client et une liste des champs d'application dont vous avez besoin dans la requête. Si vous souhaitez uniquement connecter les utilisateurs avec leur compte Google, demandez uniquement les champs d'application profile et email. Si vous souhaitez demander une autorisation pour 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 pour un code utilisateur:

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

client_id=CLIENT_ID&scope=email%20profile

En utilisant curl :

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

La réponse est renvoyée en tant qu'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 auprès de l'utilisateur, et interroge en même temps 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 provenant 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 des attributs verification_url et user_code sont susceptibles d'être modifiées. Concevez votre interface utilisateur de façon à pouvoir gérer les limites suivantes:

  • user_code doit être affiché dans un champ suffisamment large pour gérer 15 caractères 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 modifiez pas la chaîne de quelque manière que ce soit (par exemple, en changeant la casse ou en insérant d'autres caractères de mise en forme), car votre application risque de 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. 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 de connexion Google 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 permettant d'appeler les API Google, et un jeton d'actualisation pour acquérir de nouveaux jetons.

Obtenir un jeton d'ID 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 d'appareil que vous avez reçu depuis le 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=CLIENT_ID&client_secret=CLIENT_SECRET&code=DEVICE_CODE&grant_type=http://oauth.net/grant_type/device/1.0

En utilisant curl :

curl -d "client_id=CLIENT_ID&client_secret=CLIENT_SECRET&code=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 débit ne dépassant pas la valeur de interval. Si votre application effectue un sondage trop rapidement, la réponse est la suivante:

{
  "error" : "slow_down"
}

Une fois que l'utilisateur s'est connecté et accorde à votre application l'accès aux champs d'application demandés, la réponse à la requête suivante 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..."
}

Une fois cette réponse reçue, votre application peut décoder le jeton d'ID afin d'obtenir des informations de base sur le profil de l'utilisateur connecté. Elle peut également envoyer le jeton d'ID au serveur backend de votre application pour s'authentifier de manière sécurisée. Elle peut également utiliser le jeton d'accès pour appeler les API Google que l'utilisateur a autorisées.

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

Obtenir les 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 à l'aide de n'importe quelle bibliothèque de décodage JWT. Par exemple, utilisez la bibliothèque JavaScript jwt-decode d'Auth0:

var user_profile = jwt_decode(id_token);

// 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