Firebaseを使用しているノードJSの上で認証を取り扱う方法🔥

私たちがノードでAPIを構築し始めるとき、心に浮かぶ最初のものは認証です.
JWTのハッシュパスワードはJWTの秘密鍵を定義していると思いますが、小さなサービスやAPIを構築するときには少し退屈です.
この記事では、Google Signを使用してどのように動作するかを示しますが、FireBaseで利用可能な他のログインプロバイダーにも適用されます.それらを設定する方法の詳細については、Firebaseからこのリンクを参照してくださいdocs

火の粉

FireBaseは、Googleのモバイルアプリケーション開発プラットフォームでは、ビルド、改善、およびあなたのアプリケーションの成長に役立ちます.FireBaseの内部では、認証、プッシュ通知、リアルタイムデータベース、およびよりクールなもののようなモジュールを得た.

何をするか

firebaseを通してリクエストを認証するNodeJSバックエンド.
始めるためには、プロジェクトを作成する必要がありますFirebase .

firebase設定

最初の画面はFireBaseの新しいプロジェクトを作成することですCreate Project
今、私たちは、この例のための名前を与えるために画面を得たfirebase-auth-server
現在、Firebaseは我々のプロジェクトを作成しています.

作成後、FireBaseのコンソールでは、ダッシュボードにいくつかのサービスを提供しますAuthentication メニュー.
そして、我々にはFirebaseが我々に与えるプロバイダーのリストがあります、しかし、我々のために、我々は第1によって認証を選択する必要がありますGoogle .

すごい!FireBaseはGoogleでフロントエンドの認証を受け入れることができます.

バックエンドの設定

プロジェクトを開始し、急行をインストールする必要があります.

mkdir server
npm init -y
npm install express cors
npm install -D nodemon

この後、私たちはindex.js プロジェクトのルートでコードを作成します.

const express = require("express");

const app = express();

app.use("/", (req, res) => {
  res.send("Hello World");
});

app.listen(4000, () => console.log("The server is running at PORT 4000"));

上記のコードは、基本的なエクスプレスサーバーを作成します.
この後、次のコードに従って基本的なエンドポイントを作成する必要があります.

/**
 * index.js
 */
const express = require("express");
const cors = require("cors");
const authMiddleware = require("./auth-middleware");

const app = express();
app.use(cors());

const books = [
  {
    id: 1,
    name: "Harry Potter",
    image:
      "https://pmpub-catalogue.s3-eu-west-1.amazonaws.com/covers/web/9781781100240.jpg",
  },
  {
    id: 2,
    name: "Clean Code",
    image:
      "https://images-na.ssl-images-amazon.com/images/I/41jEbK-jG+L._SX374_BO1,204,203,200_.jpg",
  },
  {
    id: 3,
    name: "Javascript: The good parts",
    image: "https://images-na.ssl-images-amazon.com/images/I/81kqrwS1nNL.jpg",
  },
];

app.use("/", authMiddleware);

app.get("/books", (request, response) => {
  return response.send({ books });
});

app.listen(4000, () => console.log("The server is running at PORT 4000"));

今、我々は戻る必要がありますpackage.json ファイルを追加start スクリプトとスクリプトをテストします.

{
  "name": "firebase-auth-server",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Nikollas Betiol",
  "license": "MIT",
  "scripts": {
    "start:dev": "nodemon index.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.3"
  }
}

アフター・ユアpackage.json ファイルは上のコードのようになります.
その後、我々はscript アプリケーションを実行するには

npm run start:dev

移動しましょうhttp://localhost:4000/books今、あなたはこれを持っている必要があります.

偉大な、私たちの本のリストを返すAPI上のエンドポイントがありますが、誰もが私たちのエンドポイントにアクセスすることができますし、我々はしたくないことに気づくことができます🤔
これを使って修正しましょうfirebase-admin , FireBaseとの統合に使用するライブラリです.
ここで我々はインストールしなければならないfirebase-admin

npm install firebase-admin

firebaseコンソールで戻って、資格情報をダウンロードしてください.この手順をクリックすることができますhere .
ファイルの作成と保存firebase フォルダ.
コードはこのようになります.

/*
  firebase/index.js
*/
const firebase = require("firebase-admin");

const credentials = require("./credentials.json");

firebase.initializeApp({
  credential: firebase.credential.cert(credentials),
  databaseURL: "https://<yourproject>.firebaseio.com",
});

module.exports = firebase;

今私たちはリクエストをフィルタリングし、認証を要求するか、または拒否するために、Authミドルウェアを作成する必要があります.
それから、私たちはauth-middleware.js

touch auth-middleware.js

コードを使用する

/*
    auth-middleware.js
*/
const firebase = require("./firebase/admin");

function authMiddleware(request, response, next) {
  const headerToken = request.headers.authorization;
  if (!headerToken) {
    return response.send({ message: "No token provided" }).status(401);
  }

  if (headerToken && headerToken.split(" ")[0] !== "Bearer") {
    response.send({ message: "Invalid token" }).status(401);
  }

  const token = headerToken.split(" ")[1];
  firebase
    .auth()
    .verifyIdToken(token)
    .then(() => next())
    .catch(() => response.send({ message: "Could not authorize" }).status(403));
}

