こんにちは！
クラウドソリューション開発部の大川です。
今回はReact NativeとFirebase Authenticationを使って、スマホアプリのログイン認証を作成した話について紹介したいと思います！
Firebase Authenticationとは？
『Firebase Authentication』は、Googleが提供する認証サービスで、アプリやウェブサイトのユーザー認証を簡単かつ安全に実装できるようにするものです。
認証の種類について
ネイティブのプロバイダ
- メール/パスワード
- 電話番号
- 匿名
ソーシャルプロバイダ
- Microsoft
- Yahoo!
- Apple
- GitHub
- Game Center
- Play Games
カスタムプロバイダ
- OpenID Connect
- SAML
Firebase Authenticationを使うメリットについて
シンプルな実装
豊富なドキュメントとサンプルコードが提供されているため、React Nativeプロジェクトに簡単に統合できます。react-native-firebaseライブラリを使用することで、複雑な設定を省略し、迅速に認証機能を実装できます。
react-native-firebaseの公式ドキュメント
多様な認証方法のサポート
前述に記載している幅広い認証方法をユーザーに提供できます。
サンプルコード
インポートするライブラリ
|
1 2 3 4 5 6 7 8 |
import firebase from '@react-native-firebase/app'; import auth from '@react-native-firebase/auth'; import {Alert, Platform} from 'react-native'; import {GoogleSignin} from '@react-native-google-signin/google-signin'; import {appleAuth} from '@invertase/react-native-apple-authentication'; import Config from 'react-native-config'; import '@react-native-firebase/functions'; |
Firebaseの初期化
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import firebase from '@react-native-firebase/app'; import auth from '@react-native-firebase/auth'; import {Alert, Platform} from 'react-native'; import {GoogleSignin} from '@react-native-google-signin/google-signin'; import {appleAuth} from '@invertase/react-native-apple-authentication'; import Config from 'react-native-config'; import '@react-native-firebase/functions'; // Firebaseの設定（実際の値を入力する） const firebaseConfig = { apiKey: Config.FIREBASE_API_KEY, authDomain: Config.FIREBASE_AUTH_DOMAIN, databaseURL: Config.FIREBASE_DATABASE_URL, projectId: Config.FIREBASE_PROJECT_ID, storageBucket: Config.FIREBASE_STORAGE_BUCKET, messagingSenderId: Config.FIREBASE_MESSAGING_SENDER_ID, appId: Config.FIREBASE_APP_ID, }; // Firebaseの初期化 export const firebaseInitializeApp = Platform.OS === 'ios' ? firebase.initializeApp(firebaseConfig) : !auth.length ? firebase.initializeApp(firebaseConfig) : auth(); // Firebaseの認証情報 const firebaseAuth = firebase.auth(); // Google認証の設定（実際の値を入力する） GoogleSignin.configure({ webClientId: Config.FIREBASE_WEB_CLIENT_ID, }); |
Google認証
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
export const googleSignIn = async () => { // Google のログイン画面を表示して認証用の ID トークンを取得する const user = await GoogleSignin.signIn(); const idToken = user.idToken; if (idToken === null) { console.log('ログイン失敗', 'Google認証に失敗しました。'); return; } // 取得した認証情報 (ID トークン) を元にサインインする const credential = auth.GoogleAuthProvider.credential(idToken); const userInfo = await firebaseAuth.signInWithCredential(credential).catch(error => { console.log('ログイン失敗', 'メールアドレスまたはパスワードに誤りがあります。'); }); }; |
Apple認証
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Apple認証によるサインイン export const appleSignIn = async () => { const appleAuthRequestResponse = await appleAuth.performRequest({ requestedOperation: appleAuth.Operation.LOGIN, requestedScopes: [appleAuth.Scope.FULL_NAME, appleAuth.Scope.EMAIL], }); if (!appleAuthRequestResponse.identityToken) { console.log('ログイン失敗', 'Apple認証に失敗しました。'); throw new Error('Apple Sign-In failed - no identify token returned'); } const {identityToken, nonce} = appleAuthRequestResponse; const appleCredential = auth.AppleAuthProvider.credential(identityToken, nonce); const userInfo = await firebaseAuth.signInWithCredential(appleCredential).catch(error => { console.log('ログイン失敗', 'メールアドレスまたはパスワードに誤りがあります。'); }); }; |
Microsoft認証
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Microsoft認証によるサインイン export const microsoftSignIn = async () => { const provider = new firebase.auth.OAuthProvider('microsoft.com'); provider.addScope('offline_access'); provider.setCustomParameters({ prompt: '', // 実際の値を入力する tenant: '', // 実際の値を入力する }); const userInfo = await firebaseAuth.signInWithRedirect(provider).catch(error => { console.log('ログイン失敗', 'メールアドレスまたはパスワードに誤りがあります。'); }); }; |
まとめ
Firebase Authenticationは、セキュアなログイン認証を容易にスマホアプリに実装することができます。スマホアプリ開発をする際に、ぜひ導入を検討してみてください！
終わりに
エコモットでは一緒にモノづくりをしていく仲間を募集中です！
弊社に少しでも興味がある方、ぜひ下記の採用ページをご覧ください！
