爱发电 OAuth 登录 SDK for Remix

概要

爱发电 OAuth 文档： https://afdian.net/p/010ff078177211eca44f52540025c377

注意一下这里有两个细节：

1. 这里的 OAuth 非标准化 OAuth，没有 AccessToken
2. 申请和维护没有管理界面，需要给管理员发送私信

代码仓库： https://github.com/willin/remix-auth-afdian

在线演示： https://remix-auth-afdian.willin.wang/

安装使用

包名： remix-auth-afdian

npm i --save remix-auth-afdian
# or
pnpm i remix-auth-afdian
# or
yarn add remix-auth-afdian

配置 Remix Auth

在项目根目录下创建一个 auth.server.ts 代码文件：

import { createCookieSessionStorage, type ActionFunctionArgs } from '@remix-run/cloudflare';
import { Authenticator } from 'remix-auth';
import { AfdianStrategy } from 'remix-auth-afdian/build/index';

export function getAuthenticator({ context, request }: ActionFunctionArgs) {
  const url = new URL(request.url);
  url.pathname = '/auth/afdian/callback';
  const sessionStorage = createCookieSessionStorage({
    cookie: {
      name: 'sid',
      httpOnly: true,
      secure: context.env.CF_PAGES === 'production',
      sameSite: 'lax',
      path: '/',
      secrets: ['s3cr3t']
    }
  });

  const authenticator = new Authenticator(sessionStorage, {
    throwOnError: true
  });

  const afdianStrategy = new AfdianStrategy(
    {
      clientID: context.env.AFDIAN_CLIENT_ID,
      clientSecret: context.env.AFDIAN_CLIENT_SECRET,
      callbackURL: url.toString()
    },
    async ({ accessToken, extraParams, profile }) => {
      return profile;
    }
  );
  authenticator.use(afdianStrategy);
  return authenticator;
}

替换其中的配置，如：

• @remix-run/cloudflare 根据需要，切换 Remix 运行环境
• callback url 回调的地址
• session 配置
• client 相关信息，id 及密钥

配置登录跳转

创建 auth.afdian.tsx 文件：

import { type ActionFunctionArgs, redirect } from "@remix-run/cloudflare";
import { getAuthenticator } from "~/auth.server";

export async function loader() {
  return redirect("/");
}

export async function action(args: ActionFunctionArgs) {
  const authenticator = getAuthenticator(args);
  return await authenticator.authenticate("afdian", args.request, {
    successRedirect: "/dashboard",
  });

}

注意：该文件命名采用的是 remix v2 规则，v1 的话用目录分隔。

配置 callback 回调

创建 auth.afdian.callback.tsx 文件：

import { getAuthenticator } from '~/auth.server';

export async function loader(args) {
  const authenticator = getAuthenticator(args);

  return authenticator.authenticate('afdian', args.request, {
    successRedirect: '/dashboard',
    failureRedirect: '/'
  });
}

这样已经大功告成了。

配置 Demo 测试页

比如这里叫 dashboard.tsx 页面：

import { json, redirect } from '@remix-run/cloudflare';
import { Form, useLoaderData } from '@remix-run/react';
import { getAuthenticator } from '~/auth.server';

export async function loader(args) {
  const authenticator = getAuthenticator(args);

  const user = await authenticator.isAuthenticated(args.request);
  if (!user) {
    throw redirect('/');
  }

  return json(user);
}

export default function Page() {
  const data = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>已登录 Logged in</h1>
      <p>
        <Form action='/api/logout' method='POST'>
          <button>Logout</button>
        </Form>
      </p>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

配置注销登录

import { type LoaderFunction, type ActionFunction, redirect } from '@remix-run/cloudflare';
import { getAuthenticator } from '~/auth.server';

export const loader: LoaderFunction = () => {
  return redirect('/');
};

export const action: ActionFunction = async (args) => {
  const { request } = args;
  const authenticator = getAuthenticator(args);
  const referer = request.headers.get('referer');
  const returnPath = referer ? new URL(referer).pathname : '/';
  return await authenticator.logout(request, {
    redirectTo: returnPath
  });
};

这个可以根据需要添加。

如果您对爱发电感兴趣，想要让其支持更多的框架。可以联系我进行定制开发。

打赏地址：https://afdian.net/a/willin

感谢您的观看~