Comment danser l'OAuth: une leçon pas à pas

Cinq six sept huit!

La plupart du temps, j’essaie d’apprendre quelque chose de nouveau et de le mettre en pratique, je commence rapidement à me sentir perdu dans une myriade de mouvements de danse. J'essaie désespérément de trouver la bonne façon de faire les choses, sans vraiment comprendre ce qui se passe ou comment je me suis retrouvé du mauvais côté de la pièce ...

J'essaye juste les choses jusqu'à ce que quelque chose fonctionne.

Peut-être à cause de la façon dont fonctionne mon processus d'apprentissage, ou peut-être que les guides et les didacticiels s'adressent à des personnes plus expérimentées ou techniques. Mais, une fois que j'ai fini de me concentrer sur le sujet, j'ai toujours l'impression qu'il devrait y avoir un guide simple pour comprendre les concepts clés et faciliter leur application dans un projet.

Donc cette fois, j'ai décidé d'arrêter de le souhaiter et de le faire moi-même, en utilisant la dernière chose que j'ai apprise.

Et cette chose était OAuth 2.0.

Qu'est-ce que OAuth?

Commençons par les bases: OAuth signifie Open Authorization. Il s'agit d'un processus par lequel une application ou un site Web peut accéder aux données d'utilisateurs privés à partir d'un autre site Web.

Cet autre site Web ne fonctionne généralement qu'en tant que fournisseur d'identité de confiance. Il donne à l'application demandeuse des informations de base sur vous afin que l'application puisse créer un profil. De cette façon, vous n'avez pas à remplir un formulaire d'inscription ennuyeux et à gérer un autre mot de passe

Vous l'avez déjà utilisé au moins un million de fois, en fait, vous l'avez utilisé chaque fois que vous avez cliqué sur "Se connecter avec Facebook / Google / GitHub /…". Ensuite, on vous a montré un écran de consentement qui affiche les informations de votre profil Facebook (disons) que vous autorisez that-hot-new-app.com à lire (et parfois à écrire). Après cela, puisque that-hot-new-app.com fait confiance à l'identité fournie par Facebook, ils peuvent créer un profil pour vous sur leur base de données en utilisant les données qu'ils ont reçues.

La communication entre that-hot-new-app.com et Facebook se termine généralement ici. C'est pourquoi votre photo de profil ne changera pas partout sur Internet si vous la modifiez sur Facebook. Ils ne reviennent jamais sur Facebook et demandent des données mises à jour.

Quand les rythmes marimba commencent à jouer…

Il existe un autre objectif pour la création de ce type de mécanisme, qui a beaucoup plus de potentiel: utiliser le fournisseur d'identité comme fournisseur de services (de manière continue). Cela signifie communiquer régulièrement avec lui pour fournir des fonctionnalités améliorées à vos utilisateurs.

Un bon exemple de cela est Relive, un service qui se connecte à différentes applications de suivi sportif pour créer des vidéos Earth View de votre course ou de votre course. Chaque fois que vous terminez une activité, Relive vous invite à proposer de créer une vidéo à partir de celle-ci. Si vous dites oui, ils le traiteront et vous informeront quand il sera prêt à se vanter des médias sociaux… je veux dire le partage

Il n'y a vraiment aucune différence technique entre ces deux usages. C'est pourquoi vous devez faire attention à l'endroit où vous vous connectez avec vos réseaux sociaux ou votre compte Google / Gmail.

Cela peut sembler effrayant, mais il n'y a vraiment rien à craindre. Gardez à l'esprit que vous autorisez that-hot-new-app.com à accéder aux informations vous concernant qui sont détaillées dans l'écran de consentement, éventuellement de manière récurrente. Soyez conscient des autorisations que vous accordez et assurez-vous de savoir comment les désactiver chaque fois que vous ne vous sentez plus en confiance.

Par exemple, si vous utilisez votre compte Google pour accéder à that-hot-new-app.com mais que vous ne souhaitez plus l'autoriser, accédez simplement aux paramètres de votre compte Google et désactivez leur accès.

Tous les principaux fournisseurs d'identité offrent un contrôle sur cela.

D'accord, mais comment dansez-vous l'OAuth?

Avant d'atterrir sur that-hot-new-app.com et même de cliquer sur «Connectez-vous avec YourFavoriteIdentityProvider», quelqu'un - probablement un développeur - doit créer une application sur le site du fournisseur.

C'est un moyen d'enregistrer that-hot-new-app.com afin que le fournisseur sache plus tard qui demande des données privées.

Dans cette étape, le développeur configurera des informations sur l'application, comme le nom ou le site Web de l'application et - plus important encore - un URI de redirection. Le fournisseur (comme Google ou Facebook) l'utilisera pour contacter l'application demandeuse et lui dire que l'utilisateur a dit oui

