Flutter VKontakte登录插件vk_id的使用

Flutter VKontakte 登录插件 vk_id 的使用

简介

pub package License

这是一个纯 Dart 实现的 VK ID OAuth API。该模块允许生成授权链接、获取 OAuth 令牌和用户数据。

通用信息

支持的 Dart SDK 版本

  • Dart SDK >= 3.3.0

支持的授权模式

  • 前端授权码交换（无需 SDK）：前端生成随机 code_verifier 和 state
  • 后端授权码交换（无需 SDK）：后端生成随机 code_verifier 和 state 并将 code_challenge 与 state 发送到前端

支持的 VK 应用平台

  • Android
  • iOS
  • Web

注意：你不受硬件和 VK 应用平台之间的严格绑定限制。例如，你可以使用 Android 设备通过 iOS 的 VK 应用进行授权。

支持的 VK ID API

  • 生成包含 code_verifier 或 code_challenge 的 VK ID 授权链接
  • 使用从用户登录重定向授权码交换访问令牌、刷新令牌和 ID 令牌
  • 通过刷新令牌刷新访问令牌
  • 获取公开（屏蔽）用户信息
  • 获取完整（未屏蔽）用户信息
  • 撤销授权权限
  • 使授权失效（注销）

注意：此模块不支持用户授权。需要在 Flutter 上下文中使用 WebView 来完成此操作。

配置

步骤

  1. 创建并设置 VK 应用
  2. 使用 VK 应用客户端 ID 创建 VkIDController 实例

如果之前已保存授权，则可以在控制器构造函数中设置初始 OAuth 和配置文件数据。

授权

生成授权链接

你可以自行生成授权链接（包括 redirect_uri 和 code_challenge 或 code_verifier），或者请求后端生成的链接。

  • Android 和 iOS：redirect_uri 必须为 'vk{clientID}://vk.com/blank.html'。否则，VK 将会在授权时抛出错误。
  • Web：redirect_uri 必须与 VK 网页应用设置中的 URI 匹配。也可以使用 Android 和 iOS 应用中的默认值（vk{clientID}://vk.com/blank.html）。
生成授权链接的示例
  1. 使用 code_challenge 的 Android 和 iOS
final controller = VkIDController(clID: 1234567890);
// 生成 code_verifier 和 code_challenge 本身或从后端获取 code_challenge
final codeChallenge = "1234567890RND0987654321";
final uri = controller.generateAuthorizeLinkWithCodeChallenge(codeChallenge: codeChallenge);
  1. 使用随机 code_verifier 的 Android 和 iOS
final controller = VkIDController(clID: 1234567890);
final codeVerifierWithUri = controller.generateAuthorizeLinkWithCodeVerifier();
  1. 使用用户定义 code_verifier 的 Android 和 iOS
final controller = VkIDController(clID: 1234567890);
// 生成 code_verifier
final codeVerifier = "1234567890RND0987654321";
final codeVerifierWithUri = controller.generateAuthorizeLinkWithCodeVerifier(codeVerifier: codeVerifier);
  1. 使用 code_challenge 和用户定义 redirect_uri 的 Web
final controller = VkIDController(clID: 1234567890);
final redirectUri = "https://site.com/redirect";
// 生成 code_verifier 和 code_challenge 本身或从后端获取 code_challenge
final codeChallenge = "1234567890RND0987654321";
final uri = controller.generateAuthorizeLinkWithCodeChallenge(codeChallenge: codeChallenge, redirectUri: redirectUri);
  1. 使用 code_challenge 和默认 redirect_uri 的 Web
final controller = VkIDController(clID: 1234567890);
// 生成 code_verifier 和 code_challenge 本身或从后端获取 code_challenge
final codeChallenge = "1234567890RND0987654321";
final uri = controller.generateAuthorizeLinkWithCodeChallenge(codeChallenge: codeChallenge);
  1. 使用用户定义 redirect_uri 和随机 code_verifier 的 Web
final controller = VkIDController(clID: 1234567890);
final redirectUri = "https://site.com/redirect";
// 生成 code_verifier
final codeVerifier = "1234567890RND0987654321";
final codeVerifierWithUri = controller.generateAuthorizeLinkWithCodeVerifier(codeVerifier: codeVerifier);
  1. 使用默认 redirect_uri 和随机 code_verifier 的 Web
