Cette page a été traduite par l'API Cloud Translation.

Procéder à la connexion des utilisateurs avec GitHub

Ce document explique comment utiliser Identity Platform pour connecter des utilisateurs avec GitHub.

Avant de commencer

Ce tutoriel suppose que vous avez déjà activé Identity Platform et que vous disposez d'une application Web de base écrite en HTML et JavaScript. Pour savoir comment, consultez le guide de démarrage rapide.

Configurer GitHub en tant que fournisseur

Pour configurer GitHub en tant que fournisseur d'identité :

Accédez à la page Fournisseurs d'identité dans la console Google Cloud.

Accéder à la page "Fournisseurs d'identité"
Cliquez sur Ajouter un fournisseur.
Sélectionnez GitHub dans la liste.
Saisissez votre ID client GitHub et votre code secret client. Si vous ne possédez pas encore d'ID et de code secret, vous pouvez en obtenir sur la page Applications GitHub.
Configurez l'URI indiqué dans la section Configurer GitHub en tant que protocole OAuth valide. l'URI de redirection de votre application GitHub. Si vous avez configuré un domaine personnalisé dans Identity Platform, Mettez à jour l'URI de redirection dans la configuration de votre application GitHub pour utiliser le domaine personnalisé à la place. du domaine par défaut. Par exemple, remplacez https://myproject.firebaseapp.com/__/auth/handler par https://auth.myownpersonaldomain.com/__/auth/handler
Enregistrez les domaines de votre application en cliquant sur Ajouter un domaine sous Domaines autorisés. À des fins de développement, localhost est déjà activé par défaut.
Sous Configurer votre application, cliquez sur Informations sur la configuration. Copiez l'extrait dans le code de votre application pour initialiser le SDK client Identity Platform.
Cliquez sur Enregistrer.

Connecter des utilisateurs avec le SDK client

Créez une instance de l'objet de fournisseur GitHub :
Version Web 9

Apprendre en savoir plus sur l'API Web modulaire en arbre et les arbres mise à niveau à partir de l'API d'espace de noms.
```
import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();auth_github_provider_create.js
```
Version Web 8
```
var provider = new firebase.auth.GithubAuthProvider();github.js
```

Facultatif : Ajoutez des champs d'application OAuth. Les champs d'application spécifient les données que vous demandez à GitHub. Des données plus sensibles peuvent nécessiter des champs d'application spécifiques. Consultez le documentation pour déterminer les portées dont votre application a besoin.
Version Web 9

En savoir plus sur l'API Web modulaire pouvant être allégée par "tree shaking" et sur la mise à niveau depuis l'API avec espace de noms
```
provider.addScope('repo');auth_github_provider_scopes.js
```
Version Web 8
```
provider.addScope('repo');github.js
```

Facultatif : Localisez le flux d'authentification. Vous pouvez spécifier un langage ou utiliser le langage par défaut de l'appareil :

Version Web 9

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js

Version Web 8

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js

Facultatif : spécifiez des paramètres OAuth personnalisés supplémentaires. Ces paramètres sont spécifiques à GitHub et sont généralement utilisés pour personnaliser l'authentification. Vous ne pouvez pas transmettre des paramètres réservés par OAuth ou Identity Platform.

Version Web 9

provider.setCustomParameters({
  'allow_signup': 'false'
});auth_github_provider_params.js

Version Web 8

provider.setCustomParameters({
  'allow_signup': 'false'
});github.js

Utilisez l'objet du fournisseur GitHub pour vous connecter à l'utilisateur. Vous pouvez soit ouvrir une fenêtre pop-up, soit rediriger la page actuelle. La redirection est plus facile pour les utilisateurs d'appareils mobiles.

Pour afficher une fenêtre pop-up, appelez signInWithPopup() :

Version Web 9

import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    const credential = GithubAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
    // ...
  });auth_github_signin_popup.js

Version Web 8

firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    var token = credential.accessToken;

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });github.js

Pour rediriger la page, appelez d'abord signInWithRedirect().

Suivez les bonnes pratiques lorsque vous utilisez signInWithRedirect, linkWithRedirect ou reauthenticateWithRedirect.

Version Web 9

import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

Version Web 8

firebase.auth().signInWithRedirect(provider);index.js

Ensuite, récupérez le jeton GitHub en appelant getRedirectResult() lorsque votre page se charge :

Version Web 9

import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    const credential = GithubAuthProvider.credentialFromResult(result);
    if (credential) {
      // This gives you a GitHub Access Token. You can use it to access the GitHub API.
      const token = credential.accessToken;
      // ...
    }

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
    // ...
  });auth_github_signin_redirect_result.js

Version Web 8

firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a GitHub Access Token. You can use it to access the GitHub API.
      var token = credential.accessToken;
      // ...
    }

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });github.js

Une fois que vous disposez d'un jeton d'accès, vous pouvez l'utiliser pour appeler l'API GitHub. Exemple :

REST

curl -H "Authorization: Bearer [TOKEN]" https://api.github.com/gists/starred

Procéder à la connexion manuelle des utilisateurs

Si vous ne souhaitez pas utiliser le SDK Client, vous pouvez également gérer le flux de connexion manuellement :

Intégrez l'authentification GitHub à votre application en suivant les étapes décrites dans sa documentation pour les développeurs.
Connectez l'utilisateur avec GitHub à l'aide du flux que vous avez mis en œuvre à l'étape précédente.
Remplacez le jeton reçu de GitHub pour obtenir un identifiant Identity Platform :
Version Web 9

Apprendre en savoir plus sur l'API Web modulaire en arbre et les arbres mise à niveau à partir de l'API d'espace de noms.
```
import { GithubAuthProvider } from "firebase/auth";

const credential = GithubAuthProvider.credential(token);auth_github_provider_credential.js
```
Version Web 8
```
var credential = firebase.auth.GithubAuthProvider.credential(token);github.js
```

Utilisez l'identifiant pour connecter l'utilisateur avec Identity Platform :

Version Web 9

import { getAuth, signInWithCredential } from "firebase/auth";

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // ...
  });auth_signin_credential.js

Version Web 8

// Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });index.js

Étape suivante

En savoir plus sur les utilisateurs d'Identity Platform.
Procéder à la connexion des utilisateurs avec d'autres fournisseurs d'identité.