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

 Supabase를 사용해서 Kakao login을 구현해 보자!

한국인들이라면 대부분 사용하는 카카오톡!
앱 개발하다 보면 로그인을 구현하는 것은 대부분 필수인데
Supabase로도 카카오톡 로그인이 가능하다고 하니 해보도록 하겠습니다

 

Kakao developers  설정

먼저 카카오 로그인을 구현하기 위해서는 kakao developers에서 애플리케이션 추가하기를 클릭해서
현재 로그인을 구현해야 하는 프로젝트와 연동을 해줍니다
연동하는 방법과 초기 설정은 아래의 포스팅에서 확인할 수 있습니다

[Flutter] Kakao 개발자 사용하기 - 초기 설정

초기 설정 이후에는 몇 가지를 더 설정해 주어야 하는데
먼저 supabase 페이지 > Authentication > Providers > Kakao에서 활성화를 시켜줍니다
그리고 카카오 개발자 페이지 > 앱설정 > 요약정보에서 REST API, Admin 키를 복사합니다
👉 카카오 REST API 키 > 수파베이스 REST API Key
👉 카카오 Admin 키 > 수파베이스 Client Secret Code에 붙여 넣기 해줍니다

👉 수파베이스의 Callback URL을 복사해서
카카오 개발자 페이지 > 내 애플리케이션 > 제품설정 > 카카오 로그인에서 Redirect URI에 붙여 넣기 해줍니다

여기까지가 웹페이지에서 설정해줘야 하는 부분입니다
다음에는 코드 쪽에서 어떤 설정을 해줘야 하는지 알아보겠습니다

 

Code 설정

코드쪽에서 많이 삽질을 했었는데 설정해줘야 할 부분은 
👉 project > android > app > src > main > AndroidManifest.xml 설정 코드 부분
👉 Kakao OAuth 로그인해주는 코드 부분
👉 로그인 정보를 보는 코드 부분
👉 로그아웃 코드 부분
크게 4가지로 해서 예시를 보겠습니다

 

 1. AndroidManifest.xml 코드 설정

이 부분이 제일 정보가 없어서 애먹었는데 pub.dev에서 패키지 설명과 카카오 개발자 포럼을 참고해서 적용시켰습니다
아래의 코드 부분은 <activity> 안에 넣어주면 됩니다
이 부분은 딥 링크를 설정해 주는 부분으로 Redirect URI를 사용하려면 꼭 설정해주어야 하는데
Kakao 경우에는 sheme 부분에 패키지 이름을 host에는 oauth를 적어주시면 됩니다

<!-- Deep Links -->
<intent-filter>
    <action android:name="android.intent.action.MAIN"/>
    <category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
<intent-filter>
    <action android:name="android.intent.action.VIEW" />

    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
<!-- Accepts URIs that begin with packageID, oauth -->
<data android:scheme="com.example.supabase" android:host="oauth"/>

</intent-filter>

 

2.  supabase_kakao_login.dart

👉 코드의 전체 부분은 github에 올라와 있습니다
로그인은 supabase.auth.signInWithOAuth로 로그인을 하고 
확인하는 부분은 AuthChangeEvent.signdIn으로 확인해 줍니다

  //📲 supabase를 사용하기 위한 설정
  final supabase = Supabase.instance.client;

    loginButton(
      text: '카카오 로그인',
      textColor: Colors.black,
      buttonColor: Colors.yellow,
      context: context,
      svgPath: 'assets/kakao_logo.svg',
      onPressed: () async {
      //📲 signInWithOAuth를 사용해서 OAuthProvider.kakao로 로그인 
        await supabase.auth.signInWithOAuth(OAuthProvider.kakao);

        // Listen to auth state changes in order to detect when ther OAuth login is complete.
        supabase.auth.onAuthStateChange.listen((data) {
          final AuthChangeEvent event = data.event;
          
          //📲 event가 로그인 상태를 확인하면 로그인 후 페이지로 이동하는 코드
          if (event == AuthChangeEvent.signedIn) {
            // Do something when user sign in
            Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => const KakaoInfo()));
          }
        });
      }),
  ElevatedButton(
    onPressed: () {
      Navigator.pop(context);
    },
    child: const Text('back'),
  ),

 