Je vous promets que vous n'aurez pas à l'écrire à la main, nous sommes fiers de notre absence de papier.

Une fois l'application enregistrée, le fournisseur donnera à that-hot-new-app.com un clientId et un clientSecret qui seront utilisés dans les communications entre eux. Ils fonctionnent comme un nom d'utilisateur et un mot de passe pour l'application.

Vous obtiendrez le clientID et clientSecret juste après avoir cliqué sur Enregistrer l'application

Il est très important que vous gardiez votre clientSecret dans un endroit sûr et que vous ne le partagiez pas avec des étrangers. Si quelqu'un y accède, il pourrait demander des données d'utilisateur privé au fournisseur en votre nom, puis les utiliser pour le mal!

Nous n'en voulons pas.

Mains sur la taille ou les épaules

Outre la configuration de toutes ces choses, le développeur doit savoir à quel type de données le fournisseur donne accès et comment elles sont segmentées.

Ces «segments» sont appelés étendues et définissent des droits d'accès, généralement séparés en catégories de lecture / écriture. Ainsi, par exemple, that-hot-new-app.com peut demander les portées «profile: read» et «contacts: read». Cela signifie qu'ils peuvent lire tout ce que le fournisseur attribue aux segments «profil» et «contacts». D'autres choses ne seront pas accessibles, par exemple vos publications ou le contenu que vous aimez.

Eh bien, pour simplifier les choses pour l'instant, disons que that-hot-new-app.com est un site Web qui s'intègre à Typeform, un service pour créer des formulaires beaux et intelligents et aussi la société pour laquelle je travaille. Vous voulez certainement la chose la plus chaude en ce moment, et rapide, donc sur leur site Web, vous cliquez sur "Se connecter avec Typeform" pour entrer directement dans l'action. Et après?

Voici un diagramme fait maison, biologique et sans cholestérol à utiliser comme carte pour le tout. Cela peut sembler un peu compliqué, mais ne vous inquiétez pas, nous examinerons chaque étape plus loin.

Des notes colorées font la joie de mon cœur

Autoriser: le premier pas de la danse OAuth

Donc, vous prenez l'initiative et cliquez sur «Se connecter avec Typeform». Ici, that-hot-new-app.com (THNA à partir de maintenant, parce que je suis fatigué d'écrire des mots séparés par des tirets) vous enverra au point de terminaison d'autorisation de Typeform (/ oauth / authorize) et fournira:

  • leur clientId (rappelez-vous, c'est le nom d'utilisateur de THNA)
  • leurs portées souhaitées (ou droits d'accès)
  • et leur URI de redirection à nouveau (Typeform le sait déjà depuis que nous avons configuré le tout, mais nous l'envoyons à nouveau comme une couche de sécurité supplémentaire)

Cette URL ressemblera à ceci:

https://api.typeform.com/oauth/authorize?client_id=yourClientId&scope=accounts:read+forms:read+results:read

Typeform utilisera ces informations pour générer un écran de consentement où vous pourrez examiner le type de choses que vous autorisez THNA à voir et à faire.

Une fois que vous aurez lu attentivement ce à quoi vous consentez et cliqué sur «Autoriser», Typeform vous enverra à l'URI de redirection avec un temporaire, comme ceci:

https://that-hot-new-app.com/auth/redirect?code=xxxXXXxxxXXXxxx

Jeton: il en faut 2 pour tangOAuth

Tous ces allers-retours donnent l'impression que quelqu'un vous emmène faire un tour de tango, non?

La deuxième étape de la danse OAuth est lorsque THNA reçoit ce code et l'échange contre un jeton OAuth.

THNA prend donc ce code et le renvoie à Typeform, avec l'URI de redirection (oui, encore!) Et le secret client (c'est le mot de passe de l'application!).

En récompense d'une danse bien dansée, THNA recevra un jeton OAuth brillant qu'il pourra utiliser pour interagir avec Typeform au nom de l'utilisateur, c'est-à-dire… vous!

Reste avec moi, balance avec moi

À partir de maintenant, dans chaque demande que THNA fera à Typeform en votre nom, ils devront inclure un en-tête d'autorisation avec ce jeton d'accès. Avec lui, Typeform (ou tout autre fournisseur) peut identifier:

  • qui demande les données (dans ce cas, THNA)
  • qui sont les données sur (vous!)
  • et assurez-vous également qu'ils ont l'autorisation correcte d'accéder à ces données (uniquement ce que vous avez consenti).

Prêt pour la piste de danse

Alors maintenant que vous connaissez toutes les étapes et les tours de la technique de danse OAuth, vous devriez être prêt à créer vos propres chorégraphies, je veux dire, des intégrations et à faire d'Internet un endroit encore plus grand.

Des dessins par vous-même, photo de couverture de Gez Xavier Mansfield sur Unsplash.