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ログインについて書きます。