Flutter의 트위터 로그인(Twitter Sign-In) 통합

트위터 로그인(Twitter Sign-In)은 사용자가 자신의 트위터 계정을 사용하여 애플리케이션에 쉽게 로그인할 수 있도록 해주는 강력한 인증 방법입니다. Flutter를 사용하면 Firebase Authentication을 통해 트위터 로그인을 간편하게 통합할 수 있습니다. 이번 글에서는 Flutter에서 트위터 로그인을 설정하고 사용하는 방법을 단계별로 설명하겠습니다.

1. 트위터 개발자 계정 설정

먼저, Twitter Developer 계정을 생성하고 앱을 설정해야 합니다.

1.1 트위터 개발자 계정 및 앱 생성

1. Twitter Developer Portal에 로그인합니다.
2. Projects & Apps에서 Create App 버튼을 클릭하여 새 트위터 앱을 만듭니다.
3. 앱을 생성한 후 API Key와 API Secret Key를 저장합니다. 나중에 Firebase에 설정할 때 필요합니다.
4. Callback URL에 https://<firebase-project-id>.firebaseapp.com/__/auth/handler을 추가합니다. 이 URL은 Firebase에서 제공하는 인증 핸들러입니다.

2. Firebase 프로젝트 설정

트위터 로그인을 위해 Firebase와 연동해야 합니다.

2.1 Firebase 프로젝트 생성

1. Firebase 콘솔에서 새 프로젝트를 생성합니다.
2. Firebase 프로젝트 대시보드로 이동하여 Authentication을 클릭한 후, Sign-in method 탭에서 Twitter를 활성화합니다.
3. 트위터 개발자 콘솔에서 얻은 API Key와 API Secret Key를 입력합니다.

3. Flutter 프로젝트 설정

Flutter 프로젝트에서 필요한 패키지를 추가하고 트위터 로그인을 구현합니다.

 

 

728x90

 

 

3.1 패키지 추가

pubspec.yaml 파일에 Firebase 및 트위터 로그인 관련 패키지를 추가합니다.

 

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0
  firebase_auth: ^3.3.0
  twitter_login: ^4.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.3.2 Android 설정

android/app/build.gradle 파일에서 Firebase와 Google 서비스 플러그인을 추가합니다.

 

dependencies {
  classpath 'com.google.gms:google-services:4.3.10'
}

apply plugin: 'com.google.gms.google-services'

 

android/app/src/main/AndroidManifest.xml 파일에 인터넷 권한을 추가합니다.

 

<uses-permission android:name="android.permission.INTERNET"/>

 

3.3 iOS 설정

iOS 프로젝트에서 Firebase를 사용하기 위해 ios/Runner/Info.plist 파일에 트위터 로그인 관련 URL 스킴을 추가합니다.

 

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>twitterkit-<consumerKey></string>
    </array>
  </dict>
</array>

 

여기서 <consumerKey>는 Twitter Developer 콘솔에서 얻은 API Key입니다.

 

 

반응형

 

 

4. 트위터 로그인 구현

이제 Flutter 코드에서 트위터 로그인을 구현합니다.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:twitter_login/twitter_login.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SignInScreen(),
    );
  }
}

class SignInScreen extends StatefulWidget {
  @override
  _SignInScreenState createState() => _SignInScreenState();
}

class _SignInScreenState extends State<SignInScreen> {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<User?> _signInWithTwitter() async {
    final twitterLogin = TwitterLogin(
      apiKey: 'YOUR_API_KEY',
      apiSecretKey: 'YOUR_API_SECRET_KEY',
      redirectURI: 'YOUR_FIREBASE_PROJECT_REDIRECT_URI',
    );

    final authResult = await twitterLogin.login();
    
    if (authResult.status == TwitterLoginStatus.loggedIn) {
      final twitterAuthCredential = TwitterAuthProvider.credential(
        accessToken: authResult.authToken!,
        secret: authResult.authTokenSecret!,
      );

      final userCredential = await _auth.signInWithCredential(twitterAuthCredential);
      return userCredential.user;
    } else {
      return null; // 로그인 실패 또는 사용자가 취소한 경우
    }
  }

  void _signOut() async {
    await _auth.signOut();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Twitter Sign-In'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                User? user = await _signInWithTwitter();
                if (user != null) {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => HomeScreen(user: user)),
                  );
                }
              },
              child: Text('Sign in with Twitter'),
            ),
            ElevatedButton(
              onPressed: _signOut,
              child: Text('Sign out'),
            ),
          ],
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final User user;

  HomeScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Signed in as: ${user.displayName}'),
            Text('Email: ${user.email}'),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 사용자가 트위터 계정을 사용하여 로그인하고, 로그아웃할 수 있도록 하는 예제입니다. twitter_login 패키지를 사용하여 트위터 로그인 흐름을 처리하고, FirebaseAuth를 통해 Firebase 인증을 관리합니다.

5. 결과 테스트

이제 애플리케이션을 실행하여 트위터 로그인을 테스트할 수 있습니다.

1. flutter run 명령어를 사용하여 애플리케이션을 실행합니다.
2. "Sign in with Twitter" 버튼을 클릭하여 트위터 로그인 화면을 엽니다.
3. 트위터 계정을 사용하여 로그인합니다.
4. 로그인 후, Home 화면으로 이동하여 사용자의 이름과 이메일을 확인합니다.
5. "Sign out" 버튼을 클릭하여 로그아웃합니다.

결론

Flutter에서 트위터 로그인을 통합하면 사용자가 트위터 계정을 통해 손쉽게 애플리케이션에 로그인할 수 있습니다. Firebase Authentication과 twitter_login 패키지를 사용하여 트위터 로그인 기능을 간편하게 구현할 수 있으며, 이를 통해 사용자 인증 경험을 향상시킬 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에 트위터 로그인 기능을 통합해보세요. 트위터 로그인을 통해 사용자에게 더욱 매끄러운 인증 과정을 제공할 수 있습니다.