Flutter VK登录插件flutter_login_vk的使用

Flutter VK 登录插件 flutter_login_vk 的使用

flutter_login_vk 是一个用于在 Flutter 应用程序中集成 VK.com 登录功能的插件。通过该插件，你可以轻松地添加 VK 登录功能，并获取用户的基本信息。

SDK 版本

• iOS: ^1.6（通过 CocoaPods 获取）
• Android: 3.5.0（通过 Maven 获取）

最低要求

• iOS: 9.0 及以上版本。
• Android: 5.0 及以上版本（SDK 21）。最低 compileSdkVersion 为 31。

如果您的项目是在 Flutter 1.12 之前的版本创建的，那么您应该将其升级到 Android embedding v2。详情请参阅 迁移指南。

开始使用

要使用此插件，请按照以下步骤操作：

1. 在 pubspec.yaml 文件中添加 flutter_login_vk 作为依赖项；
2. 在 VK.com 上创建一个应用；
3. 配置 Android；
4. 配置 iOS；
5. 进行额外的 VK.com 应用设置；
6. 在应用程序中使用插件。

更多详细信息，请参阅 VK.com 的文档：

• iOS SDK
• Android SDK

如果您更喜欢俄语，可以参考 这里。

在 VK.com 上创建应用

1. 访问 VK.com 创建应用页面。
2. 输入应用名称。
3. 选择“独立应用”作为平台。
4. 点击“连接应用”。

应用创建完成后，转到“设置”选项卡并复制“App ID”（在本文档中用 [APP_ID] 表示）。

应用设置（Android）

1. 设置 Android 包名（即 AndroidManifest.xml 中的 package 属性）。
2. 设置 Android 主活动类（默认为 com.yourcompany.yourapp.MainActivity）。
3. 生成 SHA1 指纹并填入“签名证书指纹”。确保移除所有冒号。添加调试和发布证书的指纹。注意，如果您的应用使用了 Google Play 应用签名，则应从 Google Play 控制台获取 SHA-1 指纹。
4. 点击“保存”。

应用设置（iOS）

1. 添加您的 Bundle Identifier（在 Xcode 中找到）。
2. 设置 App ID（通常与 Bundle ID 相同）。
3. 点击“保存”。

配置 Android

编辑 AndroidManifest.xml 文件（位于 android/app/src/main/AndroidManifest.xml）：

1. 如果尚未添加，请在 <manifest> 根节点中添加 <uses-permission android:name="android.permission.INTERNET" /> 权限。
2. 在 <application> 节点中添加一个 VKServiceActivity。
3. 将 VK 应用标识符添加到资源文件（例如 strings.xml），替换 [APP_ID]。
4. 在 ProGuard 文件中添加 -keep class com.vk.** { *; } 规则。

完整的 AndroidManifest.xml 可以参考 这里。

配置 iOS

编辑 Info.plist 文件（位于 ios/Runner/Info.plist）：

1. 在 Xcode 中右键点击 Info.plist 并选择“打开为源代码”。
2. 复制并粘贴以下 XML 片段，替换 [APP_ID] 为您的应用 ID。
3. 添加以下 XML 片段。
4. 填写 VK 应用标识符。

完整的 Info.plist 可以参考 这里。

额外的 VK.com 应用设置

访问 我的应用，点击“管理”按钮。

在“信息”选项卡中，填写描述、选择类别、上传图标等。

在“设置”选项卡中，将应用状态从“关闭”改为“开启并可见”。

在应用程序中使用

首先，创建一个 VKLogin 实例。初始化 VK SDK 之前，调用 initSdk() 方法。

final vk = VKLogin();
await vk.initSdk();

现在您可以使用插件的功能了。插件支持的功能包括：

• 通过 VK.com 登录；
• 获取访问令牌；
• 获取用户资料；
• 获取用户电子邮件；
• 检查是否已登录；
• 注销。

示例代码如下：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  final plugin = VKLogin(debug: true);

  MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  String? _sdkVersion;
  VKAccessToken? _token;
  VKUserProfile? _profile;
  String? _email;
  bool _sdkInitialized = false;

  [@override](/user/override)
  void initState() {
    super.initState();

    _getSdkVersion();
    _initSdk();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final token = _token;
    final profile = _profile;
    final isLogin = token != null;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Login via VK example'),
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 18.0, horizontal: 8.0),
          child: Builder(
            builder: (context) => Center(
              child: Column(
                children: <Widget>[
                  if (_sdkVersion != null) Text('SDK v$_sdkVersion'),
                  if (token != null && profile != null)
                    Padding(
                      padding: const EdgeInsets.only(bottom: 10),
                      child: _buildUserInfo(context, profile, token, _email),
                    ),
                  isLogin
                      ? OutlinedButton(
                          child: const Text('Log Out'),
                          onPressed: _onPressedLogOutButton,
                        )
                      : OutlinedButton(
                          child: const Text('Log In'),
                          onPressed: () => _onPressedLogInButton(context),
                        ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildUserInfo(BuildContext context, VKUserProfile profile,
      VKAccessToken accessToken, String? email) {
    final photoUrl = profile.photo200;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('User: '),
        Text(
          '${profile.firstName} ${profile.lastName}',
          style: const TextStyle(fontWeight: FontWeight.bold),
        ),
        Text(
          'Online: ${profile.online}, Online mobile: ${profile.onlineMobile}',
          style: const TextStyle(fontWeight: FontWeight.bold),
        ),
        if (photoUrl != null) Image.network(photoUrl),
        const Text('AccessToken: '),
        Text(
          accessToken.token,
          softWrap: true,
        ),
        Text('Created: ${accessToken.created}'),
        if (email != null) Text('Email: $email'),
      ],
    );
  }

  Future<void> _onPressedLogInButton(BuildContext context) async {
    final res = await widget.plugin.logIn(scope: [
      VKScope.email,
    ]);

    if (res.isError) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Log In failed: ${res.asError!.error}'),
        ),
      );
    } else {
      final loginResult = res.asValue!.value;
      if (!loginResult.isCanceled) await _updateLoginInfo();
    }
  }

  Future<void> _onPressedLogOutButton() async {
    await widget.plugin.logOut();
    await _updateLoginInfo();
  }

  Future<void> _initSdk() async {
    await widget.plugin.initSdk();
    _sdkInitialized = true;
    await _updateLoginInfo();
  }

  Future<void> _getSdkVersion() async {
    final sdkVersion = await widget.plugin.sdkVersion;
    setState(() {
      _sdkVersion = sdkVersion;
    });
  }

  Future<void> _updateLoginInfo() async {
    if (!_sdkInitialized) return;

    final plugin = widget.plugin;
    final token = await plugin.accessToken;
    final profileRes = token != null ? await plugin.getUserProfile() : null;
    final email = token != null ? await plugin.getUserEmail() : null;

    setState(() {
      _token = token;
      _profile = profileRes?.asValue?.value;
      _email = email;
    });
  }
}