Flutter×FirebaseでSNS認証②

Flutter×supabaseのログイン調査してみた
こんにちは、株式会社Pentagonでアプリ開発をしている石渡港です。

https://pentagon.tokyo

Flutter×FirebaseでSNS認証を実装したのでTwitter認証部に関してまとめます。

ソースコード

一部抜粋

import 'dart:convert';
import 'dart:math';

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/material.dart';
import 'package:flutter_signin_button/flutter_signin_button.dart';
import 'package:twitter_login/twitter_login.dart';

// Twitterログイン
Future<void> _signInWithTwitter() async {
  try {
    UserCredential? userCredential;
    if (kIsWeb) {
      TwitterAuthProvider twitterProvider = TwitterAuthProvider();
      await _auth.signInWithPopup(twitterProvider);
    } else {
      final twitterLogin = TwitterLogin(
        apiKey: 'apiKey',
        apiSecretKey: 'apiSecretKey',
        redirectURI: 'tokyo.pentagon.flutterfiretest://',
      );
      final result = await twitterLogin.login();

      final AuthCredential credential = TwitterAuthProvider.credential(
        accessToken: result.authToken!,
        secret: result.authTokenSecret!,
      );
      userCredential = await _auth.signInWithCredential(credential);
    }
    final user = userCredential?.user;
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('Twitterログイン ${user?.uid}'),
      ),
    );
  } catch (e) {
    print(e);
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('Twitterでログイン失敗しました: $e'),
      ),
    );
  }
}

こちらを利用して認証を行います
https://pub.dev/packages/twitter_login

登録はこちらから
https://developer.twitter.com/en/apps

必要な情報は下記サイトを参考に登録
https://www.blog.danishi.net/2020/11/17/post-4146/

必要な情報はこちらを参考に

https://gyazo.com/87f20980bc6eb82102691eaafaa7ae00

下記へ割り当てる

     final twitterLogin = TwitterLogin(
       apiKey: 'apiKey',
       apiSecretKey: 'apiSecretKey',
       redirectURI: 'tokyo.pentagon.flutterfiretest://',
     );
     final result = await twitterLogin.login();

こちらにより承認したユーザのauthTokenやauthTokenSecretになるので、TwitterAuthProviderに当てはめることで情報を許可されている範囲で取得することが可能です。

ちなみに下記の情報を割り当てることで、自分のTwitterアカウントを手動で取得することも可能です。

次回はFirebaseログインについて書きます。