Flutter登录功能插件wepin_flutter_login_lib的使用

Flutter登录功能插件wepin_flutter_login_lib的使用

使用说明

本指南将介绍如何在Flutter项目中使用wepin_flutter_login_lib插件来实现登录功能。我们将详细讲解如何获取App ID和Key、安装依赖、初始化库以及调用不同的登录方法。

获取App ID和Key

首先，您需要在Wepin Workspace注册并获取App ID和App Key。具体步骤如下：

  1. 访问 Wepin Workspace 并完成注册。
  2. 导航到开发工具菜单，填写每个应用平台所需信息，以接收您的App ID和App Key。

安装依赖

在项目的pubspec.yaml文件中添加wepin_flutter_login_lib依赖：

dependencies:
  wepin_flutter_login_lib: ^0.0.9

或者运行以下命令：

flutter pub add wepin_flutter_login_lib

配置

深度链接设置

为了能够通过外部URL进行登录，需要配置深度链接。深度链接格式为wepin. + 您的应用ID。

Android

在build.gradle (app)文件中添加以下内容：

// For Deep Link => RedirectScheme Format: wepin. + Wepin App ID
android.defaultConfig.manifestPlaceholders = [
  'appAuthRedirectScheme': 'wepin.{{YOUR_WEPIN_APPID}}'
]
iOS

在Info.plist文件中添加以下内容：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>unique name</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>wepin.{{YOUR_WEPIN_APPID}}</string>
        </array>
    </dict>
</array>

初始化SDK

在Dart文件中导入SDK：

import 'package:wepin_flutter_login_lib/wepin_flutter_login_lib.dart';
import 'package:wepin_flutter_login_lib/type/wepin_flutter_login_lib_type.dart';

初始化Wepin登录库：

WepinLogin wepinLogin = WepinLogin(wepinAppKey: wepinAppKey, wepinAppId: wepinAppId);
await wepinLogin.init();

检查是否已初始化：

bool isInitialized = await wepinLogin.isInitialized();

登录方法

使用OAuth登录

要使用OAuth登录功能（例如loginWithOauthProvider），您需要先在Wepin Workspace中设置OAuth登录提供商。

final user = await wepinLogin.loginWithOauthProvider(
  provider: "google",
  clientId: "your-google-client-id"
);

使用邮箱和密码注册

使用邮箱和密码在Wepin Firebase上注册用户，并返回Firebase登录信息。

final user = await wepinLogin.signUpWithEmailAndPassword(
  email: 'abc@defg.com', 
  password: 'abcdef123&'
);

使用邮箱和密码登录

使用邮箱和密码登录Wepin Firebase，并返回Firebase登录信息。

final user = await wepinLogin.loginWithEmailAndPassword(
  email: 'abc@defg.com', 
  password: 'abcdef123&'
);

使用ID Token登录

使用外部ID Token登录Wepin Firebase，并返回Firebase登录信息。

final user = await wepinLogin.loginWithIdToken(
    idToken:'eyJHGciO....adQssw5c', 
    sign:'9753d4dc...c63466b9'
);

使用访问令牌登录

使用外部访问令牌登录Wepin Firebase，并返回Firebase登录信息。

final user = await wepinLogin.loginWithAccessToken(
    provider: 'naver', 
    accessToken:'eyJHGciO....adQssw5c', 
    sign:'9753d4dc...c63466b9'
);

示例代码

以下是完整的示例代码，展示了如何使用wepin_flutter_login_lib插件进行登录操作。

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

