Firebaseのログイン機能の実装(メールアドレスと電話番号)どうも、サトウダイキです。NativeでのFirebaseのログインの実装について書いていきます。4つの方法を実装していきます。メールアドレス電話番号FacebookアカウントGoogleアカウントこの記事ではメールアドレスと電話番号について書きます。https://blog.hatena.ne.jp/ducklingsinc/ducklings.hateblo.jp/edittech.maricuru.com※Expoを利用しています。Versionは36です。2020年2月の時の実装です。メールアドレスまずはメールアドレスとパスワードのログインから実装していきます。Firebaseの設定Firebaseのプロジェクを作成します。下記URLからFirebaseプロジェクトを作成します。画面の指示通り進めていけば作成できます。有効にするにタブを移動します。メールリンク(パスワードなしでログイン)も有効にしてもOKです。続いて、アプリの作成を行います。[Web]をクリックWebアプリの登録アプリ名を入力して「アプリを登録」をクリックconfig画面firebaseConfigを値をコピーしておきます。これでWebブラウザでのFirebase側の設定は終わりです。コードの実装ここからはコーディングです。ターミナルを立ち上げて、firebaseをinstallします。色々な記事を読むと、react-native-firebaseを使っているコードと、firebaseを使っているコードがあります。どちらでも実装できますが、今回はfirebaseを使います。次にconfigファイルを作成します。----の部分はfirebaseは自身のfirebaseアプリの設定をしてください。先ほどコピーしたfirebaseConfigの値を貼り付けます。ロジックの実装ロジック部分のコードです。firebaseが予め用意している、createUserWithEmailAndPasswordにemailとpasswordを渡すだけです。SignUpScreen;特別、難しい処理は何もしていないです。確認アカウント作成画面シミュレータを立ち上げ、メールアドレスとパスワードを入力して、登録ボタンを押します。設定されると、firebaseにユーザが登録されています。いて電話番号を使ったログイン方法についてです。Webブラウザのfirebaseに移動して、Authenticationから電話番号を有効にします。電話番号ログインの設定テスト用の電話番号はまだ登録しないで大丈夫です。これは、1度成功した後にログインの動作を省くために使います。承認済みドメインの追加そのまま画面を下にスクロールしていき、[認証済ドメイン]の設定を行います。これ設定忘れるとハマりますので、注意してください。設定する値は、IPアドレスです。電話番号のログインの実装にはreCAPTYACが必要です。これはfirebaseへの不正のログインを防ぐためです。reCAPTYACとは、「私はロボットではありません」といったあれです。NativeとFirebaseでのreCAPTYACをうまい具合にやってくれるものが用意されていないので、自分で実装するしかありません。いうことで、実際に作っていきます。ターミナルを立ち上げfirebase-toolsをインストールします。login続いて、実装中のアプリのカレントディレクトに移動して、下記を実行。これを一旦yすると下記が自動で生成されます。firebase.json.firebasercpublic/index.htmlcaptchaの実装public/captcha.htmlを新規作成します。firebaseのバージョン部分はindex.htmlと同一のを使ってください。ターミナルを立ち上げてデプロイします。deploy成功するとfirebaseのコンソールでこんな感じになります。firebasehosting成功パッケージのインストールさて、ここからは実装に入ります。必要なものをインストールします。expo-web-browserロジックの実装auth.tsに電話番号ログイン処理を追記します。null;};※APPNAMEの箇所は書き換えが必要です。UIの実装SignUpScreen.tsxを追記します。VerificationCodeScreen;電話番号を入力して、登録を押す→入力した電話番号に確認コードが飛ぶ。いった流れになります。電話番号は国際コードから入れなければいけません。080-1234-5678だとしたら、+818012345678と入力します。次回はFacebookログインと、Googleログインについて書いていきます。FirebaseのSNSログイン機能の実装(GoogleとFacebo...どうも、サトウダイキです。FirebaseのSNSログイン機能の実装(GoogleとFacebook)月別アーカイブ検索リンクmaricuru運営会社スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。