こんにちは。今日はノーコードのFlutterFlowでのSNS認証について解説していきたいと思います。
サインアップ・会員登録機能、ログイン機能は、メールアドレスとパスワードの入力じゃなく、すでに登録済みのGoogle, Apple, FacebookなどのSNS認証を使って手際よく行いたいですよね。
メールアドレスをわざわざ打つのがめんどくさい、、、そんなユーザーにとって、Googleで認証、などのSNS認証機能があるととても便利です。
では、FlutterFlowではそういったSNS認証は可能でしょうか？
はい、できます。今日はFlutterFlowのSNS認証機能について書いていきたいと思います。
FlutterFlowで使えるSNS認証機能
FlutterFlowでは以下の認証機能が使えます。
FlutterFlowでは
メールアドレス認証
Google
Apple
Facebook
電話番号
の認証機能が使えます。十分すぎますよね。
ノーコード開発で、メールアドレス認証のみならず、Apple、Google、Facebookがあればもう十分でしょう！
Google認証の例
ではここではGoogle認証の例を用いながら簡単に実装方法を説明していきたいと思います。
Firebase側でSNS認証の設定を行う。
まずは以下のようにFirebase側のAuthenticationのSignIn Method のところに行きます。
すると右上にAdd new providerというのがあるので、こちらをクリック。
すると以下のように様々な認証機能が出ています。メールアドレス、Apple、Google、Facebook、電話番号...と色々ありますね。
ここではGoogleを選び、enableにし、Support email for projecthelp_outlineを入力してSaveしたら完了です。
FlutterFlow側の実装
ではこれでfirebase側が完了したので、FlutterFlow側で認証機能を実装していきましょう。
まずはUIの実装です。私は以下のように、もともとあったメールアドレスのサインイン画面のSIGN UPボタンの下に、「Google Sign UP」ボタンを追加しました（緑のやつです）
次に、ボタンのアクションですね。AuthenticationのCreate Accountを選択します。
そしてAuth Providerから目的の認証方法を選択します。今回はGoogleを選択しました。これで完了です！簡単ですね。
ただ、Googleの場合は実機やエミュレータじゃないとテストできないようですね。
私の場合はtestflightでテストしましたが問題なくGoogleアカウントで認証しユーザー登録できました。
Firebase側の画面を見てもUsersにユーザーが追加できていることも確認できました。
YoutubeでSNS認証（Google）のやり方の説明を見たい方はこちら
FlutterFlowのSNS認証（Google）については以下動画でも解説しているので興味がある方はどうぞ
YoutubeでSNS認証（Apple）のやり方の説明を見たい方はこちら
SNS認証（Apple）についてはこちらで！
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。