坂本研のゼミ室

React + Firebase でGoogleアカウントでのログイン機能を実装する

Firebase React.js

はじめに

FirebaseとReactでの開発で、

今回はGoogleアカウントを使ったログイン機能の実装を行っていきます。(ログインだけです。)

Firebase Authentication

firebase.google.com

環境

以下の環境で動作を確認しています

$ node -v 
v11.10.1

"react": "^16.12.0",
"firebase": "^7.8.0",

準備

Firebaseプロジェクトの作成

Firebaseプロジェクトの作成は以下の記事にありますので、参考にしていただけますと幸いです。

takashinoda.hatenablog.com

ログイン方法を指定する

  • メニューからAuthenticationを選択

f:id:TakaShinoda:20200207224916p:plain

  • Authentication画面からログイン方法を選択

f:id:TakaShinoda:20200207225112p:plain

  • ログインプロバイダからGoogleを選択

f:id:TakaShinoda:20200207225529p:plain

  • ステータスを有効にする

f:id:TakaShinoda:20200207225622p:plain

f:id:TakaShinoda:20200207225635p:plain

実装

create-react-app

  • create-react-appでReactプロジェクトを作成
npx create-react-app auth-demo

ファイル構成

  • ファイル構成は以下の通りです
$ tree
│          
├── package-lock.json
├── package.json
├── .env
├── public
│   ├── btn_google_signin.png
│   ├── favicon.ico
│   └──  index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── components
│   │   └── Signin.jsx

Firebase SDK snippet取得する

  • FirebaseプロジェクトのSettingsからapiKeyなどを取得

f:id:TakaShinoda:20200207231544p:plain

  • package.jsonと同じ階層に.envファイルを作成し、そこに取得したapiKeyなどを記述
# Firebase
REACT_APP_FIREBASE_API_KEY="×××××××××××××××××××××" 
REACT_APP_FIREBASE_AUTH_DOMAIN="×××××××.firebaseapp.com"
REACT_APP_FIREBASE_DATABASE_URL="https://×××××××.firebaseio.com"
REACT_APP_FIREBASE_PROJECT_ID="××××××××××××"
REACT_APP_FIREBASE_STORAGE_BUCKET="×××××××××××××××××"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="123456789"
REACT_APP_FIREBASE_APP_ID="××××××××××××××××××××××××××××××"
REACT_APP_FIREBASE_MEASUREMENT_ID="×××××××××××××"

App.js

  • .envファイルからapiKeyなどを読み込む

creare-react-appで作成したプロジェクトは、

process.env.REACT_APP_から始まる変数を読み込みができるようになっています

import React from 'react';
import Signin from './Signin';
import './App.css';
import firebase from 'firebase/app';
import "firebase/auth";


const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
}
firebase.initializeApp(firebaseConfig);


const App = () => {
  return (
    <div className="App">
      <Signin />
    </div>
  );
}

export default App;

Signin.jsx

import React from 'react';
import firebase from 'firebase/app';

const Signin = () => {

    const signInWithGoogle = () => {
        // Googleプロバイダオブジェクトのインスタンスを作成
        const provider = new firebase.auth.GoogleAuthProvider()
        // ポップアップウィンドウでログインを行う場合はsignInWithPopupを呼び出す
        firebase.auth().signInWithPopup(provider)
        .then(user => {
            alert("success : " + user.user.displayName + "さんでログインしました");
          })
          .catch(error => {
              alert(error.message);
          });
    }
    
    
    return (
            <div>
                <div className="login">
                    <h1>ログイン</h1>
                </div>
                <div className="signin_button">
                    <img src="../btn_google_signin.png" onClick={()=>signInWithGoogle()} alt="google signin"/>
                </div>
            </div>
        );
}

export default Signin

実行結果

npm start

f:id:TakaShinoda:20200208005711p:plain

f:id:TakaShinoda:20200208010150p:plain

f:id:TakaShinoda:20200208010351p:plain

おわりに

今回は、React + Firebase でGoogleアカウントでのログイン機能だけを実装しました。

次回はルーティングを使って、ログインが成功したらホーム画面に遷移するような機能の実装を行っていきたいと思います。