视频地址：https://www.bilibili.com/video...初始化项目Remix官网：https://remix.run/创建命令：npxcreate-remix@latest当前项目源码位于：https//github。com/willin/bet...配置eslintprettiereditorconfig可选：lint-stagedhusky安装依赖于tailwindcssdaisyui@tailwindcss/typographypostcsspm2创建Authing用户池和应用程序创建登录和注销界面Logininterfaceimport{redirect}from'@remix-run/node';exportconstloader=async()=>{returnredirect(`${process.env.AUTHING_SSO_URL}/login?app_id=${process.env.AUTHING_APP_ID}`);};注销界面导入{重定向}来自'@remix-run/node';exportconstloader=async()=>{returnredirect(`${process.env.AUTHING_SSO_URL}/logout?redirectUri=${encodeURIComponent(process.env.HOMEPAGE||'https://willin.wang')}`);};登录回调callbackimport{json,redirect}from'@remix-run/node';导出类型OidcResponse={错误？：字符串；错误描述？：字符串；access_token：字符串；expires_in：数字；id_token：字符串；范围：字符串；token_type:string;};exportconstloader=async({request})=>{consturl=newURL(request.url);constcode=url.searchParams.get('代码');if(code===null){returnredirect('/login');}constbody={client_id:process.env.AUTHING_APP_ID,client_secret:process.env.AUTHING_APP_SECRET,grant_type:'authorization_code',code};constformBody=[];//eslint-disable-next-linefor(constpropertyinbody){constencodedKey=encodeURIComponent(property);//eslint-disable-next-line@typescript-eslint/ban-ts-comment//@ts-ignore//eslint-disable-next-line@typescript-eslint/no-unsafe-argumentconstencodedValue=encodeURIComponent(body[财产]）;formBody.push(`${encodedKey}=${encodedValue}`);}constres=awaitfetch(`${process.env.AUTHING_APP_DOMAIN}/oidc/token`,{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},正文:formBody.join('&')});constoidcToken=(awaitres.json())作为OidcResponse；如果（oidcToken.error）{console.error（oidcToken）；返回重定向（'/登录'）;}//以上获取oidctoken是核心部分//下面根据业务需要来操作其他的constresInfo=awaitfetch(`${process.env.AUTHING_APP_DOMAIN}/oidc/me?access_token=${oidcToken.access_token}`);//eslint-disable-next-line@typescript-eslint/no-unsafe-assignmentconstuser=awaitresInfo.json();返回json(用户);};
