Sha1, Sha256 키를 Firebase console 에 넣기 위해 남들이 쓰는 명령어를 써보았다. 

cd android 

./ gradlew singleReport 

안된다.  안된다고 ! !! 내 노트북은 남들이랑 다르다고 !!

 Integrity check failed: java.security.NoSuchAlgorithmException: Algorithm HmacPBESHA256 not available

해결방법(Solution)

-storetype JKS옵션 사용하기

// 기존
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

// -storetype 옵션
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key -storetype JKS

java9 부터는 default storetype이 pkcs12라고 한다.
본인 pc에 java8이 깔렸는지 java9 이상이 깔려있는지 java9 이상이라면 확인을 하고 위의 해결볍을 사용하면 된다.

자 이렇게  진행하다보니?

구글링을 통한 초기화 비밀번호 android 입력후에 갑자기 키를 생성하라고 나온다. 

오 왠지 실마리가 보여서, 내 멋대로 이름도 설정하고, 마음대로 설정했더니 키가 생성이 된다.. ㅠㅠㅠㅠㅠ

2주 걸렸다.. 이것을 해결하다가 . 

* sign.jks 해당 부분에 내가 원하는 파일명을 넣어주면 된다 

예시(sign.jks,  secret.jsk 등등 ) 

keytool -genkey -v -keystore sign.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA -keysize 2048 -validity 10000

keytool -genkey -v -keystore release.keystore -alias androidreleasekey -keyalg RSA -keysize 2048 -validity 10000

자 이제 cmd에서 명령어를 쳐보도록 하자. 

keytool -v -list -keystore [Keystore 파일]

생성 된다..   소리질르자 !!!!!! 

/* 인증서 파일 알고싶은경우 해당 명령어 치면 작동한다. */ 

DEBUG KEY 확인
keytool -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android

RELEASE KEY 확인
keytool -list -v -keystore release.keystore -alias androidreleasekey -storepass android -keypass android

앱 서명 KEY 확인
keytool -list -v -keystore key.jks

23년 11월 기준으로 작성합니다.

다른 블로그들과 유튜브 강의를 보다가 오히려 정리가 안되어 독이 되어 버리는.. 상황이 발생했다.

남들은 로그인 구현이 단순하다 하지만,,  가끔씩 시간 내서 하는 직장인에게 계속 발생하는 오류는 개발 동력을 잃게 만들어서, 2주의 시간이 흘러버렸다. 

혹시나 제 블로그를 보시는 분들을 위해 차근차근 작성해봅니다. 

1. Firebase 서비스 이용하기

Firebase 관련 서비스를 이용하기 위해서는 파이어베이스 콘솔에 앱을 등록하고,

Firebase_core라는 라이브러리가 필요하다.

파이어베이스 콘솔에 앱을 등록하는 과정은 전에 올린 포스팅을 보면 됩니다.

이후 콘솔에서 앱 등록을 완료했다면, 다음 과정을 따라하면 된다.

파이어베이스 콘솔에서 "Authentication >> 로그인 방법" 항목으로 들어가 로그인 제공업체 목록에서 Google을 선택한다.

사용 설정을 활성화 시키고 프로젝트의 공개용 이름과 지원 이메일 주소를 선택한다. 공개용 이름은 사용자가 구글 인증을 시도할 때 보여질 앱 이름이다.

Flutter 프로젝트에서 패키지 추가하기

플러터 프로젝트에서 파이어베이스 구글 인증을 사용하기 위해 관련 패키지를 추가해야한다.

pubspec.yaml에 firebase_auth, google_sign_in 패키지를 추가하자.

// pubspec.yaml

dependencies:
  flutter: 
    sdk: flutter
  firebase_auth: ^0.15.0+1
  google_sign_in: ^4.0.14

Android에 적용하기

이 항목은 플러터 안드로이드에만 해당되는 내용이다.

android/app/ 위치에 google-services.json이 있는지 확인한다.

 여기에서 sha 지문을 인증하기 위해 모든 블로그를 뒤져 재 정리를 해보았다. 

SHA 지문 을 위해 키등록이 필요한데, 해당 포스팅에 대해서는 밑에 포스팅에서 확인하시면 될거같다. 

https://antkong.tistory.com/48

파일이 없다면 파이어베이스 콘솔의 내 앱 항목에서 다운받을 수 있다.

buildscript {
	
    ...
    
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        classpath 'com.google.gms:google-services:4.3.3' // << 추가
    }
}

프로젝트 레벨의 build.gradle에 위 코드를 추가한다.

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

app 레벨의 build.gradle에 위 코드를 추가한다.

iOS에 적용하기

이 항목은 플러터 iOS에만 해당되는 내용이다.

ios/Runner/ 위치에 GoogleService-Info.plist가 있는지 확인한다.

