초보자가 React+Firebase로 웹 앱을 작성한다 ③~Firebase Authentication의 인증 기능을 사용해 본

②의 계속입니다.

이번에는 firebase의 인증 기능을 사용하여 로그인한 사용자만 쓸 수 있도록 합니다.

↓의 GitHub의 페이지를 참고로 했습니다.
htps : // 기주 b. 코 m / 후레 바세 / 후 우바 세우 우이 우 브레 ct

기타 참고.
htps : // 푹 빠져라. 오, ぇ. 코 m/도 cs/아우 th/우에 b/마나게-우세 rs? hl = 그럼
htps : // 푹 빠져라. 오, ぇ. 이 m/도 cs/아우 th/우ぇ b/s rt? hl = 그럼

우선 firebase의 Authenticathion 로그인 방법으로 Google과 메일/비밀번호 인증을 활성화해 봅시다.
Twitter등은 API를 신청을 해야 하기 때문에 무효로 하고 있습니다.


다음 npm 명령을 실행합니다.

npm install --save react-firebaseui

npm install --save firebase

firebase-ui가 설치되면 ↓와 같이 변수 uiConfig를 정의하고,
StyledFirebaseAuth로 호출하도록 합니다.

App.js

    const uiConfig = {
　　　//認証するときポップアップします
      signInFlow: 'popup',

　　　//サインインしたときのリンク先
      signInSuccessUrl: '/',

      //認証方法一覧。
      //Googleの部分をFacebook、Twitter等に変えれば、そのAPIが使用できます
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
      ]
    };

이번에는 다음과 같이 정리했습니다.
state에 isLogin을 설치하고 true, false로 로그인 상태를 관리합니다.
컴퍼넌트화하고 있지 않기 때문에 흩어져 있습니다만, 나중에 정리해 갑니다.

App.js

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

//①でモジュール化したfirebase.jsをインポート
import { firestore } from './plugins/firebase';

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';


class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: '',
      address: '',
      isLogin: false,
    }    
    this.getName = this.getName.bind(this);
    this.getAddress = this.getAddress.bind(this);
    this.addData = this.addData.bind(this);
    this.logOut = this.logOut.bind(this);
  }

  //コンポーネント配置時にログインできてるか確認します
  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      this.setState({
        isLogin: true,
      });
    });
  }

　//名前の入力フォーム情報読み込み
  getName(event) {
    this.setState({
      name: event.target.value,
    });
  };

　//住所の入力フォーム情報読み込み
  getAddress(event) {
    this.setState({
      address: event.target.value,
    });
  };

　//登録ボタンを押すとデーターベースに反映
  addData(){ 
    firestore.collection('users').add({
    name: this.state.name,
    address: this.state.address,
    created_at: new Date(),
    }).then(() => {
    this.setState({
      name: '',
      address: '',
    });
  })};

　//ログアウトボタンを押すとisLoginがfalseになる
  logOut(){
    this.setState({
      isLogin: false,
    });
  }



  render(){
    const uiConfig = {
      signInFlow: 'popup',
      signInSuccessUrl: '/',
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
      ]
    };
　　
    //空の変数を定義してifでログイン／ログアウト時の表示画面を切り替える
    let successfulUser;

    if(this.state.isLogin){
      successfulUser=(
        <div>
        <form>
        <TextField  label="名前" 
         value= {this.state.name} 
         onChange={(event)=>{this.getName(event)}}/> 
         <br/>

         <TextareaAutosize 
         aria-label="住所" 
         rowsMax={4} 
         placeholder="住所" 
         value= {this.state.address} 
         onChange={(event)=>{this.getAddress(event)}}
         />;
         <br/>

        <Button variant="contained" color="primary" onClick={this.addData}>登録</Button>
        </form>
        <Button variant="contained" color="secondary" onClick={this.logOut}>ログアウト</Button> 
        </div>

      );
     }else{
      successfulUser=(
         <div>
         <p>Please sign-in:</p>
         <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
         </div>
       );
      }   

     return(
　　　　//最終的な表示画面
       <div>
          {successfulUser}   
       </div>
      );
    }
}
export default App;

그러면 로그인 화면이 표시됩니다.


로그인 할 수 있으면 ②로 만든 투고 화면으로 전환됩니다.


이제 로그인한 사용자만 쓸 수 있습니다.
사용자 정보도 제대로 등록되어 있습니다.


componentDidMount에 대해서는 React의 공식 페이지가 가장 알기 쉬웠습니다.
라이프 사이클 다이어그램이 뛰어나다고 생각합니다.
↓
htps : // 그럼. Rea ctjs. 오 rg/도 cs/레아 ct-코 m포넨 t. HTML

그럼 또 투고하겠습니다.