Flutter网页端认证插件auth_web_sdk的使用

Flutter网页端认证插件auth_web_sdk的使用

Prerequisites（前置条件）

在开始之前，请确保你已经满足以下条件：

  1. 已有的 Flutter 项目。
  2. 在 AndroidManifest.xml 文件中添加了互联网权限。
  3. 支持的 SDK：
    • Android 21+
    • iOS 12.0+

如何使用 auth-web 包

第一步：定义空的访问令牌

late final accessToken;

第二步：添加以下代码到 onTap 或直接放到 Scaffold 的 body 中

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => AuthWebViewSdkClass(
      // 基础 URL
      baseUrl: "https://nightly-accounts-api.complyment.com/",
      // 客户端 ID
      clientId: "d1d90d96-de43-4ee8-9c0b-d3f17d50ec6b",
      // 响应类型
      responseType: "token",
      // 范围
      scope: "openid%20profile%20user_info_all&",
      // 重定向 URL
      redirectUrl: "https://nightly-accounts.complyment.com/profile/personal-detail",
      // 接收令牌的回调函数
      onTokenReceived: (String token) {
        accessToken = token;
        debugPrint('Received token: $token');
        if (accessToken != null) {
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(
              builder: (context) => SuccessScreen(),
            ),
          );
        }
      },
    ),
  ),
);

确保你有正确的 Base Url、Client Id、Response Type、Scope 和 Redirect Url

  • Base Url: 提供的认证服务的基础 URL。
  • Client Id: 你的应用在认证服务中的唯一标识符。
  • Response Type: 通常设置为 "token"，表示直接获取访问令牌。
  • Scope: 访问权限范围，可以是多个权限用 %20 分隔。
  • Redirect Url: 用户认证完成后跳转的 URL。

Additional Information（额外信息）

确保在 android/app/build.gradle 文件中设置了正确的 minSdkVersion，如果之前低于 19，则应将其设置为 21：

android {
    defaultConfig {
        minSdkVersion 21
    }
}

在你的应用或包中导入 auth_webview_sdk 包：

import 'package:auth_webview_sdk/auth_webview_sdk.dart';

更多关于Flutter网页端认证插件auth_web_sdk的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网页端认证插件auth_web_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


auth_web_sdk 是一个用于 Flutter 网页端的认证插件，主要用于在 Web 应用程序中实现用户认证功能。它通常与 Firebase Authentication 或其他身份验证服务集成，以便在 Web 环境中处理用户登录、注册、注销等操作。

以下是使用 auth_web_sdk 插件的基本步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 auth_web_sdk 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  auth_web_sdk: ^1.0.0  # 请使用最新的版本号

然后运行 flutter pub get 来获取依赖。

2. 初始化 Firebase

在使用 auth_web_sdk 之前，你需要初始化 Firebase。如果你还没有设置 Firebase 项目，请先在 Firebase 控制台 中创建一个项目，并获取 Firebase 配置。

在 index.html 文件中添加 Firebase 的初始化脚本：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flutter Web</title>
  </head>
  <body>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js"></script>
    <script>
      // Your web app's Firebase configuration
      var firebaseConfig = {
        apiKey: "YOUR_API_KEY",
        authDomain: "YOUR_AUTH_DOMAIN",
        projectId: "YOUR_PROJECT_ID",
        storageBucket: "YOUR_STORAGE_BUCKET",
        messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
        appId: "YOUR_APP_ID"
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

3. 使用 auth_web_sdk 进行认证

在你的 Flutter 代码中，你可以使用 auth_web_sdk 来处理用户认证。以下是一个简单的示例：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AuthWebSdk.initialize(
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AuthScreen(),
    );
  }
}

class AuthScreen extends StatefulWidget {
  [@override](/user/override)
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  Future<void> _signInWithEmailAndPassword() async {
    try {
      final user = await AuthWebSdk.signInWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      print('User signed in: ${user?.email}');
    } catch (e) {
      print('Error signing in: $e');
    }
  }

  Future<void> _signOut() async {
    try {
      await AuthWebSdk.signOut();
      print('User signed out');
    } catch (e) {
      print('Error signing out: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Auth Web SDK Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _signInWithEmailAndPassword,
              child: Text('Sign In'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _signOut,
              child: Text('Sign Out'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部