파일이 없다면 파이어베이스 콘솔의 내 앱 항목에서 다운받을 수 있다.

ios/Runner/ 위치에 GoogleServices-Info.plist를 넣었으면 파일을 열어 REVERSED_CLIENT_ID의 값을 복사한다.

<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>여기에 REVERSED_CLIENT_ID 값 넣기</string>
		</array>
	</dict>
</array>

복사한 REVERSED_CLIENT_ID 값을 이용해 Info.plist에 커스텀 URL을 등록한다.

이 과정은 구글 웹페이지에서 로그인에 성공하면 브라우저 레벨에서 iOS 앱으로 자동 연결되게 하기 위하여 수행하는 것이다.

(※ 이 프로세스를 딥링크라고 부른다.)

인증 소스코드 구현

힘들게 설정 과정을 모두 거쳤으니 소스코드를 구현할 차례이다.

FirebaseAuth auth = FirebaseAuth.instance;
GoogleSignIn googleSignIn = GoogleSignIn();

FirebaseAuth 싱글톤 객체를 가져오고, GoogleSignIn 객체를 할당한다.

FirebaseAuth 클래스는 파이어베이스에서 어떤 방식으로 인증을 수행하든 항상 사용되는 필수 클래스다.

GoogleSignInAccount account = await googleSignIn.signIn();
GoogleSignInAuthentication authentication = await account.authentication;

GoogleSignIn 객체의 signIn( )함수를 사용하면 안드로이드에서는 구글 로그인 화면이, iOS에서는 구글 로그인 웹페이지가 나타나며, 로그인한 유저 정보를 반환한다.

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

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

그 다음, GoogleAuthProvider을 이용해 credential을 만들고 FirebaseAuth 객체의 signInWithCredential( ) 함수를 이용해 최종 인증결과를 가져온다.

최종적으로 로그인 성공한 유저의 정보는 AuthResult 객체의 user 프로퍼티 안에서 찾을 수 있고, FirebaseAuth 객체의 auth.currentUser() 함수를 이용해서도 찾을 수 있다.

위 과정을 모두 수행했다면 파이어베이스를 이용해 구글 로그인에 성공한 것이다.

[Login코드]

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

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              InkWell(
                onTap: (
                    ) {
                signInWithGoogle();
                },
                child: Card(
                  margin : EdgeInsets.fromLTRB(20, 20, 20, 0),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(7)
                  ),
                  elevation: 2,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset('images/google.png'),
                      const SizedBox(width: 10,),
                      Text('sign in google', style: TextStyle(color: Colors.grey),)
                    ],
                  ),
                ),
              )
            ],
          ))
        ],
      ),),
    );
  }
  Future<UserCredential> signInWithGoogle() async {
    // Trigger the authentication flow
    final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

    // Obtain the auth details from the request
    final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;

    // Create a new credential
    final credential = GoogleAuthProvider.credential(
      accessToken: googleAuth?.accessToken,
      idToken: googleAuth?.idToken,
    );

    // Once signed in, return the UserCredential
    return await FirebaseAuth.instance.signInWithCredential(credential);
  }

}

const 관련해서 밑줄이 에러는 아니지만.. 너무나도 거슬리는 상황이 있다.

"Prefer const with constant constructors."의 메시지가 계속 뜬다..

따라서 해당 문제를 해결하기 위해 구글링을 통해 정리해보았다. 

해결방법 1

