📑

LINE LIFF × Flutter Web:サンプルアプリで動作確認

2022/09/12に公開約3,100字

はじめに

LINE LIFF × Flutter Web でサンプルアプリを作ってユーザ情報を取得してみた。

したこと

  • LINE Developersの登録➜チャネル作成してLIFF IDの生成 [1]
  • web/index.htmlにLIFF SDKの記載
  • flutter_dotenvライブラリを用いてLIFF IDを本番環境で使用 [2]
  • flutter_line_liffパッケージの使用 [3]

詳細

index.html
<head>
  <script src="flutter.js" defer></script>
  <!-- <head>配下に以下挿入 -->
  <script  charset="utf-8"  src="https://static.line-scdn.net/liff/edge/versions/2.20.3/sdk.js"></script>
</head>
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_line_liff/flutter_line_liff.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

Profile? userInfo;
Future<void> main() async {
  // LIFF IDを定義したenvファイル読み込み
  await dotenv.load(fileName: "env");
  // LIFF初期化処理
  await FlutterLineLiff().init(
    config: Config(liffId: dotenv.env['LIFF_ID'].toString()),
    successCallback: () {
      debugPrint('LIFF init success.');
    },
    errorCallback: (error) {
      debugPrint(
          'LIFF init error: ${error.name}, ${error.message}, ${error.stack}');
    },
  );
  // ユーザ情報の取得
  userInfo = await FlutterLineLiff().profile;
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('LINE LIFF sample app'),
        ),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  
  Widget build(BuildContext context) {
    if (userInfo == null) {
      return const Center(
        child: Text("decodedIDToken: null"),
      );
    } else {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // プロフィール情報の表示
            const Text("Profile Picture"),
            Image.network(userInfo!.pictureUrl.toString()),
            Text("User Name: ${userInfo!.displayName}"),
            Text("User ID: ${userInfo!.userId}"),
            Text("Status Message: ${userInfo!.statusMessage}"),
          ],
        ),
      );
    }
  }
}

おわりに

  • LIFFとは?どんなことができる?どんな動きする?
    という思いから作ってみたサンプルアプリ。
    基本的なプロフィール情報は簡単に取得できることがわかった◎

  • 今回はflutter_line_liffパッケージを使用したが、できたばかりパッケージなので、実際の開発で採用するかは悩ましい。(使用時のverは0.0.3)
    サクッと動かして動作確認してみたい。ってだけなら十分。

  • 今回はgetProfile()で取得したが、getDecodedIDToken()でも基本的なユーザ情報は取得できた。
    詳しい違いはレファレンス参照。LIFF v2 APIリファレンス

liff.getDecodedIDToken()
LIFF SDKが取得したIDトークンの「ペイロード」を取得します。ペイロードには、ユーザーの表示名、プロフィール画像のURL、メールアドレスなどの情報が含まれます。
LIFFアプリでユーザーの表示名などを利用する場合に、このAPIを利用してください。

liff.getProfile()
現在のユーザーのプロフィール情報を取得します。

脚注
  1. LINE Developers登録方法については検索すると記事たくさん出てくるので割愛 ↩︎

  2. flutter_dotenvについての参考記事: FlutterWebデプロイ時に'.env'が読み込まれない ↩︎

  3. Pub.dev:flutter_line_liff ↩︎

GitHubで編集を提案

Discussion

ログインするとコメントできます