[ Flutter / 트위터 로그인 ] Firebase를 이용한 Twitter 로그인 구현

 

 

회사에서 플러터 앱을 만들면서 지금은 소셜 로그인을 구현하고 있는 중 🔥

구글, 카카오톡, 애플까지 구현해놨고

마지막 남은 트위터! (우리 앱의 특성상 트위터 사용자들이 주 타겟층이라고 예상중)

 

트위터는 다행히도 firebase 에서 로그인을 제공한다.

그래서 굉장히 쉽게 로그인 구현이 가능할 것 같다고 예상했지만( 응~아니야😊),

어제 아래와 같은 오류 메세지와 함께 트위터 로그인 구현에 실패했다.ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

^^....

 

이유가 뭘까.. 구글링을 해봐도 비슷한 문제를 겪는 다른 개발자들의 질문들 뿐..

이 문제의 해결책을 제시해주는 글을 찾을 수 없었다 ....!!!

 

 

 

🥳하지만 지금은 문제 해결.😙

 

 

 

FlutterFire의 Authentication - Twitter 의 안내를 따라

차근 차근 구현해보자...! 

 

가장 먼저 할 일은 트위터 개발자 계정을 만들고, 트위터 로그인을 구현할 앱 API를 생성해야 한다.

 

* 트위터 API를 생성하는데 1일 정도 소요(트위터 팀에서 검토하는 시간이)될 수 있으니 여유롭게 미리 만들어 놓는 게 좋다.

(Twitter API를 쓰는 목적 및 사용자 정보 사용 범위, 어떤 기능들을 가져다 쓸 건지 등등 +

앱 서비스 소개 등을 제출하면 Twitter 팀에서 검토 후 api 이용 승인을 해준다-! 이 모든 것은 영어로..^^...😂)

 

 

API Key 와 Secret Key를 만들기 위해서는 Developer Portal에서 생성된 App이 있어야 API 사용 신청을 할 수 있다-!

 

 

 

 

---

 

 

🧚🏻 트위터 개발자 앱 생성 과정 🧚🏻

 

 

 

 

 

1. Developer Portal 에 접속 후 내 상황에 맞는 트위터 개발자 플랫폼을 사용하려는 이유 선택 ! 

 

 

👇

 

 

2. 기본 정보 입력

 

👇

 

 

3. 사용 의도 입력.

    트위터 데이터 / API를 어떻게 사용할 것인지 영어로 설명하기😨

    디테일한 설명이 많을수록 검토와 승인이 쉬워집니다. <- 라고 ㅋㅋㅋㅋㅋ 심지어 최소 200자 이상 ㅠㅠㅠㅠ

    눈물을 흘리며 파파고를 켭니다..

 

 

👇

 

 

4. 여차 저차 넘기면 내가 작성한 내용들 다시 확인하고 틀린 부분은 수정하고 넘기기.

 

 

그 이후 약관 쭉 읽어보고 동의하고 제출하면-!

 

👇

 

 

짠. 메일로 가서 트위터에서 온 메일을 확인하면, confirm your email 이 와있다.

이메일 인증과정을 거친 뒤 다시 트위터 팀의 승낙 이메일을 기다리면 끝! 

 

 

 

 

---

 

 

 

이제 API Key와 Secret Key를 발급받았다는 전재 하에 시작해보자 🔥

 

 

 

 

 

가장 먼저 플러그인을 설치해 보자.

> pub.dev 에 있는 twitter_login 링크

 

 

 

 

Flutter의 프로젝트로 와서 플러그인을 추가해 주고~😙

flutter pub add twitter_login
flutter pub get

 

 

 

Twitter 로그인 이벤트를 구현할 페이지에 import - ★

import 'package:twitter_login/twitter_login.dart';

 

 

 

플러그인 설치 완료 ! 

 

 

그럼 플러그인의 문서를 참고하여 트위터 로그인을 구현해 보자,

우선 트위터 설정에 들어갈 Callback URL이 필요한데,

아래와 같은  Firebase 기본 callback URL을 사용할 수 없다고 나온다..두둥..! 😱

