프론트엔드 개발자의 TIL #006

TIL #006

191109 토

 

---

오늘 배운 점

<Flutter>

1. 가장 중요한 소셜로그인을 다시 정리해보았다. (Firebase 활용)

• 소셜로그인은 7할이 설정이다. 우선은 dependency에 필요한 플러그인들을 설치해준다.

//pubspec.yaml

dependencies:

	firebase_auth:
    google_sign_in:

• 그리고 AndroidX compatibility 관련 설정을 해준다.
• dart 파일에 필요한 패키지를 import 해준다.

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

• 대략적인 sign in 코드를 작성해본다.

final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn = GoogleSignIn();

Future<String> signInWithGoogle() async {
  final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
  final GoogleSignInAuthentication googleSignInAuthentication =
      await googleSignInAccount.authentication;

  final AuthCredential credential = GoogleAuthProvider.getCredential(
    accessToken: googleSignInAuthentication.accessToken,
    idToken: googleSignInAuthentication.idToken,
  );

  final AuthResult authResult = await _auth.signInWithCredential(credential);
  final FirebaseUser user = authResult.user;

  assert(!user.isAnonymous);
  assert(await user.getIdToken() != null);

  final FirebaseUser currentUser = await _auth.currentUser();
  assert(user.uid == currentUser.uid);

  return 'signInWithGoogle succeeded: $user';
}

void signOutGoogle() async{
  await googleSignIn.signOut();

  print("User Sign Out");
}

 

• 그 후에는 Firebase에 프로젝트를 생성하고 Android 관련 설정을 해준다.
  1. project directory → android → app → src → AndroidManifest.xml에서 패키지명을 찾아서 입력
  2. 아래의 커맨드 입력 후 얻게 되는 SHA-1 hash 입력 후 Register app!
  3. config file 넣어주고 관련 SDK을 추가해준다. 추가 후 sync now도 꼭 해주기! (저번에 소셜로그인을 실습해보았을 때 이 build.gradle에서 중간중간에 계속 에러가 났는데 버전이 안 맞아서 그런 것 같다. Flutter랑 Dart 업데이트가 아주 수시로 이루어지는데, 이런 매뉴얼 업데이트도 같이 되었으면 좋겠다.. 꽤나 자주 업데이트로 인한 버그/에러로 시간을 낭비하게 되는 게 아쉽다.)
  4. Firebase -> Authentication에서 sign-in method를 설정해준다. (일단 여기서는 Google sign-in)
  5. 이 후에도 Exception 에러가 생기면 여기서 프로젝트의 계정과 이 페이지에서의 계정의 일치하는지 확인해봐야한다. https://console.developers.google.com/apis/credentials

//SHA-1

keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

 

//SDK 추가하기

//build.gradle at <project>

buildscript {
	dependencies {
    	classpath 'com.google.gms:google-services:버전'
    }
}

//build.gradle at <project> <app-module>

dependencies {
	implementation 'com.google.firebase:firebase-core:버전'
}
apply plugin: 'com.google.gms.google-services' //해당 파일의 마지막 줄에 추가

 

• Firebase에서 iOS 관련 설정도 해주어야 한다. (Settings → General에서 Add app)
  1. 프로젝트 정보를 입력한 후 Firebase에 추가할 플랫폼으로 iOS를 선택한다.
  2. iOS bundle ID는 Flutter 프로젝트에서 ios → Runner.xcodeproj → project.pbsproj에서 "PRODUCT_BUNDLE_IDENTIFIER"을 찾아서 확인한다.
  3. Flutter 프로젝트의 ios 폴더를 Xcode로 열어서 Runner의 하위폴더에 다운받은 config file을 넣어준다. (Add to targets:에 Runner가 잘 체크되었는지 확인한 후 Finish)
  4. Xcode 닫은 후 ios → Runner → Info.plist에 들어가서 google_sign_in 플러그인 페이지의 iOS integration 관련 코드를 추가해준다.
  5. GoogleService-Info.plist에서 REVERSED_CLIENT_ID를 찾아 string을 복사하여 integration 코드의 TODO란을 대체해준다.
  6. 크로스플랫폼 앱을 만들 때는 Firebase 플러그인이 iOS 관련 Firebase SDK를 관리해주기 때문에 따로 추가해주지 않고 다음 단계로 넘어가면 된다. (4번째 단계도 마찬가지)

 

 

---

내일 배울 점

<Flutter>

1. Form 작성하기

예전에 만들었던 건데, 여기서 조금 수정한 버전으로 local 로그인을 위한 폼을 만들 예정이다.

// Checking if email and name is null

assert(user.email != null);
assert(user.displayName != null);
assert(user.photoUrl != null);

name = user.displayName;
email = user.email;
imageUrl = user.photoUrl;

 

2. Text Editor 기능 앱에 넣기 

3. 소셜로그인 후 토큰 관리

 

---

- 전에 어렴풋이 성공했던 소셜로그인을 이제 완벽히 구현해야 할 때가 왔다. :-O

- 내일 작업이 수월하게 진행되었으면 좋겠다..