Flutter- supabaase Google 소셜 로그인 구현

 

 

supabase를 알고 난 후 스프링 부트 과외를 멈췄습니다. 

supabase는 파이어베이스와 비슷한 기능을 가진 DB 서비스입니다. 

파이어 베이스와 가장 큰 차이점은 관계형 DB라는 것 입니다. 

 

 

아직 한국에서는 supabase 관련 자료가 없기도 하고, supabase 다큐먼트도 오픈베타 서비스다 보니 중구난방으로 정리가 되어 있는 느낌이었습다. 더구나 제가 회원가입, 로그인 로직을 잘 이해하지 못한 상태에서 supabase를 이용한 google  소셜 로그인을 진행하려니 너무 힘들었습니다. 

 

 

그래도 어찌 어찌 성공했습니다. 

 

제가 이해한 supabase 로그인 방법입니다. 

 

supabase 로그인 종류 

1. 이메일 로그인 
   텍스트 필드 창에 이메일과 비밀번호 입력 후 진행하는 일방적인 방법입니다. 
2. 소셜 로그인 
   웹 서비스를 진행하면서 사용하는 방법입니다.  이 방법과 아래 모바일 네이티브 방법의 대한 내용이 중복으로 되어 있어서 저 혼자 꽤 헤맸습니다. 
3. 모바일 네이티브 로그인 
   Google, IOS에서 직접 토큰값을 받아서 진행하는 방법입니다. 저는 이 방법으로 진행했습니다. 

 

구글 클라우드 Oauth 진행하기

1. https://cloud.google.com/?hl=ko

클라우드 컴퓨팅 서비스 | Google Cloud

  2. 새 프로젝트를 만듭니다. 

 

사용자 인증 정보로 들어가서 +사용자 인증 정보 만들기를 클릭합니다. 

 

 

Oauth 클라이언트 ID 만들기에서 웹 애플리케이션과 ,안드로이드 ,IOS 3가지만 만들어 줍니다. 

 

웹 애플리케이션을 만들 때 URL은 따로 입력하지 않고 바로 만들기를 눌러주면 됩니다. 

 

IOS는 앱 번들 ID를 입력하라고 나옵니다.  build.grade 에 있는 applicotionId 값을 입력해주면 됩니다. 

안드로이드는 https://notspoon.tistory.com/45 이 링크를 보고 따라하시면됩니다. 

구글로그인 쉽게 구현하기 1편 - Google Developers 설정

 

 

아래와 같이 생성 됩니다. 

해당 ID를 클릭하면 

 

-  웹 클라이언트는 

ID값과 비밀번호 

 

- 안드로이드는 아이디값

 

- IOS는 ID값과 스키마 값이 생성됩니다. 

 

 

 

 

supabase 프로젝트에 연동하기 

 

 

supabase 프로젝트 Authentication 에서 Auth Providers 페이지로 넘어갑니다. 

아래 보면 여러 소셜 로그인 할 수 있는 것들이 보입니다. 

 

 

바로 밑에 클라이언트 아이디 값과, 비밀번호를 넣는 칸이 있습니다 . 

그곳에 

구글 클라우드 Oauth 웹 ID값과 비밀번호를 복사 붙여 줍니다. 

 

 

 

 

 

 

IDE 프로그램에서 supabase, 구글 클라우드를 연동하겠습니다. 

 

먼저 IOS Runner 폴더 안에 있는 Inpo.plist 파일에 들어갑니다. 

 

두 탭을 안에 각각 구글 클라우드 콘솔 IOS, 스키마 값을 입력하세요 

<string></string>

<string></string>

</array>
	<key>CADisableMinimumFrameDurationOnPhone</key>
	<true/>
	<key>UIApplicationSupportsIndirectInputEvents</key>
	<true/>
    
    위 코드 밑에 


<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>구글 클라우드 콘솔 IOS 아이디</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <!-- TODO Replace this value: -->
      <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
      <string>구글 클라우드 콘솔 IOS 스키마</string>
    </array>
  </dict>
</array>

 

 

 

안드로이드 -> app-> bundle.gradle 파일로 들어갑니다. 

versionName 아래와 같이 추가해줍니다.

   manifestPlaceholders += [
                'appAuthRedirectScheme': applicationId
        ]

 

 

 

main.dart 구현

 

아래 webClientId 에는 구글 클라우드 콘솔 웹 ID를 입력합니다. 

iosCloentId에는 구글 클라우드 콘솔  IOS ID값을 입력합니다. 

 Future<AuthResponse> _googleSignIn() async {
    /// TODO: update the Web client ID with your own.
    ///
    /// Web Client ID that you registered with Google Cloud.
    const webClientId = 'my-web.apps.googleusercontent.com';

    /// TODO: update the iOS client ID with your own.
    ///
    /// iOS Client ID that you registered with Google Cloud.
    const iosClientId = 'my-ios.apps.googleusercontent.com';

    // Google sign in on Android will work without providing the Android
    // Client ID registered on Google Cloud.

    final GoogleSignIn googleSignIn = GoogleSignIn(
      clientId: iosClientId,
      serverClientId: webClientId,
    );
    final googleUser = await googleSignIn.signIn();
    final googleAuth = await googleUser!.authentication;
    final accessToken = googleAuth.accessToken;
    final idToken = googleAuth.idToken;

    if (accessToken == null) {
      throw 'No Access Token found.';
    }
    if (idToken == null) {
      throw 'No ID Token found.';
    }

    return supabase.auth.signInWithIdToken(
      provider: Provider.google,
      idToken: idToken,
      accessToken: accessToken,
    );
  }

 

 

 

아래와 같이 잘 나옵니다.