Flutter身份验证插件gotrue的使用

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

Flutter身份验证插件gotrue的使用

gotrue-dartGoTrue API 的 Dart 客户端,用于在Flutter应用中实现用户的身份验证。它可以帮助开发者快速集成用户登录、注册等功能。

文档

更多关于 gotrue-dart 的文档可以在官方Supabase网站上找到:

示例代码

以下是一个简单的示例,演示了如何使用 gotrue-dart 插件进行用户登录和登出操作:

依赖配置

首先,在项目的 pubspec.yaml 文件中添加 gotrue 依赖:

dependencies:
  flutter:
    sdk: flutter
  gotrue: ^最新版本号 # 替换为实际的最新版本

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

登录与登出功能实现

接下来是完整的示例代码,包括创建客户端实例、尝试登录以及登出的操作:

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

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

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

class LoginButton extends StatefulWidget {
  @override
  _LoginButtonState createState() => _LoginButtonState();
}

class _LoginButtonState extends State<LoginButton> {
  final GoTrueClient client = GoTrueClient(
    url: 'http://localhost:9999', // 替换成你的GoTrue服务地址
    headers: {
      'Authorization': 'Bearer your-anon-token-here',
      'apikey': 'your-anon-token-here',
    },
  );

  Future<void> _login() async {
    try {
      final response = await client.signInWithPassword(
        email: 'example@example.com',
        password: 'password12345',
      );
      if (response.error == null) {
        print('Logged in, uid: ${response.user?.id}');
      } else {
        print('Sign in Error: ${response.error?.message}');
      }
    } on AuthException catch (error) {
      print('Authentication Exception: ${error.message}');
    }
  }

  Future<void> _logout() async {
    await client.signOut();
    print('Logged out!');
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(onPressed: _login, child: Text('Log In')),
        SizedBox(height: 20),
        ElevatedButton(onPressed: _logout, child: Text('Log Out')),
      ],
    );
  }
}

在这个例子中,我们创建了一个包含两个按钮的应用程序:一个用于登录,另一个用于登出。当点击“Log In”按钮时,应用程序将尝试使用提供的电子邮件和密码登录;成功后会打印用户的ID,失败则显示错误信息。点击“Log Out”按钮可以注销当前登录的用户。

请注意,你需要根据自己的环境调整 urlheaders 中的内容,并确保替换掉示例中的电子邮件和密码。

通过上述步骤,你就可以在Flutter项目中轻松集成 gotrue-dart 插件来处理用户的身份验证了。如果你有任何问题或需要进一步的帮助,请随时查阅官方文档或访问GitHub仓库获取更多信息。


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

1 回复

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


当然,下面是一个关于如何在Flutter应用中使用gotrue插件进行身份验证的示例代码。gotrue是一个用于身份验证的Supabase插件,支持电子邮件/密码、第三方OAuth登录等功能。

首先,确保你已经在pubspec.yaml文件中添加了supabasegotrue_client依赖:

dependencies:
  flutter:
    sdk: flutter
  supabase: ^latest_version  # 请替换为最新版本号

然后,在你的Flutter项目中,你可以按照以下步骤使用gotrue进行身份验证。

1. 初始化Supabase客户端

首先,你需要初始化Supabase客户端。确保你有Supabase项目的URL和匿名密钥。

import 'package:supabase/supabase.dart';

final SupabaseClient supabase = SupabaseClient(
  url: 'YOUR_SUPABASE_URL',  // 替换为你的Supabase项目URL
  anonKey: 'YOUR_ANON_KEY',  // 替换为你的Supabase匿名密钥
);

2. 用户注册

使用电子邮件和密码进行用户注册:

Future<void> signUpWithEmailAndPassword(String email, String password) async {
  try {
    var response = await supabase.auth.signUp(
      email: email,
      password: password,
    );
    print('User signed up successfully: ${response.data?.user?.email}');
  } catch (error) {
    print('Error signing up: $error');
  }
}

3. 用户登录

使用电子邮件和密码进行用户登录:

Future<void> logInWithEmailAndPassword(String email, String password) async {
  try {
    var response = await supabase.auth.signIn(
      email: email,
      password: password,
    );
    print('User logged in successfully: ${response.data?.user?.email}');
    // 保存session,例如使用shared_preferences或其他方式
    // await saveSession(response.session);
  } catch (error) {
    print('Error logging in: $error');
  }
}

4. 检查用户会话

检查当前用户会话是否有效:

Future<void> checkSession() async {
  try {
    var session = await supabase.auth.getSession();
    if (session != null) {
      print('User is authenticated: ${session.user?.email}');
    } else {
      print('User is not authenticated');
    }
  } catch (error) {
    print('Error checking session: $error');
  }
}

5. 用户登出

登出当前用户:

Future<void> logOut() async {
  try {
    await supabase.auth.signOut();
    print('User logged out successfully');
  } catch (error) {
    print('Error logging out: $error');
  }
}

6. 完整示例

将上述代码整合到一个完整的示例中:

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

void main() {
  final SupabaseClient supabase = SupabaseClient(
    url: 'YOUR_SUPABASE_URL',
    anonKey: 'YOUR_ANON_KEY',
  );

  runApp(MyApp(supabase: supabase));
}

class MyApp extends StatelessWidget {
  final SupabaseClient supabase;

  MyApp({required this.supabase});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AuthScreen(supabase: supabase),
    );
  }
}

class AuthScreen extends StatefulWidget {
  final SupabaseClient supabase;

  AuthScreen({required this.supabase});

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

class _AuthScreenState extends State<AuthScreen> {
  final _formKey = GlobalKey<FormState>();
  String _email = '';
  String _password = '';

  void _signUp() async {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      await widget.supabase.auth.signUp(email: _email, password: _password);
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Signed up successfully')));
    }
  }

  void _logIn() async {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      await widget.supabase.auth.signIn(email: _email, password: _password);
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Logged in successfully')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Auth Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value == null || value.isEmpty || !value.contains('@')) {
                    return 'Please enter a valid email address.';
                  }
                  return null;
                },
                onSaved: (value) {
                  _email = value!;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty || value.length < 6) {
                    return 'Password must be at least 6 characters long.';
                  }
                  return null;
                },
                onSaved: (value) {
                  _password = value!;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(onPressed: _signUp, child: Text('Sign Up')),
              SizedBox(height: 10),
              ElevatedButton(onPressed: _logIn, child: Text('Log In')),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何在Flutter应用中使用gotrue插件进行基本的用户注册和登录功能。请确保替换YOUR_SUPABASE_URLYOUR_ANON_KEY为你的实际Supabase项目URL和匿名密钥。

注意:在实际应用中,你需要处理更多的边缘情况和错误处理,比如保存和恢复会话、处理第三方OAuth登录等。

回到顶部