remix-auth-socials 的安装和配置教程

项目的基础介绍和主要的编程语言

remix-auth-socials 是一个开源项目，它为 Remix Auth 提供了多个社交登录策略，如 GitHub、Google、Discord 等。这些策略允许用户通过他们的社交账号快速登录你的应用程序。该项目主要是用 TypeScript 编写的，并使用 Remix Run 作为前端框架。

项目使用的关键技术和框架

• TypeScript: 一种由 Microsoft 开发的开源编程语言，它是 JavaScript 的一个超集，添加了静态类型。
• Remix Run: 一个全栈 web 框架，它使用 React 编写 UI，并提供了服务器端渲染和 API 路由等功能。
• Remix Auth: 一个用于 Remix Run 的身份验证框架，它提供了各种身份验证策略和中间件。

项目安装和配置的准备工作和详细的安装步骤

准备工作

在开始安装和配置 remix-auth-socials 之前，请确保你的开发环境中已经安装了以下工具：

• Node.js: JavaScript 运行时环境，用于执行 JavaScript 代码。
• npm 或 yarn: 包管理工具，用于安装和管理项目依赖。

安装步骤

1. 创建一个新的 Remix Run 项目：

npx create-remix@latest my-app
cd my-app

2. 安装 remix-auth-socials：

npm install remix-auth-socials

3. 创建一个 auth.server.ts 文件，并添加以下代码来配置身份验证策略：

import { Authenticator } from 'remix-auth';
import { GoogleStrategy, FacebookStrategy, SocialsProvider } from 'remix-auth-socials';
import { sessionStorage } from '~/services/session.server';

// 创建一个 Authenticator 实例
export let authenticator = new Authenticator(sessionStorage, {
  sessionKey: '_session',
});

// 添加 Google 身份验证策略
authenticator.use(
  new GoogleStrategy(
    {
      clientID: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
      callbackURL: 'http://localhost:3000/auth/google/callback',
    },
    async ({ profile }) => {
      // 在这里找到或创建用户
      return profile;
    }
  )
);

// 添加 Facebook 身份验证策略
authenticator.use(
  new FacebookStrategy(
    {
      clientID: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
      callbackURL: 'http://localhost:3000/auth/facebook/callback',
    },
    async ({ profile }) => {
      // 在这里找到或创建用户
      return profile;
    }
  )
);

4. 创建身份验证路由：

// app/routes/auth/$provider.tsx
import { ActionArgs, redirect } from '@remix-run/node';
import { authenticator } from '~/server/auth.server';

export let loader = () => redirect('/login');

export let action = ({ request, params }: ActionArgs) =>
  authenticator.authenticate(params.provider, request);

// app/routes/auth/$provider.callback.tsx
import { LoaderArgs } from '@remix-run/node';
import { authenticator } from '~/server/auth.server';

export let loader = async ({ request, params }: LoaderArgs) =>
  authenticator.authenticate(params.provider, request, {
    successRedirect: '/dashboard',
    failureRedirect: '/login',
  });

5. 创建登录页面，添加社交登录按钮：

// app/routes/login.tsx
import { Form } from '@remix-run/react';
import { SocialsProvider } from 'remix-auth-socials';

interface SocialButtonProps {
  provider: SocialsProvider;
  label: string;
}

const SocialButton: React.FC<SocialButtonProps> = ({ provider, label }) => (
  <Form action={`/auth/${provider}`} method="post">
    <button>{label}</button>
  </Form>
);

export default function Login() {
  return (
    <>
      <SocialButton provider={SocialsProvider.DISCORD} label="Login with Discord" />
      <SocialButton provider={SocialsProvider.GITHUB} label="Login with GitHub" />
      <SocialButton provider={SocialsProvider.GOOGLE} label="Login with Google" />
      <SocialButton provider={SocialsProvider.FACEBOOK} label="Login with Facebook" />
      <SocialButton provider={SocialsProvider.MICROSOFT} label="Login with Microsoft" />
      <SocialButton provider={SocialsProvider.LINKEDIN} label="Login with LinkedIn" />
    </>
  );
}

6. 创建登出路由：

// app/routes/logout.tsx
import { ActionArgs } from '@remix-run/node';
import { authenticator } from '~/server/auth.server';

export let action = async ({ request, params }: ActionArgs) =>
  authenticator.logout(request, { redirectTo: '/' });

7. 创建受保护的路由：

// app/routes/dashboard.tsx
import { useLoaderData, Form } from '@remix-run/react';
import { LoaderArgs } from '@remix-run/node';
import { authenticator } from '~/server/auth.server';

export let loader = async ({ request, params }: LoaderArgs) => {
  const user = await authenticator.isAuthenticated(request, {
    failureRedirect: '/',
  });
  return { user };
};

export default function Dashboard() {
  const { user } = useLoaderData<typeof loader>();
  return (
    <div>
      <h1>Welcome {user.displayName}!</h1>
      <p>This is a protected page</p>
      <Form action="/logout" method="post">
        <button>Logout</button>
      </Form>
    </div>
  );
}

8. 运行项目：

npm run dev

现在，你应该可以访问你的应用程序的登录页面，并通过社交账号进行登录了。