再利用可能な反応ログインコンポーネントの構築
10253 ワード
再利用可能で共有可能なFirebaseを構築する方法
この章では、我々はFacebookのログインを実装し、反応のアプリの構造を開始して対処したところから我々はどこから離れていきます.我々は、最初の章で作成したのと同じアプリにGoogleのログインを追加する予定です.この章は短くて、甘いです、そして、我々がすでに前の章で問題のセクションを完了したので、簡単です.私たちはあなたの反応プロジェクト、Googleログイン、Firebase Auth、コンポーネントの実装などについての概念を把握するために様々なサブ見出しにこのチュートリアルを分割しており、それに応じて動作します.
さあ、Googleログインを実行しましょう!
何を学ぶか.
問題
我々が第1章で問題のセクションの大部分をしたので、この章はGoogleログインの実装の問題に取り組むだけです;Facebookのログインと比較して比較的簡単です.それで、我々は我々の時間の多くを浪費することなくここで速い勝利を必要とします.我々はすぐに結果を生成する必要があります.それは私たちの最後のマイルストーンに到達する動機を保つ重要な部分です.
要件
ここでは、プラグイン、パッケージ、およびこのチュートリアルから何かを得る必要があるサービスの完全なリストです.
再利用可能な以前のコード
私たちのために簡単にするために、我々は我々が最初の章で作成したFacebookのコンポーネントを複製し、Googleに関連するすべての名前を変更するつもりです.プロジェクトのディレクトリ構造は以下のようになります.
FacebookからGoogleに名前を変更した場所については、以下のように詳細に説明します.
<li class="firebaseui-list-item">
<button
onClick={this.handleLogin}
class="firebaseui-idp-button mdl-button mdl-js-button mdl-button--raised firebaseui-idp- **google** firebaseui-id-idp-button">
<span class="firebaseui-idp-icon-wrapper">
<img class="firebaseui-idp-icon" alt="" src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/ **google**.svg">
</span>
<span class="firebaseui-idp-text firebaseui-idp-text-long">
Sign in with **Google**
</span>
<span class="firebaseui-idp-text firebaseui-idp-text-short">
**Google**
</span>
</button>
今、我々は下のコードをコピーし、我々のアプリに追加する必要があります.jsファイル.
我々のGoodleAuth/インデックスで.JSファイルは、以下のコードスニペットに示すように、FacebookAuthのすべてのインポートをGoogleAuthで置き換える必要があります.
今、すべての変更は、我々のアプリでのみ行われます.jsファイル.我々はアプリを変更する必要があります.以下のコードスニペットに示すように、コンポーネントを含め、FireBase構成を渡すJSファイル
その結果、ブラウザ画面またはアプリケーション画面に次のような結果が表示されます.
これはうまくいっていることがわかります.今、我々は我々のチュートリアル章のFirebase部分に1を動かします.
Firebaseでのサインインメソッドのアクティベーション
この手順では、Googleログイン用のFireBaseコンソールのSign Inメソッドを有効にする必要があります.そのためには、
を有効にするには
最後に、プロジェクトサポートメールを提供する必要があります.
これが行われた後、我々は我々のアプリに戻り、Googleのログインをクリックする必要があります.以下のシミュレーションとブラウザのコンソールでの結果を見ます.
最後に、我々は正常に我々の反応アプリでもGoogleのログインを実装している.
さて、前の章のように、新しいコレクションを作成することでコードをプッシュする必要があります.
それを再利用可能で、ビットで鋭利にしてください
Share reusable code components as a team · Bit
我々のコードを再利用可能で、共有可能にするために、我々は若干のリストラをして、すべてのコードを「構成要素」に動かしますBit ). それから、私たちは(それのすべての依存関係で)、それをBit’s cloud , 他の人と共有し、簡単に再利用する.
この手順では、Googleコンポーネントのコンポーネントを再度押します.私たちはすでに私たちのビットパッケージをインストールし、私たちのビットアカウントに接続している.したがって、コレクションを作成し、コンポーネントを追跡することから始める必要があります.
注:第1および第2ステップは、ビットアカウントのインストールを特徴とします.あなたが既にビットアカウントを持っているならば、これらのステップはスキップされることができます.
1プロジェクトを作成し、ビットを初期化する
ここでは、我々はすべてのコンポーネントコードをプッシュする予定のビットに新しいコレクションを作成します.「Create Collection」構成ページを使用して、以下のスクリーンショットに示すように「FireBase Auth Collection」という新しいコレクションを作成します.
プロジェクト全体をビットごとに正常にプッシュするには、次のページに示す手順に従ってください.
まず、ビットCLIをインストールする必要があります
Using NPM,
npm install bit-bin --global
それから、私たちのビットCLIのプロジェクトディレクトリに行って、以下のスクリーンショットに示すように、ビットinitコマンドを実行し、ビットCLIでビットログインを実行する必要があります.
2 .コンポーネントの対応するコンパイラを設定する
コンパイラを設定するときには、コンポーネントをカプセル化するためにビットを指示します.それらのコンパイラと一緒にコンポーネントをカプセル化するには、私たちに自由に使用し、構築し、どこでもテストすることができます.これは、コンポーネントを使用したいアプリケーションのいずれかでコードを実行することができます.また、クラウド内で実行したり、live component playground .
bit import bit.envs/compilers/react --compiler
トラックコンポーネント
コマンドプロンプトまたはビットコンソールで次のコマンドを使用して、コンポーネントを追跡する必要があります.
ビットを追加します
コマンドが実行された後の結果はスクリーンショットで以下のようになります.
私たちのコレクションへのタグとエクスポート
ここでは、我々はet a version すべての追跡済みコンポーネントに対して、次のビットコマンドを使用してこのコレクションにエクスポートします.
ビットタグ-- 1.0.0すべて
最後に、次のビットコマンドを実行して、コンポーネントコードを以前に作成したビットコレクションにプッシュする必要があります.
bit export krissnawat.firebase-auth-collection
最後に、我々はアプリケーション内のコンポーネントを置き換える必要があります.以下のコードスニペットに示すようなJSファイル
< div >
最後に、Firebase AuthでのGoogleログインの実装と、コンポーネントのビットアップロードが完了しました.プロジェクトをローカルで実行することができます.p >
結論
このチュートリアルでは、FireBaseによるGoogleログインの実装方法を学びました.また、前の章のように再利用可能なコードをコンポーネントの形で実装することを学びました.最後に、FireBase Authコレクションで2番目のコンポーネントを押すことに成功しました.次の章では、Twitterのログインを続けます.p >
もっと学ぶ
<ウル>
< hr/>
Reference
この問題について(再利用可能な反応ログインコンポーネントの構築), 我々は、より多くの情報をここで見つけました https://dev.to/kris/building-a-reusable-react-login-component-1d48テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol