Zenn
📑

【Flutter】Flutter Web × LINE LIFF：サンプルアプリで動作確認 〜flutter_line_liff〜

2022/09/13に公開
2件
Flutter
LINE
liff
FlutterWeb
tech

はじめに

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

したこと

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

詳細

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);
  @override
  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);
  @override
  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)
    サクッと動かして動作確認してみたい。ってだけなら十分。
     
    LIFF SDKのjs関数を直接呼ぶVerはこちら↓
    「LINE LIFF × Flutter Web：サンプルアプリで動作確認 〜js〜」
     

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

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

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

脚注

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

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

GitHubで編集を提案

Discussion

waddy_uwaddy_u

トピック名を fluterweb から flutterweb へ修正することをご検討ください。

ゆーとゆーと

ご指摘ありがとうございます！誤字修正しました🙇