편집 내역

2020년 12월
플러그인 사용
Firebase 업데이트에 맞게 코드 변경

사전 준비

Firebase 과 Twitter Developer 에서 Twitter 로그인을 할 수 있도록 준비해 주세요.
Twitter 로그인에는 신청이 필요합니다. 신청이 아직인 분은 먼저 신청을 부탁합니다.

Twitter Developer 설정

Twitter Developer를 열고 Authentication settings에서 Callback URL을 설정합니다.
이번에는 예로 example://를 추가했습니다.
TwitterSDK를 사용하지 않으므로 twittersdk:// 추가가 필요하지 않습니다.

Twitter 로그인 플러그인 추가

이번에 사용할 플러그인은 twitter_login을 사용합니다.
2020년 12월 24일 현재 최신 버전 2.1.1

pubspec.yaml

dependencies:
  twitter_login: ^2.1.1

iOS 설정

Twitter Developer에 추가한 콜백 URL을 Info.plist에 추가합니다.

ios/Runner/Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>example</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>app</string>
    </array>
  </dict>
</array>

Android 설정

Twitter Developer에 추가한 콜백 URL을 AndroidManifest.xml에 추가합니다.

android/app/src/main/AndroidManifest.xml

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <!-- Accepts URIs that begin with "example://gizmos” -->
  <!-- Registered Callback URLs in TwitterApp -->
  <data android:scheme="example"
        android:host="gizmos" /> <!-- host is option -->
</intent-filter>

Flutter측의 처리

apiKey, apiSecretKey는 TwitterDeveloper의 값을 붙여 넣습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Twitter Login App'),
        ),
        body: Center(
          child: FlatButton(
            child: Text('Login With Twitter'),
            onPressed: () async {
              final twitterLogin = TwitterLogin(  
                apiKey: 'fsaf7893nkva0df',
                apiSecretKey: 'l0n7zqrgerg93sd0f9723lg90u734',
                redirectURI: 'example://',
              );
              final authResult = twitterLogin.login();
              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:
                  // error
                  print('====login error====');
                  break;
              }
            },
          ),
        ),
      ),
    );
  }
}

후기

이것으로 Twitter 로그인이 가능합니다.
2019년의 기사를 쇄신한 것만으로 특히 새로운 것은 없지만, Google 검색으로 상위에 나오고 있었으므로, 기사를 브러쉬 업하려고 생각해 재작성했습니다.
또 Firebase의 갱신이 있을 때에는 변경해 나가려고 합니다.

이번에 사용한 플러그인
twitter_login

Twitter도 하고 있습니다
좋으면 팔로우 해주세요.
Twitter: 0maru_dev

우리는 Flutter 엔지니어를 모집합니다.
신경이 쓰이는 분은 아래의 링크로부터 회사의 상세 등을 확인해 보세요.
온라인으로 면담 등도 할 수 있기 때문에 자세하게 듣고 싶은 분은 문의해 주세요.
주식회사 TORICO - RECRUIT