module.exports = authMiddleware;

後、私たちはindex.js ファイルを追加auth-middleware ミドルウェア

/**
 * index.js
 */
const express = require("express");
const authMiddleware = require("./auth-middleware");

const app = express();

const books = [
  { id: 1, name: "Harry Potter" },
  { id: 2, name: "Clean Code" },
  { id: 3, name: "Javascript: Good practices" },
];

app.use("/", authMiddleware);

app.get("/books", (request, response) => {
  return response.send({ books });
});

app.listen(4000, () => console.log("The server is running at PORT 4000"));

クール、私はバックエンドはフロントエンドからのリクエストを受け取る準備ができていると思います!

フロントエンド

プロジェクトを作成しましょうcreate-react-appCSSを見つけることができますhere

npm install -g create-react-app
create-react-app frontend
cd frontend/
npm install firebase react-router-dom react-router

今、私たちは2つのファイルを作成する必要があります

touch Login.js
touch BookList.js

ファイルにLogin.js , 以下のコードをペーストします.

/**
 * src/Login.js
 */
import React from "react";

export default function Login() {
  return <h1>Login</h1>;
}

とファイルBookList.js , コードをペーストします

/**
 * src/BookList.js
 */
import React from "react";

export default function BookList() {
  return <h1>BookList</h1>;
}

我々は、我々のアプリケーションで2つの重要なファイルを作成し、設定しましょうApp.js 使うreact-router .NOTE: THIS IS NOT THE BEST WAY TO CREATE AN AUTHORIZATION FLOW, THIS PROJECT IS JUST AN EXAMPLE


/**
 * src/App.js
 */
import React from "react";
import "./App.css";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Login from "./Login";
import BookList from "./BookList";

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route path={"/login"}>
            <Login />
          </Route>
          <Route path={"/book-list"}>
            <BookList />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

さて、このドキュメントに従うことができますSetup Web Project Configuration と設定を取得します.



ファイルを作成しましょうfirebase.js インサイドsrc このコードを使用してFireBase設定を作成します.

/**
 * src/firebase.js
 */
import firebase from "firebase/app";
import "firebase/auth";

const firebaseConfig = {
  apiKey: "your apiKey here",
  authDomain: "your authDomain here",
  databaseURL: "your databaseURL here",
  projectId: "your projectId here",
  storageBucket: "your storageBucket here",
  messagingSenderId: "your messagingSenderId here",
  appId: "your appId here",
};

firebase.initializeApp(firebaseConfig);

const auth = firebase.auth();

export { auth, firebase };

今、我々はファイルに戻るLogin.js ペーストします.
コードは次のようになります.

/**
 * src/Login.js
 */
import React from "react";
import { useHistory } from "react-router-dom";
import { auth, firebase } from "./firebase";

export default function Login() {
  const history = useHistory();
  async function googleLogin() {
    //1 - init Google Auth Provider
    const provider = new firebase.auth.GoogleAuthProvider();
    //2 - create the popup signIn
    await auth.signInWithPopup(provider).then(
      async (result) => {
        //3 - pick the result and store the token
        const token = await auth?.currentUser?.getIdToken(true);
        //4 - check if have token in the current user
        if (token) {
          //5 - put the token at localStorage (We'll use this to make requests)
          localStorage.setItem("@token", token);
          //6 - navigate user to the book list
          history.push("/book-list");
        }
      },
      function (error) {
        console.log(error);
      }
    );
  }
  return (
    <div>
      <button onClick={googleLogin} className="login-button">
        GOOGLE
      </button>
    </div>
  );
}

その後、端末に戻って、アプリケーションを実行します

npm start

一度起動するとブラウザのウィンドウが開きます
移動するhttp://localhost:3000/loginをクリックすることができますGOOGLE ボタン

クール、ログイン後は、ブックリストにリダイレクトする必要があります.
に戻るBookList.js コンポーネントとペーストのコード

/**
 * src/BookList.js
 */
import React, { useEffect, useState } from "react";

export default function BookList() {
  //create state to store our book list
  const [books, setBooks] = useState([]);

  useEffect(() => {
    async function loadBooks() {
      //fetch the book list
      const request = await fetch("http://localhost:4000/books", {
        //use the authorization
        headers: {
          Authorization: "Bearer " + localStorage.getItem("@token"),
        },
      });

      const allBooks = await request.json();
      //set the book list on state
      setBooks(allBooks.books);
    }
    //invoke the function
    loadBooks();
  }, []);

  return (
    <div className="container">
      <h1>BookList</h1>
      {/* map the book list to show book name and image */}
      {books.map((book) => (
        <div key={book.id} className="booklist">
          <img className="image" alt={book} src={book.image} />
          <h3>{book.name}</h3>
        </div>
      ))}
    </div>
  );
}

いいえ、ブックリストを見ることができます

結論

これは、サーバー上でFireBase認証を開始するのに十分なプッシュです.あなたは、より多くの可能性を探索することができますFirebase Docs .
私は、これがあなたがFirebase Authとの統合を作成する方法を学ぶのを助けたことを望みます、そして、あなたがソースコードを見たいならば、チェックしてくださいGithub .
ありがとう