flutter

[丁寧解説!]flutterでSMS認証をする

Introduce

どもですー.今回はflutterでSMS認証を実装します.
日本語の記事もなかなか見つからず,英語の記事もバージョンが古いものだったりしたので公式サンプルを読み込みました.
完成イメージはこちらです.

Environment

Requirement

pubspec.ymlに以下を追記します.

Getting Start

Setup iOS and android in firebase console

firebase consoleでの設定は公式ドキュメントが一番わかり易いのでこちらを御覧ください.

Add firebase_auth package

firebase_authパッケージを使うためにAndroid,iOSに設定を追加します.

Android

google-services.jsonファイルをandroid/appディレクトリに設置します.

/android/build.gradleファイルにclasspathとgoogle()を追記します.

/android/app/build.gradleファイルのapplicationIdをアプリのパッケージ名に変更します.そして下記を追記します.

apply plugin: 'com.google.gms.google-services'これは必ずファイルの末尾に追記してください.追記しないと次のようなエラーが出てしまいます.

iOS

for firebase_auth

プロジェクトをXcodeで開きます.

GoogleService-Info.plistファイルを/Runner/Runnerに追加します.
Runner/Runnerを右クリックしてAdd Files to RunnerをクリックしてGoogleService-Info.plistを追加します.

for sms authentication

プロジェクトをXcodeで開いたままで,GoogleService-Info.plistのREVERSED_CLIENT_IDの値をURL Shemasに貼り付けます.ここが分からなくて時間かかった...この設定はSMS認証に必要な設定です.

Code

ソースコードはこちらに置いています.
ブランチ名:smsAuth https://github.com/monkeydaichan/flutter_samples/tree/smsAuth

monkeydaichan/flutter_samples
sample of flutter. Contribute to monkeydaichan/flutter_samples development by creating an account on GitHub.
  • main.dart
    • sms.dartを表示
  • route.dart
    • ルーティングの定義
  • auth.dart
    • providerを使ってSMS認証のロジックを作成
  • sms.dart
    • 最初に表示されるページ.電話番号を入力して確認コードを送信する.
  • verify.dart
    • 電話番号に送信した確認コードを入力する
  • home.dart
    • SMS認証したあとに見れるページ

auth.dart

verifyPhoneNumberで入力した電話番号に確認コードを送信します.
signInWithPhoneNumberで確認コードを使ってサインインします.

sms.dart

国コードと電話番号を入力する画面です.
ボタンをタップするとauth.dartのverifyPhoneNumberを呼び出します.

verify.dart

送られてきた確認コードを入力してサインインします.
サインインが完了したらhome画面に遷移します.

home.dart

ホーム画面です.
特に解説する内容はないですー

main.dart

sms画面を表示させるだけです.

route.dart

ルーティングの定義をします.

以上です!
次回はログイン済みだったらhome画面を,ログインしてなかったらsms画面を表示させる記事を書きます.

-flutter
-, ,

Translate »