final controller = VkIDController(clID: 1234567890);
// 生成 code_verifier
final codeVerifier = "1234567890RND0987654321";
final codeVerifierWithUri = controller.generateAuthorizeLinkWithCodeVerifier(codeVerifier: codeVerifier);

在 VK ID 上授权

你需要 Flutter 上下文和 WebView 来处理它

将授权链接传递给 WebView。还应包括 NavigationDelegate 以防止重定向导航请求。详情请参见 示例。

  • 前端模式：阻止 WebView 上的 id.vk.com 重定向（阻止导航请求）。还需要从查询参数中提取 code 和 device_id 参数来交换 OAuth 令牌。
  • 后端模式：如果 VK 应用是网页，则不要阻止重定向。否则，阻止它并处理授权数据。

获取 OAuth 令牌

  • 前端模式：使用控制器方法交换授权码以获取访问令牌。
  • 后端模式：如果需要，将数据发送到后端进行交换。

VK ID 控制器会在必要时自动刷新访问令牌。

完整示例

以下是一个完整的示例代码，展示了如何初始化应用程序并生成授权链接。

import 'launch_helper.dart';

Future<void> main() async {
  await LaunchHelper.initApp();
}

launch_helper.dart 文件可能包含类似以下内容：

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

class LaunchHelper {
  static Future<void> initApp() async {
    final controller = VkIDController(clID: 1234567890);
    final codeVerifierWithUri = controller.generateAuthorizeLinkWithCodeVerifier();

    // 这里可以添加 WebView 来处理授权链接
    print('授权链接: $codeVerifierWithUri');
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter应用中使用VKontakte登录插件vk_id的示例代码。这个示例假设你已经安装了vk_id插件，并且已经在VKontakte开发者平台上创建了应用并获取了所需的凭证。

1. 添加依赖

首先，确保在pubspec.yaml文件中添加了vk_id依赖：

dependencies:
  flutter:
    sdk: flutter
  vk_id: ^最新版本号  # 请替换为实际可用的最新版本号

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

2. 配置VKontakte应用

在VKontakte开发者平台上，你需要为你的应用配置重定向URI。对于Flutter应用，这通常是一个自定义的scheme，比如vk<你的应用ID>。

3. 初始化VKontakte SDK

在你的Flutter应用中，你需要初始化VKontakte SDK。这通常在应用启动时完成。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('VKontakte Login Example'),
        ),
        body: VKLoginExample(),
      ),
    );
  }
}

class VKLoginExample extends StatefulWidget {
  @override
  _VKLoginExampleState createState() => _VKLoginExampleState();
}

class _VKLoginExampleState extends State<VKLoginExample> {
  @override
  void initState() {
    super.initState();
    // 初始化VKontakte SDK
    _initVKontakteSDK();
  }

  Future<void> _initVKontakteSDK() async {
    final VKontakte vk = VKontakte(
      appId: '你的VKontakte应用ID',
      clientSecret: '你的VKontakte应用密钥',
      redirectUri: '你的重定向URI', // 例如：'vk123456789'
    );

    // 可以在这里处理初始化后的逻辑，比如检查用户是否已登录
    // ...
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () => _loginWithVKontakte(),
        child: Text('Login with VKontakte'),
      ),
    );
  }

  Future<void> _loginWithVKontakte() async {
    try {
      final VKontakte vk = VKontakte(
        appId: '你的VKontakte应用ID',
        clientSecret: '你的VKontakte应用密钥',
        redirectUri: '你的重定向URI', // 例如：'vk123456789'
      );

      // 发起登录请求
      final VKAccessToken accessToken = await vk.login();

      // 处理登录成功后的逻辑
      print('Access Token: ${accessToken.token}');
      print('User ID: ${accessToken.userId}');
      // ...
    } catch (e) {
      // 处理错误
      print('Error: $e');
    }
  }
}

4. 处理登录回调

由于Flutter是跨平台的，处理重定向回调可能需要一些额外的配置，尤其是在Android和iOS上。你需要按照vk_id插件的文档配置Android的AndroidManifest.xml和iOS的Info.plist，以确保重定向URI能够正确处理。

注意事项

  • 确保你的VKontakte应用ID、密钥和重定向URI是正确的。
  • 处理用户隐私和数据安全，确保遵守VKontakte的开发者政策和用户协议。
  • 根据需要调整UI和用户体验，比如添加加载指示器或错误提示。

这个示例代码提供了一个基本的框架，你可以根据实际需求进行扩展和修改。希望这对你有所帮助！

回到顶部