S'authentifier avec Firebase en JavaScript à l'aide d'un système d'authentification personnalisé
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Vous pouvez intégrer Firebase Authentication à un système d'authentification personnalisé en modifiant votre serveur d'authentification pour qu'il produise des jetons signés personnalisés lorsqu'un utilisateur se connecte. Votre application reçoit ce jeton et l'utilise pour s'authentifier auprès de Firebase.
Avant de commencer
- Ajoutez Firebase à votre projet JavaScript.
- Obtenez les clés de serveur de votre projet :
- Accédez à la page Comptes de service dans les paramètres de votre projet.
- Cliquez sur Générer une nouvelle clé privée en bas de la section SDK Firebase Admin de la page Comptes de service.
- La paire de clés publique/privée du nouveau compte de service est automatiquement enregistrée sur votre ordinateur. Copiez ce fichier sur votre serveur d'authentification.
Authentifier avec Firebase
- Lorsque les utilisateurs se connectent à votre application, envoyez leurs identifiants de connexion (par exemple, leur nom d'utilisateur et leur mot de passe) à votre serveur d'authentification. Votre serveur vérifie les identifiants et renvoie un jeton personnalisé s'ils sont valides.
- Une fois que vous avez reçu le jeton personnalisé de votre serveur d'authentification, transmettez-le à
signInWithCustomToken pour connecter l'utilisateur:
Web
import { getAuth, signInWithCustomToken } from "firebase/auth";
const auth = getAuth();
signInWithCustomToken(auth, token)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ...
});
Web
firebase.auth().signInWithCustomToken(token)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
// ...
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
Étapes suivantes
Lorsqu'un utilisateur se connecte pour la première fois, un compte utilisateur est créé et associé aux identifiants (nom d'utilisateur et mot de passe, numéro de téléphone ou informations du fournisseur d'authentification) avec lesquels l'utilisateur s'est connecté. Ce nouveau compte est stocké dans votre projet Firebase et peut être utilisé pour identifier un utilisateur dans toutes les applications de votre projet, quelle que soit la manière dont il se connecte.
-
Dans vos applications, la méthode recommandée pour connaître l'état d'authentification de votre utilisateur consiste à définir un observateur sur l'objet Auth. Vous pouvez ensuite obtenir les informations de profil de base de l'utilisateur à partir de l'objet User. Consultez la section Gérer les utilisateurs.
Dans vos règles de sécurité Firebase Realtime Database et Cloud Storage, vous pouvez obtenir l'ID utilisateur unique de l'utilisateur connecté à partir de la variable auth et l'utiliser pour contrôler les données auxquelles un utilisateur peut accéder.
Vous pouvez autoriser les utilisateurs à se connecter à votre application à l'aide de plusieurs fournisseurs d'authentification en associant les identifiants du fournisseur d'authentification à un compte utilisateur existant.
Pour déconnecter un utilisateur, appelez
signOut:
Web
import { getAuth, signOut } from "firebase/auth";
const auth = getAuth();
signOut(auth).then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});
Web
firebase.auth().signOut().then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/08 (UTC).
[null,null,["Dernière mise à jour le 2025/08/08 (UTC)."],[],[],null,["You can integrate Firebase Authentication with a custom authentication system by\nmodifying your authentication server to produce custom signed tokens when a user\nsuccessfully signs in. Your app receives this token and uses it to authenticate\nwith Firebase.\n\nBefore you begin\n\n1. [Add Firebase to your JavaScript project](/docs/web/setup).\n2. Get your project's server keys:\n 1. Go to the [Service Accounts](https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk) page in your project's settings.\n 2. Click *Generate New Private Key* at the bottom of the *Firebase Admin SDK* section of the *Service Accounts* page.\n 3. The new service account's public/private key pair is automatically saved on your computer. Copy this file to your authentication server.\n\nAuthenticate with Firebase\n\n1. When users sign in to your app, send their sign-in credentials (for example, their username and password) to your authentication server. Your server checks the credentials and returns a [custom\n token](/docs/auth/admin/create-custom-tokens) if they are valid.\n2. After you receive the custom token from your authentication server, pass it to `signInWithCustomToken` to sign in the user: \n\n Web \n\n ```javascript\n import { getAuth, signInWithCustomToken } from \"firebase/auth\";\n\n const auth = getAuth();\n signInWithCustomToken(auth, token)\n .then((userCredential) =\u003e {\n // Signed in\n const user = userCredential.user;\n // ...\n })\n .catch((error) =\u003e {\n const errorCode = error.code;\n const errorMessage = error.message;\n // ...\n });https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/auth-next/custom/auth_sign_in_custom.js#L8-L21\n ```\n\n Web \n\n ```javascript\n firebase.auth().signInWithCustomToken(token)\n .then((userCredential) =\u003e {\n // Signed in\n var user = userCredential.user;\n // ...\n })\n .catch((error) =\u003e {\n var errorCode = error.code;\n var errorMessage = error.message;\n // ...\n });https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/auth/custom.js#L10-L20\n ```\n\nNext steps\n\nAfter a user signs in for the first time, a new user account is created and\nlinked to the credentials---that is, the user name and password, phone\nnumber, or auth provider information---the user signed in with. This new\naccount is stored as part of your Firebase project, and can be used to identify\na user across every app in your project, regardless of how the user signs in.\n\n- In your apps, the recommended way to know the auth status of your user is to\n set an observer on the `Auth` object. You can then get the user's\n basic profile information from the `User` object. See\n [Manage Users](/docs/auth/web/manage-users).\n\n- In your Firebase Realtime Database and Cloud Storage\n [Security Rules](/docs/database/security/user-security), you can\n get the signed-in user's unique user ID from the `auth` variable,\n and use it to control what data a user can access.\n\nYou can allow users to sign in to your app using multiple authentication\nproviders by [linking auth provider credentials to an\nexisting user account.](/docs/auth/web/account-linking)\n\nTo sign out a user, call [`signOut`](/docs/reference/js/auth#signout): \n\nWeb \n\n```javascript\nimport { getAuth, signOut } from \"firebase/auth\";\n\nconst auth = getAuth();\nsignOut(auth).then(() =\u003e {\n // Sign-out successful.\n}).catch((error) =\u003e {\n // An error happened.\n});https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/auth-next/index/auth_sign_out.js#L8-L15\n```\n\nWeb \n\n```javascript\nfirebase.auth().signOut().then(() =\u003e {\n // Sign-out successful.\n}).catch((error) =\u003e {\n // An error happened.\n});https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/auth/index.js#L33-L37\n```"]]
