Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
;
};
export const AuthCodeGroup = ({children, dropdown}) => {
const [processedChildren, setProcessedChildren] = useState(children);
useEffect(() => {
let unsubscribe = null;
function init() {
unsubscribe = window.autorun(() => {
const processChildren = node => {
if (typeof node === "string") {
let processedNode = node;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
}
return processedNode;
} else if (Array.isArray(node)) {
return node.map(processChildren);
} else if (node && node.props && node.props.children) {
return {
...node,
props: {
...node.props,
children: processChildren(node.props.children)
}
};
}
return node;
};
setProcessedChildren(processChildren(children));
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
return {processedChildren};
};
export const sections = [{
id: "configuration-d-auth0",
title: "Configuration d’Auth0"
}, {
id: "installer-la-trousse-sdk-flutter-auth0",
title: "Installer la trousse SDK Flutter Auth0"
}, {
id: "ajouter-une-fonctionnalité-de-connexion-à-votre-application",
title: "Ajouter une fonctionnalité de connexion à votre application"
}, {
id: "ajouter-une-fonctionnalité-de-déconnexion-à-votre-application",
title: "Ajouter une fonctionnalité de déconnexion à votre application"
}, {
id: "afficher-les-informations-du-profil-utilisateur",
title: "Afficher les informations du profil utilisateur"
}];
Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 à une application Flutter à l’aide de la trousse [SDK Auth0 Flutter](https://github.com/auth0/auth0-flutter).
La trousse SDK Flutter ne prend actuellement en charge que les applications Flutter s’exécutant sur les plateformes Android, iOS ou Web.
Ce guide rapide suppose que vous avez déjà une application [Flutter](https://flutter.dev/) installée et active. Si ce n’est pas le cas, consultez les [guides de démarrage de Flutter](https://docs.flutter.dev/get-started/install) pour commencer l’utilisation d’une application simple.
Vous devez également être familiarisé avec l’[outil de ligne de commande Flutter](https://docs.flutter.dev/reference/flutter-cli).
Lorsque vous vous êtes inscrit à Auth0, une nouvelle application a été créée pour vous, ou vous auriez pu en créer une nouvelle. Vous aurez besoin de quelques informations à propos de cette application pour communiquer avec Auth0. Vous pouvez obtenir ces informations dans la section [Paramètres d’application](https://manage.auth0.com/#/applications) d’Auth0 Dashboard.
Si vous utilisez l’application par défaut avec une application native ou une application à page unique, veillez à mettre à jour la **méthode d’authentification du point de terminaison des jetons** en la réglant sur `None` et à définir le **type d’application** sur `SPA` ou `Native`.
Les informations suivantes sont nécessaires :
* **Domaine**
* **Identifiant client**
Si vous téléchargez l’exemple en haut de cette page, les détails sont renseignés pour vous.
### Configuration des URL de rappel
Une URL de rappel est une URL intégrée dans votre application vers laquelle Auth0 redirige l’utilisateur après qu’il s’est authentifié. L’URL de rappel de votre application doit être ajoutée au champ **URL de rappel autorisées** dans les [Paramètres d’application](https://manage.auth0.com/#/applications). Si ce champ n’est pas défini, les utilisateurs ne pourront pas se connecter à l’application et obtiendront un message d’erreur.
Si vous suivez l’exemple de projet que vous avez téléchargé en haut de cette page, vous devez définir l’**URL de rappel autorisée** sur `http://localhost:3000`.
### Configuration des URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle Auth0 peut se rediriger une fois que l’utilisateur a été déconnecté du serveur d’autorisations. Cette URL est spécifiée dans le paramètre de requête `returnTo`. L’URL de déconnexion de votre application doit être ajoutée au champ **URL de déconnexions autorisées** dans les [Application Settings (Paramètres d’application)](https://manage.auth0.com/#/applications). Si ce champ n’est pas défini, les utilisateurs ne pourront pas se déconnecter de l’application et obtiendront un message d’erreur.
Si vous suivez l’exemple de projet que vous avez téléchargé en haut de cette page, l’URL de déconnexion que vous devez ajouter au champ **URL de déconnexions autorisées** est `http://localhost:3000`.
### Configurer les origines Web autorisées
Vous devez ajouter l’URL de votre application au champ **Origines Web autorisées** dans vos [Application Settings (Paramètres d’application)](https://manage.auth0.com/#/applications/%7ByourClientId%7D/settings). Si vous n’enregistrez pas l’URL de votre application ici, l’application ne pourra pas actualiser silencieusement les jetons d’authentification et vos utilisateurs seront déconnectés la prochaine fois qu’ils visiteront l’application ou qu’ils actualiseront la page.
Si vous suivez l’exemple de projet que vous avez téléchargé en haut de cette page, vous devez définir l’option **Origines Web autorisées** sur `http://localhost:3000`.
Ajoutez la trousse SDK Flutter Auth0 au projet :
```
flutter pub add auth0_flutter
```
Ajoutez l’étiquette de script suivante à votre page `index.html` :
```html theme={null}
```
La [connexion universelle](https://auth0.com/docs/authenticate/login/auth0-universal-login) est le moyen le plus simple de mettre en place l’authentification dans votre application. Nous recommandons de l’utiliser pour une meilleure expérience, une meilleure sécurité et un plus grand nombre de fonctionnalités.
Intégrez la connexion universelle Auth0 dans votre application Flutter (Web) en utilisant la classe `Auth0Web`. Redirigez vos utilisateurs vers la page de connexion universelle Auth0 en utilisant `loginWithRedirect()`.
Vous devrez normalement définir le paramètre `redirectUrl` sur `loginWithRedirect`. Si ce paramètre n’est pas spécifié, Auth0 utilisera la [route de connexion par défaut](https://auth0.com/docs/authenticate/login/auth0-universal-login/configure-default-login-routes), qui n’est pas configurée par défaut.
Lorsqu’un utilisateur se connecte, il est redirigé vers votre application. Vous pouvez alors accéder à l’identificateur et aux jetons d’accès de cet utilisateur en appelant `onLoad` lors du démarrage et en gérant les informations d’identification qui vous sont communiquées :
```
auth0.onLoad().then((final credentials) => setState(() {
// Handle or store credentials here
_credentials = credentials;
}));
```
##### Point de contrôle
Ajoutez un bouton à votre application qui appelle `loginWithRedirect()` et déconnecte l’utilisateur de votre application. Vérifiez que vous êtes redirigé vers Auth0 pour l’authentification, puis renvoyé vers votre application.
Vérifiez que vous pouvez accéder aux `credentials` après avoir appelé `onLoad` et que vous pouvez accéder à l’identifiant et aux jetons d’accès.
Pour déconnecter les utilisateurs, redirigez-les vers le point de terminaison Auth0 pour effacer leur session de connexion en appelant la trousse SDK Flutter Auth0 `logout()`. [En savoir plus sur la déconnexion d’Auth0](https://auth0.com/docs/authenticate/login/logout).
Vous devez normalement spécifier `returnToUrl` lorsque vous appelez `logout`, sinon Auth0 [utilisera par défaut la première URL de la liste URL de déconnexion autorisées](https://auth0.com/docs/authenticate/login/logout/redirect-users-after-logout).
##### Point de contrôle
Ajoutez un bouton à votre application qui appelle `logout()` et déconnecte l’utilisateur de votre application. Lorsque vous le sélectionnez, vérifiez que votre application Flutter vous redirige vers le point de terminaison de déconnexion et vice-versa. Vous ne devriez pas être connecté à votre application.
Le profil utilisateur récupère automatiquement les propriétés du profil utilisateur lors du chargement de la page. Il est possible d’y accéder et de les stocker en appelant `onLoad` lors du démarrage de l’application. L’objet retourné à partir de `onLoad` contient une propriété `user` avec toutes les propriétés du profil utilisateur. Cette propriété est alimentée en interne par le décodage du jeton d’ID.
##### Point de contrôle
Connectez-vous et inspectez la propriété `user` par rapport au résultat. Vérifiez les informations de profil utilisateur actuel, telles que son `email` ou `name`.
## Étapes suivantes
Beau travail! Si vous en êtes arrivé là, vous devriez avoir la connexion, la déconnexion et les informations de profil utilisateur actives dans votre application.
Cela conclut notre tutoriel de démarrage rapide, mais il y a tellement plus à explorer. Pour en savoir plus sur ce que vous pouvez faire avec Auth0, consultez :
* [Auth0 Dashboard](https://manage.auth0.com/#) : apprenez à configurer et gérer votre locataire et vos applications Auth0
* [Trousse SDK auth0-flutter](https://www.github.com/auth0/auth0-flutter/) : explorez en détail la trousse SDK utilisée dans ce tutoriel
* [Auth0 Marketplace](https://marketplace.auth0.com/) : découvrez des intégrations que vous pouvez activer pour étendre les fonctionnalités d’Auth0
* [Configure other identity providers](/docs/identityproviders)
* [Enable multifactor authentication](/docs/multifactor-authentication)
* [Learn about attack protection](/docs/attack-protection)
* [Learn about Actions](/docs/fr-ca/customize/actions)
```dart main_view.dart lines theme={null}
import 'package:auth0_flutter/auth0_flutter.dart';
import 'package:auth0_flutter/auth0_flutter_web.dart';
import 'package:flutter/material.dart';
import 'profile_view.dart';
class MainView extends StatefulWidget {
const MainView({Key? key}) : super(key: key);
@override
State createState() => _MainViewState();
}
class _MainViewState extends State {
Credentials? _credentials;
late Auth0Web auth0;
@override
void initState() {
super.initState();
auth0 = Auth0Web('dev-s3674bdouue0bd73.us.auth0.com', 'QqpqsvIQHjLodaUIPpabJcIHoG41tbAv');
auth0.onLoad().then((final credentials) => setState(() {
_credentials = credentials;
}));
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (_credentials == null)
ElevatedButton(
onPressed: () => auth0.loginWithRedirect(redirectUrl: 'http://localhost:3000'),
child: const Text("Log in"))
else
Column(
children: [
ProfileView(user: _credentials!.user),
ElevatedButton(
onPressed: () async {
await auth0.logout(returnToUrl: 'http://localhost:3000');
},
child: const Text("Log out"))
],
)
],
);
}
}
```
```dart profile_view.dart lines theme={null}
import 'package:auth0_flutter/auth0_flutter.dart';
import 'package:flutter/material.dart';
class ProfileView extends StatelessWidget {
const ProfileView({Key? key, required this.user}) : super(key: key);
final UserProfile user;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (user.name != null) Text(user.name!),
if (user.email != null) Text(user.email!)
],
);
}
}
```
```dart main_view.dart lines theme={null}
import 'package:auth0_flutter/auth0_flutter.dart';
import 'package:auth0_flutter/auth0_flutter_web.dart';
import 'package:flutter/material.dart';
import 'profile_view.dart';
class MainView extends StatefulWidget {
const MainView({Key? key}) : super(key: key);
@override
State createState() => _MainViewState();
}
class _MainViewState extends State {
Credentials? _credentials;
late Auth0Web auth0;
@override
void initState() {
super.initState();
auth0 = Auth0Web('dev-s3674bdouue0bd73.us.auth0.com', 'QqpqsvIQHjLodaUIPpabJcIHoG41tbAv');
auth0.onLoad().then((final credentials) => setState(() {
_credentials = credentials;
}));
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (_credentials == null)
ElevatedButton(
onPressed: () => auth0.loginWithRedirect(redirectUrl: 'http://localhost:3000'),
child: const Text("Log in"))
else
Column(
children: [
ProfileView(user: _credentials!.user),
ElevatedButton(
onPressed: () async {
await auth0.logout(returnToUrl: 'http://localhost:3000');
},
child: const Text("Log out"))
],
)
],
);
}
}
```
```dart profile_view.dart lines theme={null}
import 'package:auth0_flutter/auth0_flutter.dart';
import 'package:flutter/material.dart';
class ProfileView extends StatelessWidget {
const ProfileView({Key? key, required this.user}) : super(key: key);
final UserProfile user;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (user.name != null) Text(user.name!),
if (user.email != null) Text(user.email!)
],
);
}
}
```
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
