こんにちわ、語学マッチングアプリ『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