참고하기
작성했던 깃허브이슈
Pocketbase kakao login하기
아래 sdk 쓴 방법은 잊어버려야 한다.
필요없음.
아래 코드만 복붙하면 된다. sdk는 없어도 됨!
final authData = await pb.collection('users').authWithOAuth2(
provider,
(url) async {
await launchUrl(url);
},
);
print('포켓베이스 로그인: $authData');다만 선행되어야 할 게 있다.
-
카카오 비즈앱 설정하기
아래 설명이 있으니 생략하겠다. -
redirect url 설정하기
포켓베이스에서 users collection에서 API Preview 버튼을 클릭하면 api 문서가 정리되어있다. 고대로 쓰면 되는데,
Auth with OAuth2를 클릭하면 redirect url이 안내되어있다. 복사해서 쓰자.
참고로 url launcher라는 패키지를 다운받아야한다.
-
포켓베이스에서 카카오로그인 Auth providers에 카카오 추가하기
settings -> Auth providers -> kakao 찾아 클릭
클라이언트 아이디와 클라이언트 시크릿을 적어야한다.
필자는 이미 카카오를 등록해놓았기때문에 Enabled로 뜬다.
kakao developers 페이지에서 해당 값을 찾아 넣는다.
클라이언트 아이디: REST API 키를 넣는다.
클라이언트 시크릿: 카카오로그인 -> 보안 탭에서 클라이언트 시크릿을 발급받아서 넣으면 된다.
만난 KOE 에러
KOE 005
테스트 앱으로 클라이언트 아이디와 시크릿을 넣으면 관리자만 사용할 수 있게 된다. 주의할것!!
KOE 006
필자는 처음에 클라이언트 아이디에 네이티브 앱 키를 넣어서 이런 에러를 만나게 되었다... REST API 키를 넣자.
만일 이 에러를 만나게 된다면 그냥 여러 앱키를 다양하게 넣어보는 것도 방법일 것 같다.
카카오SDK+포켓베이스 조합
방법이 있기야 하겠지만...(데이터 받아서 user collection에 post)
기존 코드: kakao notifier
class KakaoLoginNotifier extends StateNotifier<KakaoAuthState> {
KakaoLoginNotifier() : super(KakaoAuthState.init());
void kakaoLogin() async {
if (await isKakaoTalkInstalled()) {
try {
await UserApi.instance.loginWithKakaoTalk();
} catch (error) {
if (error is PlatformException && error.code == 'CANCELED') {
state = state.copyWith(authStatus: SNSAuthStatus.error);
return;
}
try {
await UserApi.instance.loginWithKakaoAccount();
} catch (error) {
state = state.copyWith(authStatus: SNSAuthStatus.error);
return;
}
}
} else {
try {
await UserApi.instance.loginWithKakaoAccount();
} catch (error) {
state = state.copyWith(authStatus: SNSAuthStatus.error);
return;
}
}
// OAuthToken token = await UserApi.instance.loginWithKakaoTalk();
// print(token);
getUserInfoWKakao();
}
Future getUserInfoWKakao() async {
try {
User user = await UserApi.instance.me();
print('\n회원번호: ${user.id}'
'\n닉네임: ${user.kakaoAccount?.profile?.nickname}'
'\n이메일: ${user.kakaoAccount?.email}');
state = state.copyWith(
userInfo: user,
authStatus: SNSAuthStatus.success,
);
} catch (error) {
print('사용자 정보 요청 실패 $error');
state = state.copyWith(authStatus: SNSAuthStatus.error);
}
}
}
final kakaoLoginProvider =
StateNotifierProvider<KakaoLoginNotifier, KakaoAuthState>(
(ref) {
final kakaoLoginNotifier = KakaoLoginNotifier();
ref.onDispose(() {
kakaoLoginNotifier.dispose();
});
return kakaoLoginNotifier;
},
);기존코드: pocketbase auth
void setUserDataPbFromKakao(
User userData,
) async {
final authData = await pb.collection('users').authWithOAuth2(
'kakao',
(url) async {
print('redirect url: $url');
},
createData: {
'email': userData.kakaoAccount?.email,
'name': userData.kakaoAccount?.profile?.nickname,
},
);
}깃허브를 살펴보니 createData 객체를 생성해서 넘기길래 이렇게 작성했다.
근데 url launcher 함수를 사용한 뒤에 동작이 실행이 되질 않았음.
아마도 카카오에서도 리다이렉트하려고하고 런처에서도 리다이렉트하려고하고 하면서 충돌이 난 것 같음.
sdk 부분 코드는 싹 밀었고, 이제 카카오 로그인 버튼을 누르면 유저 정보가 collection에 제대로 들어오는 것을 볼 수 있었다.
카카오 로그인(SDK 사용해서)
redirect url 에러
이건 플러터에서 웹코드에서 사용하는 카카오계정으로 로그인하는 방법을 쓰려고 하면 나타나는 에러다. 많은 원인이 있겠지만 나는 그랬음... 코드 수정하니까 바로 다음단계로 넘어갈 수 있었음.
에뮬레이터에 카카오톡이 없으니 전자의 방법으로 테스트해보려고 한 것인데, 결론적으로는 loginWithKakaoAccount를 쓰는 게 맞는 것 같아 보인다.
before
try {
await AuthCodeClient.instance.authorize(
redirectUri: '${REDIRECT_URI}',
);
} catch (error) {
print('카카오계정으로 로그인 실패 $error');
}after
// 카카오 로그인 구현 예제
// 카카오톡 실행 가능 여부 확인
// 카카오톡 실행이 가능하면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
if (await isKakaoTalkInstalled()) {
try {
await UserApi.instance.loginWithKakaoTalk();
print('카카오톡으로 로그인 성공');
} catch (error) {
print('카카오톡으로 로그인 실패 $error');
// 사용자가 카카오톡 설치 후 디바이스 권한 요청 화면에서 로그인을 취소한 경우,
// 의도적인 로그인 취소로 보고 카카오계정으로 로그인 시도 없이 로그인 취소로 처리 (예: 뒤로 가기)
if (error is PlatformException && error.code == 'CANCELED') {
return;
}
// 카카오톡에 연결된 카카오계정이 없는 경우, 카카오계정으로 로그인
try {
await UserApi.instance.loginWithKakaoAccount();
print('카카오계정으로 로그인 성공');
} catch (error) {
print('카카오계정으로 로그인 실패 $error');
}
}
} else {
try {
await UserApi.instance.loginWithKakaoAccount();
print('카카오계정으로 로그인 성공');
} catch (error) {
print('카카오계정으로 로그인 실패 $error');
}
}카카오계정으로 로그인 실패
카카오계정으로 로그인 실패 {error: misconfigured, error_description: invalid android_key_hash or ios_bundle_id or web_site_url}요런 에러가 자꾸 떴다.
해시 키가 잘못되었음. 카카오 데브톡에서 찾아보니 해결방법이 바로 보임.
아래 코드로 해시 코드를 확인해보니 내가 등록한 값과 달랐음. 수정하니까 바로 로그인 성공했다.
print(await KakaoSdk.origin); 
카카오 비즈앱?
유저 이메일 정보를 카카오로부터 받으려면 비즈앱 전환이 필수다.
근데 비즈앱으로 바꾸려면 사업자번호가 필요함....^^
알아보니 카카오데브톡에 요청하면 전환을 해줬었는데, 이게 요청이 너무 많아서 설정하는 방법이 달라졌다고 한다.
카카오데브톡: 사업자번호가 없는 경우 비즈 앱 설정하기
(이미지를 클릭하면 안내 페이지로 연결됨)
내 어플리케이션 > 앱 설정
비즈니스 > 개인 개발자 비즈 앱 전환 버튼 클릭
헤맸지만 이정도만 해도 카카오계정(이메일)을 얻을 수 있게된다. 굿~
