Authing Remix SDK

npm npm

Github 仓库地址: https://github.com/Authing/authing-remix

Simple Authing OIDC Authentication for Remix

实用方法

isAuthenticated

function isAuthenticated<User = any>(
  request: Request,
  sessionStorage: SessionStorage,
  options?: IsAuthenticatedOptions
): Promise<User>;

type IsAuthenticatedOptions = {
  failureRedirect?: string;
  successRedirect?: string;
  throwOnError?: boolean;
};

参数说明:

  • throwOnError: 未登录抛出错误
  • failureRedirect: 未登录重定向地址,如:/login
  • successRedirect: 已登录重定向地址,如:/dashboard

返回值: User

Loader 辅助

createCallbackLoader

function createCallbackLoader({
  appDomain,
  clientId,
  clientSecret,
  failureRedirect,
  sessionStorage,
  successRedirect
}: CallbackLoaderArgs): LoaderFunction;

type CallbackLoaderArgs = {
  appDomain: string;
  clientId: string;
  clientSecret: string;
  sessionStorage: SessionStorage;
  failureRedirect: string;
  successRedirect: string;
};

参数说明:

  • appDomain: 应用域名,如: https://your-app.authing.cn
  • clientId: App ID
  • clientSecret: App Secret
  • sessionStorage: Remix SessionStorage
    • 注意:如果是 Remix v1.1.3 及之前版本,请不要使用 CookieSession,会存在 UTF-8 编码解析错误
  • failureRedirect: 登录失败重定向地址,如:/error
  • successRedirect: 成功重定向地址,如:/dashboard

createLoginLoader

function createLoginLoader({
  appDomain,
  clientId,
  redirectUri,
  scope
}: LoginLoaderArgs): LoaderFunction;

type LoginLoaderArgs = {
  appDomain: string;
  clientId: string;
  redirectUri: string;
  scope: string;
};

参数说明:

  • appDomain: 应用域名,如: https://your-app.authing.cn
  • clientId: App ID
  • redirectUri: 登录回调 URL (需要与 Authing 控制台中配置一致)
  • sope: 授权范围,如:openid profile email

createLogoutLoader

function createLogoutLoader({
  redirectUri,
  appDomain,
  sessionStorage
}: LogoutLoaderArgs): LoaderFunction;

type LogoutLoaderArgs = {
  redirectUri: string;
  appDomain: string;
  sessionStorage: SessionStorage;
};

参数说明:

  • appDomain: 应用域名,如: https://your-app.authing.cn
  • redirectUri: 登出回调 URL (非登录,也需要与 Authing 控制台中配置一致)
  • sessionStorage: Remix Session Storage,注意点同上

项目示例

参考 examples/basic 项目。

安装依赖

npm install --save @authing/remix
# or
yarn add @authing/remix

配置环境变量

app/config.server.ts,或者其他地方。建议不要忽略该步骤,将用到的变量参数统一管理。

export const clientId =
  process.env.AUTHING_CLIENT_ID || '61e4da899687d7055442f6b7';
export const clientSecret = process.env.AUTHING_CLIENT_SECRET || '';
export const appDomain =
  process.env.AUTHING_CLIENT_DOMAIN || 'https://remix.authing.cn';
export const redirectUri =
  process.env.AUTHING_REDIRECT_URI || 'http://localhost:3000/authing/callback';
export const logoutRedirectUri =
  process.env.AUTHING_LOGOUT_REDIRECT_URI || 'http://localhost:3000/';

创建 SessionStorage

创建 app/services/session.server.ts

注意, Remix v1.1.3 (截止目前,2022 年 2 月)及之前版本请不要使用 CookieSession,会存在 UTF-8 编码解析错误。

创建登录页、注销页和回调页

创建 app/routes/login.tsx

import { createLoginLoader } from '@authing/remix';
import { appDomain, clientId, redirectUri } from '~/config.server';

export const loader = createLoginLoader({
  appDomain,
  clientId,
  redirectUri,
  scope: 'openid roles username phone profile'
});

创建 app/routes/logout.tsx

import { createLogoutLoader } from '@authing/remix';
import { sessionStorage } from '~/services/session.server';
import { appDomain, logoutRedirectUri } from '~/config.server';

export const loader = createLogoutLoader({
  redirectUri: logoutRedirectUri,
  appDomain,
  sessionStorage
});

创建 app/routes/authing/callback.tsx

import { createCallbackLoader } from '@authing/remix';
import { sessionStorage } from '~/services/session.server';
import { appDomain, clientId, clientSecret } from '~/config.server';

export const loader = createCallbackLoader({
  appDomain,
  clientId,
  clientSecret,
  // 登录失败返回登录页
  failureRedirect: '/error',
  successRedirect: '/user',
  sessionStorage
});

在路由中使用

import { isAuthenticated } from '@authing/remix';

export const loader: LoaderFunction = async ({ request }) => {
  const user = await isAuthenticated(request, sessionStorage);

  return json(user || {});
};

// 在页面中使用
const user = useLoaderData();

LICENSE

MIT

Remix SDK现在还支持吗?npm i @authing/remix显示只支持remix^1.0.0,可是现在已经到2.3.1了。直接跟Remix用Authing React也不行,显示

Error: Cannot find package '/Users/mlegls/dev/cc/site/node_modules/@authing/guard-react18/package.json' imported from /Users/mlegls/dev/cc/site/build/index.js
    at legacyMainResolve (node:internal/modules/esm/resolve:214:26)
    at packageResolve (node:internal/modules/esm/resolve:840:14)
    at moduleResolve (node:internal/modules/esm/resolve:910:20)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36)