문의 시 사용하시는 SDK 버전 정보와 플랫폼(Android / iOS) 및 디벨로퍼스 앱ID를 알려주세요.
앱 ID: 1079533
안녕하세요
Flutter로 앱과 웹 서비스를 개발중인데 앱에서는 정상적으로 처리가 되는데 웹에서는 오류가 발생하여 질문드립니다.
현재 상황은
- firebase auth사용중이며
- 서버가 없어서 firebase hosting 사용중입니다.
- 서비스 접속 url?uri?는 https://flutter-todorize.firebaseapp.com 입니다.
- firebase auth에 사용하는 custom token 발급도 firebase function을 사용합니다. (https://us-central1-flutter-todorize.cloudfunctions.net/createCustomToken)
- 정확히 몰라서 위 2가지 주소 모두 redirect uri에 등록한 상태입니다.
발생 문제
- 웹에서 카카오톡 로그인 시 카카오 계정 정보(회원정보)까지는 받아오는데
- custom token 발행 시 에러가 발생합니다.
- 에러 로그는 아래와 같습니다.
어떤 상황인지 알 수 있을지요?
도움 부탁드립니다.
답변 감사드립니다.
그런데 해당 url도 이미 redirect url에 등록해두었었습니다. ㅠㅠ
제가 답변을 조금 명확하지 않게 드렸었네요ㅠㅠ
플랫폼 - 사이트 도메인에도 등록 부탁드려요
넵. 답변주셔서 바로 등록하고 다시 해봤는데 동일합니다. ㅠㅠ
혹시 반영 시간이 좀 필요한걸까요?
공유해주신 페이지에서 테스트해봤을 때 카카오 로그인은 정상적으로 완료되어 엑세스 토큰까지 발급되는 것 확인했습니다. (서버 로그를 통해 토큰 발급이 정상적으로 완료된 것 확인했습니다)
그런데 한가지 특이한 점은 토큰 발급이 완료되었음에도 로그인 페이지에 계속 머물러있네요. 로그인 후의 동선을 정확히 알지 못해서 정확한 답변을 드리긴 어려운 상황인데요, 로그인 페이지에 머물러있는게 정상 동작이 아니라면 커스텀 토큰 발행하는 쪽 코드를 확인해보셔야할 것 같습니다. 카카오 로그인은 정상적으로 완료되고 있기 때문에 커스텀 토큰 관련 코드 상의 문제가 있을것으로 보여요
네 맞습니다. 카카오 토큰까지는 정상적으로 발급되는데 이후 커스텀 토큰 발급시 해당 에러가 발생합니다.
검색해보니 어떤 보안 관련 이슈인 것 같네요. CORS 라고 하는데…개발 경험이 없는지라 뭘 어떻게 해야할지를 모르겠네요. ㅠㅠ
답변 감사드립니다! ㅠ
말씀주신 내용을 보았을 때 카카오 로그인 성공 여부와 관계없이 커스텀 토큰 발급 과정에서 동일하게 오류가 발생하고 있는 것으로 보이네요.
발생하는 오류는 동일하더라도 https://flutter-todorize.firebaseapp.com/ 도메인 등록 전에는 카카오 로그인 자체가 실패하고 있는 상황이었고, 현재는 카카오 로그인은 성공하고 있다는 점은 참고 부탁드려요
아쉽지만 데브톡에서는 디벨로퍼스 관련 설정과 API, SDK 를 안내하고 있어서 firebase auth 및 firebase function 등에 대해서는 정확한 답변을 드리기 어려운 점 양해 부탁드리겠습니다.
검색해보니 cors 관련 설정에 대한 가이드를 한번 참고해보시는 것도 도움이 될 것 같습니다.
답변 감사드립니다!
사실 관련 문서를 보고 있는데도 어떻게 해야할지 잘 모르겠네요 아직은…^^;;;;
답변 범위가 아님에도 신경써서 검색까지 해주시고 링크주셔서 너무 감사합니다!!
좋은 하루 보내세요 
1개의 좋아요
혹시 몰라 한 가지만 문의드려도 될까요?..
제가 커스텀 토큰을 발행할때 사용하는 cloud function의 코드가 아래와 같은데…
혹시 보내주신 링크의 내용에서 적용할 수 있는 부분이 있을까요?..저는 내용을 읽어봐도 잘 모르겠어서;;
사실 function코드도 유튜브 내용을 보고 따라한 부분이라 자세한 의미는 잘 모릅니다;;
바쁘시겠지만 한 번만 봐주시면 감사하겠습니다!
[function에 사용한 index.js 파일 내용]
const {onRequest} = require(“firebase-functions/v2/https”);
const logger = require(“firebase-functions/logger”);
const functions=require(“firebase-functions”);
const admin=require(“firebase-admin”);
const auth=require(“firebase-auth”);
var serviceAccount = require(“./flutter-todorize-firebase-adminsdk-s7c5m-17de5f0622.json”);
admin.initializeApp({
credential: admin.credential.cert(serviceAccount)
});
exports.createCustomToken = functions.https.onRequest(async(request, response) => {
const user=request.body;
const uid=kakao:${user.uid};
const updateParams={email:user.email,photoURL:user.photoURL,displayName:user.displayName,};
try{
await admin.auth().updateUser(uid,updateParams);
}
catch(e){
updateParams[“uid”]=uid;
await admin.auth().createUser(updateParams);
}
const token= await admin.auth().createCustomToken(uid);
response.send(token);
});
[flutter 에 적용한 커스텀 토큰 발급 관련 코드]
import ‘package:http/http.dart’ as http;
class FirebaseAuthRemoteDataSource {
final String url = ‘https://us-central1-flutter-todorize.cloudfunctions.net/createCustomToken’;
Future createCustomToken(Map<String, dynamic> user) async {
final cutomTokenResponse = await http.post(Uri.parse(url), body: user);
return cutomTokenResponse.body;
}
}
아래 링크 참고하시면 간단하게 cors 옵션을 허용할 수 있을 것 같아요.
cors 개념에 대해서도 한번 확인해보시면 도움이 될 것 같습니다.
https://medium.com/@derricktab44/introduction-5b0fdb973eb4
우와앗!!!
감사합니다. 해결했습니다!! ㅠㅠ
링크를 남겨주신 후에 바로 적용을 했는데,
그 앞의 난관(?)들을 극복하느라 늦었습니다. 제가 워낙 개발 문외한인지라…^^;;;
정말 덕분에 해결했습니다. 너무너무너무 감사드립니다!! 
1개의 좋아요
