全栈框架应用快速集成AuthingSSO

可用资源NPM包@authing/nextjs:https://github.com/Authing/authing-nextjs@authing/remix:https://github.com/Authing/authing-RemixForumHelpNext.js问题反馈：https://forum.authing.cn/t/topic/601Remix问题反馈：https://forum.authing.cn/t/topic/602AuthingUserPoolConfiguration这部分基本上是big部分框架是通用的，首先你需要创建一个用户池应用程序。填写应用名称，即可获取AppID和AppSecret配置。配置回调地址。注意，如果使用Next.js框架，建议使用/api/xxx的前缀（所有接口服务必须在该目录下）。如果您使用Remix框架，则它是可选的。这一步的配置不着急，可以根据后续项目进行更改。授权配置，默认即可。目前SDK提供的方法也是通过代码实现的。（以后可能会增加更灵活的选项，如果你知道这个，你可以集成你自己的认证回调。）Next.js安装依赖npminstall--save@authing/nextjsiron-sessionswr#oryarnadd@authing/nextjsiron-sessionswr配置config/index.ts等环境变量，或者其他地方。建议不要忽略这一步，统一管理使用的可变参数。exportconstclientId=process.env.AUTHING_CLIENT_ID||'61e4da899687d7055442f6b7';exportconstclientSecret=process.env.AUTHING_CLIENT_SECRET||'';exportconstappDomain=process.env.AUTHING_CLIENT_DOMAIN||'https://remix.authing.cn';exportconstredirectUri=process.env.AUTHING_REDIRECT_URI||'http://localhost:3000/authing/callback';exportconstlogoutRedirectUri=process.env.AUTHING_LOGOUT_REDIRECT_URI||'http://localhost:3000/';创建SessionStorage创建lib/session.ts。示例中使用的是iron-session进行创建。创建登录、注销和回调API注意：登录URL为/api/login，注销为/api/logoutCreatepages/api/login.ts:import{createLoginApi}from'@authing/nextjs';import{appDomain,clientId,redirectUri}来自'../../config';exportdefaultcreateLoginApi({appDomain,clientId,redirectUri,scope:'openidrolesusernamephoneprofile'});创建页面/api/logout.ts：从'iron-session/next'导入{withIronSessionApiRoute}；从'@authing/nextjs'导入{createLogoutApi}；从'../../config'导入{appDomain，logoutRedirectUri};从'../../lib/session'导入{sessionOptions};导出默认withIronSessionApiRoute(createLogoutApi({appDomain,redirectUri:logoutRedirectUri}),sessionOptions);创建页面/api/callback.ts：从'@authing/nextjs'导入{createCallbackApi}；import{appDomain,clientId,clientSecret}from'../../config';import{withIronSessionApiRoute}from'iron-session/next';import{sessionOptions}from'../../lib/session';export默认使用IronSessionApiRoute(createCallbackApi({appDomain,clientId,clientSecret,//登录失败返回登录failureRedirect:'/error',successRedirect:'/ssr'}),sessionOptions);在SSR中使用参考pages/ssr.tsx：import{withIronSessionSsr}from'iron-session/next';import{sessionOptions}from'../lib/session';exportconstgetServerSideProps=withIronSessionSsr(asyncfunction({req,res}){constuser=req.session.user;if(user===undefined){res.setHeader('location','/api/login');res.statusCode=302;res.end();return{props:{user:{isLoggedIn:false}}};}return{props:{user:req.session.user}};},sessionOptions);在SSG中使用创建接口：pages/api/me.ts：import{withIronSessionApiRoute}from'iron-session/next';从'../../lib/session'导入{sessionOptions};从'next'导入{NextApiRequest，NextApiResponse};导出类型User={isLoggedIn：布尔值;username:string;};exportdefaultwithIronSessionApiRoute(userRoute,sessionOptions);asyncfunctionuserRoute(req:NextApiRequest,res:NextApiResponse){if(req.session.user){//在真实世界的应用程序中，您可能会从会话中读取用户ID，然后执行数据库请求//以在需要时获取有关用户的更多信息res.json({...req.session.user,isLoggedIn:true});}else{res.json({isLoggedIn:false,用户名:''});}}创建钩子hooks/use-user.ts：import{useEffect}from'react';importRouterfrom'next/router';importuseSWRfrom'swr';import{User}from'../pages/api/我';导出默认函数useUser({redirectTo='',redirectIfFound=false}={}){const{data:user,error}=useSWR('/api/me');useEffect(()=>{//如果不需要重定向，只需返回（例如：已经在/dashboard上）//如果用户数据还不存在（正在获取，是否登录）那么什么都不做，如果(!redirectTo||！用户）返回；if(//如果设置了redirectTo，则在找不到用户时重定向。(redirectTo&&!redirectIfFound&&!user?.isLoggedIn)||//如果还设置了redirectIfFound，则在找到用户时重定向(redirectIfFound&&user?.isLoggedIn)){Router.push(redirectTo);}},[用户,redirectIfFound,redirectTo]);return{user,error};}创建页面pages/sg.tsx：importuseUserfrom'../hooks/use-user';importLinkfrom'next/link';//确保勾选https://nextjs.org/docs/basic-features/layouts获取更多关于如何使用layoutsexportdefaultfunctionSgProfile(){const{user}=useUser({redirectTo:'/api/login'});的信息return(<>