파일 상단에 주석을 추가해준다. (// ignore_for_file: prefer_const_constructors)

이렇게 작성해두면, 노란색 밑줄이 사라짐을 확인할 수 있습니다.

단, 원하는 파일마다 주석을 추가해야 하는 번거로움이 있을 수 있습니다.

해결방법 2

진행하고 있는 플러터 프로젝트 구조를 보면 "analysis_options.yaml"파일을 확인할 수 있는데, 해당 파일을 열어줍니다.

해당 파일을 열어보면 rules라고 되어있는 부분에 해당 내용을 입력해준다.. 입력을 할 때는 꼭! 들여 쓰기를 맞춰준다.

(입력을 했음에도 밑줄이 계속 나온다면 들여 쓰기가 틀렸을 가능성이 매우 높다.)

flutter_spinkit

대부분의 완성도 있는 시중의 앱들은 화면을 로드할 때 loading indicator가 실행되어서 로드 되는 시간 동안 유저가 자연스럽게 로딩을 느낄 수 있도록 만들어주고 있습니다. 이같은 Loading Indicator들을 다양한 스타일로 사용할 수 있도록 만들어 놓은 패키지가 flutter_spinkit 패키지 입니다. 

실제로, 공부를 하는 과정에서도, 파이어베이스를 사용할 때, 파이어베이스로 add, edit, delete, data load하는 과정에서 데이터베이스로 데이터가 들어갈 때의 속도 지연 때문에 앱 진행이 지연되는 경우가 많았는데, 그런 경우 flutter_spinkit를 활용해서 앱 중간 중간에 활용해준다면 매우 유용할 것 같네요!

먼저 import를 위해 국룰인 "pub add flutter_spinkit" 터미널에 입력해준다. 

import 'package:flutter_spinkit/flutter_spinkit.dart';

const spinkit = SpinKitRotatingCircle(
  color: Colors.white,
  size: 50.0,
);

 해당 방식을 사용해서 처리한다. 

만든 예시 자료 

를 넣어주고 돌리게 되면 에뮬레이터에 다음과 같은 화면이 나타나게 된다. 

플러터 버전 업그레이드를 하고 pug get을 실행했는데 다음과 같은 에러가 발생했습니다.

개발자모드를 활성화 시켜야 된다는 내용입니다. 윈도우 시작버튼 > 설정을 클릭하신뒤 윈도우 설정에서 업데이트 및 보안을 선택해줍니다.

업데이트 및 보안에서 하단에 보면 개발자용이라는 항목이 있는데 여기서 개발자모드가 끔으로 되어있는데 켬으로 변경해줍니다.

변경하면 다음과 같은 메세지가 뜨는데 예로 동의하시면됩니다.

그리고 다시 flutter에서 pu get을 실행해보면 정상적으로 완료되는 것을 확인 할 수 있습니다.

1. Flutter SDK 다운로드

• 공식 사이트 다운로드 페이지로 이동하여 다운로드한다. 

https://docs.flutter.dev/get-started/install

• 현재, 자신의 운영체제에 맞는 것을 선택해서 다운 받으면 된다. 

2. Flutter SDK 압축 해제 및 폴더 셋팅

• 다운이 완료되었되면, 압축을 풀어준다. 

• 압축해제가 되었으면 flutter라고 압축해제 된 파일을 확인할 수 있다.

• 해당 파일을 오려내서 C:\src 폴더를 생성해서 flutter 폴더를 붙여넣기 해준다.

3. Flutter 환경변수 설정

• Windows 기준, 고급 시스템 설정을 선택한다.

• 해당 내용에서 환경 변수 버튼을 클릭한다.
• 사용자 변수와 시스템 변수가 있다. 시스템 변수 쪽에 변수가 Path인 것을 선택하고 [편집] 버튼을 클릭한다. 

• Flutter의 경로를 복사해와서 새로 만들기를 클릭 후, 해당 경로를 추가해주면 된다.

4. 안드로이드 스튜디오 설치

• 아래 URL 사이트로 들어가서 안드로이드 스튜디오 다운로드 버튼을 클릭하여 다운받는다.

https://developer.android.com/studio?gclid=EAIaIQobChMIoYfr35Lr9wIVwdCWCh2_wQRCEAAYASAAEgIOQPD_BwE&gclsrc=aw.ds 

• 다운 받은 파일은 더블 클릭하여 실행시켜주면 설치를 시작하게 된다.

• next,,, 반복 그리고 install을 눌러준다.

• do not import settings를 클릭해준다.

• don't send를 클릭해준다.

• next를 클릭해주고, finsh를 눌러주면 프로젝트를 만들기 위해서 다운로드를 시작하는 걸 확인할 수 있다.

• 설치가 완료되었다. Finsh 버튼을 클릭한다.

• 다운로드가 완료된 것을 확인할 수 있다.

5. Flutter, Dart 플러그인 설치

• 해당 화면에서 Plugins를 선택해서 Flutter를 설치해준다.

• 그리고 다음과 같은 문구가 등장한다.
  번역하면, 자동으로 Dart를 함께 설치하겠냐고 물어보는 문구이다!
  install을 눌러 함께 설치해주면 된다.

• Restart IDE를 눌러 재시작을 하면, 이후 Flutter Plugins가 반영된 것을 확인할 수 있다.

6. Flutter Project 생성하기

• New Flutter Project를 클릭한다. 

• Flutter를 클릭하고 Flutter Project 주소를 입력해준다. 

• C:\src 밑에 flutterwork 폴더를 만든다. 
  해당 폴더에서 실제 프로젝트를 구동하는 소스를 담아둘 것이다.

• Flutter 프로젝트 생성을 위한 기본 설정을 한다.
  • Project name : flutter_app
  • Project location : C:\src\flutterwork\flutter_app
  • Description : A new Flutter project
  • Project type : Application
  • Organization : com.example
  • Android language : Kotlin, Swift
  • Platforms : Android, iOS

• 기다리고 있으면 프로젝트 생성이 완료된 것을 확인할 수 있다.

• 밑에 터미널을 열어서 Flutter가 잘 깔아졌는지 확인하는 명령어를 입력해서 확인해준다.
  명령어 : flutter doctor

• [flutter doctor 오류 수정]
  명령어를 실행하면 아래와 같은 경고를 확인할 수 있을 것이다.
  에러1) cmdline-tools component is missing

