[Flutter] Supabase docker 환경에서 google 로그인하기

 Supabase docker 환경에서 google login - Android 편

이제 로컬에서 하는 방법은 카카오나 apple를 예시로 했으니 google도 무난하게 하실 수 있을 겁니다
혹시나 참고하시려면 아래의 포스팅을 확인해 주세요

[Flutter] Supabase를 사용해서 Kakao login 구현하기

그렇다면 이번엔 docker 환경에서 kakao 로그인에 이어서 google 로그인을 하는 방법에 대해서 알아보겠습니다

 

1. Google Cloud 설정

 1. 프로젝트 생성

먼저 google cloud에서 프로젝트를 생성해 주겠습니다
(개발자 기준이기 때문에 회원가입 및 구매 부분은 전부 되어 있을 거라는 가정하게 하겠습니다)

Google 클라우드 플랫폼

먼저 프로젝트를 하나 클릭하면 선택 창이 나오는데 오른쪽에 새 프로젝트를 클릭해 줍니다

 

새 프로젝트를 클릭하고 나면 프로젝트 이름을 기입하고 만들기를 선택합니다

 2. OAuth 동의화면 설정

다음은 API 및 서비스 > OAuth 동의 화면을 클릭하고 외부를 선택한 뒤 만들기를 클릭합니다

 

다음은 앱 정보를 입력해 주는데 설명에 맞게 기입을 해주면 됩니다
여기에서는 앱 이름, 지원 이메일, 개발자 연락처 정보만 먼저 입력하시면 됩니다
(물론 나머지 선택사항도 필요하시면 입력하셔도 됩니다)

 

다음은 google 로그인을 할 때 사용자 정보를 가져오기 위해서는
아래 사진과 같이 3가지는 체크를 해주고 확인하면 됩니다

 

위에 단계까지 진행하고 나면 아래에 테스트 사용자가 보이는데
테스트앱은 최대 100까지 진행 가능하며 + ADD USERS로 추가하고 
구글 로그인이 가능한 이메일을 입력합니다

 

 3. 사용자 인증정보 설정( Android, iOS, Web)

이젠 각각의 클라이언트 ID를 만들어줄 텐데 Android, iOS, Web을 각각 만들어줍니다
특히 OAuth2를 사용할 거라면 Web을 만들어 줘야 합니다

 

 3-1. Android 설정

먼저 Android를 선택하면 아래 사진과 같이 표시가 되는데
이름, 패키지 이름, SHA-1 인증서를 입력하면 되는데
앱을 한번 개발해서 배포를 해보셨으면 아래의 명령어로 찾으면 되는데
keytool -list -v -keystore C:\Users\wjddm\. android\debug.keystore -alias androiddebugkey
만약에 없다면 아래의 명령어로 실행하시면 됩니다
keytool -keystore path-to-debug-or-production-keystore -list -v

key를 만들 때 명령어를 사용하면 아래와 같은 오류가 발생할 수 있다

📌  keytool 오류: java.lang.Exception: 키 저장소 파일이 존재하지 않음:
       path-to-debug-or-production-keystore
그럴 때에는 아래의 포스팅에서 알려준 해결방법대로 진행하면 된다

[Keytool error] keytool 오류: java.lang.Exception: 키 저장소 파일이 존재하지 않음: path-to-debug-or-production-ke

 

 3-2. iOS 설정

다음은 iOS는 이름, 번들 ID, App Store ID, 팀 ID를 기입하면 되는데
App Store ID는 앱스토어에 아직 올리지 않을 거라면 생략을 해도 된다
각각의 정보들은 Xcode에 아래의 경로에서 확인할 수 있다
번들 ID Runner > TARGETS Runner > Siging & Capabilities > Siging > Bundle Identifier 
팀 ID Runner > TARGETS Runner > Siging & Capabilities > Siging > iOS Siging Certificate Apple

📌 iOS는 현재 진행 중이므로 로그인 성공하는 대로 포스팅하겠습니다

 

 3-3. Web 설정

Web은 이름, 승인된 리디렉션 URI를 기입해 주면 되는데
승인된 리디렉션 URI는 저번 카카오에서 마찬가지로 https://도메인/auth/v1/callback를 입력해 주시면 됩니다

이렇게 3가지를 만들고 나면 아래와 같이 표시가 되는데
Android와 iOS는 다운로드를 하여줘서 각각 넣어줘야 합니다

