Firebase認証による反応文脈APIへの導入

皆さんこんにちは!今日の記事は、このAPIが反応する初心者のために非常に複雑であることに気づいたので、文脈APIに反応する初心者の紹介です.そして、私は反応文脈APIを使用することの美しさを示すためにFireBase認証を使用します.始めましょう!
このチュートリアルに従ういくつかの前提条件

反応の基本的な理解

Firebaseのほとんどの理解

文脈APIは何ですか？

通常反応で我々は何かを通過するprops 親コンポーネントから子コンポーネントに.反応アプリは、コンポーネントの構成され、多くの親と子の関係、したがって、アプリケーションの単純な可視化のように見えることができます

ほとんどの場合、私たちは親から子へといつものようにstate and props 十分です.しかし、私たちがprop 多くのコンポーネントに?深く入れ子になったり、別の木にも?

例props 以下のようになります:

ユーザーの好みの言語

テーマや色のスキームは、ユーザーが選択したアプリ

認証済みユーザーのプロパティー

そのような場合はprop 手動でから、各コンポーネントには退屈すぎる!これを支柱掘削と呼ぶ.そこでここでは、救助へのAPI APIを反応させる.公式文書によると

React Context API provides the ability to pass props to child components without needing to pass them down manually.

そこで、我々はそれが何であるかを知っています、そして、我々がそれを使う必要があるとき.
FireBase認証を使用した簡単な例を示します.コンテキストAPIを使用する必要がありますので、手動で認証されたユーザー小道具をすべての子要素に渡す必要はありません.これがどのように機能するか見てみましょう.

手順1 : FireBaseプロジェクトを作成する

ヘッドオーバーhttps://firebase.google.com/ と新しいプロジェクトを作成します.

ダッシュボードで、WebアプリケーションのFireBaseを初期化するWebアイコンをクリックします.

FireBaseによる手順に従って、設定変数を示すページに到達します.これはコピーしてどこかに保存することが重要です.我々はすぐにそれを使用します.

ステップ2 : firebase認証を設定する

以下のイメージに示すように、認証に頭をつけてください.

次に、アプリケーションのためのメソッドの記号を設定することができます.私の例では、Google、電子メール、Facebookを有効にします.

Facebookのサインをセットアップ

Googleと電子メール認証のために、あなたは単にサインインメソッドとしてそれを可能にするためにトグルボタンを押す必要があります.Facebookの場合は、Facebookの開発者アカウントを設定する必要があります.

This is optional, so please skip to step 3 if you don't plan on using Facebook as an authentication method.

ヘッドトゥhttps://developers.facebook.com/ と開発者アカウントを作成する

その後、新しいプロジェクトを作成し、このページが表示されます.設定に移動します.コピーあなたのアプリケーションのIDとアプリケーションの秘密.

今すぐfirebaseに戻って、それに応じて貼り付けます.同時に、下の画像に示すようにURLをコピーします.

Facebookに戻って、開発者のために、『製品を加える』の下で、フェイスブックログインと呼ばれている製品を見つけて、『セットアップ』ボタンをクリックしてください.

FireBaseからコピーしたURLを下の画像のフィールドに貼り付け、「変更を保存」をクリックします.

最後に、Facebookのログインにクイックヘッドスタートし、あなたのウェブサイトのURLを入力します.私の場合では、これはテストのアプリだけですので、URLはhttp://localhost:3000 . をクリックして';保存';と完了です!

あなたのユーザーは今あなたのアプリケーションに自分自身を認証するためにFacebookを使用することができます.

ステップ3：反応プロジェクトを設定する

我々のfirebase認証で我々の3つのサインインメソッド(すなわち、Google、電子メールとFacebook)のためにされて、FireBaseを使用することができるように我々の反応プロジェクトを準備しましょう.
プロジェクトのルートディレクトリで実行します.

npm install firebase react-firebaseui

firebase ツールとインフラストラクチャを反応アプリでFireBaseを設定する必要が含まれます.

react-firebaseui 簡単に認証を処理して、表示するために予め作られた構成要素を提供します.

ステップ4 : firebase設定

反応アプリの' firebase 'フォルダを作成するsrc フォルダとその中に、ファイルを作成しますconfig.js . ここでは、ステップ1から設定変数を貼り付けます.コピーを忘れてしまった場合は、FireBaseプロジェクトの設定から設定変数を見つけることができます.

インFirebase/config.js , 3つのことを行います.

インポート依存

用途firebase.initializeApp(config) FireBaseアプリケーションインスタンスを作成するには

我々はすぐに表示されます使用するためのこのアプリをエクスポート

コードでは、次のようになります.

//1. import the dependencies
import * as firebase from "firebase";
import "firebase/auth";

//2. Initialize app with the config vars
const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
});

//3. export it for use
export default app;

ステップ5 : FireBaseコンテキスト

では、コンテキストAPIを使用してFireBaseコンテキストを作成します.にFirebase 新しいファイルを追加context.js .
次のようにします.

インポートの依存関係とアプリケーションからconfig.js

を作成し、エクスポートコンテキストAuthContext 使用React.createContext()

