Flutter身份验证插件auth0_flutter的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter身份验证插件auth0_flutter的使用

目录

简介

auth0_flutter 是一个用于Flutter应用的身份验证插件,支持移动设备和Web端。它提供了简单且安全的方式集成Auth0身份验证服务到你的Flutter应用程序中。以下是该插件的基本信息:

Auth0 Flutter SDK

📚 文档 • 🚀 开始 • 🌐 API参考 • 💬 反馈

开始

要求

平台 版本
Flutter SDK 3.0+ 和 Dart 2.17+
Android API 21+, Java 8+
iOS iOS 13+, Swift 5.7+, Xcode 14.x / 15.x
macOS macOS 11+, Swift 5.7+, Xcode 14.x / 15.x

安装

auth0_flutter 添加到项目中:

flutter pub add auth0_flutter

配置Auth0

Mobile/Desktop

  1. Auth0 Dashboard 创建一个新的 Native 应用。
  2. 如果使用现有的 Native 应用,请确保设置为 Native 类型,并启用 OIDC ConformantJsonWebToken Signature Algorithm (RS256)
  3. 配置回调和登出URL:
    • Android: SCHEME://YOUR_DOMAIN/android/YOUR_PACKAGE_NAME/callback
    • iOS: https://YOUR_DOMAIN/ios/YOUR_BUNDLE_ID/callback,YOUR_BUNDLE_ID://YOUR_DOMAIN/ios/YOUR_BUNDLE_ID/callback
    • macOS: https://YOUR_DOMAIN/macos/YOUR_BUNDLE_ID/callback,YOUR_BUNDLE_ID://YOUR_DOMAIN/macos/YOUR_BUNDLE_ID/callback

Web

  1. Auth0 Dashboard 创建一个新的 Single Page 应用。
  2. 如果使用现有的 Single Page 应用,请确保设置为 Single Page Application 类型,并启用 OIDC ConformantJsonWebToken Signature Algorithm (RS256)
  3. 配置以下URL:
    • Allowed Callback URLs: http://localhost:3000
    • Allowed Logout URLs: http://localhost:3000
    • Allowed Web Origins: http://localhost:3000

配置SDK

Mobile/Desktop

  1. 导入 auth0_flutter
    import 'package:auth0_flutter/auth0_flutter.dart';
    
  2. 实例化 Auth0 类:
    final auth0 = Auth0('YOUR_AUTH0_DOMAIN', 'YOUR_AUTH0_CLIENT_ID');
    
Android配置

android/app/build.gradle 文件中添加 manifest placeholders:

manifestPlaceholders = [auth0Domain: "YOUR_AUTH0_DOMAIN", auth0Scheme: "https"]
iOS/macOS配置
  1. 在Xcode中打开项目并添加 Associated Domains 功能。
  2. 添加关联域名:
    webcredentials:YOUR_AUTH0_DOMAIN
    

Web

  1. 导入 auth0_flutter_web
    import 'package:auth0_flutter/auth0_flutter_web.dart';
    
  2. 实例化 Auth0Web 类:
    final auth0Web = Auth0Web('YOUR_AUTH0_DOMAIN', 'YOUR_AUTH0_CLIENT_ID');
    
  3. index.html 中添加脚本:
    <script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js" defer></script>
    

登录

Mobile/Desktop

在登录按钮的 onPressed 回调中调用登录方法:

final credentials = await auth0.webAuthentication().login(useHTTPS: true);

访问存储的凭证:

final credentials = await auth0.credentialsManager.credentials();

Web

initState() 中调用 onLoad() 方法:

@override
void initState() {
  super.initState();

  if (kIsWeb) {
    auth0Web.onLoad().then((final credentials) => {
      if (credentials != null) {
        // 已登录
      } else {
        // 未登录
      }
    });
  }
}

在登录按钮的 onPressed 回调中调用登录方法:

if (kIsWeb) {
  await auth0Web.loginWithRedirect(redirectUrl: 'http://localhost:3000');
}

或者使用弹窗登录:

if (kIsWeb) {
  final credentials = await auth0Web.loginWithPopup();
}

常见任务

Mobile/Desktop

Web

API参考

Mobile/Desktop

Web

反馈

我们欢迎任何反馈和贡献!请参阅 贡献指南行为准则

如需报告问题或提供反馈,请在 GitHub Issues 上提交。

如需报告安全漏洞,请遵循 负责任的披露政策


Auth0是一个易于实现且可适应的身份验证和授权平台。要了解更多,请查看 为什么选择Auth0

本项目采用MIT许可证。详见 LICENSE 文件。


更多关于Flutter身份验证插件auth0_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter身份验证插件auth0_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用auth0_flutter插件进行身份验证的代码示例。这个示例将展示如何设置Auth0,并在Flutter应用中执行登录和获取用户信息的基本操作。