https://abcdefg.firebaseapp.com/__/auth/handler

 

처음에 문서를 대충 읽고 firebase의 callback URL을 넣었더니 오류가 발생했다.^^.... 

..꼭 문서는 꼼꼼하게 끝까지 읽고 시작하길...!!😂

 

 

 

오류 발생.. ^^

Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared.

 

해당 오류로 열심히 구글링을 해봤지만, 처음에 언급한 것처럼

모두 문제만 제시할 뿐... 해결사가 없었다...^_ㅠ

 

주변 Flutter 개발자 지인분께 조심히 여쭤봤더니 트위터 로그인은 구현한적이 없어서

저 오류를 본적이 없다고 말씀하시며  

 

정말 귀중한 유튜브 링크를 찾아주셨다...😭👍👍

Flutter 애플 로그인에서도 참고했던, 

<개발하는 남자> 님의 Flutter Firebase 트위터 로그인 연동

 

하 ㅠㅠ 정말...

이거 아니였으면 나는 지금도 길을 잃은 상태였을듯....😭😭

👍개발하는 남자님 정말 감사합니다 👍

 

그럼  플러그인 문서와 개발하는 남자님의 유튜브를 참고하여

정리해보겠다 --!

 

 

 

 

 

---

 

 

 

 

1. 트위터 개발자 페이지의 나의 프로젝트 앱에 들어가서 callback url을 설정해준다.

 

이 때 사용자들의 email 주소를 수집한다면 아래의 Terms of Service 에 대한 설명이 나와있는 url 과,

Privacy policy 에 대한 내용이 있는 url을 첨부하여야 한다! 

여기서는 callback URL을 callback01:// 이라고 예를 들어 설명하겠다!

 

* callback URL은 내 마음대로 지어도 상관없다!

ex) myapp://, myflutterapp://, myfluttercallback:// 등등등! 마음대로!!

 

 

 

 

 

 

 

2. 내프로젝트 폴더 > ios > Runner > Info.plist 파일을 연다.

 

callback URL 셋팅을 해줘야한다.

1번에서 셋팅한것 처럼 callback01://  을 예시로 들어서, 아래처럼 넣어준다.

개발하는 남자님의 유튜브를 보니

CFBundleURLName 과 CFBundleURLSchemes 를

똑같이(callback01) 셋팅해주지 않으면 오류가 발생한다고 한다!! 

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>callback01</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <!-- Registered Callback URLs in TwitterApp -->
      <string>callback01</string>
    </array>
  </dict>
</array>

 

 

 

 

 

 

3. 트위터 로그인을 구현할 이벤트를 발생시킨다.

 FlatButton(
            child: Text('Login With Twitter'),
            onPressed: () async {
              final twitterLogin = TwitterLogin(  
                apiKey: '트위터 Developer Potal의 api key 입력',
                apiSecretKey: '트위터 Developer Potal의 api secret key 입력',
                redirectURI: 'callback01://',
              );
              final authResult = twitterLogin.login();
              
              final twitterAuthCredential = TwitterAuthProvider.credential(
                accessToken: authResult.authToken!,
                secret: authResult.authTokenSecret!,
              );
  
              switch (authResult.status) {
                case TwitterLoginStatus.loggedIn:
                  // 성공했을 때!
                  return await FirebaseAuth.instance.signInWithCredential(authCredential);
                  break;
                case TwitterLoginStatus.cancelledByUser:
                  // 취소했을 때
                  break;
                case TwitterLoginStatus.error:
                  // error 터졌을 때!
                  break;
              }
            },
          ),

 

이렇게 넣어주고 트위터 로그인을 해보니 아~~~~~주 잘 된다!!!!!!!!🥳🎉

ㅠㅠㅠㅠㅠㅠㅠ끕 ㅠㅠㅠㅠ

감사합니다

<개발하는 남자> 님의 Flutter Firebase 트위터 로그인 연동

 ★트위터 로그인 구현이 잘 안된다면 꼭 참고 -!! ★