3.  kakao_login_info.dart 👉 로그인 정보 코드

👉 코드의 전체 부분은 github에 올라와 있습니다
이렇게 session에서 데이터를 가져와 화면에 표시를 해줍니다
session에서 가져올 수 있는 데이터들은 아래와 같습니다

✍ providerToken: 공급자(예: Google, Facebook 등)에서 제공하는 토큰
✍ providerRefreshToken: 기존 토큰이 만료될 경우 새 토큰을 요청하데에 사용
✍ expiresIn: 토큰의 만료 시간 (default : 초 단위)
✍ tokenType: 토큰의 유형 (default : Bearer)
✍ user: 사용자 정보이며 다음의 필드를 포함합니다
     👉 id: 사용자의 고유 ID
     👉 appMetadata: 앱에 대한 메타데이터를 포함하며 다음의 필드를 포함합니다
       ✌ provider: 공급자의 이름
       ✌ providers: 사용자가 연결된 공급자의 목록
       ✌ userMetadata: 사용자에 대한 메타데이터를 포함하며 다음의 필드를 포함합니다
          👌 avatar_url: 사용자의 아바타 이미지 URL
          👌 email: 사용자의 이메일 주소
          👌 email_verified: 사용자의 이메일 주소가 검증되었는지 여부
          👌 full_name: 사용자의 전체 이름
          👌 iss: 토큰 발급자
          👌 name: 사용자의 이름
          👌 phone_verified: 사용자의 전화번호가 검증되었는지 여부
          👌 preferred_username: 사용자가 선호하는 사용자 이름
          👌 provider_id: 공급자의 ID
          👌 sub: 토큰의 주제 (default : 사용자 ID와 동일)
          👌 user_name: 사용자의 이름
       ✌ aud: JWT 토큰이 인증된 대상을 나타냄
       ✌ confirmationSentAt: 이메일 확인 메일이 보내진 시간
       ✌ recoverySentAt: 복구 이메일이 보내진 시간
       ✌ emailChangeSentAt: 이메일 변경 확인 메일이 보내진 시간
       ✌ newEmail: 사용자가 변경한 새로운 이메일 주소
       ✌ invitedAt: 사용자가 초대받은 시간
       ✌ actionLink: 특정작업을 수행할 수 있는 링크 (ex: 비밀번호 재설정 링크..)
       ✌ email: 사용자의 이메일 주소
       ✌ phone: 사용자의 전화번호
       ✌ createdAt: 사용자 계정이 생성된 시간
       ✌ confirmedAt: 사용자 계정이 확인된 시간
       ✌ emailConfirmedAt: 사용자의 이메일이 확인된 시간
       ✌ phoneConfirmedAt: 사용자의 전화번호가 확인된 시간
       ✌ lastSignInAt: 사용자가 마지막으로 로그인한 시간

이때 보이는 데이터들은 카카오 개발자에서 설정한 값들만 가져옵니다

class KakaoInfo extends StatelessWidget {
  final Session session;
  const KakaoInfo({Key? key, required this.session}) : super(key: key);

...