1. 安装依赖

首先,在你的pubspec.yaml文件中添加auth0_flutter依赖:

dependencies:
  flutter:
    sdk: flutter
  auth0_flutter: ^3.0.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

2. 配置Auth0

在Auth0仪表盘中创建一个新的应用程序,并获取以下信息:

  • Domain
  • Client ID
  • Client Secret(对于某些类型的认证流可能需要)

3. 初始化Auth0客户端

在你的Flutter应用中,创建一个Auth0客户端实例。通常,你会在应用的某个初始化文件中(如main.dart或专门用于身份验证的文件)完成这一步。

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

final Auth0Client auth0 = Auth0Client(
  domain: 'YOUR_AUTH0_DOMAIN',
  clientId: 'YOUR_AUTH0_CLIENT_ID',
  redirectUri: Uri.parse('YOUR_APP_REDIRECT_URI') // 必须在Auth0仪表盘中配置此URI
);

4. 登录流程

创建一个登录按钮,并处理登录逻辑。以下是一个简单的例子:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Auth0 Flutter Example'),
        ),
        body: Center(
          child: LoginButton(auth0: auth0),
        ),
      ),
    );
  }
}

class LoginButton extends StatefulWidget {
  final Auth0Client auth0;

  LoginButton({required this.auth0});

  @override
  _LoginButtonState createState() => _LoginButtonState();
}

class _LoginButtonState extends State<LoginButton> {
  void _login() async {
    try {
      // 使用web authentication进行登录
      final credentials = await widget.auth0.webAuthenticate(
        context: context,
        audience: 'YOUR_API_AUDIENCE', // 根据你的需求配置
        scope: 'openid profile email',
      );

      // 在这里处理登录后的凭证,例如保存到本地或进行API调用
      print('Credentials: ${credentials.idToken}');
      print('User: ${credentials.user}');

      // 你可以使用credentials.accessToken进行API请求
      // 例如:使用credentials.accessToken访问你的后端API

      // 导航到应用的其他部分
      // Navigator.of(context).pushReplacementNamed('/home');
    } catch (error) {
      print('Error logging in: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _login,
      child: Text('Login with Auth0'),
    );
  }
}

5. 处理登出

如果你需要实现登出功能,可以使用以下代码:

void _logout() async {
  try {
    await widget.auth0.logout(
      context: context,
      federated: true, // 如果你的应用使用了社交登录,设置为true
    );
    // 处理登出后的逻辑,例如返回到登录页面
    // Navigator.of(context).pushReplacementNamed('/login');
  } catch (error) {
    print('Error logging out: $error');
  }
}

6. 完整示例

将登录和登出功能整合到一个完整的示例中:

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

final Auth0Client auth0 = Auth0Client(
  domain: 'YOUR_AUTH0_DOMAIN',
  clientId: 'YOUR_AUTH0_CLIENT_ID',
  redirectUri: Uri.parse('YOUR_APP_REDIRECT_URI')
);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Auth0 Flutter Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              LoginButton(auth0: auth0),
              SizedBox(height: 20),
              LogoutButton(auth0: auth0),
            ],
          ),
        ),
      ),
    );
  }
}

class LoginButton extends StatefulWidget {
  final Auth0Client auth0;

  LoginButton({required this.auth0});

  @override
  _LoginButtonState createState() => _LoginButtonState();
}

class _LoginButtonState extends State<LoginButton> {
  void _login() async {
    try {
      final credentials = await widget.auth0.webAuthenticate(
        context: context,
        audience: 'YOUR_API_AUDIENCE',
        scope: 'openid profile email',
      );
      print('Credentials: ${credentials.idToken}');
      print('User: ${credentials.user}');
    } catch (error) {
      print('Error logging in: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _login,
      child: Text('Login with Auth0'),
    );
  }
}

class LogoutButton extends StatefulWidget {
  final Auth0Client auth0;

  LogoutButton({required this.auth0});

  @override
  _LogoutButtonState createState() => _LogoutButtonState();
}

class _LogoutButtonState extends State<LogoutButton> {
  void _logout() async {
    try {
      await widget.auth0.logout(
        context: context,
        federated: true,
      );
    } catch (error) {
      print('Error logging out: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _logout,
      child: Text('Logout'),
    );
  }
}

确保你已经替换了示例中的YOUR_AUTH0_DOMAINYOUR_AUTH0_CLIENT_IDYOUR_APP_REDIRECT_URI等占位符为你的实际Auth0配置。

这个示例展示了如何使用auth0_flutter插件在Flutter应用中实现基本的身份验证功能。根据你的应用需求,你可能需要进一步定制和扩展这些功能。

回到顶部