作成とエクスポートAuthProvider これには、反応コンテキストプロバイダーが含まれます.

すべてのコンテキストオブジェクトは、他のコンポーネントがそのコンテキストを消費できるようにするプロバイダーを持ちます.この場合、我々AuthProvider はuser を返します.これは、我々のアプリケーション内の任意のコンポーネントは、ユーザーが署名し、ユーザーのプロパティにアクセスするかどうかを判断することができます.
The user 状態はuseState フックを使用して更新されますuseEffect フックとFirebaseのauth().onAuthStateChanged(setUser) .
The onAuthStateChanged 基本的に、認証の変更を聞く観察者です.このように、ユーザーがログインしたり、外に出るたびにuser 状態は自動的に更新されますAuthProvider .
以下にコードの内容を示します.

//1.
import React, { useEffect, useState } from "react";
import app from "./config";

//2.
export const AuthContext = React.createContext();

//3.
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    app.auth().onAuthStateChanged(setUser);
  }, []);

  return (
    <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
  );
};

ステップ6：アプリケーションにAuthProviderをインポートします。js

今、我々はインポートすることができますAuthProvider アプリを.JSとすべてのコンポーネントを配置します.この方法では、アプリケーション内の任意のコンポーネントにコンテキストを渡すことができます(コンポーネントツリーの上部ノードです).

import { AuthProvider } from "./Firebase/context";

function App() {
  return (
    <AuthProvider>
      <Router>
        <div className="App">
          <Nav />
          <Switch>
            <Route path="/signin" exact component={SignIn} />
          </Switch>
        </div>
      </Router>
    </AuthProvider>
  );
}

ステップ7 :サインインコンポーネント

私たちはSignIn.js それは我々のアプリにログインするためのユーザーのためのボタンの記号を表示します.あなたが見ることができるようにApp.js 上のコードは、私のアプリケーションは、パスでコンポーネントの記号をレンダリングします/signin .
中に“サインイン/レジスタ”ボタンがありますNav にリンクするコンポーネント/signin ボタンをクリックすると、ボタンに記号が表示されます.我々は、我々を見ますNav.js この後.
したがって、コンポーネント内の符号は次のようにインポートされます.

import React, { useContext } from "react";
import "../App.css";
import firebase from "firebase";
import { FirebaseAuth } from "react-firebaseui";
import { AuthContext } from "../Firebase/context";
import { Redirect } from "react-router-dom";

useContext コンポーネントが文脈を消費することができる反応フックです.

FirebaseAuth 我々のサインインメソッドのスタイルコンポーネントです

AuthContext によって消費される文脈を含みますuseContext

Redirect サインインが成功すると、ユーザーをホームページにリダイレクトすることができます

インポート文の下では以下のようになります.

export default function SignIn() {
  //get the user state from the context
  const { user } = useContext(AuthContext); 

  //this is our config for FirebaseAuth
  const uiConfig = {
    signInFlow: "popup",
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccess: () => false,
    },
  };

//if user exists or signed in, we redirect the page to home, else display the sign in methods with FirebaseAuth
  return (
    <div>
      {!!user ? (
        <Redirect to={{ pathname: "/" }} />
      ) : (
        <div>
          <p>Please Sign In</p>
          <FirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
        </div>
      )}
    </div>
  );
}

最後のステップ：NAVでの条件付きレンダリング。js

最後に、我々Nav 現在認証されていないユーザがない場合は、ボタンを押して表示するコンポーネント.ユーザーが存在するならば、我々はユーザーのアクセスによって彼らの名前と絵を示しますdisplayName and photoURL プロパティ.より多くのユーザープロパティはドキュメント内で見つかりますhere .
また、実行する'サインアウト'リンクがありますapp.auth().signOut() をクリックすると、ユーザに署名します.
こちらがNav.js :

import { AuthContext } from "../Firebase/context.js";

export default function Nav() {
   //get the user state from context
  const { user } = useContext(AuthContext);

//if user exists, display user name and picture.
//else, show a sign in button instead
  return (
      <div className="account">
        {!!user ? (
          <div className="dropdown">
            <p>{`Welcome, ${user.displayName}`}</p>
            <div className="dropdown-content">
              <Link to="/">Create Stories</Link>
              <Link to="/">My Stories</Link>
              <Link onClick={() => app.auth().signOut()}>Sign Out</Link>
            </div>
          </div>
        ) : (
          <Link to="/signin">
            <button>SIGN IN/ REGISTER</button>
          </Link>
        )}
      </div>
  );
}

最終結果

よろしい.それはとてもクールですね.
結論では、反応コンテキストAPIは、アプリケーション内の他のコンポーネントにデータを渡すためにコンテキストを作成するために美しく、簡単な方法を提供します.この記事がFirebase認証と同様に文脈APIを使う方法を学ぶのに役に立つことを願っています.読書ありがとう.以下の質問やコメントを残してください.必要に応じて、下記のリソースを読んで、今日の議論についてもっと学びましょう.次回まで、歓声!

更なる読書

React Context API Documentation

Firebase for Web Apps Documentation