          children: <Widget>[
            ListTile(
              leading: CircleAvatar(
                backgroundImage:
                
                //📲 session 데이터에서 user에 userMetadata에서 avatar_url을 가져옴
                //📲 session 의 데이터들을 가져와서 활용 가능
                    NetworkImage(session.user.userMetadata!['avatar_url']),
                radius: 50,
              ),
              title: Text(
                session.user.userMetadata!['name'],
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              subtitle: Text(
                session.user.userMetadata!['email'],
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
            )
            // ... 추가적으로 필요한 정보를 표시 ...

 

4.  kakao_login_info.dart 👉 로그아웃 코드

signOut 함수로 로그아웃을 진행하고 그러면 세션의 정보들이 모두 삭제되는 것으로 보입니다

final supabase = Supabase.instance.client;

ElevatedButton(
      onPressed: () async {
      
        //📲 signOut으로 간단하게 로그아웃을 진행한다
        await supabase.auth.signOut();
        Navigator.pop(context);
      },
      child: const Text('로그아웃'),
    ),

 

로그인 로그아웃 디버깅 화면

디버깅 화면에서 로그인과 로그아웃의 코드를 보면 하나 더 있는 것을 볼 수 있다
바로 access_token을 발급받는다
이것에 대한 용도는 supabase를 사용하지 않고 로그인을 한다면 필수적인데
supabase에서 사용할 때는 아직 용도를 모르겠다 알게 되면 포스팅하겠습니다

👉로그인이 되었다는 이벤트 변경 사항을 알려준다

 

I/flutter (10233): **** onAuthStateChange: AuthChangeEvent.signedIn

I/flutter (10233): {"access_token":"eyJhbGciOiJIUzI1NiIsImtpZCI6Im1HV1pLc3YxQ1E5Um8yaGEiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNzA0OTU4MTI0LCJpYXQiOjE3MDQ5NTQ1MjQsImlzcyI6Imh0dHBzOi8vaGFza3RzaGhkcnh4bGhma2luemUuc3VwYWJhc2UuY28vYXV0aC92MSIsInN1YiI6IjQ5NzUwMWZkLTBhYzMtNDc1NC1iYmUxLWZjZmM4MGY3MTAwMiIsImVtYWlsIjoid2pkZG1zdGpyNjVAZ21haWwuY29tIiwicGhvbmUiOiIiLCJhcHBfbWV0YWRhdGEiOnsicHJvdmlkZXIiOiJ.....이렇게 들어온다

👉로그인 후에 정보들을 Session으로 담아서 보여주는것을 확인 할 수 있다

I/flutter (10233): 세션 : Session(providerToken: BJYjtf1dKJM..., providerRefreshToken: y69iCFnwbedx..., expiresIn: 3600, tokenType: bearer, user: User(id: 497501fd-0ac3-4754-bbe1-fcfc80f71002, appMetadata: {provider: kakao, providers: [kakao]}, userMetadata: {avatar_url: http://k.kakaocdn.net/dn/1G9kp/btsAot8liOn/8CWudi3uy07rvFNUkk3ER0/img_640x640.jpg, email: nuridal@gmail.com, email_verified: true, full_name: 누리달, iss: https://kapi.kakao.com, name: 누리달, phone_verified: false, preferred_username: 누리달, provider_id: 3244659834, sub: 3244659834, user_name: 비에스}, aud: authenticated, confirmationSentAt: null, recoverySentAt: null, emailChangeSentAt: null, newEmail: null, invitedAt: null, actionLink: null, email: nuriadl@gmail.com, phone: , createdAt: 2024-01-11T05:02:38.22998Z, confirmedAt: 2024-01-11T05:02:38.245375Z, emailConfirmedAt: 2024-01-11T05:02:38.245375Z, phoneConfirmedAt: null, lastSignInAt: 20

I/ViewRootImpl@549cc5d[MainActivity](10233): ViewPostIme pointer 1

👉로그아웃을 하게 되면 이벤트 변경사항을 알려준다

I/flutter (10233): **** onAuthStateChange: AuthChangeEvent.signedOut

 

로그인, 로그아웃 실행화면

 

💡 이 모든 코드는 개인 github에 올려져 있습니다
     사용하셔도 무관하니 작그마나 도움이 되었으면 좋겠습니다

GitHub - Jeoungeunseok/supabase: supabase connection and postgreSQL use

---

이렇게 삽질 여러 번 했었던 수파베이스를 이용한 kakao 로그인을

간단하게 구현해 보는 시간이었습니다

코드가 확실하게 간결해지고 더 편해진 느낌이 듭니다!

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

 

---

 긴급 추가 내용 Supabase - Authentication - URL Configuration 설정 추가

댓글을 보고 긴급하게 설정 추가를 해줘야 한다는 사실을 알고 추가합니다 댓글 달아주신분 너무나 감사합니다
Site URL에는 패키지 이름 : //oauth 를 적어주는데 AndroidManifest에서 추가해준 부분을 그대로 적으면 됩니다
Redirect URLs는 공식 문서에 있는 콜백 URL을 그대로 가져와서 적어줬습니다 (링크 첨부)

Native Mobile Deep Linking | Supabase Docs