import 'package:wepin_flutter_login_lib/type/wepin_flutter_login_lib_type.dart';
import 'package:wepin_flutter_login_lib/wepin_flutter_login_lib.dart';
import 'package:wepin_flutter_login_lib_example/value/sdk_app_info.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isBusy = false;
  WepinLogin? wepinLogin;
  LoginResult? loginResult;
  String testIdToken = 'idToken';

  final List<String> items = [
    'init',
    'isInitialized',
    'loginWithOauthProvider(google)',
    'loginWithOauthProvider(apple)',
    'loginWithOauthProvider(naver)',
    'loginWithOauthProvider(discord)',
    'loginWithOauthProvider(line)',
    'loginWithOauthProvider(facebook)',
    'signUpWithEmailAndPassword',
    'loginWithEmailAndPassword',
    'loginWithIdToken',
    'loginWithAccessToken',
    'getRefreshFirebaseToken',
    'getRefreshFirebaseTokenWithToken',
    'loginWepin',
    'getCurrentWepinUser',
    'loginFirebaseWithOauthProvider(google)',
    'loginFirebaseWithOauthProvider(apple)',
    'loginFirebaseWithOauthProvider(naver)',
    'loginFirebaseWithOauthProvider(discord)',
    'loginFirebaseWithOauthProvider(line)',
    'loginFirebaseWithOauthProvider(facebook)',
    'loginWepinWithOauthProvider(google)',
    'loginWepinWithOauthProvider(apple)',
    'loginWepinWithOauthProvider(naver)',
    'loginWepinWithOauthProvider(discord)',
    'loginWepinWithOauthProvider(line)',
    'loginWepinWithOauthProvider(facebook)',
    'loginWepinWithIdToken',
    'loginWepinWithAccessToken',
    'loginWepinWithEmailAndPassword',
    'logout',
    'getSignForLogin',
    'finalize',
  ];
  final Map<String, Future<dynamic> Function()> itemFunctions = {};

  String _selectedMessage = '';
  void _onItemTap(String item) async {
    try {
      _setBusyState();

      final function = itemFunctions[item];
      if (function != null) {
        final res = await function();
        setState(() {
          _selectedMessage = '$item is success: $res';
        });
      } else {
        setState(() {
          _selectedMessage = 'No function defined for $item';
        });
      }
      _clearBusyState();
    } catch (e) {
      setState(() {
        _selectedMessage = '$item is failed: $e';
      });
      _clearBusyState();
    }
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    wepinLogin = WepinLogin(wepinAppKey: wepinAppKey, wepinAppId: wepinAppId);
    itemFunctions.addAll({
      'init': initWepinLogin,
      'isInitialized': () async => wepinLogin?.isInitialized(),
      'loginWithOauthProvider(google)': () async => loginOauthProvider('google', googleClientId),
      'loginWithOauthProvider(apple)': () async => loginOauthProvider('apple', appleClientId),
      'loginWithOauthProvider(naver)': () async => loginOauthProvider('naver', naverClientId),
      'loginWithOauthProvider(discord)': () async => loginOauthProvider('discord', discordClientId),
      'loginWithOauthProvider(line)': () async => loginOauthProvider('line', lineClientId),
      'loginWithOauthProvider(facebook)': () async => loginOauthProvider('facebook', facebookClientId),
      'signUpWithEmailAndPassword': () async => await loginAndSetLoginResult(() async => wepinLogin?.singUpWithEmailAndPassword(email: 'dfcf1d28a921@drmail.in', password: r'abc1234!')),
      'loginWithEmailAndPassword': () async => await loginAndSetLoginResult(() async => await wepinLogin?.loginWithEmailAndPassword(email: 'dfcf1d28a921@drmail.in', password: r'abc1234!')),
      'loginWithIdToken': () async => loginAndSetLoginResult(() async => await wepinLogin?.loginWithIdToken(idToken: '', sign: wepinLogin!.getSignForLogin(privateKey: privateKey, message: ''))),
      'loginWithAccessToken': () async => await loginAndSetLoginResult(() async => await wepinLogin?.loginWithAccessToken(accessToken: '', provider: 'naver', sign: wepinLogin!.getSignForLogin(privateKey: privateKey, message: ''))),
      'getRefreshFirebaseToken': () async => await wepinLogin?.getRefreshFirebaseToken(),
      'getRefreshFirebaseTokenWithToken': () async =>  await loginAndSetLoginResult(() async =>  wepinLogin?.getRefreshFirebaseToken(prevToken: LoginResult(provider: 'google', token: WepinFBToken(idToken: '---', refreshToken: '---')))),
      'loginWepin': () async => await loginWepin(),
      'getCurrentWepinUser': () async => await wepinLogin?.getCurrentWepinUser(),

      'loginFirebaseWithOauthProvider(google)': () async => loginFirebaseOauthProvider('google', googleClientId),
      'loginFirebaseWithOauthProvider(apple)': () async => loginFirebaseOauthProvider('apple', appleClientId),
      'loginFirebaseWithOauthProvider(naver)': () async => loginFirebaseOauthProvider('naver', naverClientId),
      'loginFirebaseWithOauthProvider(discord)': () async => loginFirebaseOauthProvider('discord', discordClientId),
      'loginFirebaseWithOauthProvider(line)': () async => loginFirebaseOauthProvider('line', lineClientId),
      'loginFirebaseWithOauthProvider(facebook)': () async => loginFirebaseOauthProvider('facebook', facebookClientId),
      'loginWepinWithOauthProvider(google)': () async => await wepinLogin!.loginWepinWithOauthProvider(provider: 'google', clientId: googleClientId),
      'loginWepinWithOauthProvider(apple)': () async => await wepinLogin!.loginWepinWithOauthProvider(provider: 'apple', clientId: appleClientId),
      'loginWepinWithOauthProvider(naver)': () async => await wepinLogin!.loginWepinWithOauthProvider(provider: 'naver', clientId: naverClientId),
      'loginWepinWithOauthProvider(discord)': () async => await wepinLogin!.loginWepinWithOauthProvider(provider: 'discord', clientId: discordClientId),
      'loginWepinWithOauthProvider(line)': () async => await wepinLogin!.loginWepinWithOauthProvider(provider: 'line', clientId: lineClientId),
      'loginWepinWithOauthProvider(facebook)': () async => await wepinLogin!.loginWepinWithOauthProvider(provider: 'facebook', clientId: facebookClientId),
      'loginWepinWithEmailAndPassword': () async => await  wepinLogin?.loginWepinWithEmailAndPassword(email: 'dfcf1d28a921@drmail.in', password: r'abc1234!'),
      'loginWepinWithIdToken': () async => await wepinLogin?.loginWepinWithIdToken(idToken: ''),
      'loginWepinWithAccessToken': () async =>  await wepinLogin?.loginWepinWithAccessToken(accessToken: '', provider: 'naver'),

      'logout': () async => await wepinLogin?.logoutWepin(),
      'getSignForLogin': () async => wepinLogin?.getSignForLogin(privateKey: privateKey, message: testIdToken),
      'finalize': () async => await wepinLogin?.finalize(),
    });
  }

  void _clearBusyState() {
    setState(() {
      _isBusy = false;
    });
  }

  void _setBusyState() {
    setState(() {
      _isBusy = true;
      _selectedMessage = 'processing....';
    });
  }

  Future<bool?> initWepinLogin() async {
    await wepinLogin?.init();
    return wepinLogin?.isInitialized();
  }

  Future<LoginResult?> loginOauthProvider(String provider, String clientId) async {
    final res = await wepinLogin?.loginWithOauthProvider(
        provider: provider, clientId: clientId);

    final sign = wepinLogin?.getSignForLogin(privateKey: privateKey, message: res!.token);
    LoginResult? resLogin;
    if (provider == 'naver' || provider == 'discord') {
      resLogin = await loginAndSetLoginResult(() async => await wepinLogin!.loginWithAccessToken(provider: provider, accessToken: res!.token, sign: sign!));
    } else {
      resLogin = await loginAndSetLoginResult(() async => await wepinLogin!.loginWithIdToken(idToken: res!.token, sign: sign!));
    }
    return resLogin;
  }

  Future<LoginResult?> loginFirebaseOauthProvider(String provider, String clientId) async {
    LoginResult? resLogin = await loginAndSetLoginResult(() async =>
        await wepinLogin!.loginFirebaseWithOauthProvider(provider: provider, clientId: clientId));
    return resLogin;
  }

  Future<dynamic> loginAndSetLoginResult(Function function) async {
    final res = await function();
    setState(() {
      loginResult = res;
    });
    return res;
  }

  Future<dynamic> loginWepin() async {
    if (loginResult == null) return 'loginResult is null';
    final res = await wepinLogin?.loginWepin(loginResult!);
    setState(() {
      loginResult = null;
    });
    return res.toString();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Wepin Login Library Flutter Test'),
        ),
        body: SafeArea(
          child: Column(
            children: <Widget>[
              Visibility(
                visible: _isBusy,
                child: const LinearProgressIndicator(),
              ),
              const Padding(
                padding: EdgeInsets.all(16.0),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return InkWell(
                      onTap: () => _onItemTap(items[index]),
                      child: ListTile(
                        title: Text(items[index]),
                      ),
                    );
                  },
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(16.0),
                child: Text(
                  'Test Result',
                  style: TextStyle(fontSize: 24),
                ),
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 3,
                padding: const EdgeInsets.all(8.0),
                margin: const EdgeInsets.all(8.0),
                color: Colors.grey[200],
                child: SingleChildScrollView(
                  child: Text(
                    _selectedMessage,
                    style: const TextStyle(fontSize: 18),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter登录功能插件wepin_flutter_login_lib的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter登录功能插件wepin_flutter_login_lib的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


wepin_flutter_login_lib 是一个用于在 Flutter 应用中实现登录功能的插件。以下是如何使用该插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 wepin_flutter_login_lib 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  wepin_flutter_login_lib: ^版本号

请将 ^版本号 替换为最新的插件版本号。

2. 导入插件

在你的 Dart 文件中导入 wepin_flutter_login_lib 插件。

import 'package:wepin_flutter_login_lib/wepin_flutter_login_lib.dart';

3. 初始化插件

在使用插件之前，你需要初始化它。通常，你可以在 main.dart 文件中的 main 函数中进行初始化。

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化插件
  WepinFlutterLoginLib.initialize(
    apiKey: '你的API密钥',
    environment: Environment.sandbox, // 或者 Environment.production
  );

  runApp(MyApp());
}

4. 实现登录功能

在你的应用界面中，你可以使用 WepinFlutterLoginLib 提供的 API 来实现登录功能。

class LoginScreen extends StatelessWidget {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: '邮箱'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: '密码'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                try {
                  final response = await WepinFlutterLoginLib.login(
                    email: _emailController.text,
                    password: _passwordController.text,
                  );
                  // 处理登录成功后的逻辑
                  print('登录成功: ${response.token}');
                } catch (e) {
                  // 处理登录失败后的逻辑
                  print('登录失败: $e');
                }
              },
              child: Text('登录'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 处理登录结果

在上面的代码中，WepinFlutterLoginLib.login 方法返回一个 Future，你可以使用 await 来等待登录结果。如果登录成功，你可以获取到用户的 token 或其他信息。如果登录失败，你可以捕获异常并进行处理。

6. 其他功能

wepin_flutter_login_lib 可能还提供了其他功能，例如注册、忘记密码等。你可以查阅插件的文档来了解更多详细信息。

7. 运行应用

最后，运行你的 Flutter 应用，并测试登录功能。

flutter run
回到顶部