reactjs + firebase auth クライアント認証の実装(その1)

7月からmedicmediaにjoinしました。
前任者から引き継いだ慣れない「reactjs + nodejs + lambda + dynamodb」に苦しんでおります。

今回、認証周りの改修が発生し、ios、androidの実装で便利だったfirebaseを使用することにしました。

firebaseのコンソール画面にログインし、プロジェクトを作成
https://console.firebase.google.com

npmでfirebaseをインストール

"dependencies": {
  "firebase": "^4.5.2",
 }

firebase用のディレクトリを作成し、下記のファイルを作成
・index.js

import firebase from 'firebase';
import { firebaseConfig } from './config';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const firebaseAuth = firebaseApp.auth();

*上記のファイルでexportしたものを使用するjsファイル内でimportする
*auth以外も使用するのであれば、 exportを追記する

・config.js
firebaseのコンソールから設定用のデータをコピペする

export const firebaseConfig = {
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    authDomain: 'xxxxxxxxxxxxxxxxxxxxxxxx.firebaseapp.com',
    databaseURL: 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxx',
    projectId: 'xxxxxxxxxxxx',
    storageBucket: 'xxxxxxxxxxxxxxxxxxxx.appspot.com',
    messagingSenderId: 'xxxxxxxxxxxxxxxxx'
};

上記が整ったら、実際に認証を行うjs内で呼び出す

import {firebaseAuth} from '../firebase';

Eメールでの認証

firebaseAuth.signInWithEmailAndPassword(email, password).then(newuser => {
                    // ログイン成功
                    if (newuser.emailVerified) {
                       
                    } else {

                        newuser.sendEmailVerification().then(function () {
                            // Email sent.
                            resolve({error: {name: 'email verified yet.Retransmit email'}});
                        }).catch(function (error) {
                            resolve({error: {name: error.message}});
                        });
                    }
                }, error => {
                    var errorCode = error.code;
                    var errorMessage = error.message;
                    
                });

*newuser.emailVerifieはそのユーザが、メールの本登録ができているかのフラグ

匿名での認証

firebaseAuth.signInAnonymously();

カスタムトークンを使用しての認証

firebaseAuth.signInWithCustomToken(credential).then(function (user) {
               resolve();
               
               }).catch(function (error) {
                 console.log('Sign In Error', error);
                 reject(ApiErrorManager.handle('AUTH.SIGNIN', e));
                });

*こちらは別途サーバサイドの記事を書く予定でいます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Bitnami