• 에러2) Android license status unknown.
  
  • 이 경고는 toolchain이 연결되지 않았다는 오류 그리고, JDK가 없다는 경고이다.
    Flutter로 앱을 만들기 위해서는 필수로 JDK가 설치되어있어야한다. 
    JDK는 Android Studio를 설치할 때 같이 설치되었다.
    근데 셋팅이 제대로 되어있지 않아서 연결을 하지 못해 발생한 오류이다. JDK 환경변수 설정을 해야한다.
    경로 : C:\Program Files\Android\Android Studio\jre\bin

File > Settings > Appearance & Behavior > System Settings > Android SDK > SDK Tools (~~~~latest 선택)

• 오류가 해결된 것을 확인할 수 있다. 

• 에러3) Visual Studio - develop for Windows
  https://visualstudio.microsoft.com/ko/downloads/

• 만약에, 아래와 같은 에러가 발생한다면, vswhere 파일을 바꿔주는 작업을 해야한다.  

• 주소 : C:\Program Files (x86)\Microsoft Visual Studio\Installer
  위의 주소에 있는 vswhere 파일을 삭제하고 아래 사이트에 들어가 있는 github 폴더 안의 vswhere 폴더로 바꿔준다.

참고했던 사이트 : https://github.com/flutter/flutter/issues/103622

Android Studio 에서 Android Emulator를 설치하려고 했다
그런데 아래와 같은 에러 메시지가 발생했다

찾아보니 AMD CPU에서 가상화 관련하여 발생하는 문제라고 한다

해결방법

1. Window 가상화 관련 옵션 끄기
   제어판 > 프로그램 > Windows 기능 켜기/끄기로 가서 화살표 표시한 부분을 전부 체크해제한다.
   
   그런데 나는 다 해제가 되어있었다
2. AMD Bios 가상화 설정
3. 설정전

컴퓨터 부팅시 "DEL" 또는 "F2"등의 바이오스 진입 키를 이용해 BIOS에 진입한다. 메인보드 제조사마다 바이오스 진입 설정키는 다를 수 있다. asrock의 경우 "DEL"키로 진입이 가능하다고 한다.


Advanced(고급) > CPU구성(CPU Features) > SVM Mode(가상화설정) - 사용안함을 사용함(Disabled->Enabled)으로 변경 (Enabled(활성화)> F10으로 저장 후 재부팅> 완료


완료후 윈도우 상에서 작업관리자의 성능부분에 CPU탭을보면 가상화가 사용으로 변경된것을 확인할 수 있다.

설정후

Unable to Load Asset in Flutter. 

매우 열받는 상황이다.

이미지를 넣었는데 왜 호출을 못할까? 

"unable to load asset" 해결 방안

- 파일명에 특수문자가 들어 있으면 사진을 못읽습니다.

- pubspec.yaml 파일에 추가할때 들여쓰기 확인해야 합니다.

"이미지 추가" 방법

우선 이미지 파일을 프로젝트 폴더의 images 폴더에 넣습니다.

images 폴더가 없으면 새로 만들어 줍시다.

pubspec.yaml 파일을 수정해야 합니다..

위처럼 - images/ 경로를 assets 밑에 추가하면 됩니다.

flutter:

[2 띄어쓰기 or 1 탭]assets:
[4 띄어쓰기 or 2 탭]- images/

띄어쓰기 구분을 안 해주면 경로를 못 읽습니다.

pubspec.yaml 파일 수정 후에는 명령어를 실행해야 합니다.

(VScode에서는 자동적으로 해줍니다.)

flutter pub get

PowerShell이나 Terminal에서 실행을 해줍니다.

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
        Text('push-up page', style: TextStyle(fontSize: 30)),
        Image.asset('images/pushup.png', width: 100, height: 100),
    ],
),

BottomNavigationBarItem(
    icon: Image.asset('images/pushup.png', width: 40, height: 40),
    title: Text('Push-Up', style: TextStyle(fontSize: 15)),
),

이런 식으로 코드에 추가를 하면 됩니다.

------------------------------- ------------------------------- ------------------------------- ------------------------------- ------------------------------- --이렇게 했는데도 안되는 경우? 

마지막 2가지 최후의 방법이 있다. 

첫번째, 저장 잘하고 안드로이드 껐다가 다시키면 작동될때가 있다. 

두번쨰, 플로터 clean 

이렇게 수정이 될 것이다.