안녕하세요, 앱 ID 는 162473 입니다.
Flutter Web 에서 카카오 로그인시 loginWithKakaoAccount 를 활용해야하고, redirect url를 카카오톡 console 에서 생성후 param으로까지 활용해야 한다는 내용을 확인했습니다.
다만, user_api클래스의 loginWithKakaoAccount 함수에서는 prompts, channelPublicIds, serviceTerms, loginHint, nonce 이외에는 param으로 받을수 없는 것으로 보이는데, 다른 방식으로 redirect url을 서비스 코드내에서 설정해주어야 하나요?
KOE006에러를 해결하지 못해 포럼에 대한 많을 내용을 읽어보았으나, 위와 같은 의문점이 있어서 질문드립니다.
안녕하세요.
웹에서는 아래와 같이 구현 해보시겠어요?
if (await isKakaoTalkInstalled()) {
try {
await AuthCodeClient.instance.authorizeWithTalk(
redirectUri: '${REDIRECT_URI}',
);
} catch (error) {
print('카카오톡으로 로그인 실패 $error');
}
} else {
try {
await AuthCodeClient.instance.authorize(
redirectUri: '${REDIRECT_URI}',
);
} catch (error) {
print('카카오계정으로 로그인 실패 $error');
}
}
답변 주셔서 감사합니다.
AuthCodeClient.instance.authorize를 활용하여 구현 했더니 KOE006 이슈는 해결 완료되었으며, url 에서 authcode를 확인 할수 있었습니다.
혹시 이 authcode 를 token 발급에 사용하면 정상적으로 로그인을 구현할수 있을까요?(아래 방식이 토큰을 정상적으로 발급하는 게 맞는지도 궁금합니다)
onPressed: () async {
final authCode = await AuthCodeClient.instance.authorize(
redirectUri: '${REDRICET_URI}');
final token = await AuthApi.instance
.issueAccessToken(authCode: authCode);
await TokenManagerProvider.instance.manager.setToken(token);
},
혹시 이후에 return 값을 주어야하나, 아니면 다른 방식으로 토큰을 처리해야하는지 여쭤봅니다 
Flutter web 에서 flutter kakao sdk 를 이용한 로그인 구현 의 내용에서
접근 토큰을 발급받은 다음 인가(세션)처리를 진행하면된다고 하셨는데 말씀이 이해가 잘 가지않습니다. Docs 상에서 참고할만한 부분이 있을까요?
redirectUri 를 사용하신다면 redirect_uri에 해당하는 백앤드 서버나 라우터에서 접근토큰을 발급 받으셔야 하는데요.
플러터 웹은 프론트 서버버로만 운영하시고 별도 백앤드 서버가 있으신게 아닌가요?
답변 감사드립니다.
네 별도 백엔드 서버가 있어 프론트에서는 토큰만 발급 받으려고합니다.
혹시 프론트 상에서 토큰 발급을 확인하는 방법이 있을까요? print 문으로는 확인할수 없어서 질문드리며,
final token = await AuthApi.instance.issueAccessToken(authCode: authCode);
로 토큰을 발급하는게 맞는지도 여쭤봅니다
프론트에서 접근토큰을 발급받고자 하신다면, 카카오톡 설치여부를 확인하여UserApi.instance.loginWithKakaoTalk() 또는 UserApi.instance.loginWithKakaoAccount()을 사용하시는게 좋을것 같습니다.
redirect_uri 사용이 필요하신 이유가 어떻게 될까요?
해당 프로젝트는 Flutter 로 Web 플랫폼 에서 만 활용 하려고 해서 그렇습니다 ㅠㅠ
Web 에서는 redirect_uri로의 사용을 권하는 걸로 확인이 되는데요.
redirect_uri로는 토큰 발급이 어려울까요?
AuthCodeClient.instance.authorize 로 authcode는 생성이 된 상태인데, 이후에 토큰 발급할수 있을지 여쭤봅니다.
위에 안내드린 API는 웹 플랫폼에서도 사용가능합니다.
프론트에서 접근토큰 발급을 받고자 하시는데 redirect_uri 사용이 왜 필요하실까요?
안녕하세요, 접근 토큰을 발급받으려고 하면 이전에 authcode를 발급받은 후 진행 되어야하는걸로 알고있습니다.
인가 코드를 발급받기 위해서 웹에서는 redirect_uri 의 활용이 선행된후, 토큰을 발급 받는 순서로 알고있어 redirect_uri을 사용하였습니다. 혹시 웹 플랫폼에서 redirect_uri 사용없이 토큰 발급이 가능한 방법이 있을까요?
안녕하세요.
플러터 웹에서 loginWithKakaoTalk() 또는 loginWithKakaoAccount() 기능을 사용하시면 redirect_uri 설정 없이 접근토큰 발급이 가능합니다. (실제로는 redirect_uri 가 설정되지 않는것이 아니라 SDK가 알아서 설정합니다.)
이는 JS SDK 팝업 로그인과 유사한 방식으로 사용자 브라우저에서 접근토큰을 발급 받습니다.
그리고, authorizeWithTalk(), authorize() 에 redirect_uri를 설정하는 방식을 사용하면 인가코드가 redirect_uri 로 인가코드가 전달되며 SDK 에서는 이후 과정에 관여하지 않습니다.
서비스측 백앤드로 리디렉션되기에 위에 구현하신것처럼 authCode를 전달받을수 없습니다.
(카카오톡으로 로그인: Redirect 방식 문서의 예제 코드 참고)
보통 웹 서비스에서는 카카오 로그인 후, 회원 가입과 같은 서비스측의 후속 로직을 한번에 처리하기 위해 접근토큰 발급 및 사용자 정보조회를 redirect_uri 에서 즉 백앤드 서버에서 처리합니다
때문에, 앞서 redirect_uri 사용 이유를 문의드린것은 접근토큰 발급 철차를 문의 드린것이 아니라 회원 가입과 같은 서비스측 후속 처리가 필요한지 확인하기 위해 문의드렸습니다.
안녕하세요, 지속적인 답변에 감사드립니다.
상세한 설명 감사드리며, 문의주신 내용에 대한 의도 또한 이해되었습니다. 서비스 측 후속 처리에 대한 내용은 아직 계획에 없어, 토큰발급만 이루어지면 되는걸 목표로 하고있습니다.
그렇다면, 접근 토큰을 확인하는 방법에 대하여 여쭤보고 싶습니다.
카카오 계정으로 로그인하기(loginWithKakaoAccount)의 예제를 활용 하였으나, ID와 비밀번호를 입력하고 로그인하기 버튼을 누르면, 브라우저 상에서는 KOE006에러 페이지를 보여주는 상황입니다.(print 문에서 확인 되는 토큰에 대한 내용이 없으며, 이 경우에도 토큰 발급은 정상적으로 이루어졌다고 볼수있나요?)
프론트 상에서 token.accessToken 값을 확인할수 있는 방법이 없을까요?
KOE006 오류는 플랫폼에 등록되지 않은 redirect_uri 파라미터를 사용할 때 발생합니다.
loginWithKakaoAccount 의 경우 해당 기능이 호출되는 페이지를 Redirect URI 에 등록 부탁드립니다.
즉, 만약 위 함수를 호출하는 로그인 페이지가 http://localhost:55522 이라면 이 주소를 등록해 주시면 됩니다.