Créez un{" "}
compte Auth0
{" "}
ou{" "}
console.log("log in")}>
connectez-vous
{" "}
à votre compte existant pour l'intégrer directement à votre propre locataire.
;
};
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()) {
processedNode = processedNode.replace(new RegExp(key, "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: "configure-auth0",
title: "Configurer Auth0"
}, {
id: "install-the-auth0-flutter-sdk",
title: "Installer la Trousse de développement logiciel (SDK) Auth0 Flutter"
}, {
id: "add-login-to-your-application",
title: "Ajouter la connexion à votre application"
}, {
id: "add-logout-to-your-application",
title: "Ajouter la déconnexion à votre application"
}, {
id: "show-user-profile-information",
title: "Afficher les informations de profil de l'utilisateur"
}];
Auth0 vous permet d'ajouter rapidement l'authentification et d'accéder aux informations de profil utilisateur dans votre application. Ce guide
explique comment intégrer Auth0 avec une application Flutter en utilisant la [trousse de développement logiciel (SDK) Auth0 Flutter](https://github.com/auth0/auth0-flutter).
La trousse de développement logiciel (SDK) Flutter ne prend actuellement en charge que les applications Flutter exécutées sur les plateformes Android, iOS et Web.
Ce démarrage rapide suppose que vous avez déjà une application [Flutter](https://flutter.dev/) en cours d'exécution. Si ce n'est pas le cas, consultez les [guides de « démarrage » de Flutter](https://docs.flutter.dev/get-started/install) pour commencer avec une application simple.
Vous devriez également connaître 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 avez peut‑être créé la vôtre. Vous aurez besoin de certains renseignements au sujet de cette Application pour communiquer avec Auth0. Vous pouvez obtenir ces informations dans la section [Application Settings](https://manage.auth0.com/#/applications) de l’Auth0 Dashboard.
Lorsque vous utilisez l’Application par défaut avec une Application native ou une Application monopage, assurez-vous de mettre à jour la **Token
Endpoint Authentication Method** sur `None` et de définir le **Application Type** sur
`SPA` ou `Native`.
Vous avez besoin des renseignements suivants :
* **Domaine**
* **ID client**
Si vous téléchargez l’exemple fourni en haut de cette page, ces renseignements seront déjà remplis pour vous.
### Configurer les URL de redirection
Une URL de redirection (callback URL) est une URL de votre application vers laquelle Auth0 redirige l’utilisateur une fois qu’il a été authentifié. L’URL de redirection de votre application doit être ajoutée au champ **URL de redirection autorisées** dans vos [Application
Settings](https://manage.auth0.com/#/applications). Si ce champ n’est pas défini, les utilisateurs ne pourront pas se connecter à l’application et recevront une erreur.
Si vous suivez l’exemple de projet que vous avez téléchargé en haut de cette page, vous devez
définir l’option **Allowed Callback URL** sur `http://localhost:3000`.
### Configurer les URL de déconnexion
Une URL de déconnexion est une URL de votre application vers laquelle Auth0 peut retourner après que l’utilisateur a été déconnecté du
Serveur d’autorisation. Celle-ci est indiqué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éconnexion autorisées** dans vos [Application Settings](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 recevront une 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éconnexion autorisées** est `http://localhost:3000`.
### Configurer les origines Web autorisées
Vous devez ajouter l’URL de votre application au champ **Allowed Web Origins** dans vos [Application Settings](https://manage.auth0.com/#/applications/\{yourClientId}/settings). Si vous n’enregistrez pas l’URL de votre application ici, l’application ne pourra pas actualiser les jetons d’authentification de façon silencieuse et vos utilisateurs seront déconnectés la prochaine fois qu’ils visiteront l’application ou 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 **Allowed Web Origins** sur `http://localhost:3000`.
Ajoutez la trousse de développement logiciel (SDK) Auth0 pour Flutter à votre projet :
```bash theme={null}
flutter pub add auth0_flutter
```
Ajoutez la balise \
```
[Universal Login](/docs/fr-CA/authenticate/login/auth0-universal-login) est
le moyen le plus simple de configurer l’authentification dans votre application. Nous recommandons de l’utiliser pour offrir la meilleure expérience, la meilleure
sécurité et la gamme de fonctionnalités la plus complète.
Intégrez Auth0 Universal Login à votre application Flutter Web en utilisant la classe `Auth0Web`. Redirigez vos
utilisateurs vers la page Auth0 Universal Login d’Auth0 à l’aide de `loginWithRedirect()`.
Vous devrez normalement spécifier le paramètre `redirectUrl` de
`loginWithRedirect`. Si vous l’omettez, Auth0 utilisera la [route de connexion par défaut](/docs/fr-CA/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 ensuite accéder au jeton d’ID et aux jetons d’accès pour cet utilisateur en appelant `onLoad` au démarrage de l’application et en traitant les informations d’identification qui vous sont fournies :
```js theme={null}
auth0.onLoad().then((final credentials) => setState(() {
// Gérez ou stockez les informations d'identification ici
_credentials = credentials;
}));
```
##### Point de contrôle
Ajoutez un bouton à votre application qui appelle `loginWithRedirect()` et qui connecte l'utilisateur à votre application.
Vérifiez que vous êtes redirigé vers Auth0 pour l’authentification, puis de retour vers votre application.
Vérifiez que vous pouvez accéder à `credentials` à la suite de l’appel de `onLoad` et que
vous êtes en mesure d’accéder au jeton d’ID et aux jetons d’accès.
Pour déconnecter des utilisateurs, redirigez-les vers le point de terminaison de déconnexion Auth0 afin d’effacer leur session de connexion en appelant la Trousse de développement logiciel (SDK) Flutter Auth0 `logout()`. [En savoir plus sur la déconnexion dans Auth0](/docs/fr-CA/authenticate/login/logout).
Vous souhaiterez normalement spécifier `returnToUrl` lorsque vous appelez `logout`, sinon
Auth0 [utilisera par défaut la première URL de la liste des URL de déconnexion autorisées](/docs/fr-CA/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, puis de retour. Vous
ne devriez plus être connecté à votre application.
Le profil utilisateur récupère automatiquement les propriétés du profil de l’utilisateur lors du chargement de la page, et peut être consulté
et stocké en appelant `onLoad` au démarrage de l’application. L’objet renvoyé par `onLoad`
contient une propriété `user` avec toutes les propriétés du profil de l’utilisateur. Celui-ci est renseigné en interne en
décodant le jeton ID.
##### Point de contrôle
Ouvrez une session et inspectez la propriété `user` dans le résultat renvoyé. Vérifiez les informations de profil de l’utilisateur actuel, comme `email` ou `name`.
## Prochaines étapes
Excellent travail! Si vous êtes rendu jusqu'ici, vous devriez maintenant avoir la connexion, la déconnexion et les informations de profil utilisateur qui fonctionnent dans votre application.
Ce tutoriel de démarrage rapide est maintenant terminé, mais il reste encore beaucoup à découvrir. Pour en savoir plus sur ce que vous pouvez faire avec Auth0, consultez :
* [Auth0 Dashboard](https://manage.auth0.com/dashboard/us/dev-s3674bdouue0bd73) - Découvrez comment configurer et gérer votre tenant Auth0 et vos Applications
* [trousse de développement logiciel (SDK) auth0-flutter](https://www.github.com/auth0/auth0-flutter/) - Découvrez plus en détail la trousse de développement logiciel (SDK) utilisée dans ce tutoriel
* [Auth0 Marketplace](https://marketplace.auth0.com/) - Découvrez les intégrations que vous pouvez activer pour étendre les fonctionnalités d’Auth0
```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("Se connecter"))
else
Column(
children: [
ProfileView(user: _credentials!.user),
ElevatedButton(
onPressed: () async {
await auth0.logout(returnToUrl: 'http://localhost:3000');
},
child: const Text("Se déconnecter"))
],
)
],
);
}
}
```
```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("Se connecter"))
else
Column(
children: [
ProfileView(user: _credentials!.user),
ElevatedButton(
onPressed: () async {
await auth0.logout(returnToUrl: 'http://localhost:3000');
},
child: const Text("Se déconnecter"))
],
)
],
);
}
}
```
```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!)
],
);
}
}
```
Créez un{" "}
compte Auth0
{" "}
ou{" "}
console.log("log in")}>
connectez-vous
{" "}
à votre compte existant pour l'intégrer directement à votre propre locataire.
