안녕하세요, 어학 매칭 앱 "CROSSER"의 개발자입니다
이 「CROSSER」입니다만, Flutter와 Firebase를 이용해 개발하고 있습니다.
이번에는 CROSSER의 로그인 기능을 어떻게 개발했는지 쓰겠습니다. 꼭 참고해보세요!

소개

어학 매칭 앱 「CROSSER」의 개요에 대해서는 이쪽을 참조해 주세요!

「CROSSER」의 로그인 방법

다음 6가지 로그인 방법이 있습니다.
- 전화번호
- Facebook
- Apple
- LINE
- 카카오
- 전화번호/Facebook/Apple/LINE/Kakao + G-mail 연계 로그인

이번에 쓰는 것

이번에는 Firebase를 사용하여 LINE/Kakao 로그인을하는 방법을 쓰고 싶습니다.
전화 번호/Facebook/Apple 로그인은 Firebase에 표준 지원이므로,
다른 쪽의 기사로 충분히 참고가 된다고 생각합니다
그러나, LINE/Kakao 로그인은 Firebase의 지원 대상외가 되어 있어 조금 구현이 바뀝니다.
이것들을 구현하는데 있어서, 자신이 고전했기 때문에, 이번은 LINE/Kakao 로그인에 대해 다루고 싶습니다.

사용한 것

Firebase Auth에서 지원되지 않는 로그인 방식으로 로그인하는 방법으로,
custom 로그인이라는 방법이 있습니다.
이쪽을 이용하는 것으로 LINE/Kakao 로그인이 가능해집니다.
Cloud Function이 등장하는 이유는 나중에 설명합니다.

Firebase Auth custom 로그인

Firebase Cloud Function

flutter_line_sdk

flutter_kakao_login

여기에 SDK 링크를 붙여 둡니다.
htps // 푸 b. v / pa c ga s / f
htps // 푸 b. v / pa c 가 s / f ㅅ r_ 카카오

어떻게 구현합니까?

① 사용자에게 LINE/Kakao 로그인 화면 또는 인증 허가 화면을 표시한다.
② 사용자가 인증을 허가한다.
③LINE/Kakao 서버로부터 토큰이 발행된다.
④ 발행된 토큰으로 Firebase의 커스텀 토큰을 발행한다.
⑤ 발행한 커스텀 토큰으로 custom 로그인을 한다.

이것뿐입니다!
이 ④의 커스텀 토큰 발행입니다만, 이쪽은 자전의 서버로 실시할 필요가 있습니다.
따라서 이번에는 Firebase Cloud Function을 이용하여 구현했습니다.
구현의 상세에 대해서는 후일, 기재해 가겠습니다.

요약

Firebase Auth의 custom 로그인을 사용하면 비대응의 타사 로그인으로도 로그인 가능!

커스텀 토큰 발행은 프라이빗 서버를 준비할 필요가 있다.

어학 매칭 앱 "CROSSER"도 잘 부탁드립니다.
평가도 받을 수 있으면 기쁩니다!
iOS/Android 모바일 지원
h tps // // s s 때때로. c / c 로세 r