53
50

More than 5 years have passed since last update.

Firebase AuthenticationでReactアプリにTwitter/Facebook/Google認証をつける

Last updated at Posted at 2018-06-30

Firebase Authenticationを使うとTwitter, Facebook, Googleでのログインを極めて簡単に実装できます。

例としてReactのSPAに対して、Twitterによる認証認可を組み込んでみます。

Twitterでアプリ作成

  1. Apps for Twitterでアプリ作成

    https://apps.twitter.com で新規アプリを作成します。

  2. Consumer KeyとConsumer Secretの確認

Consumer Key(API Key)とConsumer Secret(API Secret)を取得します。

twitter.png

  1. E-mail

Firebase AuthenticationでTwitterのE-mailアドレスを取得する場合は次の設定をします。

Settingで Privacy Policy URLRequest email addresses from users を設定する。

Permissionsで

permission.png

FirebaseのWebコンソール

  1. FirebaseのWebコンソールを開いて、AuthenticationタブからTwitterを有効化します。

firebase_authentication.png

  1. APIキーとAPIシークレットにTwitterのページのAPI KeyとAPI Secretを入力して保存します。

  2. このページのコールバックURLをTwitterのCallback URLに入力します。

Reactアプリの作成

React & Flux入門で紹介しているツールを使います。

npx starter-react-flux init
npm start

認証認可の実装

  1. FirebaseのSDKの追加

    npm install --save firebase
    
  2. configの作成

    app/config.jsを新規作成します。

    import firebase from 'firebase/app';
    import 'firebase/firestore'; //firestoreを使う場合
    import 'firebase/auth';
    
    firebase.initializeApp({
      apiKey: '*****',
      authDomain: '*****',
      projectId: '*****'  
    });
    
    export const providerGoogle = new firebase.auth.GoogleAuthProvider();
    export const providerFacebook = new firebase.auth.FacebookAuthProvider();
    export const providerTwitter = new firebase.auth.TwitterAuthProvider();
    export const db = firebase.firestore(); //firestroeを使う場合
    export default firebase;
    
  3. ページにログイン、ログアウトボタンとそれぞれのハンドラを追加します。

    app/components/Content.js

        
      handleLogin = () => {
        SampleActionCreator.loginWithTwitter();
      }
    
      handleLogout = () => {
        SampleActionCreator.logout();
      }
    
      render() {
        return (
          <div style={this.props.style}>
               
            <Button onClick={this.handleLogin}>Login</Button>
            <Button onClick={this.handleLogout}>Logout</Button>        
          </div>
        );
      }
    
  4. Action Creatorでログインやログアウトを実装します。

    import firebase, { providerTwitter } from '../config';
    
        
    
      loginWithTwitter() {
        firebase.auth().signInWithRedirect(providerTwitter);
        firebase.auth().getRedirectResult().then(result => {
          console.log(result);
          //TODO: ex. storeに送信, DB保存,...
        }).catch(error => {
          console.log(error);
        });
      },  
    

FluxについてはReact & Flux入門に書いているので割愛します。

ログイン状態に応じて表示コンポーネントを切り替える方法は色々あるので割愛します。

  1. デプロイして確認

    npm runb build && firebase deploy
    

    login.gif

    ログインするとWebコンソールでユーザーが確認できます。

    twitter-a.png

Google, Facebook

OAuthのスコープなど細かな設定は各プロバイダに合わせる必要がありますが、まったく同じ方法でいけます。

Google

import { providerGoogle } from '../config';
  :
firebase.auth().signInWithRedirect(providerGoogle);

Facebook

import { providerFacebook } from '../config';
  :
firebase.auth().signInWithRedirect(providerFacebook);

Tips

ログイン中のユーザー

firebase.auth().onAuthStateChanged(user => {
  console.log("onAuth", user);
});

or 

const current user = firebase.auth().currentUser

ログアウト(Firebaseから)

firebase.auth().signOut().then(result => {
    console.log(result);
}).catch(error => {
    console.log(error);
});

その他

認証認可やユーザー管理に関するかなりの機能が簡単に実装できます。

53
50
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
53
50