Flutter身份验证插件auth0_spa_dart的使用

Flutter身份验证插件auth0_spa_dart的使用

在本教程中，我们将详细介绍如何使用 auth0_spa_dart 插件来实现身份验证。此插件是 auth0-spa-js 的 Dart 包装器，可以帮助你在 Flutter 应用程序中集成 Auth0 身份验证。

特性

• Dart 包装器用于 auth0-spa-js
• 支持登录弹窗和重定向登录
• 可以获取和管理令牌

开始使用

首先，在你的 index.html 文件中添加以下脚本：

<script src="https://cdn.auth0.com/js/auth0-spa-js/1.19/auth0-spa-js.production.js"></script>

使用示例

创建客户端

创建一个 Auth0Client 实例，并设置必要的参数如 clientId 和 domain。此外，你可以选择启用刷新令牌和设置缓存位置。

import 'package:auth0_spa_dart/auth0_spa_dart.dart';

// 替换为你的 Auth0 客户端ID和域
final String clientId = 'YOUR_CLIENT_ID';
final String domain = 'YOUR_DOMAIN';

void main() async {
  final client = await createAuth0Client(
    clientId: clientId,
    domain: domain,
    useRefreshTokens: true, // 默认值为 false
    cacheLocation: "localstorage" // 默认值为 "memory"
  );

  runApp(MyApp(client));
}

class MyApp extends StatelessWidget {
  final Auth0Client client;

  MyApp(this.client);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Auth0 SPA Dart Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 登录逻辑将在此处编写
            },
            child: Text('Login'),
          ),
        ),
      ),
    );
  }
}

启动登录弹窗

使用 loginWithPopup 方法启动登录弹窗。

await client.loginWithPopup();

使用重定向登录

如果你更喜欢使用重定向方式进行登录，可以使用 loginWithRedirect 方法。

await client.loginWithRedirect();

获取令牌

使用 getTokenSilently 方法获取访问令牌。默认情况下，该方法仅返回访问令牌字符串；如果需要详细响应，可以设置 detailedResponse 参数为 true。

final token = await client.getTokenSilently(
  detailedResponse: true // 默认值为 false
);

如果 detailedResponse 为 false，则返回仅包含访问令牌的字符串。否则，返回 JSON 对象：

{
  "id_token": "...",
  "access_token": "...",
  "expires_in": "..."
}

检查是否已认证

使用 isAuthenticated 方法检查用户是否已经通过身份验证。

bool isAuthenticated = await client.isAuthenticated();

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 auth0_spa_dart 插件。

import 'package:flutter/material.dart';
import 'package:auth0_spa_dart/auth0_spa_dart.dart';

void main() async {
  final String clientId = 'YOUR_CLIENT_ID';
  final String domain = 'YOUR_DOMAIN';

  final client = await createAuth0Client(
    clientId: clientId,
    domain: domain,
    useRefreshTokens: true,
    cacheLocation: "localstorage"
  );

  runApp(MyApp(client));
}

class MyApp extends StatelessWidget {
  final Auth0Client client;

  MyApp(this.client);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Auth0 SPA Dart Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                await client.loginWithPopup();
                final token = await client.getTokenSilently();
                print('Token: $token');
                final isAuthenticated = await client.isAuthenticated();
                print('Is Authenticated: $isAuthenticated');
              } catch (e) {
                print('Error: $e');
              }
            },
            child: Text('Login and Get Token'),
          ),
        ),
      ),
    );
  }
}