Googleの認証と反応

私の仲間の開発者.
今日、我々はFireBaseを使用してGoogleの署名を使用して我々の反応アプリを認証について学ぶつもりです.
まず第一に、実際にFirebaseが何であるかについて少し話しましょう.
Google Firebaseは、開発者がIOS、AndroidとWebアプリを開発することができるGoogleを支持したアプリケーション開発ソフトウェアです.FireBaseは、マーケティングや製品の実験を作成し、アプリケーションのクラッシュを報告し、分析を追跡するためのツールを提供します.Firebaseは以下のようなサービスを提供しています:

の解析論

認証

雲メッセージング

リアルタイムデータベース

パフォーマンスとより多く...

FireBase認証はバックエンドサービスを提供し、簡単に使用できるSDK、および既製のUIライブラリをアプリケーションにユーザーを認証する.これは、パスワード、電話番号、Google、FacebookやTwitterのような人気のある連邦政府のアイデンティティプロバイダを使用して認証をサポートしています.
さあ、プロジェクトに飛び込みましょう.
まず最初に、FireBaseプロジェクトを設定します.それを行うにはfirebase.google.comに行くとGoogleアカウントでログインします.我々は今我々のアプリを初期化します.
をクリックして起動したり、Webページの右上にコンソールに移動します.

これでプロジェクトページを追加する予定です.プロジェクトを追加し、好きなプロジェクト名を選択します.今では、FireBaseのアカウントを選択するように求められます.デフォルトのものを選びます.その後、プロジェクトの概要ページに私たちをリダイレクトします.

Webアイコンをクリックしてアプリを追加します.それは私たちのアプリを作成し、我々のアプリにニックネームを与えることができます.

我々のアプリを登録した後、後で私たちのWebアプリを初期化し、FireBaseと接続するのを助けるFirebaseConfigオブジェクトをコピーしましょう.設定オブジェクトは次のようになります.

ここで認証を有効にするには、プロジェクトの概要ページに戻り、認証タブをクリックしてSign Inメソッドを設定し、Google認証を有効にします.

やあ!我々は、プロジェクトの最初の部分で行われます.今ここで楽しい部分が来る.コードを書きましょう.
まず最初にコーディングを始めるには、以下のコマンドを使ってスタータープロジェクトディレクトリを作成します.

npx create-react-app google-auth //google-auth is my directory name

それは私たちのための基本的な反応アプリのボイラープレートを作成します.
では、以下のコマンドを使用してアプリケーションにFireBaseをインストールします.

npm install firebase

システム上で初めてFireBaseをインストールしている場合は、次のように入力します.

npm install -g firebase-tools

それでは、私たちの使用にすべてを置きましょう.
サービスフォルダを作成し、firebaseを追加します.JSに追加し、次のコードを追加します.
src/service/firebase.js

import firebase from "firebase/app";
import 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

// Initialize Firebase 
firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();

次に、ログイン機能を作成します.
src/service/firebase.js

export const auth = firebase.auth();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });

export const signInWithGoogle = () => auth.signInWithPopup(provider);

コード全体が次のようになります.

この関数を使用するには、ログインコンポーネントにインポートし、「ボタン」で「OnClickハンドラー」を追加します.そう.コンポーネントフォルダ内のログインコンポーネントを作成し、次のコードを追加できます
src/compenents/loginjs

import { signInWithGoogle } from '../services/firebase';

import '../App.css';

const Login = () => {
  return (
    <div>
      <button className="button" onClick={signInWithGoogle}><i className="fab fa-google"></i>Sign in with google</button>
    </div>
  )
}

export default Login;

アプリにログインコンポーネントをインポートしましょう.jsファイル.
そしてそれです.我々は今、Googleアカウントを介して我々のアプリにサインすることができます.
これでユーザーの情報を保存し、アプリケーションで使用できるようにしましょう.アプリで.jsファイルは次のコードを追加します.
src/appjs

import { useState, useEffect } from 'react';

import Login from './components/Login';
import Home from './components/Home';
import firebase from './services/firebase';

import './App.css';



function App() {
  const [user, setUser] = useState(null);

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

  console.log(user);

  return (
    <div className="app">
      <Login />
    </div>
  );
}

export default App;

ログイン後に得た情報を使用するホームコンポーネントを作成しましょう.コンポーネントアプリケーション内のホームコンポーネントを作成し、次のコードを追加します.
src/コンポーネント/homejs

import React from 'react';

import { auth } from '../services/firebase'

import '../App.css';

const Home = ({ user }) => {
  return (
    <div className="home">
      <h1>Hello, <span></span>{user.displayName}</h1>
      <img src={user.photoURL} alt="" />
      <button className="button signout" onClick={() => auth.signOut()}>Sign out</button>
    </div>
  )
}

export default Home;

今すぐメインのアプリにホームコンポーネントをインポートしましょう.jsファイル.インポート後、次のようになります.




Voila、我々はちょうど我々のGoogleアカウントでログインできるミニアプリを作成しました.
閉じるこの動画はお気に入りから削除されています.