こんにちわ、語学マッチングアプリ『CROSSER』の開発者です
この『CROSSER』なのですが、FlutterとFirebaseを用いて開発しております。
今回は、CROSSERのログイン機能をどのように開発したのかを書いていきますので、是非参考にしてみて下さい!

#はじめに
語学マッチングアプリ『CROSSER』の概要についてはこちらを参照ください！

#『CROSSER』のログイン方法
以下の6つのログイン方法があります。

電話番号
Facebook
Apple
LINE
Kakao
電話番号/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のリンクを貼っておきます。
https://pub.dev/packages/flutter_line_sdk
https://pub.dev/packages/flutter_kakao_login

#どう実装するのか？
①ユーザーにLINE/Kakaoログイン画面または認証許可画面を表示する。
②ユーザーが認証許可する。
③LINE/Kakaoサーバーからトークンが発行される。
④発行されたトークンでFirebaseのカスタムトークンを発行する。
⑤発行したカスタムトークンでcustomログインを行う。

これだけです!
この④のカスタムトークン発行なのですが、こちらは自前のサーバーで行う必要があります。
そのため、今回、Firebase Cloud Functionを利用して実装を行いました。
実装の詳細については後日、記載していこうと思います。

#まとめ

Firebase Authのcustomログインを使用すると非対応のサードパーティログインでもログイン可能！
カスタムトークン発行は自前サーバーを用意する必要がある。

語学マッチングアプリ『CROSSER』もよろしくお願いします。
評価もいただけると嬉しいです！
iOS/Androidモバイル対応
https://instabio.cc/crosser