{user&&(<>

{JSON.stringify(user,null,2)}

)});}小结从上面的例子可以看出，在使用Next.js的时候，需要注意以下几点：你会安装更多的依赖，需要选择第三个——partysession存储方案，可以是CookieSession，Redis或者JWT。你需要优化你的项目代码，区分不同的页面类型：普通页面、SSR页面、SSG页面和API（在/api目录下）。如果你不使用SSR，你可能会依赖像SWR这样的库来优化你页面上的请求。本示例项目代码下载：CSDNRemix安装依赖npminstall--save@authing/remix#oryarnadd@authing/remix配置app/config.server.ts等环境变量，或其他地方。建议不要忽略这一步，统一管理使用的可变参数。exportconstclientId=process.env.AUTHING_CLIENT_ID||'61e4da899687d7055442f6b7';exportconstclientSecret=process.env.AUTHING_CLIENT_SECRET||'';exportconstappDomain=process.env.AUTHING_CLIENT_DOMAIN||';exportconstredirectUri=process.env.AUTHING_REDIRECT_URI||'http://localhost:3000/authing/callback';exportconstlogoutRedirectUri=process.env.AUTHING_LOGOUT_REDIRECT_URI||'http://localhost:3000/';创建SessionStorage创建app/services/session.server.ts。注意，请不要对Remixv1.1.3（截至目前，2022年2月）及之前的版本使用CookieSession，因为会出现UTF-8编码解析错误。创建登录页面、注册页面和回调创建app/routes/login.tsx：import{createLoginLoader}from'@authing/remix';import{appDomain,clientId,redirectUri}from'~/config.server';exportconstloader=createLoginLoader({appDomain,clientId,redirectUri,scope:'openidrolesusernamephoneprofile'});创建app/routes/logout.tsx：import{createLogoutLoader}from'@authing/remix';import{sessionStorage}from'~/services/session.server';import{appDomain,logoutRedirectUri}from'~/config.server';exportconstloader=createLogoutLoader({redirectUri:logoutRedirectUri,appDomain,sessionStorage});创建app/routes/authing/callback.tsx：从'@authing/remix'导入{createCallbackLoader};从'~/services/session.server'导入{sessionStorage};从'~/config.server'导入{appDomain，clientId，clientSecret};导出constloader=createCallbackLoader({appDomain,clientId,clientSecret,//登录失败返回登录页failureRedirect:'/error',successRedirect:'/user',sess离子存储});在路线中使用import{isAuthenticated}from'@authing/remix'；exportconstloader:LoaderFunction=async({request})=>{constuser=awaitisAuthenticated(request,sessionStorage);returnjson(user||{});};//在页面中使用constuser=useLoaderData();不幸的是，在当前版本（Remixv1.1.3）中，存在一个重大错误。Cookies不能存储UTF-8字符串，会导致登录信息不可读。本示例项目代码下载：CSDN对Remix全栈框架感兴趣的可以关注我的博客：https://willin.wang