制作企业网站是怎么收费的,网站建设品牌,郑州网站建设新闻,广东省 网站制作Next.js 集成 Auth0 和自定义登入页面 注册账号和基本配置进入 auth0 官网注册账号并登入进入控制台后访问 Applications/Applications进入程序配置页面添加配置 在 Next.js 使用在项目中集成 通过 Auth0Lock 配置方式自定义登入页面效果展示实现过程 注册账号和基本配置
进入… Next.js 集成 Auth0 和自定义登入页面 注册账号和基本配置进入 auth0 官网注册账号并登入进入控制台后访问 Applications/Applications进入程序配置页面添加配置 在 Next.js 使用在项目中集成 通过 Auth0Lock 配置方式自定义登入页面效果展示实现过程 注册账号和基本配置
进入 auth0 官网注册账号并登入
Auth0: Secure access for everyone. But not just anyone.
进入控制台后访问 Applications/Applications 进入程序配置页面添加配置
创建完成后会跳转到应用配置界面如果不小心关闭可以在 Applications 找到对应的程序并进入 跳转后的程序配置页面 下滑找到 **Application URIs **配置项
设置 Allowed Callback URLs 为 http://localhost:3000/api/auth/callback设置 Allowed Logout URLs 为 http://localhost:3000/ 在 Next.js 使用
打开 Next.js 项目安装 auth0 依赖
npm install auth0/nextjs-auth0新建 .env.local 文件并添加环境变量auth0 会自定验证你配置的 env 文件
# A long secret value used to encrypt the session cookie.
# node -e console.log(crypto.randomBytes(32).toString(hex))
AUTH0_SECRET4d98dac96fb455a6003547a9ffb1e56239598789a5ed7eb1ec34d0834d00c71e# The base URL of your application
AUTH0_BASE_URLhttp://localhost:3000
# The URL of your Auth0 Application Domain (https://)
AUTH0_ISSUER_BASE_URLhttps://dev-jkr****flrex.us.auth0.com
# Your Auth0 applications Client ID
AUTH0_CLIENT_IDpvYBK9T514********CEMaql12GhY
#Your Auth0 applications Client Secret.
AUTH0_CLIENT_SECRETgc2vtfBKqRKqWYdsZbteS1zXU1m7d_IJeEJs9E1cm7SUZgfbJeJNVZ6UMgunXqk0
AUTH0_SECRET 是一个自定义密钥理论上可以随意填写但不建议你可以通过终端使用下面命令生成一个32位的随机字符串并拷贝到 .env.local 文件中
node -e console.log(crypto.randomBytes(32).toString(hex))AUTH0_BASE_URL 你开发的项目地址Next.js 本地运行环境为3000端口 所以这里设置为 http://localhost:3000AUTH0_ISSUER_BASE_URL 对应在 auth0 创建的应用程序配置中的 Domain参考下图, 注意在env文件配置时开头需要加上 https://AUTH0_CLIENT_ID 见下图对应 Client IDAUTH0_CLIENT_SECRET 见下图对应 Client Secret 在项目中集成
Next.js 提供了详细文档和示例文件帮助你快速集成 auth0你可以下载示例文件配置env 文件后快速体验
Auth0 Next.js SDK Quickstarts: Add Login to your Next.js application 根据提示配置
其它参考链接
Auth0 React SDK Quickstarts: Add Login to your React App
通过 Auth0Lock 配置方式自定义登入页面
效果展示 实现过程
登入 auth0 控制台后进入 Branding/Universal Login 页面下滑页面后找到 Advanced Options 选项点击进入 进入后默认会跳转到 Settings 选项页不要看 也别点击任何操作这个页面完全就是混淆你的理解且提供的两个模板都又丑又难改配置设置个 logo 各种不符合要求想设置个样式直接把你恶心死 切换到 Login 选项页面
然后我们愉快的写 HTML 文件就好了终于——舒服了。
!DOCTYPE html
html
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedge,chrome1titleLogin - MontCache/titlelink relicon hrefhttps://www.montplex.com/favicon.ico typeimage/x-iconmeta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalable0 /
/headstyle body{margin: 0;padding: 0;}.auth0-lock.auth0-lock {font: inherit!important}.auth0-lock.auth0-lock .auth0-lock-center {font: inherit!important;padding: 0!important}.auth0-lock.auth0-lock .auth0-lock-header,.auth0-lock.auth0-lock .auth0-lock-terms {display: none!important}.auth0-lock.auth0-lock .auth0-lock-submit {padding: 2px!important;background: #111!important}.auth0-lock.auth0-lock .auth0-lock-submit .auth0-label-submit {display: inline-flex!important;align-items: center!important}.auth0-lock.auth0-lock .auth0-lock-submit span svg.icon-text {margin: 0 0 0 8px!important}.montcache-login-page {background-color: rgb(244 244 245);display: grid;min-height: 100vh;place-items: center;/*padding: 32px;*/}.montcache-login-page-logo {margin-bottom: 20px;display: flex;align-items: center;justify-content: center;}.montcache-login-page-privacy{margin-top: 24px;max-width: 640px;text-align: center;font-size: 14px;}.montcache-login-page-privacy p{color: rgb(63, 63, 70);}.montcache-login-page-privacy a{text-decoration-line: underline;color: rgb(63, 63, 70);}.montcache-login-page-privacy .alert{background-color: #fffbe6;border: 1px solid #ffe58f;margin-top:16px;box-sizing: border-box;padding: 8px 12px;font-size: 14px;line-height: 1.57;list-style: none;position: relative;display: flex;align-items: center;word-wrap: break-word;border-radius: 8px;}/style
bodydiv classmontcache-login-pagedivdiv classmontcache-login-page-logodiv styledisplay: flex; align-items: center;gap: 8px;svg xmlnshttp://www.w3.org/2000/svg width32 height32 viewBox0 0 256 256defslinearGradient idlogosNextjsIcon0 x155.633% x283.228% y156.385% y296.08%stop offset0% stop-color#FFF/stop offset100% stop-color#FFF stop-opacity0//linearGradientlinearGradient idlogosNextjsIcon1 x150% x249.953% y10% y273.438%stop offset0% stop-color#FFF/stop offset100% stop-color#FFF stop-opacity0//linearGradientcircle idlogosNextjsIcon2 cx128 cy128 r128//defsmask idlogosNextjsIcon3 fill#fffuse href#logosNextjsIcon2//maskg maskurl(#logosNextjsIcon3)circle cx128 cy128 r128/path fillurl(#logosNextjsIcon0) dM212.634 224.028L98.335 76.8H76.8v102.357h17.228V98.68L199.11 234.446a128.433 128.433 0 0 0 13.524-10.418/path fillurl(#logosNextjsIcon1) dM163.556 76.8h17.067v102.4h-17.067z//g/svgh3 stylefont-size: 22px;Next.js Auth0/h3/div/divdiv idmontcache-login-container/divdiv classmontcache-login-page-privacyp stylecolor: rgb(63, 63, 70);By clicking Log In, you agree to ourahref/trust/terms.pdftarget_blankchildrenTerms of ServiceTerms of Service/aand ahref/trust/privacy.pdftarget_blankPrivacy Policy/a./pdiv classalertdiv stylecolor: rgba(124,45,18,.8);flex: 1;font-wight: 300;We have recently made updates to our Terms of Service.brPlease take a moment to review the changes that have been implemented./div/div/div/div/div!--[if IE 8]script src//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js/script![endif]--!--[if lte IE 9]script srchttps://cdn.auth0.com/js/base64.js/scriptscript srchttps://cdn.auth0.com/js/es5-shim.min.js/script![endif]--script srchttps://cdn.auth0.com/js/lock/12.4/lock.min.js/scriptscript// Decode utf8 characters properlyvar config JSON.parse(decodeURIComponent(escape(window.atob(config))));config.extraParams config.extraParams || {};var connection config.connection;var prompt config.prompt;var languageDictionary;var language;if (config.dict config.dict.signin config.dict.signin.title) {languageDictionary { title: config.dict.signin.title };} else if (typeof config.dict string) {language config.dict;}var loginHint config.extraParams.login_hint;var colors config.colors || {};// Available Lock configuration options: https://auth0.com/docs/libraries/lock/lock-configurationvar lock new Auth0Lock(config.clientID, config.auth0Domain, {auth: {redirectUrl: config.callbackURL,responseType: (config.internalOptions || {}).response_type ||(config.callbackOnLocationHash ? token : code),params: config.internalOptions},// 关闭输入账号密码后自动获取用户头像功能avatar: null,configurationBaseUrl: config.clientConfigurationBaseUrl,overrides: {__tenant: config.auth0Tenant,__token_issuer: config.authorizationServer.issuer},assetsUrl: config.assetsUrl,container: montcache-login-container,allowedConnections: connection ? [connection] : null,rememberLastLogin: !prompt,language: language,languageBaseUrl: config.languageBaseUrl,languageDictionary: languageDictionary,theme: {primaryColor: #000},prefill: loginHint ? { email: loginHint, username: loginHint } : null,closable: false,defaultADUsernameFromEmailPrefix: false});lock.show()/script
/body
/html配置参考
https://auth0.com/docs/libraries/lock/lock-configuration
