Node, React和Next.js
本教程将向您展示如何使用Lokalise Node SDK向Lokalise项目上传/下载翻译文件,并设置OAuth 2流程。
在本教程中,您将学习如何……
- 使用Lokalise API令牌
- 上传翻译文件Lokalise API
- 下载Lokalise API翻译文件
- 实现OAuth 2流
- 客户项目列表
- 代表客户上传/下载翻译文件
先决条件
本指南假设您有一个Lokalise项目(如果没有,学习如何创建你的Lokalise项目在这里).在本教程中,我们将上传英文翻译。因此,请确保您的项目在ISO代码中添加了英文。
如果你想在你的电脑上本地执行本指南,你需要安装以下软件:
我们要建造什么
在本教程的第一部分,我们将创建一个简单的客户端应用程序,它将上传一个英语翻译文件到您的Lokalise项目,并再次下载回来。
在第二部分,我们将设置Next.js应用程序,实现OAuth 2流,并代表用户列出他们的项目。
使用API令牌
源代码
请找到源代码GitHub上.
创建一个项目
运行以下命令并提供您的项目名称,创建一个项目目录:
mkdir YOUR_APP_NAME
导航到新创建的文件夹,并通过运行以下命令初始化其中的Node项目:
cd YOUR_APP_NAME && npm init -y
安装依赖关系
安装@lokalise / node-api而且dotenv包,并将它们保存到您的包中。Json的依赖关系使用这个命令:
NPM安装@lokalise/node-api dotenv adm-zip(电子邮件保护)——保存
你的package.json
文件现在应该是这样的:
{" name ": " upload-i18n-files-node-api”、“版本”:“1.0.0”、“描述”:“”,“主要”:“index.js”、“脚本”:{“测试”:“echo \”的错误:没有指定测试\ " & &退出1 "},“关键词”:[],“作者”:“”,“许可”:“ISC”,“依赖性”:{“@lokalise / node-api”:“^ 7.2.0”、“adm-zip”:“^ 0.5.9”、“dotenv”:“^ 16.0.0”,“有”:“^”11.8.3}}
获取一个API令牌来使用Lokalise API
创建一个.env
文件,添加你的Lokalise API令牌。确保向Lokalise项目添加具有读写访问权的API令牌。学习如何获得Lokalise API令牌.
LOKALISE_API_TOKEN = < YOUR_LOKALISE_API_TOKEN >
永远不要公开暴露你的API密钥!
特别是,不要忘记添加
.env
文件.gitignore
.
创建一个名为upload.js
,并通过添加以下代码导入依赖项:
const {LokaliseApi} = require('@lokalise/node-api');要求(dotenv) . config ();
初始化客户端
添加以下代码upload.js
从环境变量中读取Lokalise API令牌并初始化Lokalise API客户端:
const {LOKALISE_API_TOKEN} = process.env;const lokaliseApi = new lokaliseApi ({apiKey: LOKALISE_API_TOKEN});
获取Lokalise项目ID
将此代码添加到upload.js
,替换< YOUR_PROJECT_ID >
用你的Lokalise项目ID了解如何获取Lokalise项目ID.
const lokaliseProjectId = '';
你的upload.js
文件应该如下所示:
const {LokaliseApi} = require('@lokalise/node-api');要求(dotenv) . config ();const {LOKALISE_API_TOKEN} = process.env;const lokaliseApi = new lokaliseApi ({apiKey: LOKALISE_API_TOKEN});const lokaliseProjectId = "123.abc";
创建一个翻译
在项目根目录上,添加一个en.json
归档,并添加这些键:
{"app.name": "演示应用","app.description": "演示应用描述"}
![en-i18n-file.png 1668](https://files.readme.io/181bf5e-en-i18n-file.png)
![Click to close... 1668](https://files.readme.io/181bf5e-en-i18n-file.png)
上传翻译文件到Lokalise项目
首先,您需要提供编码的翻译关键数据Base64.您可以使用节点缓冲区类来存储原始翻译数据并将其转换为Base64。
将以下代码添加到您的upload.js
文件将翻译密钥上传到Lokalise项目Lokalise Node API客户端.
const englishI18nFile = require('./translations/en.json');Const filename = 'en.json';Const lang_iso = 'en';(async function () {try {const data_base64 = Buffer.from(JSON.stringify(englishI18nFile)).toString("base64");process = await lokaliseApi.files()。上传(lokaliseProjectId, {data: data_base64, filename, lang_iso});Console.log('上传进程——>',process.status);} catch(错误){console.log('错误——>',错误);}}) ();
这段代码定义了翻译文件的路径、所需的文件名和语言ISO代码。它使用Node Buffer类将翻译关键数据作为Base64提供,以存储原始翻译数据并将其转换为Base64。async函数将触发向Lokalise项目上传翻译键。
你的upload.js
文件应该如下所示:
const {LokaliseApi} = require('@lokalise/node-api');require('dotenv').config() const {LOKALISE_API_TOKEN} = process.env;const lokaliseApi = new lokaliseApi ({apiKey: LOKALISE_API_TOKEN});const lokaliseProjectId = '874521126244044f0d1594.60069165';const englishI18nFile = require('./translations/en.json');Const filename = 'en.json';Const lang_iso = 'en';(async function () {try {const data_base64 = Buffer.from(JSON.stringify(englishI18nFile)).toString("base64");process = await lokaliseApi.files()。上传(lokaliseProjectId, {data: data_base64, filename, lang_iso}); console.log('upload process --->', process.status); } catch (error) { console.log('ERROR --->', error); } })();
回到命令行,运行这个命令来触发翻译文件的上传到Lokalise项目:
节点upload.js
如果上传成功,您应该能够在Lokalise项目中看到上传的翻译键。
![lokalise-project.jpeg 2304](https://files.readme.io/3cf48f2-lokalise-project.jpeg)
![Click to close... 2304](https://files.readme.io/3cf48f2-lokalise-project.jpeg)
从Lokalise项目下载翻译文件
现在让我们看看如何下载翻译文件。创建一个新的download.js
包含以下内容的文件:
const {LokaliseApi} = require("@lokalise/node-api");要求(“dotenv”). config ();const {LOKALISE_API_TOKEN, LOKALISE_PROJECT_ID} = process.env;const lokaliseApi = new lokaliseApi ({apiKey: LOKALISE_API_TOKEN});Const fs = require('fs');Const path = require('path');const AdmZip = require("adm-zip");Const got = require('got');async函数下载(translationsUrl, archive) {try {const response = await get .get(translationsUrl).buffer();fs。writeFileSync(archive, response); } catch (error) { console.log(error); } } (async function () { try { const i18nFolder = path.resolve(__dirname, 'translations') const downloadResponse = await lokaliseApi.files().download(LOKALISE_PROJECT_ID, { format: "json", original_filenames: true, directory_prefix: '', filter_langs: ['en'], indentation: '2sp', }) const translationsUrl = downloadResponse.bundle_url const archive = path.resolve(i18nFolder, 'archive.zip') await download(translationsUrl, archive) const zip = new AdmZip(archive) zip.extractAllTo(i18nFolder, true) fs.unlink(archive, (err) => { if (err) throw err }) } catch (error) { console.log("ERROR --->", error); } })();
您现有的翻译将被覆盖!
请注意,此实现将用新的翻译替换所有现有的翻译。如果不希望发生这种情况,可以下载并将存档解压缩到另一个文件夹中。
现在您可以在Lokalise中修改您的翻译,运行节点download.js
,并确保您的本地翻译已经更新了新版本。
不错的工作!
使用OAuth 2流
源代码
请找到源代码GitHub上.
建立项目
创建一个新的Next.js项目并添加必要的依赖项:
npx(电子邮件保护)NPM安装@lokalise/node-api cookie——save
创建一个翻译
在项目根目录上,添加一个en.json
归档,并添加这些键:
{"app.name": "演示应用","app.description": "演示应用描述"}
注册OAuth 2应用程序
请联系我们的技术支持,请他们为您注册一个OAuth 2应用程序(如果您还没有注册)。您将看到Lokalise客户端ID和客户端秘密,我们将在接下来的步骤中使用它们。
您可以将这些密钥存储在.env.local
文件和回调URL(我们将稍后编码):
xyz LOKALISE_APP_CALLBACK_URL abc LOKALISE_APP_CLIENT_SECRET LOKALISE_APP_CLIENT_ID = 123 = 345 = http://localhost: 3000 /回调
永远不要公开暴露你的OAuth 2客户端的秘密!
特别是,不要忘记添加
.env.local
文件.gitignore
.
实现OAuth 2流
打开页面/ index.js
将以下内容归档并放入其中:
import Head from 'next/ Head ' import {lokalisauth, LokaliseApiOAuth} from '@lokalise/节点-api' import {useRouter} from 'next/router' import cookie from "cookie" const {LOKALISE_APP_CLIENT_ID, LOKALISE_APP_CLIENT_SECRET, LOKALISE_APP_CALLBACK_URL} = process.env;导出异步函数getServerSideProps({query, req}) {const lokaliseAuth = new lokaliseAuth (LOKALISE_APP_CLIENT_ID, LOKALISE_APP_CLIENT_SECRET);const url = lokaliseAuth。身份验证([“read_projects”、“read_file”,“write_files”],LOKALISE_APP_CALLBACK_URL,“random123”);const apiToken = req.cookies['lokalise-api-token'];返回{props: {url, isAppAuthorized: !!apiToken || false, isUrlQueryAuthorized: !!}}导出默认函数Home({url, isAppAuthorized, isUrlQueryAuthorized}) {const router = useRouter();if (isUrlQueryAuthorized && (typeof window !== "undefined")){路由器。push('/', null, {shallow: false})} return ()}
因此,我们使用LokaliseAuth
准备一个特殊的登录链接,客户应该访问它来显式地授予我们的应用程序必要的权限(在本例中,我们请求三个权限:读项目、读文件、写文件)。
回调
现在让我们编写回调页面-这是用户通过Lokalise登录后将被重定向到的页面。因此,创建一个新的页面/ callback.js
文件,如下所示:
import {LokaliseAuth} from '@lokalise/node-api'导出异步函数getServerSideProps({query, req, res}) {const authtoken = query。代码| |”;Var cookies = cookie.parse(req.headers)饼干| |”);if (!cookies[' lokaliseAuth -api-token']) {const lokaliseAuth = new lokaliseAuth (process.env.LOKALISE_APP_CLIENT_ID process.env.LOKALISE_APP_CLIENT_SECRET);const {access_token} = await lokaliseAuth.token(authtoken);res.setHeader (set - cookie,饼干。serialize("lokalise-api-token", access_token, {httpOnly: true, maxAge: 60 * 60, sameSite: "strict", path: "/",});} res.writeHead(301,{位置:'/?授权= true "});res.end ();返回{props: {}}; } export default function Callback( ) { return ( {/* CALLBACK PAGE */} ) }
因此,我们实际上是在使用由Lokalise生成的秘密代码来请求OAuth 2令牌。一旦这个操作完成,我们只需将客户重定向到应用程序的主页。
注销
最后,如果客户已经登录,让我们显示一个“注销”链接。打开页面/ index.js
文件和调整的方式如下:
返回(//… {isAppAuthorized && !isUrlQueryAuthorized && Sign out } )
现在添加页面/ api / logout.js
文件:
导入cookie;export default (req, res) => {res. setheader ("Set-Cookie", cookie. req ")serialize("lokalise-api-token", "", {httpOnly: true, expires: new Date(0), sameSite: "strict", path: "/",}));res.redirect (200 ' / ');res.end ();};
路要走!
列出用户的项目
接下来,让我们使用OAuth 2令牌发送API请求并获取当前登录的用户的项目。要实现这一点,修改页面/ index.js
用以下方法:
import Head from 'next/ Head ' import {lokalisauth, LokaliseApiOAuth} from '@lokalise/节点-api' import {useRouter} from 'next/router' import cookie from "cookie" const {LOKALISE_APP_CLIENT_ID, LOKALISE_APP_CLIENT_SECRET, LOKALISE_APP_CALLBACK_URL} = process.env;导出异步函数getServerSideProps({query, req}) {const lokaliseAuth = new lokaliseAuth (LOKALISE_APP_CLIENT_ID, LOKALISE_APP_CLIENT_SECRET);const url = lokaliseAuth。身份验证([“read_projects”、“read_file”,“write_files”],LOKALISE_APP_CALLBACK_URL,“random123”);const apiToken = req.cookies['lokalise-api-token'];// ----添加此部分!---- let projects = null;if (apiToken) {const lokaliseApi = new LokaliseApiOAuth({apiKey: apiToken});projects = await lokaliseApi.projects().list();} // --------------------------- 返回{道具:{url, isAppAuthorized: ! !apiToken || false, isUrlQueryAuthorized: !!授权||假,项目:(项目? JSON.parse(JSON.stringify(projects.items)) : []) // <---- ADD THIS } } } export default function Home({ url, isAppAuthorized, isUrlQueryAuthorized, projects }) { // <--- TWEAK THIS LINE const router = useRouter(); if (isUrlQueryAuthorized && (typeof window !== "undefined")) { router.push('/', null, { shallow: false }) } return ( Nextjs Lokalise Oauth2 flow demo
Nextjs Lokalise Oauth2 flow demo
// ADD THIS PART! {!!projects.length && Your recent Lokalise projects
} {!!projects.length && projects.map(({name, project_id}) => (- {name}
))}
) }
测试出来
现在你可以通过运行以下命令启动你的服务器:
npm运行开发
继续http://localhost:3000
,登录Lokalise,确保你的项目显示:
![2022-05-03 16_32_32-Nextjs Lokalise Oauth2 flow demo — Mozilla Firefox.png 1254](https://files.readme.io/07a7fee-2022-05-03_16_32_32-Nextjs_Lokalise_Oauth2_flow_demo__Mozilla_Firefox.png)
![Click to close... 1254](https://files.readme.io/07a7fee-2022-05-03_16_32_32-Nextjs_Lokalise_Oauth2_flow_demo__Mozilla_Firefox.png)
就是这样,干得好!
更新 3个月前