Android는 google-services.json으로 이름을 바꿔서 프로젝트 > android > app 폴더에 넣어줍니다

 

 4. 사용 설정된 API 및 서비스 설정

마지막으로 web에서 사용하려면 API 서비스를 하나 추가해야 합니다
+ API 및 서비스 사용 설정으로 들어가신 다음 Google People API를 선택해 주시면 됩니다

여기까지 따라오셨으면 구글 클라우드 설정은 완료가 되었습니다
이제는 docker에서 설정하는 방법을 알아보겠습니다

 

2.  Supabase docker 설정설정

 . env 파일 편집

supabase docker가 설치되어 있는 서버로 가서 cd ~/supbase/docker 폴더에서. env 파일을 확인하면
아래 사진과 같이 프로젝트 ID와 프로젝트 NUMBER를 기입하는 란이 있는데
이 정보들은 구글 클라우든 프로젝트 > 클라우드 개요 > 대시보드에서 확인가능 합니다 

 

 docker-compose.yml 파일 편집

다음은. env 파일이 있던 폴더에서 docker-compose.yml 파일을 편집해야 하는데
파일을 보면 auth 구간에서 편집을 진행해 주시면 됩니다

      📲[예시]
      GOTRUE_EXTERNAL_GOOGLE_ENABLED: ${ENABLE_GOOGLE_SIGNUP}
      GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
      GOTRUE_EXTERNAL_GOOGLE_SECRET: ${GOOGLE_CLIENT_SECRET}
      GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: http://localhost:8000/auth/v1/callback
      
      📲[실제기입]
      GOTRUE_EXTERNAL_GOOGLE_ENABLED: true
      GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: .....apps.googleusercontent.com
      GOTRUE_EXTERNAL_GOOGLE_SECRET: GOCPX-...
      GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: http://[도메인주소 입력]/auth/v1/callback

다음은 docker-compose down > docker-compose up -d를 순차적으로 진행하면 적용까지 되었습니다
이젠 마지막으로 code를 통해서 실제로 로그인 시연까지 알아보겠습니다

 

3.  Code 설정

 login_intergration.dart

이번에 코드를 정리하면서 kakao, apple, google 로그인을 한 화면에서 진행할 수 있도록 수정했습니다

...

class _LoginIntegrationState extends State<LoginIntegration> {
  final supabase = Supabase.instance.client;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    ...
      body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
           ...
            loginButton(
                text: 'GOOGLE 로그인',
                textColor: Colors.black,
                buttonColor: Colors.white,
                context: context,
                svgPath: 'assets/google_logo.svg',
                width: 30,
                height: 30,
                onPressed: () async {
                  try {
                  
                  //📲 OAuth로 Google 로그인을 진행
                    await supabase.auth.signInWithOAuth(OAuthProvider.google);
                    
                    //📲 google 로그인의 이벤트 감지를 하는 부분
                    supabase.auth.onAuthStateChange.listen((data) {
                      final AuthChangeEvent event = data.event;
                      
                      //📲 이벤트가 signedIn 즉 로그인이 되었을때 실행되는 부분
                      if (event == AuthChangeEvent.signedIn) {
                        debugPrint('데이터 : $data');
                        debugPrint('세션 : ${data.session}');
                        
                        //📲 google의 이름을 가져와서 스낵바로 보여주는 부분
                        final snackBarText = SnackBar(
                            content: Text(
                                '${data.session?.user.userMetadata!['full_name']}님 반갑습니다'));
                        ScaffoldMessenger.of(context)
                            .showSnackBar(snackBarText);
                      }
                    });
                  } catch (e) {
                    debugPrint('$e');
                  }
                }),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('back'),
            ),
          ])),
    );
  }
}

 

 실행 결과

👉 테스트를 위해 로그인을 했어서 처음 로그인하시면 영상과는 다를 수도 있습니다
로그인을 클릭하면 코드에서 이벤트를 확인해서 singedIn 이 되면 스낵바로 환영한다는 문구가 표시될 것입니다

 

구글 로그인 코드는 개인 깃헙에 있습니다
사용하셔도 무관합니다

GitHub - Jeoungeunseok/supabase: supabase connection and postgreSQL use

---

이번에는 docker 환경에서 supabase를 사용해

google 로그인을 하는 방법에 대해서 알아보았습니다

그럼! 코딩이 쉬워지는 그날까지!!