NextJSとパスポートでGoogle認証を実装する方法.

導入

最近、私はNextJS プロジェクトと多くの繰り返しの後、私はGoogle認証を使用することを決めたpassport . この記事では、私はどのようにパスポートGoogleの戦略を使用してNextJSアプリケーション内の認証を設定する手順をガイドになるだろう.

要点

我々がメインコースで始める前に、あなたが知っていて、セットアップする必要がある若干のものは、ここにあります.

あなたはJavaScriptやTypesScriptだけでなく、反応(NextJS)の基本的な知識を持っている必要があります.

HTTPリクエストと応答の概念を理解する必要があります.

あなたはNode お使いのコンピュータを設定します.

あなたのアプリケーションを設定する必要がありますGoogle developers console ... '登録アプリケーション'セクションをチェックすることができますhere どのようにそれについて行く.

この記事では yarn 私のパッケージマネージャーとして使用する前にnpm あなたが好むならば.
まず、コンピュータにnextjsプロジェクトを設定する必要があるので、次のコマンドを実行するためにターミナルに行きます

yarn create next-app --typescript

プロジェクトの名前を入力するようプロンプトが表示されます.
設定が完了すると、次のコマンドを実行して、新しいセットアッププロジェクトにディレクトリを変更する必要があります

cd <your-project-name>

次に、正常に認証を完了するために必要なすべての依存関係をインストールします.

next-connect

passport

passport-google-oauth20

インストールするには、次のコマンドを端末で実行します

yarn add next-connect passport passport-google-oauth20 @types/passport @types/passport-google-oauth20

次に、envファイルにいくつかの資格情報を追加する必要があります.新しいファイルを作成する.env 次の値を追加します

GOOGLE_CLIENT_ID: <your app client id>
GOOGLE_CLIENT_SECRET: <your app client secret>

その後、メインコードを書くことができます.
今、我々はコーディングを開始!
ルートディレクトリで新しいフォルダを作成しますlib . インサイドlib フォルダー、新しいファイル名passport-google-auth.tsにpassport-google-auth.ts 次のコードを使用して、パスポートを使用してGoogleの戦略を構成します.

// /lib/passport-google-auth.ts

import { Profile, Strategy as GoogleStrategy } from "passport-google-oauth20";
import passport from "passport";

// logic to save your user or check if user exists in your record to proceed.
const saveUser = (user: Profile) => {
  return new Promise((resolve, reject) => {
    resolve("Successful");
  });
};

passport.use(
  new GoogleStrategy(
    {
      clientID: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      callbackURL: "/api/oauth2/redirect/google", // this is the endpoint you registered on google while creating your app. This endpoint would exist on your application for verifying the authentication
    },
    async (_accessToken, _refreshToken, profile, cb: any) => {
      try {
        await saveUser(profile);
        return cb(null, profile);
      } catch (e: any) {
        throw new Error(e);
      }
    }
  )
);


// passport.serializeUser stores user object passed in the cb method above in req.session.passport
passport.serializeUser((user, cb) => {
  process.nextTick(function () {
    return cb(null, user);
  });
});

// passport.deserializeUser stores the user object in req.user
passport.deserializeUser(function (
  user: any,
  cb: (arg0: null, arg1: any) => any
) {
  process.nextTick(function () {
    return cb(null, user);
  });
});

// for broader explanation of serializeUser and deserializeUser visit https://stackoverflow.com/questions/27637609/understanding-passport-serialize-deserialize

// An article that explains the concept of process.nextTick https://nodejs.dev/learn/understanding-process-nexttick

export default passport;

次に、新しいファイルを作成します/pages/api フォルダ名login.ts .
インサイドlogin.ts ファイルを作成するには、次のコードを追加することによって、パスポートで設定したGoogle Strategyメソッドを使用してGET要求を作成します.

// /pages/api/login.ts

import passport from "../../lib/passport-google-auth";
import nextConnect from "next-connect";

export default nextConnect()
  .use(passport.initialize())
  .get(
    passport.authenticate("google", {
      scope: ["profile", "email"],
    })
  );

認証を検証するためのコールバックURLを作成します.
移動するapi フォルダpages , フォルダを作成するoauth2 . インサイドoauth2 フォルダを作成redirect . インサイドredirect フォルダー、新しいファイル名google.ts .

// /pages/api/oauth2/redirect/google.ts

import { NextApiRequest, NextApiResponse } from "next";
import nextConnect from "next-connect";
import passport from "../../../../lib/passport-google-auth";

export default nextConnect().get(
  passport.authenticate("google"),
  (req: NextApiRequest & { user: any }, res: NextApiResponse) => {
    // you can save the user session here. to get access to authenticated user through req.user
    res.redirect("/");
  }
);

バックエンドを実行すると、フロントエンドのエンドポイントを使用できます.
ログインページを作成します.ログインページに次のコードを貼り付けることができます.

import Link from "next/link";

const LoginPage = () => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        height: "100%",
        width: "100%",
        textAlign: "center",
      }}
    >
      <h1 style={{ fontSize: "2.5rem" }}>Login with Google</h1>
      <Link href="/api/login" passHref>
        <button
          style={{
            border: "1px solid black",
            backgroundColor: "white",
            borderRadius: "10px",
            height: "50px",
            width: "200px",
            cursor: "pointer",
          }}
        >
          Proceed
        </button>
      </Link>
    </div>
  );
};

export default LoginPage;

Voila、今すぐGoogleであなたの次のアプリを認証することができます.

結論

この記事では、次のアプリであなたのユーザーを認証するためにパスポートGoogle戦略を活用する方法を示します.
このチュートリアルで使用するコードにアクセスできますhere .

免責事項

これは私の最初の技術的な記事であり、私はトピックに正義を行った願っています.質問やフィードバックは、コメントにドロップすることができます.あなたは私に従うことができますgithub