Next.js 集成 Auth0 登入和自定义登入页面

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_SECRET='4d98dac96fb455a6003547a9ffb1e56239598789a5ed7eb1ec34d0834d00c71e'# The base URL of your application
AUTH0_BASE_URL='http://localhost:3000'
# The URL of your Auth0 Application Domain (https://)
AUTH0_ISSUER_BASE_URL='https://dev-jkr****flrex.us.auth0.com'
# Your Auth0 application's Client ID
AUTH0_CLIENT_ID='pvYBK9T514********CEMaql12GhY'
#Your Auth0 application's Client Secret.
AUTH0_CLIENT_SECRET='gc2vtfBKqRKqWYdsZbteS1zXU1m7d_IJeEJs9E1cm7SUZgfbJeJNVZ6UMgunXqk0'

AUTH0_SECRET 是一个自定义密钥，理论上可以随意填写，但不建议，你可以通过终端使用下面命令生成一个32位的随机字符串，并拷贝到 .env.local 文件中

node -e "console.log(crypto.randomBytes(32).toString('hex'))"

AUTH0_BASE_URL 你开发的项目地址，Next.js 本地运行环境为3000端口，所以这里设置为 http://localhost:3000
AUTH0_ISSUER_BASE_URL 对应在 auth0 创建的应用程序配置中的 Domain，参考下图, 注意在env文件配置时，开头需要加上 https://
AUTH0_CLIENT_ID 见下图，对应 Client ID
AUTH0_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>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Login - MontCache</title><link rel="icon" href="https://www.montplex.com/favicon.ico" type="image/x-icon"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
</head><style>  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>
<body><div class="montcache-login-page"><div><div class="montcache-login-page-logo"><div style="display: flex; align-items: center;gap: 8px;"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><defs><linearGradient id="logosNextjsIcon0" x1="55.633%" x2="83.228%" y1="56.385%" y2="96.08%"><stop offset="0%" stop-color="#FFF"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient><linearGradient id="logosNextjsIcon1" x1="50%" x2="49.953%" y1="0%" y2="73.438%"><stop offset="0%" stop-color="#FFF"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient><circle id="logosNextjsIcon2" cx="128" cy="128" r="128"/></defs><mask id="logosNextjsIcon3" fill="#fff"><use href="#logosNextjsIcon2"/></mask><g mask="url(#logosNextjsIcon3)"><circle cx="128" cy="128" r="128"/><path fill="url(#logosNextjsIcon0)" d="M212.634 224.028L98.335 76.8H76.8v102.357h17.228V98.68L199.11 234.446a128.433 128.433 0 0 0 13.524-10.418"/><path fill="url(#logosNextjsIcon1)" d="M163.556 76.8h17.067v102.4h-17.067z"/></g></svg><h3 style="font-size: 22px;">Next.js Auth0</h3></div></div><div id="montcache-login-container"></div><div class="montcache-login-page-privacy"><p style="color: rgb(63, 63, 70);">By clicking Log In, you agree to our<ahref="/trust/terms.pdf"target="_blank"children="Terms of Service">Terms of Service</a>and <ahref="/trust/privacy.pdf"target="_blank">Privacy Policy</a>.</p><div class="alert"><div style="color: rgba(124,45,18,.8);flex: 1;font-wight: 300;">We have recently made updates to our Terms of Service.<br>Please 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 src="https://cdn.auth0.com/js/base64.js"></script><script src="https://cdn.auth0.com/js/es5-shim.min.js"></script><![endif]--><script src="https://cdn.auth0.com/js/lock/12.4/lock.min.js"></script><script>// 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>