Flutter Line SDK集成插件flutter_line_sdk的使用

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

Flutter Line SDK集成插件flutter_line_sdk的使用

flutter_line_sdk

build

flutter_line_sdk 是一个Flutter插件,允许开发者在Flutter应用中使用Dart访问LINE的原生SDK。该插件可以帮助你在应用中集成LINE登录功能,可以将用户重定向到LINE或网页,以使用其LINE凭证登录。

示例代码

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

import 'src/app.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  LineSDK.instance.setup('1620019587').then((_) {
    print('LineSDK Prepared');
  });
  runApp(App());
}

前提条件

从版本2.0开始,flutter_line_sdk 支持 null safety。如果你仍然需要没有null safety的旧版本,请查看 version 1.3.0

要从移动平台访问你的LINE Login渠道,你需要进行一些额外的配置。在 LINE Developers控制台 中,进入你的LINE Login渠道设置,并在 App settings 标签下输入以下信息。

iOS app设置

Setting Description
iOS bundle ID 必填。你应用的包标识符。在Xcode中,在 Runner 项目设置的 General 标签下找到它。必须是小写的,例如 com.example.app。你可以通过每行输入一个来指定多个包标识符。
iOS universal link 可选。设置为你应用配置的通用链接。有关如何使用通用链接处理登录过程的更多信息,请参阅 Universal Links支持

Android app设置

Setting Description
Android package name 必填。用于启动Google Play商店的应用程序包名。
Android package signature 可选。你可以通过每行输入一个来设置多个签名。
Android scheme 可选。用于启动你应用的自定义URL方案。

安装

添加flutter_line_sdk包

按照 Flutter文档 中描述的标准方法将此包添加到你的Flutter应用程序中。这个过程包括以下步骤:

  1. 打开你应用文件夹中的 pubspec.yaml 文件,并在 dependencies 下添加 flutter_line_sdk:
  2. 通过在终端中运行 flutter pub get 来安装它。

现在,flutter_line_sdk 的Dart部分应该已经安装好了。接下来,你需要分别为iOS和Android项目设置LINE SDK。

设置LINE SDK

iOS

打开文件 ios/Runner/Info.plist 并在文本编辑器中插入以下代码片段,放在最后一个 </dict> 标签之前:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <!-- 指定当从LINE返回到你的应用时使用的URL方案 -->
      <string>line3rdp.$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
  <!-- 指定当你从应用中启动LINE时使用的URL方案 -->
  <string>lineauth2</string>
</array>

由于LINE SDK现在要求iOS 13.0或以上版本才能提供底层原生特性,因此你必须在 ios/Podfile 中的 Runner 目标添加以下行:

target 'Runner' do
+ platform :ios, '13.0'

  use_frameworks!
  use_modular_headers!
  ...
Android

为了确保与最新特性的兼容性,你需要将应用的 build.gradle 文件中的 minSdk 版本更新为 24 或更高。

android {
    defaultConfig {
-        minSdk flutter.minSdkVersion
+        minSdk 24
    }
}

导入和使用

设置

导入 flutter_line_sdk 到你想要使用它的任何地方:

import 'package:flutter_line_sdk/flutter_line_sdk.dart';

要使用这个包,你需要设置你的渠道ID。你可以通过调用 setup 方法来实现,例如在 main 函数中:

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  LineSDK.instance.setup("${your_channel_id}").then((_) {
    print("LineSDK Prepared");
  });
  runApp(App());
}

这只是一个示例。你可以在任何时候调用 setup,只要确保在调用任何其他LINE SDK方法之前只调用一次即可。

登录

现在你可以让用户使用LINE登录了。 通过将 Future<LoginResult> 的值赋给一个变量来获取登录结果。为了优雅地处理错误,将调用包裹在一个 try...on 语句中:

void _signIn() async {
  try {
    final result = await LineSDK.instance.login();
    // user id -> result.userProfile?.userId
    // user name -> result.userProfile?.displayName
    // user avatar -> result.userProfile?.pictureUrl
  } on PlatformException catch (e) {
    _showDialog(context, e.toString());
  }
}

默认情况下,login 使用 ["profile"] 作为其范围。在这种情况下,当登录完成后,你会在登录结果中有 userProfile 值。 如果你需要其他范围,可以通过列表传递给 login。更多请参阅 Scopes 文档。

final result = await LineSDK.instance.login(
    scopes: ["profile", "openid", "email"]
);
// 用户邮箱,如果用户在LINE中设置了邮箱并授予了你的请求。
final userEmail = result.accessToken.email;

如果你不包含 "profile" 范围,userProfile 将是一个空值。

注销

try {
  await LineSDK.instance.logout();
} on PlatformException catch (e) {
  print(e.message);
}

获取用户资料

