파트 1/3

이봐 친구들! 다른 기사를 들고 돌아왔는데 오늘은 Flutter 및 Express를 사용한 FirebaseAuth에 대해 이야기하겠습니다. 나는 Flutter와 함께 FirebaseAuth를 사용하는 것에 대해 온라인에서 이야기하는 많은 기사를 보았지만 FirebaseAuth를 사용하는 동안 자신의 서버를 사용하여 앱의 요청을 관리하는 것에 대해 이야기하는 기사는 많지 않았습니다. 오늘 우리는 그것을 바꿀 것입니다.

우리가 있기 전에 나는 당신이 Flutter와 JavaScript를 알고 있다고 가정하고 있음을 언급하고 싶습니다.

오늘의 기사에서는 Flutter 및 Express와 함께 TwitterAuth API를 사용하여 사용자 정의 서버(Nodejs, Django, Express, Java 등)를 보유하면서 Flutter 앱으로 인증을 위해 모든 플랫폼을 사용할 수 있는 방법을 보여줍니다.

시작하자!

이 첫 번째 기사에서는 Flutter 프로젝트를 설정하고 이를 Twitter API와 연결합니다.

플러터 프로젝트 시작하기

flutter create letsauth

이 명령은 인증 시연에 사용할 flutter 프로젝트를 생성합니다.

Firebase 프로젝트 시작

firebase console으로 이동하여 아래와 같이 새 프로젝트를 시작합니다.



요청하는 세부 정보를 입력하면(Google Analytics를 비활성화할 수 있음) 프로젝트가 준비됩니다.



모든 것이 잘 되었다면 위와 같은 화면을 볼 수 있습니다. 이제 우리 프로젝트를 이 flutter 프로젝트와 연결할 차례입니다.

현재 사용 중인 플랫폼에 따라(저는 Android용으로 개발 중입니다) 표시된 아이콘을 클릭하고 주의 깊게 설명된 단계를 완료하세요. 완료되면 Flutter 프로젝트를 Firebase 프로젝트에 연결해야 합니다.

앱에서 로그인하는 데 사용할 수 있도록 twitter api 액세스 토큰을 가져와서 FlutterAuth에 연결할 때입니다.

트위터 API 앱 만들기

이 단계에서는 트위터 개발자 계정이 필요합니다. 아직 계정이 없다면 로 이동하여 계정을 만드십시오. TwitterAuth를 사용하는 경우 앱을 등록하는 동안 대체 URL을 요청할 수 있습니다. 거기에 언급된 대체 URL로 이동하여 입력하십시오(과거 복사는 작동하지 않는 것 같습니다. 입력하십시오).

앱이 등록되면 액세스 키와 토큰을 받게 됩니다. 나중에 firebase를 twitter api와 연결하는 데 필요하므로 조심스럽게 저장하십시오.

Twitter와 Firebase 연결

자, 다음 단계에서는 firebase에 twitter api에 대해 알리고 이를 인증에 사용할 것이라고 알려야 합니다. firebase console으로 이동하여 프로젝트를 엽니다.



왼쪽 패널에서 인증을 선택하고 시작하기를 클릭합니다. 아래와 같이 현재 지원되는 모든 API의 전체 목록이 표시되어야 합니다.



현재는 모두 비활성화되어 있지만 firebase가 twitter와 통신할 수 있도록 twitter api를 활성화할 예정입니다.

트위터 옆에 있는 편집 기호를 클릭하고 잘 저장해 달라고 요청한 트위터에서 제공하는 API 키와 액세스 토큰을 입력합니다.

완료되면 다음과 유사한 URL을 얻게 됩니다.

https://demodev-dfb1f.firebaseapp.com/__/auth/handler

그것을 복사하면 이제 트위터 API에 이 URL에 대해 알려줄 것입니다. 그러면 Firebase가 이 URL과 통신을 시도할 것임을 알 수 있습니다.

twitter 개발자 콘솔을 다시 열고 생성한 프로젝트로 이동합니다.

twitter auth fallback urls 아래에 firebase가 제공한 URL을 추가하고 저장합니다.

이제 Firebase를 통해 Flutter 앱에서 트위터 인증 요청을 할 준비가 모두 완료되었습니다.

동일한 단계에 따라 Firebase가 지원하는 모든 인증 API에 연결할 수 있습니다.

이 다음 기사에서는 Flutter 앱에서 인증 요청(Twitter 또는 모든 API)을 만드는 방법을 보여드리겠습니다.

FirebaseAuth에 관한 다음 2개 기사를 놓치지 않도록 저를 팔로우하세요.

읽어 주셔서 감사합니다,
자