Flutter身份验证插件auth0_flutter的使用
Flutter身份验证插件auth0_flutter的使用
目录
简介
auth0_flutter
是一个用于Flutter应用的身份验证插件,支持移动设备和Web端。它提供了简单且安全的方式集成Auth0身份验证服务到你的Flutter应用程序中。以下是该插件的基本信息:
开始
要求
平台 | 版本 |
---|---|
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
- 在 Auth0 Dashboard 创建一个新的 Native 应用。
- 如果使用现有的 Native 应用,请确保设置为 Native 类型,并启用 OIDC Conformant 和 JsonWebToken Signature Algorithm (RS256)。
- 配置回调和登出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
- Android:
Web
- 在 Auth0 Dashboard 创建一个新的 Single Page 应用。
- 如果使用现有的 Single Page 应用,请确保设置为 Single Page Application 类型,并启用 OIDC Conformant 和 JsonWebToken Signature Algorithm (RS256)。
- 配置以下URL:
- Allowed Callback URLs:
http://localhost:3000
- Allowed Logout URLs:
http://localhost:3000
- Allowed Web Origins:
http://localhost:3000
- Allowed Callback URLs:
配置SDK
Mobile/Desktop
- 导入
auth0_flutter
:import 'package:auth0_flutter/auth0_flutter.dart';
- 实例化
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配置
- 在Xcode中打开项目并添加 Associated Domains 功能。
- 添加关联域名:
webcredentials:YOUR_AUTH0_DOMAIN
Web
- 导入
auth0_flutter_web
:import 'package:auth0_flutter/auth0_flutter_web.dart';
- 实例化
Auth0Web
类:final auth0Web = Auth0Web('YOUR_AUTH0_DOMAIN', 'YOUR_AUTH0_CLIENT_ID');
- 在
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
更多关于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_DOMAIN
、YOUR_AUTH0_CLIENT_ID
和YOUR_APP_REDIRECT_URI
等占位符为你的实际Auth0配置。
这个示例展示了如何使用auth0_flutter
插件在Flutter应用中实现基本的身份验证功能。根据你的应用需求,你可能需要进一步定制和扩展这些功能。