try {
  final result = await LineSDK.instance.getProfile();
  // user id -> result.userId
  // user name -> result.displayName
  // user avatar -> result.pictureUrl
} on PlatformException catch (e) {
  print(e.message);
}

获取当前存储的访问令牌

try {
  final result = await LineSDK.instance.currentAccessToken;
  // access token -> result?.value
} on PlatformException catch (e) {
  print(e.message);
}

如果用户未登录,则返回 null。此方法的有效 result 不一定意味着访问令牌本身有效。它可能已过期或被用户从其他设备或LINE客户端撤销。

使用LINE服务器验证访问令牌

try {
  final result = await LineSDK.instance.verifyAccessToken();
  // 如果令牌有效,result.data 可访问。
} on PlatformException catch (e) {
  print(e.message);
  // 令牌无效,或其他错误。
}

刷新当前访问令牌

try {
  final result = await LineSDK.instance.refreshToken();
  // access token -> result.value
  // expires duration -> result.expiresIn
} on PlatformException catch (e) {
  print(e.message);
}

通常,你不需要手动刷新访问令牌,因为LINE SDK会在必要时自动尝试刷新访问令牌。我们不建议你自己刷新访问令牌。让LINE SDK自动管理访问令牌通常更容易、更安全且更具前瞻性。

错误处理

所有API都可能抛出带有错误 codemessagePlatformException。使用这些信息来识别何时在原生SDK内部发生错误。

错误代码和消息在iOS和Android之间会有所不同。请务必阅读 iOSAndroid 上的错误定义,以便在不同平台上提供更好的错误恢复和用户体验。

贡献

如果你认为你发现了一个漏洞或遇到了与安全相关的问题,请勿公开发布问题。相反,请发送电子邮件至 dl_oss_dev@linecorp.com

在贡献之前,请阅读 CONTRIBUTING.md


更多关于Flutter Line SDK集成插件flutter_line_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Line SDK集成插件flutter_line_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中集成和使用flutter_line_sdk插件的示例代码。这个插件允许你与LINE平台集成,进行用户登录等操作。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加flutter_line_sdk依赖:

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

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

2. 配置Android

android/app/src/main/AndroidManifest.xml文件中添加以下配置,以允许LINE SDK正常工作:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <!-- 其他配置 -->

    <application
        android:label="yourapp"
        android:icon="@mipmap/ic_launcher">
        <!-- 添加LINE SDK所需的Activity -->
        <activity
            android:name="com.linecorp.linesdk.activity.LineSDKActivity"
            android:launchMode="singleTop"
            android:theme="@style/LineSDKTheme">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="your_channel_id" android:host="callback" />
            </intent-filter>
        </activity>
    </application>

    <!-- 添加LINE SDK所需的权限 -->
    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

替换your_channel_id为你的LINE频道ID。

3. 配置iOS

ios/Runner/Info.plist文件中添加以下配置:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>lb-your_channel_id</string> <!-- 添加你的LINE频道ID -->
        </array>
    </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>line</string>
</array>

同样,替换your_channel_id为你的LINE频道ID。

4. 初始化并使用LINE SDK

在你的Flutter代码中,初始化并使用LINE SDK进行用户登录等操作。下面是一个简单的示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Line SDK Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final LineLoginResult _loginResult = LineLoginResult();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Line SDK Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You can log in with LINE by tapping the button below.',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _loginWithLine,
              child: Text('Log in with LINE'),
            ),
            if (_loginResult.accessToken != null)
              Text(
                'Access Token: ${_loginResult.accessToken}',
                style: TextStyle(color: Colors.green),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _loginWithLine() async {
    try {
      // 替换为你的LINE频道ID和客户端ID
      final lineLoginResult = await LineLogin.login(
        channelId: 'your_channel_id',
        clientId: 'your_client_id',
        redirectUri: 'your_redirect_uri',  // 通常是一个回调URL,用于LINE开发者后台配置
      );

      setState(() {
        _loginResult.accessToken = lineLoginResult.accessToken;
        _loginResult.userId = lineLoginResult.userId;
        _loginResult.displayName = lineLoginResult.displayName;
        // 其他属性也可以根据需要设置
      });
    } catch (e) {
      print('Error logging in with LINE: $e');
    }
  }
}

class LineLoginResult {
  String? accessToken;
  String? userId;
  String? displayName;
  // 其他属性可以根据需要添加
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个用于登录LINE的按钮。当用户点击按钮时,会调用_loginWithLine函数,该函数使用LineLogin.login方法进行登录,并将结果存储在_loginResult对象中。如果登录成功,会显示访问令牌(Access Token)等信息。

请确保你已经在LINE开发者后台正确配置了你的频道ID、客户端ID和回调URI,以便能够成功进行登录操作。

回到顶部