La bibliothèque JavaScript google.accounts.oauth2 vous aide à inviter l'utilisateur
et d'obtenir un jeton d'accès pour utiliser
les données utilisateur. Il est basé sur les
Flux d'attribution implicite OAuth 2.0 et conçu pour vous permettre d'appeler Google
API directement via REST et CORS, ou la bibliothèque cliente des API Google pour
JavaScript (également appelé gapi.client) pour bénéficier d'un accès simple et flexible à nos
des API plus complexes.
Avant d'accéder à des données utilisateur protégées depuis un navigateur, les utilisateurs de votre site se déclenchent le sélecteur de compte, les processus de connexion et de consentement de Google, et enfin Les serveurs OAuth de Google émettent et renvoient un jeton d'accès à votre application Web.
Dans le modèle d'autorisation basé sur les jetons, il n'est pas nécessaire de stocker par utilisateur d'actualiser les jetons sur votre serveur backend.
Nous vous recommandons de suivre la méthode décrite ici plutôt que techniques couvertes par l'ancien OAuth 2.0 pour les applications Web côté client .
Configuration
Recherchez ou créez un ID client en suivant la procédure décrite dans l'article Obtenir
Guide sur l'ID client pour les API Google. Ensuite, ajoutez la bibliothèque cliente aux pages.
de votre site qui appelleront les API Google. Enfin, initialisez le jeton
client. En règle générale, cette opération s'effectue dans le gestionnaire onload de la bibliothèque cliente.
Initialiser un client de jeton
Appelez initTokenClient() pour initialiser un nouveau client de jeton avec le
ID client, vous pouvez éventuellement inclure une liste d'un ou plusieurs champs d'application auxquels l'utilisateur
doit accéder à:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (response) => {
...
},
});
Déclencher le flux de jetons OAuth 2.0
Utilisez la méthode requestAccessToken() pour déclencher le flux d'expérience utilisateur du jeton et obtenir une
un jeton d'accès. Google invite l'utilisateur à:
- choisir son compte,
- connectez-vous au compte Google si ce n'est pas déjà fait,
- autoriser votre application Web à accéder à chaque champ d'application demandé.
Un geste de l'utilisateur déclenche le flux de jetons: <button onclick="client.requestAccessToken();">Authorize me</button>
Google renvoie ensuite un TokenResponse contenant un jeton d'accès et une liste de
champs d'application auxquels l'utilisateur a accordé l'accès à votre gestionnaire de rappel, ou ayant généré une erreur.
Les utilisateurs peuvent fermer le sélecteur de compte ou les fenêtres de connexion. Dans ce cas, de rappel ne sera pas appelée.
Gérer le consentement
La conception et l'expérience utilisateur de votre application ne doivent être mises en œuvre qu'après d'examiner attentivement les règles OAuth 2.0 de Google. Ces règles couvrent travailler avec plusieurs champs d'application, savoir quand et comment gérer le consentement des utilisateurs, etc.
L'autorisation incrémentielle est une règle et une méthodologie de conception d'applications permettant de demander l'accès aux ressources à l'aide de champs d'application, uniquement en fonction des besoins plutôt qu'en amont en même temps. Les utilisateurs peuvent approuver ou refuser le partage des ressources individuelles demandées par votre application, il s'agit d'autorisations précises.
Au cours de ce processus, Google demande le consentement de l'utilisateur, en répertoriant individuellement chaque le champ d'application demandé, les utilisateurs sélectionnent les ressources à partager avec votre application et Enfin, Google appelle votre fonction de rappel pour renvoyer un jeton d'accès et un identifiant aux niveaux d'accès approuvés. Votre application gère ensuite de manière sécurisée les différents résultats possible avec des autorisations précises.
Autorisation incrémentielle
Pour les applications Web, les deux scénarios de haut niveau suivants illustrent la hausse l'autorisation à l'aide de:
- Une application Ajax d'une seule page, souvent utilisant
XMLHttpRequestavec un accès dynamique à ressources. - Plusieurs pages Web, les ressources sont séparées et gérées page par page.
Ces deux scénarios sont présentés pour illustrer les considérations de conception et méthodologies, mais ne constituent pas des recommandations exhaustives pour intégrer le consentement dans votre application. Les applications du monde réel peuvent utiliser une variante ou combinaison de ces techniques.
Ajax
Ajouter la prise en charge des autorisations incrémentielles dans votre application en effectuant plusieurs appels
à requestAccessToken() et à l'aide de l'objet OverridableTokenClientConfig
scope pour demander des niveaux d'accès individuels au moment où ils sont nécessaires.
uniquement en cas de nécessité. Dans cet exemple, les ressources seront demandées et visibles
qu'après un geste de l'utilisateur
développé une section de contenu réduite.
| Application Ajax |
|---|
Initialisez le client de jeton au chargement de la page:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: "onTokenResponse",
});
Documents à lireAfficher les documents récents
client.requestAccessToken(
overrideConfig = ({
scope = 'https://www.googleapis.com/auth/documents.readonly'
})
);
Événements à venirAfficher les informations de l'agenda
client.requestAccessToken(
overrideConfig = ({
scope = 'https://www.googleapis.com/auth/calendar.readonly'
})
);
Carrousel de photosAfficher des photos
client.requestAccessToken(
overrideConfig = ({
scope = 'https://www.googleapis.com/auth/photoslibrary.readonly'
})
);
|
Chaque appel à requestAccessToken déclenche un moment de consentement de l'utilisateur. Votre application
n'ont accès qu'aux ressources requises par la section choisie par l'utilisateur
ce qui limite le partage des ressources par le biais du choix de l'utilisateur.
Plusieurs pages Web
Lors de la conception d'une autorisation incrémentielle, plusieurs pages sont utilisées pour demander uniquement les champs d'application requis pour charger une page, ce qui réduit la complexité et la nécessité effectuer plusieurs appels pour obtenir le consentement de l'utilisateur et récupérer un jeton d'accès.
| Application multipage | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Chaque page demande le champ d'application nécessaire et obtient un jeton d'accès en appelant
initTokenClient() et requestAccessToken() au moment du chargement. Dans ce scénario,
des pages Web individuelles sont utilisées pour séparer clairement les fonctionnalités et
par champ d'application. En situation réelle, des pages individuelles peuvent demander
plusieurs champs d'application associés.
Autorisations précises
Les autorisations précises sont traitées
de la même manière dans tous les scénarios. après
requestAccessToken() appelle votre fonction de rappel et un jeton d'accès
renvoyé, vérifiez que l'utilisateur a approuvé les champs d'application demandés en utilisant
hasGrantedAllScopes() ou hasGrantedAnyScope(). Exemple :
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/documents.readonly \
https://www.googleapis.com/auth/photoslibrary.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
'https://www.googleapis.com/auth/photoslibrary.readonly')) {
// Look at pictures
...
}
if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
'https://www.googleapis.com/auth/calendar.readonly',
'https://www.googleapis.com/auth/documents.readonly')) {
// Meeting planning and review documents
...
}
}
},
});
Toutes les autorisations précédemment acceptées lors de sessions ou de demandes précédentes seront également
incluses dans la réponse. Le consentement de l'utilisateur est conservé pour chaque utilisateur.
l'ID client, et persiste lors de plusieurs appels à initTokenClient() ou
requestAccessToken() Par défaut, le consentement de l'utilisateur n'est nécessaire que pour
chaque fois qu'un utilisateur visite votre site Web et demande un nouveau champ d'application, mais peut être demandé sur
chaque chargement de page à l'aide de prompt=consent dans les objets de configuration du client de jetons.
Utiliser des jetons
Dans le modèle de jeton, un jeton d'accès n'est pas stocké
par le système d'exploitation ou le navigateur,
un nouveau jeton est d'abord obtenu au moment du chargement de la page, ou en déclenchant par la suite
appeler requestAccessToken() via un geste de l'utilisateur (appuyer sur un bouton, par exemple).
Utiliser REST et CORS avec les API Google
Un jeton d'accès peut être utilisé pour envoyer des requêtes authentifiées aux API Google à l'aide de REST et CORS. Cela permet aux utilisateurs de se connecter, d'accorder leur consentement, et à Google d'émettre un et votre site pour qu'ils fonctionnent avec les données de l'utilisateur.
Dans cet exemple, vous allez afficher les événements d'agenda à venir des utilisateurs connectés à l'aide de la méthode
jeton d'accès renvoyé par tokenRequest():
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();
Pour en savoir plus, consultez Utiliser CORS pour accéder aux API Google.
La section suivante explique comment intégrer facilement des API plus complexes.
Utilisation de la bibliothèque JavaScript des API Google
Le client de jetons fonctionne avec la bibliothèque cliente des API Google pour JavaScript. Consultez l'extrait de code ci-dessous.
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
gapi.client.setApiKey('YOUR_API_KEY');
gapi.client.load('calendar', 'v3', listUpcomingEvents);
}
},
});
function listUpcomingEvents() {
gapi.client.calendar.events.list(...);
}
Expiration des jetons
Les jetons d'accès ont une durée de vie courte. Si le jeton d'accès expire
avant la fin de la session de l'utilisateur, obtenez un nouveau jeton en appelant
requestAccessToken() à partir d'un événement déclenché par l'utilisateur, comme une pression sur un bouton.
Utiliser un jeton d'accès pour révoquer le consentement
Appelez la méthode google.accounts.oauth2.revoke pour supprimer le consentement de l'utilisateur.
un accès aux ressources pour tous les niveaux d'accès accordés à votre application. Un accès valide
Vous devez disposer d'un jeton pour révoquer cette autorisation:
google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
console.log(done);
console.log(done.successful);
console.log(done.error);
console.log(done.error_description);
});