Zenn
🐦

FlutterでFirebaseのTwitterログインを使う方法

2022/12/24に公開
Flutter
iOS
Twitter
Dart
tech

twitter_loginパッケージの使用

twitter_loginパッケージを使うことで簡単にTwitterログイン機能を実装できます。
https://pub.dev/packages/twitter_login

APIKeyの外だし

APIKeyなどは間違ってリモートリポジトリへPushしないよう外部定義しておきましょう。

config.dart
class Config {
  static final apikey_twitter = 'fugagagagagaga';
  static final secretkey_twitter =　'hogegegegegege';
}
twitter_auth.dart
  Future _signInWithTwitter() async {
    final twitterLogin = TwitterLogin(
      apiKey: Config.apikey_twitter,
      apiSecretKey: Config.secretkey_twitter,
      redirectURI: 'socialauth://',
    );
    ・
    ・
    ・

Twitter developerの設定

Twitter developerに登録しているアプリのApp InfoにリダイレクトURLとして[socialauth://]を設定します

iOS AppでTwitterログインを使えるようにする設定

以下にあるファイルに
/AppName/ios/Runner/Info.plist

次のコードを追記

Info.plist
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string></string>
    <key>CFBundleURLSchemes</key>
    <array>
      <!-- Registered Callback URLs in TwitterApp -->
      <string>socialauth</string>
    </array>
  </dict>
</array>

TiwtterAPIのバージョン差異による落とし穴

FlutterでFirebaseのTwitterログインを実装するには、いくつかポイントを抑えておく必要があります。
具体的には、twitter_loginというパッケージはTwitterAPI V2で実装されているのにFirebaseのTwitterAuthProviderはV1にしか対応していないため、Twitter DeveloperアカウントをElevatedに変更する必要があります。

ソースコード

機能

twitter_auth.dart
// Twitterログイン
  Future _signInWithTwitter() async {
    final twitterLogin = TwitterLogin(
      apiKey: Config.apikey_twitter,
      apiSecretKey: Config.secretkey_twitter,
      redirectURI: 'socialauth://',
    );

    final authResult = await twitterLogin.loginV2(); //login()ではなくloginV2()
    switch (authResult.status) {
      case TwitterLoginStatus.loggedIn:
        // success
        print('====== Login success ======');
        final credential = TwitterAuthProvider.credential(
          accessToken: authResult.authToken!,
          secret: authResult.authTokenSecret!,
        );
        await FirebaseAuth.instance.signInWithCredential(credential);
        break;
      case TwitterLoginStatus.cancelledByUser:
        // cancel
        print('====== Login cancel ======');
        break;
      case TwitterLoginStatus.error:
      case null:
        // error
        print('====== Login error ======');
        break;
    }
  }

ボタンウィジェット

twitter_auth.dart
ElevatedButton(
                child: const Text('Twitter'),
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue,
                  onPrimary: Colors.white,
                  shape: const StadiumBorder(),
                ),
                onPressed: () async {
                  await _signInWithTwitter();
                },
              ),

Discussion