爱发电 OAuth 登录 SDK for Remix
目录
- 概要
- 安装使用
- 配置 Remix Auth
- 配置登录跳转
- 配置 callback 回调
- 配置 Demo 测试页
- 配置注销登录
概要
爱发电 OAuth 文档: https://afdian.net/p/010ff078177211eca44f52540025c377
注意一下这里有两个细节:
- 这里的 OAuth 非标准化 OAuth,没有 AccessToken
- 申请和维护没有管理界面,需要给管理员发送私信
代码仓库: 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
感谢您的观看~
相关文章:
爱发电 OAuth 登录 SDK for Remix
目录 概要安装使用配置 Remix Auth配置登录跳转配置 callback 回调配置 Demo 测试页配置注销登录 概要 爱发电 OAuth 文档: https://afdian.net/p/010ff078177211eca44f52540025c377 注意一下这里有两个细节: 这里的 OAuth 非标准化 OAuth,…...
Wpf 使用 Prism 实战开发Day05
首页设计 1.效果图 一.代码现实 根据页面布局,可以将页面设计成3行,每行中分多少列,看需求而定根据页面内容,设计Model 实体类,以及View Model 1.Index.xaml 页面布局设计 RowDefinition 分行(Row…...
性能压测工具:Locust详解
一、Locust介绍 开源性能测试工具https://www.locust.io/,基于Python的性能压测工具,使用Python代码来定义用户行为,模拟百万计的并发用户访问。每个测试用户的行为由您定义,并且通过Web UI实时监控聚集过程。 压力发生器作为性…...
vmware 修改主机名称 hadoop 服务器环境配置(一)
如何在虚拟机配置主机名称: 1. 如图所示在/etc 文件夹下有个hosts文件。追加映射关系: #关系 ip地址 名称 192.168.164.20 hadoop20 2. 保存后,重启reboot即可...
淘宝店铺订单插旗接口(taobao.trade.memo.update淘宝店铺订单交易备注修改接口)
淘宝店铺订单插旗接口是指可以在淘宝店铺的订单系统中进行订单备注的接口。通过该接口,您可以根据用户的身份(买家或卖家),添加相应的交易备注,用于区分不同订单类型等。 具体使用方法可以参考淘宝开放平台的API接口文…...
py文件如何打包成exe?如何压缩文件大小?
打包 要将 Python 文件打包成可执行文件,您可以使用 PyInstaller 这个工具。以下是具体步骤: 首先,确保您已经安装了 PyInstaller。如果没有安装,可以使用以下命令安装: pip install pyinstaller进入您的 Python 程序…...
SQL优化相关(持续更新)
常用sql修改 1、LIMIT 语句 在 SQL 查询中,LIMIT 10000, 10 的语句表示从第 10001 行开始,返回 10 行结果。要优化这个查询,可以考虑以下几点: 使用合适的索引:确保涉及到查询条件和排序的列上有适当的索引…...
Linux学习--limits文件配置详解
/etc/security/limits.conf 是一个配置文件,用于限制用户或进程在系统中可以使用的资源。 语法结构: :指定要应用限制的目标对象,可以是用户()、用户组()或进程(、、<…...
Android Studio 代码上传gitLab
1、项目忽略文件 2选择要上传的项目 3、添加 首次提交需要输入url 最后在push...
【避雷选刊】Springer旗下2/3区,2个月录用!发文量激增,还能投吗?
计算机类 • 好刊解读 前段时间小编分析过目前科睿唯安数据库仍有8本期刊处于On Hold状态,其中包括4本SCIE、4本ESCI期刊(👉详情可见:避雷!又有2本期刊被标记“On Hold”!含中科院2区(TOP&…...
Linux常用的压缩命令
笑小枫的专属目录 少整花活,直接干货Linux gzip命令语法功能参数 Linux zip命令语法参数 少整花活,直接干货 本文的来源就是因为上篇文章Linux常用的解压命令,解压整了,顺手整理了一波压缩命令。 Linux gzip命令 减少文件大小有…...
如何为VM虚拟机添加D盘
文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。 前言 在虚拟机上安装Windows10 系统后&…...
C# 16进制颜色转为RGB颜色
#region [颜色:16进制转成RGB] /// <summary> /// [颜色:16进制转成RGB] /// </summary> /// <param name"strColor">设置16进制颜色 [返回RGB]</param> /// <returns></returns> public static System.D…...
【工具】Java计算图片相似度
【工具】Java图片相似度匹配工具 方案一 通过像素点去匹配 /*** * param file1Url 图片url* param file2Url 图片url* return*/public static double img相似度Url(String file1Url, String file2Url){InputStream inputStream1 HttpUtil.createGet(file1Url).execute().…...
GDB调试
GDB调试程序之运行参数输入 以bash运行如下程序命令为例子: $ ./adapter -c FOTON_ECAN.dbc foton_bcan.dbc 方法1:进入gdb,加载程序,执行run命令的时候,后面加上参数 $ gdb (gdb) file adapter Reading symbols from adapter... (gdb) run -c FOTON_ECAN.dbc foton_b…...
swift和OC混编报错问题
1.‘objc’ instance method in extension of subclass of ‘xxx’ requires iOS 13.0.0 需要把实现从扩展移到主类实现。iOS13一下扩展不支持objc 2.using bridging headers with framework targets is unsupported 报错 这个错误通常指的是在一个框架目标中使用桥接头是不…...
第七章 块为结构建模 P5|系统建模语言SysML实用指南学习
仅供个人学习记录 应用泛化对分类层级建模 继承inherit更通用分类器的公共特性,并包含其他特有的附加特性。通用分类器与特殊分类器之间的关系称为泛化generalization 泛化由两个分类器之间的线条表示,父类端带有空心三角形箭头 块的分类与结构化特性…...
java算法学习索引之动态规划
一 斐波那契数列问题的递归和动态规划 【题目】给定整数N,返回斐波那契数列的第N项。 补充问题 1:给定整数 N,代表台阶数,一次可以跨 2个或者 1个台阶,返回有多少种走法。 【举例】N3,可以三次都跨1个台…...
ChatGPT重磅升级 奢侈品VERTU推出双模型AI手机
2023年11月7日,OpenAI举办了首届开发者大会,CEO Sam Altman(山姆奥尔特曼)展示了号称“史上最强”AI的GPT-4 Turbo。它支持长达约10万汉字的输入,具备前所未有的长文本处理能力,使更复杂的互动成为可能。此外,GPT-4 Turbo还引入了跨模态API支持,可以同时处理图片、视频和声音,从…...
mac配置双网卡 mac同时使用内网和外网
在公司办公通常都会连内网,而连内网最大的限制就是不可以使用外网,那遇到问题也就不能google,而当连接无线的时候,内网的东西就不可以访问,也就不能正常办公,对于我这种小白来说,工作中遇到的问…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)
参考官方文档:https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java(供 Kotlin 使用) 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开,快捷键也不好用,当看到 Cursor 升级后,还是蛮高兴的 1. 下载 Cursor 下载地址:https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ,…...
