Photo by Rodion Kutsaev on Unsplash

FlutterでTimeCrowdアプリを作る その2: TimeCrowdログイン

FlutterでTimeCrowdアプリを作る その1: 導入編の続きです。

今回はアプリ内でTimeCrowdにログインしてみようと思います。
FlutterでOAuth 2を触るのは初めてなのでハマるかもしれません。

dotenv

OAuth 2関連の情報をソースコードに書くわけにはいかないのでdotenvを入れます。

java-james/flutter_dotenv

Flutter用のパッケージがありました。

pubspec.yaml に flutter_dotenv を追加して flutter packages get します。あとはREADME#usageにしたがって設定します。

準備ができたので使ってみます。

mainで読み込んで…

Future main() async {
  await DotEnv().load('.env');
  runApp(MyApp());
}

initStateでprintします。

class _MyHomePageState extends State<MyHomePage> {
  // ...
  @override
  void initState() {
    print(DotEnv().env['VAR_NAME']);
  }
  // ...
}

無事表示されました。

flutter: HELLOWORLD

OAuth 2

タイムクラウドはログインにGoogleを使うため、WebViewではログインできません。そこでWebViewを使わないようにforkされた以下のパッケージを使ってみます。

ibrierley/FlutterOAuth

pubspec.yamlには以下のように書きました。

flutter_oauth:
  git: git://github.com/ibrierley/FlutterOAuth.git
url_launcher:

.envにアプリIDとシークレットを設定した状態で以下のようなソースコードを書いて実行します。

import 'package:flutter_oauth/lib/flutter_auth.dart';
import 'package:flutter_oauth/lib/model/config.dart';
import 'package:flutter_oauth/lib/oauth.dart';
import 'package:flutter_oauth/lib/token.dart';
OAuth flutterOAuth;
flutterOAuth = FlutterOAuth(Config(
    "https://timecrowd.net/oauth/authorize",
    "https://timecrowd.net/oauth/token",
    DotEnv().env['TIMECROWD_APP_ID'],
    DotEnv().env['TIMECROWD_SECRET'],
    "http://localhost:8080",
    "code"));
Token token = await flutterOAuth.performAuthorization();
print(token.accessToken);

無事トークンが取れました。

flutter: <アクセストークン>

ハマるかと思いましたが、以外とパッケージが揃っており普通にログインまで辿り着けてしまいました。
※ 記事を書きながらの作業でちょうど1時間（タイムクラウドで計測）

なお、今回のソースコードはこのコミットまでです。

Sign in with TimeCrowd · ruffnote-blog/timecrowd_flutter@0efe1c5

次回はこのトークンを保存するところか、APIを叩くところをやろうと思います。