在本教程中，您将学习如何……

• 使用Lokalise API令牌
• 上传翻译文件Lokalise API
• 下载Lokalise API翻译文件
• 实现OAuth 2流
• 客户项目列表
• 代表客户上传/下载翻译文件

先决条件

本指南假设您有一个Lokalise项目(如果没有，学习如何创建你的Lokalise项目在这里)．在本教程中，我们将上传英文翻译。因此，请确保您的项目在ISO代码中添加了英文。

如果你想在你的电脑上本地执行本指南，你需要安装以下软件:

• node . js(版本10或以上)
• Npm
• 代码编辑器

我们要建造什么

在本教程的第一部分，我们将创建一个简单的客户端应用程序，它将上传一个英语翻译文件到您的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": "演示应用描述"}

上传翻译文件到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项目下载翻译文件

现在让我们看看如何下载翻译文件。创建一个新的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 (
  
    
  
 
 
 Nextjs Lokalise 
 
 
)}

因此,我们使用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 
 
 // ADD THIS PART! 
 {!!projects.length && 
 Your recent Lokalise projects
} 
 {!!projects.length && projects.map(({name, project_id}) => (
{name}
))} 
 
 
 
 ) }

测试出来

现在你可以通过运行以下命令启动你的服务器:

npm运行开发

继续http://localhost:3000，登录Lokalise，确保你的项目显示:

就是这样，干得好!